/* =============================================================================
   VALKYRIA — ce qui n'existe que sur la page d'accueil.
   Le reste (barre, pied, modules, boutons) vient de valkyria.css.
   ========================================================================== */

/* Au-dessus du heros la barre doit laisser voir l'image : elle ne prend son
   fond qu'une fois qu'on a defile, via la classe .pose posee par le script. */
body.avec-heros .topbar:not(.pose){
  background:linear-gradient(180deg,rgba(6,8,11,.55),transparent);
  border-bottom-color:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}

/* =========================================================================
   HEROS
   ========================================================================= */
.heros{
  position:relative;isolation:isolate;overflow:hidden;
  /* La barre est collante : sans la soustraire, le premier ecran depasse
     toujours de sa hauteur et le bas du heros tombe sous la ligne de flottaison. */
  min-height:min(calc(100svh - var(--barre)),840px);
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(46px,7vh,86px) clamp(30px,5vh,56px);
  text-align:center;
}
.heros-fond{position:absolute;inset:0;z-index:-2}
.heros-fond img{width:100%;height:100%;object-fit:cover;object-position:center 56%}
/* Deux voiles : un assombrissement general pour que le texte tienne partout, et
   un fondu vers le noir de la page en bas, pour qu'aucune ligne ne separe le
   heros de la suite. */
.heros::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(78% 60% at 50% 42%,rgba(6,8,11,.28),rgba(6,8,11,.72) 78%),
    linear-gradient(180deg,rgba(6,8,11,.62) 0%,rgba(6,8,11,.25) 28%,rgba(11,13,18,.86) 82%,var(--nuit) 100%);
}

.heros-in{display:flex;flex-direction:column;align-items:center}

/* --- le logo qui levite --- */
.heros-logo{
  width:clamp(244px,39vw,540px);height:auto;
  animation:leviter 5s ease-in-out infinite alternate;
  filter:drop-shadow(0 26px 42px rgba(0,0,0,.62));
}
/* Une course courte et un aller-retour rapide : c'est le rythme qui fait lire
   la flottaison, pas la hauteur. Monter plus haut donnait un logo qui decolle.
   L'ombre portee suit la montee, sinon le logo s'eleve sans jamais paraitre
   s'eloigner du sol. */
@keyframes leviter{
  from{transform:translateY(7px)  scale(.995);
       filter:drop-shadow(0 18px 28px rgba(0,0,0,.68))}
  to  {transform:translateY(-15px) scale(1.006);
       filter:drop-shadow(0 44px 52px rgba(0,0,0,.5)) drop-shadow(0 0 46px rgba(127,193,234,.22))}
}
/* L'ombre portee au sol : elle respire a contretemps du logo, ce qui suffit a
   faire lire le mouvement comme une levitation plutot qu'un glissement. */
.heros-sol{
  width:clamp(182px,29vw,486px);height:26px;margin-top:-4px;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(6,8,11,.62),transparent 76%);
  filter:blur(7px);
  animation:sol 5s ease-in-out infinite alternate;
}
@keyframes sol{
  from{transform:scaleX(1.07);opacity:.88}
  to  {transform:scaleX(.85);opacity:.48}
}

/* --- « 12 joueurs connectés » --- */
.heros-etat{
  display:inline-flex;align-items:center;gap:10px;margin-top:26px;
  font-size:15.5px;color:var(--givre);
  text-shadow:0 2px 14px rgba(0,0,0,.75);
}
.heros-etat b{color:var(--blanc);font-weight:600;font-variant-numeric:tabular-nums}
/* Sans cette ligne, le display:inline-flex ci-dessus l'emporte sur le
   display:none que le navigateur applique a l'attribut hidden : la ligne
   resterait affichee et vide tant que l'etat n'est pas revenu, et pour
   toujours si la requete echoue. Deja paye une fois. */
.heros-etat[hidden]{display:none}
.pastille{
  width:9px;height:9px;border-radius:50%;flex:none;
  background:var(--aurore-400);box-shadow:0 0 0 0 rgba(123,211,162,.55);
  animation:pouls 2.6s infinite;
}
@keyframes pouls{
  70%{box-shadow:0 0 0 10px rgba(123,211,162,0)}
  100%{box-shadow:0 0 0 0 rgba(123,211,162,0)}
}
.etat-reseau.ferme .pastille{background:var(--ambre-400);animation:none}
.etat-reseau.ferme{color:var(--ambre-300)}

/* --- les pastilles adresse et version --- */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:11px;margin-top:20px}
.chip{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 17px;border-radius:11px;
  background:rgba(6,8,11,.66);border:1px solid rgba(38,44,57,.95);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:var(--f-mono);font-size:14.5px;color:var(--givre);
  transition:border-color .18s,background .18s,color .18s;
}
.chip svg{color:var(--brume);transition:color .18s}
.chip b{color:var(--blanc);font-weight:600}
.chip-ip{cursor:pointer;color:var(--blanc)}
.chip-ip:hover{border-color:var(--glace-500);background:rgba(18,21,28,.85)}
.chip-ip:hover svg{color:var(--glace-400)}
.chip-ip.copie{border-color:var(--aurore-500);color:var(--aurore-300)}
.chip-ip.copie svg{color:var(--aurore-400)}

/* --- la descente vers le contenu --- */
.decouvrir{
  display:inline-flex;flex-direction:column;align-items:center;gap:7px;
  margin-top:clamp(30px,5vh,52px);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brume);
  transition:color .18s;
}
.decouvrir:hover{color:var(--glace-300)}
.decouvrir svg{animation:descendre 2.4s ease-in-out infinite}
@keyframes descendre{
  0%,100%{transform:translateY(0);opacity:.65}
  50%{transform:translateY(6px);opacity:1}
}

/* =========================================================================
   DEUX COLONNES : le fil d'actualités et la colonne de droite
   ========================================================================= */
.colonnes{
  display:grid;gap:24px;
  grid-template-columns:minmax(0,1fr) 340px;
  align-items:start;
  padding-block:clamp(40px,6vw,68px);
}
/* La colonne de droite suit la lecture : elle est courte, le fil est long. */
.flanc{position:sticky;top:calc(var(--barre) + 18px)}
@media (max-width:1040px){
  .colonnes{grid-template-columns:1fr}
  .flanc{position:static}
}

/* =========================================================================
   APPEL FINAL
   ========================================================================= */
.appel{
  position:relative;overflow:hidden;
  margin-top:var(--pas);
  border-radius:20px;
  border:1px solid rgba(90,169,220,.24);
  background:
    radial-gradient(90% 130% at 50% 0%,rgba(90,169,220,.16),transparent 62%),
    linear-gradient(180deg,rgba(25,29,38,.9),rgba(6,8,11,.94));
  padding:clamp(34px,5vw,58px) clamp(22px,4vw,48px);
  text-align:center;
}
.appel h2{font-size:clamp(26px,4vw,42px)}
.appel p{margin:14px auto 0;max-width:52ch;color:var(--cendre)}
.appel .chips{margin-top:26px}
.appel .btn{margin-top:0}
.appel-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:14px}