:root {
  --bg: #070809;
  --bg-soft: #0b0d0f;
  --card: #111417;
  --card-hover: #15191c;

  --white: #f3f3f1;
  --text: #d4d5d2;
  --muted: #989b99;
  --dim: #656967;

  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.16);

  --accent: #d9ff42;

  --radius: 22px;
  --max: 1180px;
}


* {
  box-sizing: border-box;
}


html {
  background: var(--bg);
  color-scheme: dark;
  scroll-behavior: smooth;
}


body {
  margin: 0;
  min-width: 320px;

  background:
    radial-gradient(
      circle at 88% 8%,
      rgba(217, 255, 66, 0.035),
      transparent 420px
    ),
    var(--bg);

  color: var(--text);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size: 16px;
  line-height: 1.65;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


::selection {
  background: var(--accent);
  color: #070809;
}


a {
  color: inherit;
}


button,
input {
  font: inherit;
}


.container {
  width: min(
    calc(100% - 48px),
    var(--max)
  );

  margin-inline: auto;
}


/* =====================================================
   HEADER
   ===================================================== */

.header {
  border-bottom: 1px solid var(--line);
}


.header-inner {
  min-height: 72px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}


.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;

  color: var(--white);
  text-decoration: none;
}


.logo-mark {
  width: 10px;
  height: 10px;

  border-radius: 50%;

  background: var(--accent);

  box-shadow:
    0 0 22px
    rgba(217, 255, 66, 0.45);
}


.logo-text {
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.18em;
}


.header-title {
  color: var(--muted);

  font-size: 0.70rem;
  font-weight: 650;

  letter-spacing: 0.10em;
}


/* =====================================================
   HERO
   ===================================================== */

.hero {
  padding:
    82px 0
    72px;

  border-bottom: 1px solid var(--line);
}


.hero-kicker {
  margin-bottom: 24px;

  color: var(--accent);

  font-size: 0.70rem;
  font-weight: 750;

  letter-spacing: 0.13em;
  text-transform: uppercase;
}


.hero h1 {
  margin: 0;

  color: var(--white);

  font-size:
    clamp(
      4rem,
      9vw,
      7.8rem
    );

  font-weight: 850;

  line-height: 0.86;

  letter-spacing: -0.085em;
}


.hero-description {
  max-width: 700px;

  margin:
    34px 0 0;

  color: var(--text);

  font-size:
    clamp(
      1.08rem,
      2vw,
      1.30rem
    );

  line-height: 1.65;

  letter-spacing: -0.015em;
}


/* =====================================================
   RECHERCHE
   ===================================================== */

.search-box {
  max-width: 760px;

  margin-top: 38px;
}


.search-box label {
  display: block;

  margin-bottom: 9px;

  color: var(--muted);

  font-size: 0.68rem;
  font-weight: 750;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}


.search-field {
  position: relative;
}


.search-icon {
  position: absolute;

  top: 50%;
  left: 19px;

  transform: translateY(-50%);

  color: var(--accent);

  font-size: 1.35rem;

  pointer-events: none;
}


.search-field input {
  width: 100%;
  height: 62px;

  padding:
    0 54px
    0 47px;

  border:
    1px solid var(--line-strong);

  border-radius: 13px;

  outline: none;

  background:
    rgba(255, 255, 255, 0.035);

  color: var(--white);

  font-size: 0.98rem;

  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}


.search-field input::placeholder {
  color: var(--dim);
}


.search-field input:focus {
  border-color:
    rgba(217, 255, 66, 0.42);

  background:
    rgba(255, 255, 255, 0.055);

  box-shadow:
    0 0 0 4px
    rgba(217, 255, 66, 0.045);
}


.search-field button {
  position: absolute;

  top: 50%;
  right: 13px;

  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  transform: translateY(-50%);

  border: 0;
  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.08);

  color: var(--text);

  cursor: pointer;

  font-size: 1.2rem;
}


.database-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 9px;

  margin-top: 14px;

  color: var(--muted);

  font-size: 0.75rem;
}


.database-info strong {
  color: var(--white);
  font-weight: 700;
}


.separator {
  color: var(--dim);
}


/* =====================================================
   ABOUT
   ===================================================== */

.about {
  padding:
    82px 0;

  border-bottom: 1px solid var(--line);
}


.about-inner {
  display: grid;

  grid-template-columns:
    180px
    minmax(0, 720px);

  gap: 80px;
}


.about-label,
.section-label {
  color: var(--accent);

  font-size: 0.68rem;
  font-weight: 750;

  letter-spacing: 0.13em;
  text-transform: uppercase;
}


.about-content h2 {
  margin:
    0 0 28px;

  color: var(--white);

  font-size:
    clamp(
      2.3rem,
      4vw,
      3.7rem
    );

  font-weight: 790;

  line-height: 1;

  letter-spacing: -0.065em;
}


