/*
 * riftrio.com : base commune aux pages. Couleurs de la marque (ART_DIRECTION.md) : cyan NEON #00E5FF, magenta SHADOW
 * #FF2BD6, violet #8C5CFF, blanc de faille #F2F4FF, sur le noir du jeu #05040D. Polices de la DA, hébergées ici
 * (licence OFL, fichiers OFL-*.txt) : Chakra Petch (titres), Barlow (texte), Share Tech Mono (étiquettes).
 */
@font-face {
  font-family: "Chakra Petch";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/chakra-petch-500.woff2") format("woff2");
}
@font-face {
  font-family: "Chakra Petch";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/chakra-petch-700.woff2") format("woff2");
}
@font-face {
  font-family: "Chakra Petch";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/chakra-petch-700-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-400.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/barlow-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-600.woff2") format("woff2");
}
@font-face {
  font-family: "Share Tech Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/share-tech-mono-400.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --void: #05040d;
  --deck: #0b0820;
  --panel: #0f0c26;
  --wire: #2a2643;
  --ink: #ece9fb;
  --body: #d6d2ee;
  --mute: #a29ec2;
  /* Texte discret : au moins 4,5:1 sur le fond, halo compris (petits textes du pied de page, dates, notes). */
  --faint: #8f8ab0;
  --neon: #00e5ff;
  --shadow: #ff2bd6;
  --violet: #8c5cff;
  --rift: #f2f4ff;
  --danger: #ff1744;
  /* Couleur de la dimension affichée par la démo : NEON par défaut, SHADOW avec html[data-dim="S"]. */
  --dim: var(--neon);
  --f-display: "Chakra Petch", "Bahnschrift", "Arial Narrow", sans-serif;
  --f-body: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "Share Tech Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  --gutter: clamp(16px, 4vw, 56px);
  /* viewport-fit=cover : les marges latérales évitent l'encoche et les coins arrondis (iPhone à l'horizontale). */
  --pad-l: max(var(--gutter), env(safe-area-inset-left, 0px));
  --pad-r: max(var(--gutter), env(safe-area-inset-right, 0px));
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-dim: 420ms;
}
html[data-dim="S"] {
  --dim: var(--shadow);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--void);
}

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font: 400 1rem/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--dim);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Langues : chaque texte existe en anglais et en français ; lang.js choisit avant l'affichage (anglais sans script). */
html:not([data-lang="fr"]) [lang="fr"]:not(html) {
  display: none !important;
}
html[data-lang="fr"] [lang="en"]:not(html) {
  display: none !important;
}

/* Les trois voies : cyan NEON, blanc de faille, magenta SHADOW (points de l'icône). */
.lanes {
  display: inline-flex;
  gap: 5px;
}
.lanes i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.lanes i:nth-child(1) {
  background: var(--neon);
  box-shadow: 0 0 8px var(--neon);
}
.lanes i:nth-child(2) {
  background: var(--rift);
  box-shadow: 0 0 8px var(--rift);
}
.lanes i:nth-child(3) {
  background: var(--shadow);
  box-shadow: 0 0 8px var(--shadow);
}

/* En-tête et pied de page communs. */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: max(clamp(10px, 2.2vh, 22px), env(safe-area-inset-top, 0px)) var(--pad-r) 0 var(--pad-l);
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font: 700 0.95rem/1 var(--f-display);
  letter-spacing: 0.22em;
  border-radius: 8px;
}
.mark svg {
  width: 26px;
  height: 36px;
  flex: none;
  filter: drop-shadow(0 0 6px rgba(140, 92, 255, 0.55));
}

.lang-switch {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--wire);
  border-radius: 999px;
  background: rgba(11, 8, 32, 0.6);
}
.lang-switch button {
  min-width: 40px;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--mute);
  font: 400 0.78rem/1 var(--f-mono);
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.lang-switch button:hover {
  color: var(--ink);
}
.lang-switch button[aria-pressed="true"] {
  color: var(--void);
  background: var(--rift);
}

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 20px;
  padding: 0 var(--pad-r) max(clamp(10px, 2vh, 18px), env(safe-area-inset-bottom, 0px)) var(--pad-l);
  color: var(--faint);
  font: 400 0.76rem/1.4 var(--f-mono);
  letter-spacing: 0.1em;
}
.foot p {
  margin: 0;
}
.foot nav {
  display: flex;
  gap: 4px 20px;
  flex-wrap: wrap;
}
.foot a {
  display: inline-block;
  padding: 6px 0;
  color: var(--mute);
  text-decoration: none;
  transition: color 0.2s ease;
}
.foot a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--dim);
  text-underline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}