/*
 * lequellec.xyz — landing page.
 *
 * Composition centree, colonne etroite, fond plat : nom en capitales espacees,
 * un filet, un panneau listant les depots, un lien, un selecteur de palette.
 *
 * Cinq palettes d'editeur, chacune declinee en clair et en sombre, soit dix
 * combinaisons. Toutes ont ete verifiees au ratio WCAG AA (4,5:1 pour le texte
 * courant, 3:1 pour le texte large) ; les valeurs qui echouaient a la palette
 * d'origine ont ete assombries ou eclaircies du minimum necessaire.
 *
 * Aucune ressource externe : les polices sont servies par ce meme conteneur.
 */

/* ---------- Polices ---------- */

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Constantes non chromatiques ---------- */

:root {
  --font-sans: 'Manrope', ui-sans-serif, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --col: 34rem;
  --col-wide: 43rem;
  --dur: 180ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Pastilles du selecteur : couleurs fixes, elles designent la palette. */
  --sw-tokyo-1: #7aa2f7;
  --sw-tokyo-2: #bb9af7;
  --sw-tokyo-3: #1a1b26;
  --sw-dracula-1: #bd93f9;
  --sw-dracula-2: #ff79c6;
  --sw-dracula-3: #282a36;
  --sw-nord-1: #88c0d0;
  --sw-nord-2: #81a1c1;
  --sw-nord-3: #3b4252;
  --sw-rose-1: #c4a7e7;
  --sw-rose-2: #eb6f92;
  --sw-rose-3: #1f1d2e;
  --sw-cat-1: #cba6f7;
  --sw-cat-2: #89b4fa;
  --sw-cat-3: #1e1e2e;
}

/* ---------- Palettes ----------
 * Pour chaque palette : le bloc sombre, puis la declinaison claire, appliquee
 * soit par preference systeme (sans JavaScript), soit par choix explicite.
 */

/* Tokyo Night */
:root[data-palette='tokyo-night'] {
  color-scheme: dark;

  --bg: #16161e;
  --panel: #1a1b26;
  --fg: #c0caf5;
  --fg-strong: #e6ebff;
  --fg-muted: #8b93ba;
  --accent: #7aa2f7;
  --line: #2a2e42;
  --star: #e0af68;
}

@media (prefers-color-scheme: light) {
  :root[data-palette='tokyo-night']:not([data-theme='dark']) {
    color-scheme: light;

    --bg: #e1e2e7;
    --panel: #d8d9df;
    --fg: #343b58;
    --fg-strong: #1c2033;
    --fg-muted: #565a6e;
    --accent: #2a54c0;
    --line: #bcbec9;
    --star: #7a4f0e;
  }
}

:root[data-palette='tokyo-night'][data-theme='light'] {
  color-scheme: light;

  --bg: #e1e2e7;
  --panel: #d8d9df;
  --fg: #343b58;
  --fg-strong: #1c2033;
  --fg-muted: #565a6e;
  --accent: #2a54c0;
  --line: #bcbec9;
  --star: #7a4f0e;
}

/* Dracula / Alucard */
:root[data-palette='dracula'] {
  color-scheme: dark;

  --bg: #21222c;
  --panel: #282a36;
  --fg: #f8f8f2;
  --fg-strong: #ffffff;
  --fg-muted: #a9aed0;
  --accent: #bd93f9;
  --line: #3b3d4d;
  --star: #f1fa8c;
}

@media (prefers-color-scheme: light) {
  :root[data-palette='dracula']:not([data-theme='dark']) {
    color-scheme: light;

    --bg: #fffbeb;
    --panel: #f6f0d8;
    --fg: #2a2823;
    --fg-strong: #1f1f1f;
    --fg-muted: #5f5940;
    --accent: #5a3fc0;
    --line: #ddd6bd;
    --star: #7d6812;
  }
}

:root[data-palette='dracula'][data-theme='light'] {
  color-scheme: light;

  --bg: #fffbeb;
  --panel: #f6f0d8;
  --fg: #2a2823;
  --fg-strong: #1f1f1f;
  --fg-muted: #5f5940;
  --accent: #5a3fc0;
  --line: #ddd6bd;
  --star: #7d6812;
}

/* Nord — Polar Night / Snow Storm. Palette par defaut, donc aussi le repli
 * applique si aucun attribut de palette n'est encore pose. */
:root,
:root[data-palette='nord'] {
  color-scheme: dark;

  --bg: #2e3440;
  --panel: #3b4252;
  --fg: #d8dee9;
  --fg-strong: #eceff4;
  --fg-muted: #a9b4c6;
  --accent: #88c0d0;
  --line: #4c566a;
  --star: #ebcb8b;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']),
  :root[data-palette='nord']:not([data-theme='dark']) {
    color-scheme: light;

    --bg: #eceff4;
    --panel: #e5e9f0;
    --fg: #3b4252;
    --fg-strong: #2e3440;
    --fg-muted: #4c566a;
    --accent: #2f5f88;
    --line: #d0d6e0;
    --star: #6d5312;
  }
}

