/* ==========================================================
   FARQUEST PICTURES — GLOBAL DESIGN SYSTEM
   ========================================================== */

/* ----------------------------------------------------------
   1. TYPOGRAPHIE
   ---------------------------------------------------------- */

@font-face {
  font-family: "Park Lane NF";
  src: url("../fonts/parklane/ParkLaneNF.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

/* ----------------------------------------------------------
   2. DESIGN TOKENS
   ---------------------------------------------------------- */

:root {
  --fq-black: #070706;
  --fq-black-soft: #0d0d0b;
  --fq-charcoal: #11110f;
  --fq-charcoal-light: #181815;

  --fq-ivory: #f2ecdf;
  --fq-ivory-soft: #d8d0c1;
  --fq-muted: #9d968b;

  --fq-gold: #b99558;
  --fq-gold-light: #d1b174;
  --fq-gold-dark: #806234;

  --fq-line: rgba(185, 149, 88, 0.28);
  --fq-line-soft: rgba(242, 236, 223, 0.13);
  --fq-overlay: rgba(7, 7, 6, 0.76);

  --fq-font-display: "Park Lane NF", "Times New Roman", serif;
  --fq-font-body: "Atkinson Hyperlegible", Arial, sans-serif;

  --fq-container: 1440px;
  --fq-reading-width: 760px;

  --fq-space-xs: 0.5rem;
  --fq-space-sm: 1rem;
  --fq-space-md: 2rem;
  --fq-space-lg: 4rem;
  --fq-space-xl: 7rem;
  --fq-space-2xl: 11rem;

  --fq-radius-small: 2px;
  --fq-radius-round: 999px;

  --fq-transition-fast: 220ms ease;
  --fq-transition: 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --fq-transition-slow: 850ms cubic-bezier(0.2, 0.7, 0.2, 1);

  --fq-shadow:
    0 28px 80px rgba(0, 0, 0, 0.42);

  --fq-section-padding:
    clamp(6rem, 11vw, 11rem);
}

/* ----------------------------------------------------------
   3. FONDATIONS FARQUEST
   ---------------------------------------------------------- */

body.home-template,
body.tag-template,
body.post-template,
body.page-template {
  background: var(--fq-black);
  color: var(--fq-ivory);
}

.fq-container {
  width: min(
    calc(100% - clamp(2rem, 7vw, 8rem)),
    var(--fq-container)
  );
  margin-inline: auto;
}

.fq-section {
  position: relative;
  padding-block: var(--fq-section-padding);
}

.fq-section__number {
  position: absolute;
  top: clamp(2rem, 4vw, 4rem);
  right: clamp(1.5rem, 4vw, 5rem);
  z-index: 1;
  color: var(--fq-gold);
  font-family: var(--fq-font-display);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  opacity: 0.72;
}

.fq-eyebrow {
  margin: 0;
  color: var(--fq-gold);
  font-family: var(--fq-font-body) !important;
  font-size: clamp(0.68rem, 0.75vw, 0.8rem);
  font-weight: 400;
  letter-spacing: 0.28em;
  line-height: 1.3;
  text-transform: uppercase;
}

.fq-display {
  margin: 0;
  color: var(--fq-ivory);
  font-family: var(--fq-font-display) !important;
  font-size: clamp(3rem, 7vw, 8rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.96;
}

.fq-heading {
  margin: 0;
  color: var(--fq-ivory);
  font-family: var(--fq-font-display) !important;
  font-size: clamp(2.5rem, 5vw, 5.8rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
}

.fq-copy {
  color: var(--fq-muted);
  font-family: var(--fq-font-body);
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.75;
}

.fq-copy--large {
  color: var(--fq-ivory-soft);
  font-family: var(--fq-font-display);
  font-size: clamp(1.8rem, 3vw, 3.7rem);
  letter-spacing: 0.015em;
  line-height: 1.28;
}

/* ----------------------------------------------------------
   4. LIENS ET BOUTONS
   ---------------------------------------------------------- */

.fq-text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding-block: 0.7rem;
  color: var(--fq-ivory);
  font-family: var(--fq-font-body) !important;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-decoration: none;
  text-transform: uppercase;
}

.fq-text-link::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--fq-gold);
  content: "";
  transform: scaleX(0.22);
  transform-origin: left;
  transition: transform var(--fq-transition);
}

.fq-text-link:hover::after,
.fq-text-link:focus-visible::after {
  transform: scaleX(1);
}

.fq-text-link > span:last-child {
  color: var(--fq-gold);
  transition: transform var(--fq-transition-fast);
}

.fq-text-link:hover > span:last-child {
  transform: translateX(5px);
}

.fq-button {
  position: relative;
  display: inline-flex;
  min-height: 3.5rem;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  overflow: hidden;
  padding: 0.9rem 1.8rem;
  border: 1px solid var(--fq-gold);
  background: transparent;
  color: var(--fq-ivory);
  font-family: var(--fq-font-body);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    color var(--fq-transition-fast),
    border-color var(--fq-transition-fast);
}

.fq-button::before {
  position: absolute;
  inset: 0;
  background: var(--fq-gold);
  content: "";
  transform: translateY(102%);
  transition: transform var(--fq-transition);
}

.fq-button > span {
  position: relative;
  z-index: 1;
}

.fq-button:hover,
.fq-button:focus-visible {
  color: var(--fq-black);
}

.fq-button:hover::before,
.fq-button:focus-visible::before {
  transform: translateY(0);
}

/* ----------------------------------------------------------
   5. ORNEMENTS
   ---------------------------------------------------------- */

.fq-ornament {
  display: flex;
  width: min(240px, 65vw);
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.fq-ornament::before,
.fq-ornament::after {
  height: 1px;
  flex: 1;
  background: linear-gradient(
    90deg,
    transparent,
    var(--fq-gold)
  );
  content: "";
}

.fq-ornament::after {
  background: linear-gradient(
    90deg,
    var(--fq-gold),
    transparent
  );
}

.fq-ornament > span {
  width: 8px;
  height: 8px;
  border: 1px solid var(--fq-gold);
  transform: rotate(45deg);
}

.fq-rule {
  width: 100%;
  height: 1px;
  border: 0;
  background: var(--fq-line);
}

/* ----------------------------------------------------------
   6. MÉDIAS
   ---------------------------------------------------------- */

.fq-media {
  position: relative;
  overflow: hidden;
  background: var(--fq-black-soft);
}

.fq-media img,
.fq-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fq-media::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.04),
      rgba(0, 0, 0, 0.48)
    );
  content: "";
}

