/* ==========================================================================
   Alexander Meierhenrich Younsi — feuille de style globale
   Reprise à l'identique des blocs <style> des maquettes design/*.dc.html.
   Les styles propres à chaque élément restent en attribut style= dans les
   pages (les maquettes sont la spécification : on ne les réinterprète pas).
   Ce fichier ne contient que :
     1. les règles globales des maquettes,
     2. les media queries des maquettes,
     3. les keyframes des maquettes,
     4. la traduction des attributs style-hover= / style-focus= du runtime
        propriétaire en vraies règles :hover / :focus,
     5. la mécanique statique (langue FR/EN, menu mobile, splash, états de
        formulaire) qui remplace les <sc-if> du runtime.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base — identique aux maquettes
   -------------------------------------------------------------------------- */
body {
  margin: 0;
  background: #0B0A14;
  color: #A0A0C0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
a { color: #FFFFFF; }
a:hover { color: #7C5CFC; }
::selection { background: rgba(124, 92, 252, 0.35); color: #FFFFFF; }
:focus-visible { outline: 2px solid #7C5CFC; outline-offset: 2px; }
h1, h2, h3, blockquote, p { margin: 0; }
input::placeholder { color: #4A4770; }

/* La maquette 404 n'active pas text-wrap: pretty — on reste fidèle. */
html[data-page="404"] body { text-wrap: wrap; }

/* --------------------------------------------------------------------------
   2. Media queries — identiques aux maquettes
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  [data-desktop-nav] { display: none !important; }
  [data-mobile-toggle] { display: inline-flex !important; }
}
@media (max-width: 700px) {
  footer nav { gap: 4px 24px; }
  footer nav a { padding: 13px 0; }
  form button[type="submit"] { flex: 1 1 100%; justify-content: center; }
  input[type="email"] { border-right: 1px solid #242140; }
  details summary { padding: 8px 0; }
  [data-mobile-toggle] { min-height: 44px; }
}

/* --------------------------------------------------------------------------
   3. Keyframes — identiques aux maquettes
   -------------------------------------------------------------------------- */
@keyframes drift1 {
  0%, 100% { transform: translate(-6%, -4%) scale(1); }
  50%      { transform: translate(7%, 6%) scale(1.18); }
}
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes loadbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --------------------------------------------------------------------------
   4. style-hover= / style-focus= → :hover / :focus
   Le runtime des maquettes appliquait ces déclarations en style inline au
   survol : elles écrasaient donc l'attribut style=. !important reproduit
   exactement cette priorité.
   -------------------------------------------------------------------------- */

/* style-hover="color:#7C5CFC;" */
.h-acc:hover { color: #7C5CFC !important; }

/* style-hover="color:#FFFFFF;" */
.h-white:hover { color: #FFFFFF !important; }

/* style-hover="background:#6847E8;border-color:#6847E8;color:#FFFFFF;" */
.h-solid:hover {
  background: #6847E8 !important;
  border-color: #6847E8 !important;
  color: #FFFFFF !important;
}

/* style-hover="background:#6847E8;border-color:#6847E8;" */
.h-solid-nc:hover {
  background: #6847E8 !important;
  border-color: #6847E8 !important;
}

/* style-hover="border-color:#7C5CFC;color:#7C5CFC;" */
.h-ghost:hover {
  border-color: #7C5CFC !important;
  color: #7C5CFC !important;
}

/* style-hover="color:#FFFFFF;border-color:#7C5CFC;" */
.h-white-border:hover {
  color: #FFFFFF !important;
  border-color: #7C5CFC !important;
}

/* style-hover="border-color:#7C5CFC;" */
.h-border:hover { border-color: #7C5CFC !important; }

/* style-hover="border-color:#7C5CFC;transform:translateY(-4px);" */
.h-lift:hover {
  border-color: #7C5CFC !important;
  transform: translateY(-4px) !important;
}

/* style-focus="border-color:#7C5CFC;outline:none;" */
.f-acc:focus {
  border-color: #7C5CFC !important;
  outline: none !important;
}

/* --------------------------------------------------------------------------
   5. Mécanique statique (remplace les <sc-if> du runtime)
   -------------------------------------------------------------------------- */

/* [hidden] doit battre les display: inline des maquettes. */
[hidden] { display: none !important; }

/* Bilinguisme : un seul bloc de langue visible, l'autre retiré du flux.
   Sans JavaScript, le français s'affiche (data-lang="fr" est dans le HTML). */
html[data-lang="fr"] [data-lang-block="en"] { display: none !important; }
html[data-lang="en"] [data-lang-block="fr"] { display: none !important; }

/* Splash de premier chargement (accueil) : visible dès la première peinture
   uniquement si le script d'amorce a posé data-booting sur <html>. */
html:not([data-booting]) [data-splash] { display: none !important; }

/* Curseur plume : la règle est posée par le script uniquement sur desktop
   sans prefers-reduced-motion (voir assets/site.js). */