/* =========================================================
   L'accueil d'Abyss
   =========================================================
   Le poste de pilotage du bathyscaphe (le dessin commun est dans
   static/abyss/abyss.css). Les projets sont rangés par catégorie, chacune
   dans un sas : un compartiment éclairé de l'intérieur à sa couleur
   (--cat, voir CATEGORIES dans la page), son nom sur une étiquette pleine,
   ses équerres aux coins. Chaque projet y est un module : une petite
   vignette, son nom à côté, sa phrase dessous. En tête, le radar -- un
   quartier par catégorie, un écho par projet -- et l'heure.

   Les sas se partagent les rangées : une grille de trois colonnes où chacun
   prend autant de places qu'il a de projets (trois au plus, la largeur
   entière au-delà). Deux petites catégories tiennent côte à côte. */


.rayon-nom,.projet-nom,.projet-texte{margin:0}
.hub > .vide{grid-column:1 / -1}
/* un nom ne se coupe qu'entre ses mots (voir mots() dans la page) */
.mot{white-space:nowrap}

/* Les équerres de l'en-tête, des sas et des modules : la même règle que
   les panneaux de abyss.css, en un peu plus grand, chacun à sa couleur
   par --equerre. */
.entete::before,.rayon::before,.projet::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:1;
  pointer-events:none;
  --e:var(--equerre,var(--ui));
  background:
    linear-gradient(var(--e),var(--e)) top left / 14px 2px no-repeat,
    linear-gradient(var(--e),var(--e)) top left / 2px 14px no-repeat,
    linear-gradient(var(--e),var(--e)) top right / 14px 2px no-repeat,
    linear-gradient(var(--e),var(--e)) top right / 2px 14px no-repeat,
    linear-gradient(var(--e),var(--e)) bottom left / 14px 2px no-repeat,
    linear-gradient(var(--e),var(--e)) bottom left / 2px 14px no-repeat,
    linear-gradient(var(--e),var(--e)) bottom right / 14px 2px no-repeat,
    linear-gradient(var(--e),var(--e)) bottom right / 2px 14px no-repeat;
}

/* ---------- En-tête : le tableau de bord ---------- */
.entete{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:14px 34px;
  padding:18px 24px;
  margin-bottom:20px;
  border:1px solid var(--ui-trait);
  border-image:none;
  background:var(--panneau);
}
.titre-ligne{display:flex;align-items:center;gap:16px}
/* La méduse flotte doucement, comme il se doit -- et ne bouge plus quand on
   a demandé moins d'animations (voir plus bas). */
.logo{
  flex:none;
  width:clamp(46px,6vw,62px);
  height:auto;
  filter:drop-shadow(0 0 18px rgba(124,108,255,.4));
  animation:flotte 7s ease-in-out infinite;
}
.titre{
  margin:0;
  text-transform:uppercase;
  color:transparent;
  font-family:var(--mono);
  font-weight:600;
  font-size:clamp(28px,5vw,46px);
  line-height:1.1;
  letter-spacing:.34em;
  background:var(--lueurs);
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 0 14px rgba(160,140,255,.4));
}
.sous-titre{grid-column:1;margin:0;max-width:none;font-size:13.5px;color:var(--ui-dim)}
.sous-titre::before{content:"> "}
.sous-titre::after{content:"_";animation:sas-curseur 1.1s steps(1) infinite}
.entete-infos{grid-column:2;grid-row:1 / 3;display:flex;align-items:center;gap:24px}

/* ---------- Le radar ---------- */
.radar{
  --radar-trait:rgba(190,220,236,.2);
  position:relative;
  flex:none;
  width:104px;
  height:104px;
  overflow:hidden;
  border-radius:50%;
  border:1px solid rgba(190,220,236,.38);
  background:
    radial-gradient(circle, transparent 0 32%, var(--radar-trait) 32.5% 33.3%, transparent 34% 65.5%,
                    var(--radar-trait) 66% 66.8%, transparent 67.5%),
    rgba(6,14,24,.85);
  box-shadow:inset 0 0 26px rgba(160,200,230,.1), 0 0 26px -8px rgba(160,140,255,.45);
}
/* les rayons qui séparent les quartiers des catégories */
.radar b{
  position:absolute;
  left:50%;
  top:0;
  width:1px;
  height:50%;
  background:var(--radar-trait);
  transform-origin:50% 100%;
  transform:rotate(var(--a));
}
/* le balayage : le bord brillant mène, la traîne s'éteint derrière */
.radar-balayage{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 280deg,
    rgba(200,225,245,.04) 280deg, rgba(200,225,245,.36) 360deg);
  animation:radar-balaye 4s linear infinite;
}
/* un écho par projet, qui s'allume au passage du balayage : même tour de
   4 s, d'où le délai tiré de l'angle (négatif, pour être en phase dès
   le départ) */
