/* Site mère shader.be : même ambiance que les jeux (couchant mauve, accents cyan et magenta). */
@font-face { font-family: "Bungee"; src: url("/assets/Bungee.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/Barlow-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/Barlow-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
:root { --nuit: #1a1024; --texte: #f6eef6; --doux: #d6c8da; --cyan: #46e6f2; --magenta: #ff3fb4; --violet: #8a4dff;
  --vert: #3dffa2; --verre: rgba(34, 19, 46, .8); --bord: rgba(246, 238, 246, .16); }
* { box-sizing: border-box; }
html { overflow-x: clip; }
body { margin: 0; color: var(--texte); font: 400 18px/1.55 "Barlow", system-ui, sans-serif; min-height: 100vh; overflow-x: clip;
  background: linear-gradient(180deg, #c97a9e 0%, #6b3f78 25%, #2f1c42 55%, #1a1024 85%) fixed; background-color: var(--nuit); }
a { color: var(--cyan); }
h1, h2, h3 { font-family: "Bungee", sans-serif; font-weight: 400; line-height: 1.15; margin: 0 0 .4em; }
h1 { margin: 0 0 .3em; line-height: 0; }
/* Logo (wordmark dégradé magenta → cyan) : contour sombre fin et halo pour rester lisible sur le couchant rose comme sur la nuit. */
.logo { width: min(500px, 78vw); height: auto;
  filter: drop-shadow(0 0 1.5px rgba(26, 16, 36, .9)) drop-shadow(0 6px 22px rgba(26, 16, 36, .55)) drop-shadow(0 0 28px rgba(255, 255, 255, .18)); }
h2 { font-size: clamp(1.3rem, 3.4vw, 1.8rem); margin-top: 1.6em; }
h3 { font-size: 1.15rem; }

/* Orbes lumineux en arrière-plan (décor) : visibles sans JS, Motion les fait dériver. */
.orbes { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.orbe { position: absolute; border-radius: 50%; opacity: .55; will-change: transform; }
.o1 { width: 60vmax; height: 60vmax; left: -22vmax; top: -18vmax; background: radial-gradient(circle, rgba(255, 63, 180, .7), rgba(255, 63, 180, 0) 65%); }
.o2 { width: 52vmax; height: 52vmax; right: -20vmax; top: 18vh; background: radial-gradient(circle, rgba(70, 230, 242, .5), rgba(70, 230, 242, 0) 65%); }
.o3 { width: 56vmax; height: 56vmax; left: 10vw; bottom: -30vmax; background: radial-gradient(circle, rgba(138, 77, 255, .65), rgba(138, 77, 255, 0) 65%); }

nav { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center;
  padding: 10px 20px; background: rgba(26, 16, 36, .8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--bord); }
.marque { display: flex; align-items: center; min-height: 44px; }
.marque img { display: block; height: 34px; width: auto; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .18)); }

/* Sélecteur de langue FR | EN : segment courant plein, l'autre est un lien. */
.langues { display: flex; padding: 3px; border: 1px solid var(--bord); border-radius: 999px; background: rgba(0, 0, 0, .25); font-weight: 600; }
.langues > * { min-width: 48px; min-height: 40px; display: grid; place-items: center; padding: 0 12px; border-radius: 999px; text-decoration: none; letter-spacing: .06em; }
.langues .actif { background: var(--cyan); color: var(--nuit); }
.langues a { color: var(--texte); }
.langues a:hover { background: rgba(246, 238, 246, .12); }
.langues a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

main { max-width: 1080px; margin: 0 auto; padding: 40px 20px 56px; }
/* Sur le haut rose du dégradé (≈ #b15f94, contraste 3,75:1) : semi-gras à 1,3rem = « grand texte » AA (seuil 3:1), plus une ombre douce. */
.accroche { font-size: 1.3rem; font-weight: 600; max-width: 640px; margin: 0; text-shadow: 0 1px 14px rgba(26, 16, 36, .55); }

.grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
/* Carte entière cliquable : le lien du titre est étiré sur toute la carte ; le badge passe au-dessus. */
.appli { position: relative; display: flex; gap: 18px; align-items: flex-start; background: var(--verre);
  border: 1px solid rgba(70, 230, 242, .35); border-radius: 20px; padding: 18px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  transition: box-shadow .3s ease, border-color .3s ease; }
.appli:hover, .appli:focus-within { border-color: rgba(61, 255, 162, .75);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3), 0 22px 46px -10px rgba(61, 255, 162, .6), 0 0 26px rgba(61, 255, 162, .28); }
/* Sans Motion (pas de JS, CDN injoignable) : simple élévation en CSS. Avec Motion, c'est lui qui gère la transformation. */
.motion .appli { opacity: 0; }
.icone { width: 96px; height: 96px; border-radius: 22px; flex: 0 0 auto; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.corps { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.corps p { margin: 0 0 14px; }
.etire { color: var(--texte); text-decoration: none; }
.etire::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.appli:hover .etire { color: var(--vert); }
.etire:focus-visible { outline: none; }
.etire:focus-visible::after { outline: 3px solid var(--cyan); outline-offset: 3px; }
.badge { position: relative; z-index: 2; display: inline-block; line-height: 0; border-radius: 8px; transition: transform .2s ease; }
.badge img { height: 40px; width: auto; }
.badge:hover { transform: scale(1.05); }
.badge:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.pastille { display: inline-block; padding: 6px 12px; border-radius: 999px; font-size: .85rem; font-weight: 600;
  color: var(--cyan); border: 1px solid currentColor; }

.note { color: var(--doux); margin-top: 2.2em; }
/* Pied de page discret, toujours visible en bas de l'écran (Antoine, 31/10) ; le corps garde de la place dessous. */
footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; text-align: center; color: var(--doux);
  font-size: .78rem; padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--bord);
  background: rgba(18, 10, 30, .7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
footer p { margin: 0; }
footer a { color: var(--doux); text-decoration: underline; text-underline-offset: 2px; }
footer a:hover { color: var(--texte); }
body { padding-bottom: 40px; }
@media (max-width: 760px) { .grille { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .icone { width: 72px; height: 72px; border-radius: 16px; } .appli { gap: 14px; padding: 16px; }
  main { padding: 26px 16px 44px; } nav { padding: 8px 16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; }
  .badge:hover { transform: none; } }