.about-content p {
  margin:
    0 0 20px;

  color: var(--muted);

  font-size: 1rem;

  line-height: 1.8;
}


.about-content .about-lead {
  color: var(--text);

  font-size:
    clamp(
      1.15rem,
      2vw,
      1.35rem
    );

  line-height: 1.65;
}


/* =====================================================
   INFORMATIONS
   ===================================================== */

.information {
  padding:
    82px 0;

  border-bottom: 1px solid var(--line);
}


.information-header {
  margin-bottom: 38px;
}


.information-header h2 {
  margin:
    13px 0 0;

  color: var(--white);

  font-size:
    clamp(
      2.2rem,
      4vw,
      3.6rem
    );

  font-weight: 780;

  line-height: 1;

  letter-spacing: -0.06em;
}


.information-text {
  max-width: 850px;
}


.information-text p {
  margin:
    0 0 18px;

  color: var(--muted);

  font-size: 1rem;

  line-height: 1.78;
}


.information-text strong {
  color: var(--text);

  font-weight: 700;
}


.information-text .legal-line {
  margin-top: 32px;
  padding-top: 26px;

  border-top:
    1px solid var(--line);

  color: var(--text);
}


/* =====================================================
   COLLECTION
   ===================================================== */

.collection {
  padding:
    82px 0
    105px;
}


.collection-header {
  display: flex;
  align-items: end;
  justify-content: space-between;

  gap: 30px;

  margin-bottom: 27px;
}


.collection-header h2 {
  margin:
    12px 0 0;

  color: var(--white);

  font-size:
    clamp(
      2.6rem,
      5vw,
      4.3rem
    );

  font-weight: 800;

  line-height: 0.9;

  letter-spacing: -0.07em;
}


.result-count {
  color: var(--muted);

  font-size: 0.76rem;
}


/* =====================================================
   GRILLE
   ===================================================== */

.authors-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 14px;
}


/* =====================================================
   CARTE
   ===================================================== */

.author-card {
  position: relative;

  min-height: 330px;

  display: flex;
  flex-direction: column;

  padding: 27px;

  overflow: hidden;

  border:
    1px solid var(--line);

  border-radius: var(--radius);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.045),
      rgba(255,255,255,0.012)
    ),
    var(--card);

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}


.author-card::after {
  content: "";

  position: absolute;

  width: 240px;
  height: 240px;

  top: -115px;
  right: -95px;

  border-radius: 50%;

  background:
    rgba(217, 255, 66, 0.035);

  pointer-events: none;
}


.author-card:hover {
  transform: translateY(-2px);

  border-color:
    rgba(217, 255, 66, 0.20);

  background:
    var(--card-hover);
}


.card-header {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;
}


.card-number {
  color: var(--dim);

  font-size: 0.67rem;
  font-weight: 800;

  letter-spacing: 0.15em;
}


.card-wikidata {
  display: grid;
  place-items: center;

  width: 32px;
  height: 32px;

  border:
    1px solid var(--line);

  border-radius: 50%;

  color: var(--muted);

  font-size: 0.72rem;

  text-decoration: none;
}


.card-wikidata:hover {
  color: var(--accent);

  border-color:
    rgba(217, 255, 66, 0.3);
}


.author-card h3 {
  position: relative;
  z-index: 2;

  margin:
    37px 0 0;

  color: var(--white);

  font-size:
    clamp(
      1.45rem,
      2.4vw,
      2rem
    );

  font-weight: 750;

  line-height: 1.08;

  letter-spacing: -0.045em;
}


.dates {
  position: relative;
  z-index: 2;

  display: flex;
  gap: 8px;

  margin-top: 12px;

  color: var(--muted);

  font-size: 0.92rem;
}


/* =====================================================
   OEUVRES
   ===================================================== */

.works {
  position: relative;
  z-index: 2;

  margin-top: 28px;
}


.works-title {
  margin-bottom: 7px;

  color: var(--dim);

  font-size: 0.65rem;
  font-weight: 750;

  letter-spacing: 0.10em;

  text-transform: uppercase;
}


.works ul {
  margin: 0;
  padding: 0;

  list-style: none;
}


.works li {
  border-top:
    1px solid var(--line);
}


.works li a {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  padding:
    8px 0;

  color: var(--text);

  font-size: 0.86rem;

  line-height: 1.4;

  text-decoration: none;
}


.works li a:hover {
  color: var(--accent);
}


.work-arrow {
  color: var(--dim);
}


.author-link {
  position: relative;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin-top: auto;
  padding-top: 23px;

  color: var(--muted);

  font-size: 0.76rem;

  text-decoration: none;
}


