/* Fais Dodo — feuille de style du site (reset, animations, états hover, responsive, a11y).
   Les styles structurels vivent en inline dans index.html (fidélité au design importé) ;
   ce fichier porte ce qui ne peut pas être inline : keyframes, :hover, media queries, a11y. */

*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #05060f; }
img { max-width: 100%; }
::selection { background: rgba(174,185,255,.3); }

/* Ancres : compense le header fixe quand on saute sans JS. */
section[id] { scroll-margin-top: 92px; }

/* ---- Keyframes (reprises du design Design Canvas) ---- */
@keyframes fd-grain {
  0%{transform:translate(0,0)} 10%{transform:translate(-4%,-4%)} 20%{transform:translate(-8%,2%)}
  30%{transform:translate(2%,-8%)} 40%{transform:translate(-2%,6%)} 50%{transform:translate(-8%,4%)}
  60%{transform:translate(6%,0)} 70%{transform:translate(-4%,6%)} 80%{transform:translate(2%,8%)}
  90%{transform:translate(-6%,2%)} 100%{transform:translate(0,0)}
}
@keyframes fd-scrollcue {
  0%{transform:translateY(0);opacity:0} 30%{opacity:1} 100%{transform:translateY(14px);opacity:0}
}
@keyframes fd-floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

#fd-grain { animation: fd-grain 1.2s steps(6) infinite; }
.fd-scrollcue { animation: fd-scrollcue 1.8s ease-in-out infinite; }
.fd-floaty { animation: fd-floaty 5s ease-in-out infinite; }

/* ---- États survol (équivalents des style-hover du design) ---- */
.fd-navlink {
  font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(238,241,255,.72); text-decoration: none; transition: color .3s ease;
  padding: 4px 2px;
}
.fd-navlink:hover, .fd-navlink:focus-visible { color: #fff; }

.fd-footlink {
  color: rgba(238,241,255,.85); text-decoration: none; transition: color .3s ease;
}
.fd-footlink:hover, .fd-footlink:focus-visible { color: #fff; }

.fd-arklink { transition: color .3s ease; }
.fd-arklink:hover, .fd-arklink:focus-visible { color: #fff; }

#fd-lang { transition: background .3s ease, border-color .3s ease; min-height: 38px; }
#fd-lang:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.28); }

.fd-testi-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 32px 72px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.24);
}

/* ---- Accessibilité : anneau de focus visible ---- */
a:focus-visible, button:focus-visible, [data-magnetic]:focus-visible {
  outline: 2px solid #cdd6ff;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---- Responsive ---- */
@media (max-width: 760px) {
  /* Sur mobile, la nav principale cède la place au logo + sélecteur de langue.
     La navigation reste accessible via le pied de page. */
  #fd-nav-links { display: none !important; }
  .fd-about { grid-template-columns: 1fr !important; }
  .fd-about-media img { max-height: 360px !important; }
}

/* ---- prefers-reduced-motion : on coupe les animations décoratives ---- */
@media (prefers-reduced-motion: reduce) {
  #fd-grain, .fd-scrollcue, .fd-floaty { animation: none !important; }
  html { scroll-behavior: auto !important; }
  .fd-testi-card { transition: none !important; }
}