:root[data-palette='nord'][data-theme='light'] {
  color-scheme: light;

  --bg: #eceff4;
  --panel: #e5e9f0;
  --fg: #3b4252;
  --fg-strong: #2e3440;
  --fg-muted: #4c566a;
  --accent: #2f5f88;
  --line: #d0d6e0;
  --star: #6d5312;
}

/* Rose Pine / Rose Pine Dawn */
:root[data-palette='rose-pine'] {
  color-scheme: dark;

  --bg: #191724;
  --panel: #1f1d2e;
  --fg: #e0def4;
  --fg-strong: #f2f0ff;
  --fg-muted: #a9a4c9;
  --accent: #c4a7e7;
  --line: #302c48;
  --star: #f6c177;
}

@media (prefers-color-scheme: light) {
  :root[data-palette='rose-pine']:not([data-theme='dark']) {
    color-scheme: light;

    --bg: #faf4ed;
    --panel: #f2e9e1;
    --fg: #575279;
    --fg-strong: #3d3a55;
    --fg-muted: #68647a;
    --accent: #7a4d94;
    --line: #dfd6cd;
    --star: #8a5a12;
  }
}

:root[data-palette='rose-pine'][data-theme='light'] {
  color-scheme: light;

  --bg: #faf4ed;
  --panel: #f2e9e1;
  --fg: #575279;
  --fg-strong: #3d3a55;
  --fg-muted: #68647a;
  --accent: #7a4d94;
  --line: #dfd6cd;
  --star: #8a5a12;
}

/* Catppuccin — Mocha / Latte */
:root[data-palette='catppuccin'] {
  color-scheme: dark;

  --bg: #181825;
  --panel: #1e1e2e;
  --fg: #cdd6f4;
  --fg-strong: #eff1f5;
  --fg-muted: #a6adc8;
  --accent: #cba6f7;
  --line: #313244;
  --star: #f9e2af;
}

@media (prefers-color-scheme: light) {
  :root[data-palette='catppuccin']:not([data-theme='dark']) {
    color-scheme: light;

    --bg: #eff1f5;
    --panel: #e6e9ef;
    --fg: #4c4f69;
    --fg-strong: #3a3c52;
    --fg-muted: #5c5f77;
    --accent: #7c2fd4;
    --line: #ccd0da;
    --star: #7a5210;
  }
}

:root[data-palette='catppuccin'][data-theme='light'] {
  color-scheme: light;

  --bg: #eff1f5;
  --panel: #e6e9ef;
  --fg: #4c4f69;
  --fg-strong: #3a3c52;
  --fg-muted: #5c5f77;
  --accent: #7c2fd4;
  --line: #ccd0da;
  --star: #7a5210;
}

/* ---------- Base ---------- */

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

body {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100svh;
  margin: 0;
  padding: clamp(2rem, 6vh, 4rem) 1.25rem clamp(1.5rem, 4vh, 2.5rem);
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

a {
  color: inherit;
  text-decoration: none;
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  padding: 0.6rem 1rem;
  background-color: var(--fg);
  color: var(--bg);
  font-size: 0.8125rem;
  transform: translateY(-150%);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ---------- Colonne centrale ---------- */

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--col-wide);
  margin: 0 auto;
}