.radar i{
  position:absolute;
  left:50%;
  top:50%;
  width:6px;
  height:6px;
  margin:-3px;
  border-radius:50%;
  background:var(--cat);
  box-shadow:0 0 8px var(--cat);
  transform:rotate(var(--a)) translateY(calc(var(--r) * -1));
  animation:radar-echo 4s linear infinite;
  animation-delay:calc(var(--d) - 4s);
}
/* l'heure, seule à côté du radar : en grand, comme un cadran */
.releves{margin:0}
.releves div{display:flex;flex-direction:column;gap:2px}
.releves dt{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ui-dim)}
.releves dd{
  margin:0;
  font-size:30px;
  font-weight:500;
  letter-spacing:.06em;
  line-height:1;
  color:var(--ui);
  text-shadow:0 0 16px rgba(160,200,240,.35);
}

/* ---------- Un sas : une catégorie ---------- */
.hub{display:flex;flex-direction:column;gap:18px}
.rayon{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:0 14px 14px;
  --equerre:var(--cat);
  border:1px solid color-mix(in srgb,var(--cat) 42%,transparent);
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb,var(--cat) 16%,transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb,var(--cat) 7%,#03070B), rgba(3,7,11,.82));
  box-shadow:
    0 0 26px -6px color-mix(in srgb,var(--cat) 55%,transparent),
    inset 0 0 34px -14px color-mix(in srgb,var(--cat) 70%,transparent);
}
/* le bandeau du sas : son nom sur une étiquette pleine, puis un trait */
.rayon-tete{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 -14px 12px;
  padding:8px 14px;
  background:color-mix(in srgb,var(--cat) 12%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--cat) 38%,transparent);
}
.rayon-nom{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--fond);
  background:var(--cat);
  box-shadow:0 0 16px color-mix(in srgb,var(--cat) 70%,transparent);
}
.rayon-trait{
  display:block;
  flex:1;
  min-width:12px;
  height:1px;
  background:repeating-linear-gradient(90deg, color-mix(in srgb,var(--cat) 45%,transparent) 0 6px, transparent 6px 11px);
}
.rayon-projets{
  flex:1;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));
  gap:12px;
}

/* ---------- Un projet : un module à vignette ----------
   L'image en haut à gauche, le nom à côté, la phrase sur toute la
   largeur dessous. */
.projet{
  position:relative;
  display:grid;
  grid-template-columns:116px 1fr;
  grid-template-areas:"vis nom" "texte texte";
  grid-template-rows:auto 1fr;
  align-items:center;
  gap:10px 14px;
  padding:12px 14px 13px;
  overflow:hidden;
  color:inherit;
  text-decoration:none;
  --equerre:color-mix(in srgb,var(--cat) 55%,transparent);
  background:linear-gradient(180deg, color-mix(in srgb,var(--cat) 6%,rgba(4,10,16,.9)), rgba(3,7,11,.92));
  border:1px solid color-mix(in srgb,var(--cat) 24%,transparent);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.projet:hover,.projet:focus-visible{
  --equerre:var(--cat);
  border-color:color-mix(in srgb,var(--cat) 60%,transparent);
  box-shadow:0 0 30px -8px color-mix(in srgb,var(--cat) 70%,transparent);
}
.projet:focus-visible{outline:1px dashed var(--cat);outline-offset:4px}
/* la ligne de balayage qui descend le module au survol */
.projet::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:45%;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--cat) 14%,transparent),transparent);
  transform:translateY(-100%);
}
.projet:hover::after{animation:sas-scan 1.6s linear infinite}

/* ---------- la vignette ----------
   Les images de VISUELS dans la page : jaquettes, cartes en éventail,
   artwork, affiche. Elles s'adaptent à leur nombre -- les jeux et les
   cartes favorites de chacun sont un, deux ou trois. */
.projet-visuel{
  grid-area:vis;
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:4 / 3;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--cat) 45%,transparent);
  background:
    radial-gradient(90% 90% at 50% 100%, color-mix(in srgb,var(--cat) 28%,transparent), transparent 75%),
    #03070B;
  box-shadow:0 0 16px -6px color-mix(in srgb,var(--cat) 70%,transparent);
}
.projet-visuel img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.8,.3,1),filter .5s ease;
}
.projet:hover .projet-visuel > img{transform:scale(1.07)}