.author-link:hover {
  color: var(--accent);
}


/* =====================================================
   ÉTATS
   ===================================================== */

.loading,
.empty {
  grid-column: 1 / -1;

  padding: 75px 30px;

  border:
    1px dashed var(--line-strong);

  border-radius: var(--radius);

  text-align: center;
}


.empty h3 {
  margin:
    0 0 8px;

  color: var(--white);

  font-size: 1.3rem;
}


.empty p {
  margin: 0;

  color: var(--muted);

  font-size: 0.92rem;
}


/* =====================================================
   FOOTER
   ===================================================== */

.footer {
  padding:
    42px 0
    38px;

  border-top:
    1px solid var(--line);

  background:
    #050607;
}


.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 40px;
}


.footer-brand {
  display: flex;
  align-items: center;
  gap: 13px;
}


.footer-mark {
  width: 10px;
  height: 10px;

  flex: 0 0 auto;

  border-radius: 50%;

  background: var(--accent);

  box-shadow:
    0 0 22px
    rgba(217, 255, 66, 0.42);
}


.footer-name {
  color: var(--white);

  font-size: 0.78rem;
  font-weight: 850;

  letter-spacing: 0.16em;
}


.footer-description {
  margin-top: 2px;

  color: var(--muted);

  font-size: 0.78rem;
}


.footer-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 8px;
}


.footer-link {
  display: inline-flex;
  align-items: center;

  min-height: 38px;

  padding:
    0 13px;

  border:
    1px solid var(--line);

  border-radius: 999px;

  color: var(--muted);

  font-size: 0.72rem;

  text-decoration: none;

  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}


.footer-link:hover {
  color: var(--accent);

  border-color:
    rgba(217, 255, 66, 0.28);

  background:
    rgba(217, 255, 66, 0.04);
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 850px) {

  .about-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .authors-grid {
    grid-template-columns: 1fr;
  }

}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 600px) {

  .container {
    width:
      calc(100% - 32px);
  }


  .header-inner {
    min-height: 64px;
  }


  .header-title {
    font-size: 0.61rem;
    letter-spacing: 0.07em;
  }


  .hero {
    padding:
      62px 0
      58px;
  }


  .hero-kicker {
    margin-bottom: 22px;

    font-size: 0.61rem;

    line-height: 1.5;
  }


  .hero h1 {
    font-size:
      clamp(
        3.45rem,
        17vw,
        5rem
      );

    line-height: 0.88;
  }


  .hero-description {
    margin-top: 27px;

    font-size: 1.05rem;

    line-height: 1.7;
  }


  .search-box {
    margin-top: 32px;
  }


  .search-field input {
    height: 59px;

    font-size: 0.90rem;
  }


  .database-info {
    gap: 6px;

    font-size: 0.68rem;
  }


  .about {
    padding:
      62px 0;
  }


  .about-content h2 {
    font-size: 2.5rem;
  }


  .about-content .about-lead {
    font-size: 1.14rem;
  }


  .about-content p {
    font-size: 0.98rem;
  }


  .information {
    padding:
      62px 0;
  }


  .information-header h2 {
    font-size: 2.45rem;
  }


  .information-text p {
    font-size: 0.95rem;
  }


  .collection {
    padding:
      62px 0
      72px;
  }


  .collection-header {
    display: block;

    margin-bottom: 24px;
  }


  .collection-header h2 {
    font-size: 3rem;
  }


  .result-count {
    margin-top: 13px;

    font-size: 0.73rem;
  }


  .author-card {
    min-height: 315px;

    padding: 23px;
  }


  .author-card h3 {
    margin-top: 31px;

    font-size: 1.55rem;
  }


  .works {
    margin-top: 24px;
  }


  .works li a {
    font-size: 0.84rem;
  }


  .footer {
    padding:
      36px 0
      30px;
  }


  .footer-top {
    align-items: flex-start;

    flex-direction: column;

    gap: 24px;
  }


  .footer-links {
    justify-content: flex-start;

    width: 100%;
  }


  .footer-link {
    min-height: 37px;

    font-size: 0.68rem;
  }

}


/* =====================================================
   PETITS ÉCRANS
   ===================================================== */

@media (max-width: 390px) {

  .header-title {
    display: none;
  }


  .hero h1 {
    font-size: 3.35rem;
  }


  .database-info {
    display: block;

    line-height: 2;
  }


  .database-info .separator {
    display: none;
  }


  .database-info span {
    margin-right: 7px;
  }


  .footer-links {
    align-items: stretch;

    flex-direction: column;
  }


  .footer-link {
    justify-content: center;
  }

}


/* =====================================================
   ACCESSIBILITÉ
   ===================================================== */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }


  *,
  *::before,
  *::after {
    transition: none !important;
  }

       }