/* ==========================================================
   EQUILIBRIUM — feuille de style
   ========================================================== */

:root{
  --bg:#e9eaec;
  --ink:#0c0d0f;

  /* ---- COULEURS DES LOGOS AU SURVOL ---- */
  --c-souasou:#FFD838;   /* jaune iconique Souasou */
  --c-occulens:#3B6EA5;
  --c-hemora:#B3202B;    /* goutte de sang */
  --c-silens:#4A8C6F;
  --c-lievres:#8A6BB0;
  --c-arbre:#5E7D3A;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Helvetica Neue",Arial,"Segoe UI",sans-serif;
  overflow:hidden;
}

/* ---------- champ de particules ---------- */
#particles{
  position:fixed;inset:0;
  width:100%;height:100%;
  display:block;
  z-index:0;
}

/* ---------- barre du haut ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;
  z-index:9;
  display:flex;align-items:center;justify-content:space-between;
  padding:30px 46px;
}
.wordmark{
  font-weight:700;
  letter-spacing:.13em;
  font-size:19px;
  color:var(--ink);
  text-decoration:none;
}
.about-link{
  font-size:19px;
  color:var(--ink);
  text-decoration:none;
  opacity:.92;
  transition:opacity .25s;
}
.about-link:hover{opacity:.5}

/* ==========================================================
   SYSTEME ORBITAL
   Chaque logo a son propre conteneur .orbit :
     --dur : duree d'un tour complet (plus grand = plus lent)
     --dir : sens de rotation (normal | reverse)
   Puis .sat le place :
     --a : angle de depart      --r : distance au centre
   ========================================================== */
.system{
  position:fixed;top:50%;left:50%;width:0;height:0;z-index:2;
  --dur:90s;                 /* duree d'un tour complet : seul reglage de vitesse */
}

/* IMPORTANT : .orbit, .sat et .ico sont des POINTS de taille zero,
   tous poses exactement sur le centre du sablier.
   Sans ca, chaque logo tournerait autour de son propre milieu
   et la constellation serait decentree. */

/* le plateau tourne dans le sens des aiguilles d'une montre */
.orbit{
  position:absolute;top:0;left:0;
  width:0;height:0;
  animation:spin var(--dur) linear infinite;
}
/* place le logo : angle de depart, distance au centre,
   puis on annule l'angle pour qu'il reste droit.
   transform-origin:0 0 -> on pivote bien autour du CENTRE, pas du logo. */
.sat{
  position:absolute;top:0;left:0;
  width:0;height:0;
  transform-origin:0 0;
  transform:rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a)));
}
/* contre-rotation exacte : annule la rotation du plateau.
   Le logo reste TOUJOURS droit, meme quand il passe en bas.
   Le grid centre le logo sur le point. */
.ico{
  position:absolute;top:0;left:0;
  width:0;height:0;
  animation:spin var(--dur) linear infinite reverse;
  cursor:pointer;
  display:block;
  color:inherit;            /* neutralise le style de lien par defaut */
  text-decoration:none;
}
/* accessibilite : contour visible au clavier */
.ico:focus-visible i{
  outline:2px solid var(--ink);
  outline-offset:6px;
}
@keyframes spin{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* le logo : masque PNG + couleur pilotee en CSS.
   IMPORTANT : les chemins d'images sont declares ICI (dans le .css),
   donc relatifs a assets/css/ -> on remonte avec ../img/ */
.ico i{
  display:block;
  position:absolute;
  width:var(--w);
  height:var(--h);
  /* centrage EXPLICITE : on remonte de la moitie de la taille.
     (un grid 0x0 avec place-items ne centre pas de facon fiable) */
  left:calc(var(--w) / -2);
  top:calc(var(--h) / -2);
  background:var(--ink);                       /* noir par defaut */
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  transition:background-color .35s ease, transform .35s ease;
}
.ico:hover i{
  background:var(--hc);                        /* couleur du projet */
  transform:rotate(8deg) scale(1.12);          /* penche legerement a droite */
}

/* ---- un masque + une couleur par projet ---- */
.l-arbre{
  --w:84px; --h:84px; --hc:var(--c-arbre);
  -webkit-mask-image:url("../img/arbre.png");   mask-image:url("../img/arbre.png");
}
.l-occulens{
  --w:78px; --h:74px; --hc:var(--c-occulens);
  -webkit-mask-image:url("../img/occulens.png"); mask-image:url("../img/occulens.png");
}
.l-souasou{
  --w:56px; --h:79px; --hc:var(--c-souasou);
  -webkit-mask-image:url("../img/souasou.png");  mask-image:url("../img/souasou.png");
}
.l-hemora{
  --w:74px; --h:73px; --hc:var(--c-hemora);
  -webkit-mask-image:url("../img/hemora.png");   mask-image:url("../img/hemora.png");
}
.l-lievres{
  --w:78px; --h:87px; --hc:var(--c-lievres);
  -webkit-mask-image:url("../img/lievres.png");  mask-image:url("../img/lievres.png");
}
.l-silens{
  --w:76px; --h:76px; --hc:var(--c-silens);
  -webkit-mask-image:url("../img/silens.png");   mask-image:url("../img/silens.png");
}

/* l'orbite se fige quand la souris entre dans la zone */
.system:hover .orbit,
.system:hover .ico{ animation-play-state:paused; }

/* ---------- logo central (aucun halo) ---------- */
/* Le sablier est place DANS .system : il partage donc exactement
   le meme point d'origine que les orbites, par construction. */
.core{
  position:absolute;top:0;left:0;
  width:0;height:0;
  z-index:3;
  --core-size:200px;
}
.core::before{
  content:"";
  display:block;
  position:absolute;
  width:var(--core-size);
  height:var(--core-size);
  /* meme centrage explicite que les logos */
  left:calc(var(--core-size) / -2);
  top:calc(var(--core-size) / -2);
  background:#ffffff;
  -webkit-mask:url("../img/equilibrium.png") center/contain no-repeat;
          mask:url("../img/equilibrium.png") center/contain no-repeat;
}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .topbar{padding:20px}
  .wordmark,.about-link{font-size:15px}
  .system{transform:scale(.6)}
}

/* respect des preferences d'accessibilite */
@media (prefers-reduced-motion:reduce){
  .orbit,.ico{animation:none}
}