/* ----------------------------------------------------------
   7. CARTES
   ---------------------------------------------------------- */

.fq-card {
  position: relative;
}

.fq-card__visual {
  position: relative;
  overflow: hidden;
  background: var(--fq-black-soft);
}

.fq-card__visual img {
  transition:
    filter var(--fq-transition-slow),
    transform var(--fq-transition-slow);
}

.fq-card:hover .fq-card__visual img {
  transform: scale(1.045);
}

.fq-card__meta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--fq-gold);
  font-family: var(--fq-font-body);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.fq-card__title {
  margin: 1rem 0 0;
  color: var(--fq-ivory);
  font-family: var(--fq-font-display);
  font-size: clamp(2rem, 3vw, 4rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* ----------------------------------------------------------
   8. ACCESSIBILITÉ ET FOCUS
   ---------------------------------------------------------- */

.fq-home a:focus-visible,
.fq-home button:focus-visible,
.fq-button:focus-visible,
.fq-text-link:focus-visible {
  outline: 1px solid var(--fq-gold-light);
  outline-offset: 5px;
}

/* ----------------------------------------------------------
   9. ANIMATIONS
   ---------------------------------------------------------- */

@keyframes fqReveal {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fqFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fq-reveal {
  animation: fqReveal 900ms both;
}

.fq-fade {
  animation: fqFade 1100ms both;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .fq-reveal,
  .fq-fade {
    animation: none !important;
  }

  .fq-card__visual img,
  .fq-button::before,
  .fq-text-link::after {
    transition: none !important;
  }
}

/* ----------------------------------------------------------
   10. RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 760px) {
  :root {
    --fq-section-padding:
      clamp(5rem, 20vw, 7rem);
  }

  .fq-container {
    width: min(calc(100% - 2rem), var(--fq-container));
  }

  .fq-section__number {
    top: 1.5rem;
    right: 1rem;
  }
}