/* des jaquettes côte à côte, trois au plus */
.projet-visuel.mosaique{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:1px}
.projet-visuel.mosaique img:nth-child(n+4){display:none}
/* floues : les mini-jeux, c'est justement de deviner ce qu'il y a dessous */
.projet-visuel.floue img{filter:blur(3.5px) saturate(1.25);transform:scale(1.15)}
.projet:hover .projet-visuel.floue img{filter:blur(.8px) saturate(1.15);transform:scale(1.2)}

/* des cartes tenues en éventail ; elles s'ouvrent au survol */
.projet-visuel.eventail{display:flex;justify-content:center;align-items:flex-start;padding-top:12%}
.projet-visuel.eventail img{
  width:32%;
  height:auto;
  aspect-ratio:813 / 1185;
  margin:0 -5%;
  border-radius:2px;
  box-shadow:0 4px 12px rgba(0,0,0,.6);
}
.projet-visuel.eventail img:nth-child(1){transform:rotate(-13deg) translateY(6px)}
.projet-visuel.eventail img:nth-child(2){position:relative;z-index:1}
.projet-visuel.eventail img:nth-child(3){transform:rotate(13deg) translateY(6px)}
.projet:hover .projet-visuel.eventail img:nth-child(1){transform:rotate(-19deg) translate(-5px,8px)}
.projet:hover .projet-visuel.eventail img:nth-child(3){transform:rotate(19deg) translate(5px,8px)}
/* une seule carte se tient droite ; deux s'écartent en V */
.projet-visuel.eventail img:only-child,
.projet:hover .projet-visuel.eventail img:only-child{transform:none;margin:0}
.projet-visuel.eventail img:nth-child(2):last-child{transform:rotate(10deg) translateY(4px)}
.projet:hover .projet-visuel.eventail img:nth-child(2):last-child{transform:rotate(15deg) translate(4px,6px)}

/* l'affiche de Nihongo : le japonais à l'encre de sa catégorie, et le
   drapeau en coin */
.projet-visuel.affiche{display:grid;place-items:center;padding-top:10%}
.visuel-texte{
  font-family:"Shippori Mincho B1",serif;
  font-weight:700;
  font-size:25px;
  letter-spacing:.06em;
  color:color-mix(in srgb,var(--cat) 55%,white);
  text-shadow:0 0 16px var(--cat);
}
.visuel-drapeau{
  position:absolute;
  top:7px;
  left:7px;
  width:30px;
  height:20px;
  border-radius:2px;
  background:radial-gradient(circle at 50% 50%, #E0213C 0 27%, transparent 28%), #F7F8FA;
  box-shadow:0 2px 8px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.25);
  transition:transform .4s cubic-bezier(.2,.8,.3,1);
}
.projet:hover .visuel-drapeau{transform:rotate(-6deg) scale(1.08)}

.projet-corps{display:contents}
.projet-nom{
  grid-area:nom;
  padding-right:22px;      /* la place de la flèche */
  font-size:14px;
  font-weight:600;
  letter-spacing:.06em;
  line-height:1.35;
  text-transform:uppercase;
  color:var(--ui);
}
.projet-texte{grid-area:texte;align-self:start;font-size:12.5px;line-height:1.6;color:rgba(201,220,232,.68)}
/* la flèche, en coin : elle s'allume à la couleur du sas au survol */
.projet-action{
  position:absolute;
  top:12px;
  right:12px;
  font-size:14px;
  color:color-mix(in srgb,var(--cat) 55%,var(--ui-dim));
  transition:color .2s ease,transform .2s ease;
}
.projet:hover .projet-action,.projet:focus-visible .projet-action{color:var(--cat);transform:translate(2px,-2px)}

@media (min-width:900px){
  .hub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 18px}
  .rayon[data-n="2"]{grid-column:span 2}
  .rayon[data-n="3"]{grid-column:1 / -1}
  .rayon-projets{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}
}
@media (max-width:700px){
  .entete{grid-template-columns:1fr;padding:18px}
  .entete-infos{grid-column:1;grid-row:auto;gap:20px}
  .radar{width:90px;height:90px}
  .titre{letter-spacing:.26em}
  .projet{grid-template-columns:104px 1fr}
}
@media (prefers-reduced-motion:reduce){
  .logo,.sous-titre::after,.projet:hover::after,.radar-balayage,.radar i{animation:none}
  .projet:hover .projet-visuel > img{transform:none}
}

@keyframes flotte{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
@keyframes sas-curseur{50%{opacity:0}}
@keyframes sas-scan{to{transform:translateY(240%)}}
@keyframes radar-balaye{to{transform:rotate(360deg)}}
@keyframes radar-echo{
  0%{opacity:1;filter:brightness(1.7)}
  70%,100%{opacity:.2;filter:none}
}