.name {
  max-width: var(--col);
  margin: 0;
  color: var(--fg-strong);
  font-size: clamp(1.375rem, 5.6vw, 2.75rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-align: center;
  text-indent: 0.2em; /* compense l'espace ajoute apres la derniere lettre */
  text-transform: uppercase;
  transition: color var(--dur) var(--ease);
}

.rule {
  width: 3rem;
  height: 1px;
  margin: 1.75rem 0 2.5rem;
  border: 0;
  background-color: var(--line);
}

/* ---------- Panneau des depots ---------- */

.panel {
  width: 100%;
  max-width: var(--col);
  padding: 0.5rem 0.25rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background-color: var(--panel);
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.panel__title {
  margin: 0.75rem 1.25rem 0.5rem;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.repos {
  margin: 0;
  padding: 0;
  list-style: none;
}

.repo {
  padding: 0.7rem 1.25rem 0.85rem;
  border-top: 1px solid var(--line);
}

.repo:first-child {
  border-top: 0;
}

.repo__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.repo__name {
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  transition: color var(--dur) var(--ease);
}

.repo__link:hover .repo__name,
.repo__link:focus-visible .repo__name {
  color: var(--accent);
}

.repo__stars {
  flex: none;
  color: var(--star);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.repo__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin: 0.15rem 0 0;
  color: var(--fg-muted);
  font-size: 0.8125rem;
}

.repo__lang {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.repo__desc {
  flex: 1 1 12rem;
}

/* ---------- Lien ---------- */

.pills {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 2rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0 1.35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background-color: var(--panel);
  font-size: 0.875rem;
  font-weight: 800;
  transition:
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.pill:hover,
.pill:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
}

.pill__icon {
  flex: none;
}

/* ---------- Selecteur de palette ---------- */

.themes {
  margin-top: 3rem;
  text-align: center;
}

.themes__title {
  margin: 0 0 0.85rem;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
}

.themes__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.swatch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background-color: transparent;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition:
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

/* Au survol et une fois choisie, chaque pastille s'exprime dans la couleur
 * d'accent de la palette qu'elle designe. Les 50 combinaisons (5 accents x 10
 * fonds) ont ete verifiees : le pire ratio est de 4,89:1, donc au-dessus du
 * seuil AA. */
.swatch:hover,
.swatch[aria-pressed='true'] {
  color: var(--sw-accent, var(--fg));
  border-color: var(--sw-accent, var(--fg-muted));
}

.swatch--tokyo {
  --sw-accent: #7aa2f7;
}

.swatch--dracula {
  --sw-accent: #bd93f9;
}

.swatch--nord {
  --sw-accent: #88c0d0;
}

.swatch--rose {
  --sw-accent: #c4a7e7;
}

.swatch--cat {
  --sw-accent: #cba6f7;
}

/* En clair, chaque accent bascule sur sa variante foncee. */
:root[data-theme='light'] .swatch--tokyo {
  --sw-accent: #2a54c0;
}

:root[data-theme='light'] .swatch--dracula {
  --sw-accent: #5a3fc0;
}

:root[data-theme='light'] .swatch--nord {
  --sw-accent: #2f5f88;
}

:root[data-theme='light'] .swatch--rose {
  --sw-accent: #7a4d94;
}

:root[data-theme='light'] .swatch--cat {
  --sw-accent: #7c2fd4;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .swatch--tokyo {
    --sw-accent: #2a54c0;
  }

  :root:not([data-theme='dark']) .swatch--dracula {
    --sw-accent: #5a3fc0;
  }

  :root:not([data-theme='dark']) .swatch--nord {
    --sw-accent: #2f5f88;
  }

  :root:not([data-theme='dark']) .swatch--rose {
    --sw-accent: #7a4d94;
  }

  :root:not([data-theme='dark']) .swatch--cat {
    --sw-accent: #7c2fd4;
  }
}

.swatch--mode:hover,
.swatch--mode[aria-pressed='true'] {
  color: var(--fg-strong);
  border-color: var(--fg-muted);
}

/* La pastille montre les couleurs de la palette qu'elle designe : elles sont
 * donc fixes, independantes de la palette active. */
.swatch__chip {
  flex: none;
  width: 1.5rem;
  height: 0.5rem;
  border-radius: 999px;
}

.swatch--tokyo .swatch__chip {
  background-image: linear-gradient(
    90deg,
    var(--sw-tokyo-1) 0 33%,
    var(--sw-tokyo-2) 33% 66%,
    var(--sw-tokyo-3) 66% 100%
  );
}

.swatch--dracula .swatch__chip {
  background-image: linear-gradient(
    90deg,
    var(--sw-dracula-1) 0 33%,
    var(--sw-dracula-2) 33% 66%,
    var(--sw-dracula-3) 66% 100%
  );
}

.swatch--nord .swatch__chip {
  background-image: linear-gradient(
    90deg,
    var(--sw-nord-1) 0 33%,
    var(--sw-nord-2) 33% 66%,
    var(--sw-nord-3) 66% 100%
  );
}

.swatch--rose .swatch__chip {
  background-image: linear-gradient(
    90deg,
    var(--sw-rose-1) 0 33%,
    var(--sw-rose-2) 33% 66%,
    var(--sw-rose-3) 66% 100%
  );
}

.swatch--cat .swatch__chip {
  background-image: linear-gradient(
    90deg,
    var(--sw-cat-1) 0 33%,
    var(--sw-cat-2) 33% 66%,
    var(--sw-cat-3) 66% 100%
  );
}

.swatch--mode {
  padding: 0 0.7rem;
}

.theme-glyph {
  width: 0.75rem;
  height: 0.75rem;
  border: 1px solid currentcolor;
  border-radius: 50%;
  background-image: linear-gradient(to right, currentcolor 50%, transparent 50%);
}

/* ---------- Pied ---------- */

.foot {
  margin-top: 2.5rem;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-align: center;
  text-indent: 0.24em;
  text-transform: uppercase;
}

/* ---------- Entree en scene ----------
 * Une seule orchestration breve au chargement, en CSS pur : la page s'affiche
 * donc aussi sans JavaScript. Rien ne bouge ensuite.
 */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0.6rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.name,
.rule,
.panel,
.pills,
.themes,
.foot {
  animation: rise 500ms var(--ease) both;
}

.rule {
  animation-delay: 80ms;
}

.panel {
  animation-delay: 140ms;
}

.pills {
  animation-delay: 210ms;
}

.themes {
  animation-delay: 280ms;
}

.foot {
  animation-delay: 340ms;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}