@font-face {
  font-family: "Geist";
  /* Police réduite aux caractères du site (19 Ko au lieu de 29). Voir outils/reduire-police.py. */
  src: url("fonts/geist-2.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Angle du liseré tournant du bouton principal : une variable typée s'anime, une variable simple non. */
@property --lg-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  color-scheme: dark;
  --bg: #070403;
  --cream: #fff4eb;
  --ink-2: #e6cbb8;
  --muted: #c9a68e;
  --copper: #ff8a4a;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--cream);
  background: var(--bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

html:has(.home),
.home {
  overscroll-behavior: none;
}

html.is-fitted,
html.is-fitted body {
  overflow: hidden;
}

::selection {
  background: rgb(255 106 31 / 0.4);
  color: #fff;
}

/* ——— Décor : quadrillage, lueurs, horizon, braises, grain ——— */

.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 50% 40%, rgb(255 106 31 / 0.13), rgb(255 106 31 / 0.03) 50%, transparent 72%),
    radial-gradient(140% 100% at 50% 42%, transparent 48%, rgb(0 0 0 / 0.62) 100%),
    var(--bg);
}

/* Un astre sombre dont on ne voit que le bord allumé, sous les liens. */
.scene::before {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--horizon, 90%);
  width: max(170vw, 1400px);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, #080302 96%, rgb(8 3 2 / 0));
  box-shadow:
    0 -1px 0 rgb(255 196 150 / 0.5),
    0 -14px 50px -6px rgb(255 106 31 / 0.5),
    0 -60px 140px -10px rgb(214 78 22 / 0.3),
    inset 0 22px 60px -20px rgb(255 106 31 / 0.28);
}

.scene__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(255 170 120 / 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 170 120 / 0.055) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 45%, #000 25%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 62% at 50% 45%, #000 25%, transparent 80%);
}

.scene__aurora::before,
.scene__aurora::after {
  content: "";
  position: absolute;
  width: 64vmax;
  height: 64vmax;
  border-radius: 50%;
}

.scene__aurora::before {
  left: -22vmax;
  top: 28%;
  background: radial-gradient(closest-side, rgb(255 122 48 / 0.1), transparent);
  animation: drift-a 42s ease-in-out infinite alternate;
}

.scene__aurora::after {
  right: -24vmax;
  top: -16%;
  background: radial-gradient(closest-side, rgb(255 184 128 / 0.07), transparent);
  animation: drift-b 50s ease-in-out infinite alternate;
}

@keyframes drift-a {
  to {
    transform: translate3d(16vw, -8vh, 0) scale(1.12);
  }
}

@keyframes drift-b {
  to {
    transform: translate3d(-12vw, 14vh, 0) scale(0.92);
  }
}

.scene__embers {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene__cursor {
  position: absolute;
  inset: 0;
  background: radial-gradient(520px circle at var(--cx, 50%) var(--cy, -40%), rgb(255 138 74 / 0.08), transparent 70%);
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}

.scene.is-pointing .scene__cursor {
  opacity: 1;
}

.scene__grain {
  position: absolute;
  inset: 0;
  background: url("grain.png") repeat;
  background-size: 128px 128px;
  opacity: 0.07;
  mix-blend-mode: overlay;
}

/* ——— Photo en verre 3D, nom, boutons en verre liquide ——— */

.page {
  position: relative;
  z-index: 1;
  width: min(440px, 100% - 32px);
  min-height: 100vh;
  min-height: 100dvh;
  margin-inline: auto;
  padding-block: max(clamp(10px, 2.2dvh, 32px), env(safe-area-inset-top))
    max(clamp(10px, 2.2dvh, 32px), env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(12px, 2.8dvh, 36px);
}

.profile {
  /* Une seule mesure commande tout : hauteur de la photo, arrondi, place du verre autour. */
  --ph: clamp(96px, 32dvh - 68px, 228px);
  display: grid;
  justify-items: center;
  gap: calc(clamp(8px, 1.6dvh, 18px) + var(--ph) * 0.06);
}

/* La photo garde sa place dans la page ; le bloc de verre 3D déborde autour sans pousser personne. */
.profile__stage {
  position: relative;
  height: var(--ph);
  aspect-ratio: 4 / 5;
  animation: rise 0.8s var(--ease-out) 0.05s backwards;
}

/* Photo entière en 4:5 plutôt qu'en rond : sa tête touche le bord de la photo d'origine,
   un rond centré sur lui oblige à zoomer sur le visage. */
.profile__photo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--ph) / 12);
  object-fit: cover;
  box-shadow:
    0 0 0 3px #0a0503,
    0 0 0 4.5px rgb(255 138 74 / 0.75),
    0 0 40px -4px rgb(255 106 31 / 0.5),
    0 20px 40px -18px rgb(0 0 0 / 0.9);
  transition: opacity 0.7s var(--ease);
}

.profile__glass {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220%;
  height: 136%;
  translate: -50% -50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}

.profile__glass canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Le rendu 3D a pris la main : la photo HTML s'efface dessous, au pixel près. */
.profile__stage.is-3d .profile__photo {
  opacity: 0;
}

.profile__stage.is-3d .profile__glass {
  opacity: 1;
}

.profile__name {
  position: relative;
  z-index: 1;
  margin: 0;
  perspective: 600px;
  font-size: clamp(24px, 3.9dvh, 34px);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--cream);
}

/* Les mots arrivent l'un après l'autre (codes LARPING) ; sans JavaScript, le nom est là, point. */
.profile__name .w {
  display: inline-block;
  white-space: nowrap;
}

.profile__name .w > span {
  display: inline-block;
  animation: word-in 0.9s var(--ease) backwards;
  animation-delay: calc(0.2s + var(--i) * 90ms);
}

.links {
  display: grid;
  gap: clamp(8px, 1.3dvh, 12px);
}

/* Verre liquide (codes LARPING) : fond teinté et flou, liseré clair sur le pourtour, reflet qui
   suit le doigt, et une lumière qui traverse la plaque de temps en temps. */
.link {
  --n: 0;
  /* --c = la couleur du site, relevée sur le site en ligne (voir CLAUDE.md). */
  --c: 255 138 74;
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 1px;
  min-height: clamp(48px, 8.2dvh, 68px);
  padding: clamp(5px, 1dvh, 8px) 18px;
  border-radius: 18px;
  text-align: center;
  color: inherit;
  text-decoration: none;
  background:
    linear-gradient(
      160deg,
      rgb(255 255 255 / 0.1) 0%,
      rgb(255 255 255 / 0.03) 34%,
      rgb(255 255 255 / 0.012) 62%,
      rgb(255 236 222 / 0.06) 100%
    ),
    linear-gradient(180deg, rgb(var(--c) / 0.14), rgb(var(--c) / 0.04)),
    rgb(20 11 7 / 0.5);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.3),
    inset 0 -1px 0 rgb(255 255 255 / 0.06),
    inset 0 14px 24px -18px rgb(255 255 255 / 0.22),
    inset 0 -16px 28px -20px rgb(var(--c) / 0.5),
    0 0 24px -14px rgb(var(--c) / 0.6),
    0 18px 40px -22px rgb(0 0 0 / 0.8),
    0 0 0 0.5px rgb(255 255 255 / 0.06);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  transform: perspective(700px) translateY(var(--lift, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
    scale(var(--sc, 1));
  transition:
    transform 0.6s var(--spring),
    box-shadow 0.4s var(--ease);
  animation: rise 0.7s var(--ease-out) backwards;
  animation-delay: calc(0.28s + var(--n) * 0.06s);
}

.link.is-live {
  transition:
    transform 0.14s linear,
    box-shadow 0.4s var(--ease);
}

/* Chaque site garde sa couleur : c'est elle qui teinte le verre, le liseré et la lueur. */
.link--lbcx { --c: 255 106 31; }        /* lbcx.fr — orange */
.link--rocket { --c: 226 233 245; }     /* lbcxrocket.fr — noir et blanc */
.link--trendtool { --c: 255 163 61; }   /* trendtool.fr — orange, éclairci pour ne pas doubler LBCX */
.link--massresell { --c: 0 188 204; }   /* massresell.fr — cyan Vinted */
.link--alibuy { --c: 132 104 255; }     /* alibuy.fr — violet */
.link--vinpix { --c: 18 199 158; }      /* vinpix.fr — vert émeraude */

.link:nth-child(2) { --n: 1; }
.link:nth-child(3) { --n: 2; }
.link:nth-child(4) { --n: 3; }
.link:nth-child(5) { --n: 4; }
.link:nth-child(6) { --n: 5; }

/* Le liseré : un dégradé tout autour, découpé en cadre par le masque. */
.link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1.2px;
  pointer-events: none;
  background: linear-gradient(
    140deg,
    rgb(255 255 255 / 0.55),
    rgb(255 255 255 / 0.07) 28%,
    rgb(var(--c) / 0.14) 52%,
    rgb(var(--c) / 0.75) 82%,
    rgb(255 255 255 / 0.28)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Le reflet (il suit la souris) et la lumière qui passe sur le verre. */
.link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(360px circle at var(--mx, 24%) var(--my, -40%), rgb(255 255 255 / 0.12), transparent 46%),
    linear-gradient(105deg, transparent 40%, rgb(255 232 214 / 0.13) 50%, transparent 60%);
  background-size:
    100% 100%,
    300% 100%;
  background-repeat: no-repeat;
  background-position:
    0 0,
    150% 0;
  animation: glass-sweep 9s var(--ease) infinite;
  animation-delay: calc(1.6s + var(--n) * 0.14s);
}

.link__name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--cream);
}

/* Un cran plus clair que le reste : sur le verre, le texte doit rester à 7:1 de contraste. */
.link__kind {
  font-size: 13.5px;
  line-height: 1.3;
  color: #e2cec0;
}

/* La formation : verre teinté orange et liseré qui tourne, comme les pièces maîtresses de LARPING. */
.link--main {
  background:
    linear-gradient(
      160deg,
      rgb(255 255 255 / 0.16) 0%,
      rgb(255 255 255 / 0.05) 38%,
      rgb(255 255 255 / 0.02) 62%,
      rgb(255 210 180 / 0.1) 100%
    ),
    linear-gradient(180deg, rgb(var(--c) / 0.34), rgb(var(--c) / 0.16));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.4),
    inset 0 -1px 0 rgb(255 170 120 / 0.14),
    inset 0 16px 26px -20px rgb(255 255 255 / 0.3),
    inset 0 -18px 30px -22px rgb(var(--c) / 0.6),
    0 0 34px -10px rgb(var(--c) / 0.65),
    0 18px 40px -22px rgb(0 0 0 / 0.8);
}

.link--main::before {
  padding: 1.5px;
  background: conic-gradient(
    from var(--lg-a),
    rgb(255 255 255 / 0.8),
    rgb(var(--c) / 0.3) 9%,
    rgb(255 255 255 / 0.05) 24%,
    rgb(var(--c) / 0.9) 42%,
    rgb(255 255 255 / 0.06) 60%,
    rgb(var(--c) / 0.55) 80%,
    rgb(255 255 255 / 0.8)
  );
  animation: lg-spin 7s linear infinite;
}

.link--main .link__kind {
  color: #ffe4d2;
}

@media (hover: hover) {
  .link:hover {
    --lift: -2px;
    --sc: 1.012;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.45),
      inset 0 -1px 0 rgb(255 255 255 / 0.08),
      inset 0 14px 24px -18px rgb(255 255 255 / 0.3),
      inset 0 -16px 28px -20px rgb(var(--c) / 0.7),
      0 0 34px -10px rgb(var(--c) / 0.6),
      0 22px 46px -24px rgb(0 0 0 / 0.85);
  }

  .link--main:hover {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.55),
      inset 0 -1px 0 rgb(255 170 120 / 0.2),
      inset 0 16px 26px -20px rgb(255 255 255 / 0.36),
      inset 0 -18px 30px -22px rgb(var(--c) / 0.75),
      0 0 44px -8px rgb(var(--c) / 0.8),
      0 22px 46px -24px rgb(0 0 0 / 0.85);
  }
}

.link:active {
  --sc: 0.975;
  --lift: 0px;
  transition:
    transform 0.14s var(--ease),
    box-shadow 0.4s var(--ease);
}

/* Au doigt : un flou plus léger. Le décor bouge derrière le verre, et chaque pixel flouté est
   recalculé à chaque image — c'est ce qui chauffe un téléphone. */
@media (hover: none) {
  .link {
    -webkit-backdrop-filter: blur(12px) saturate(170%);
    backdrop-filter: blur(12px) saturate(170%);
  }
}

/* Très petits téléphones : deux explications passent sur deux lignes, la photo rend la place. */
@media (max-width: 350px) {
  .profile {
    --ph: clamp(88px, 32dvh - 80px, 228px);
  }

  .link {
    padding-inline: 12px;
  }
}

.link:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}

/* Les filtres de réfraction du verre (Chrome, Edge, Android) vivent ici, invisibles. */
.glass-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

@keyframes rise {
  from {
    opacity: 0;
    translate: 0 12px;
  }
}

@keyframes word-in {
  from {
    opacity: 0;
    transform: translateY(0.55em) rotateX(-40deg);
    filter: blur(8px);
  }
}

@keyframes lg-spin {
  to {
    --lg-a: 360deg;
  }
}

@keyframes glass-sweep {
  0%,
  72% {
    background-position:
      0 0,
      150% 0;
  }

  100% {
    background-position:
      0 0,
      -50% 0;
  }
}

/* Aucune animation du tout, plutôt qu'une animation d'1 ms : un onglet en arrière-plan gèle
   le temps des animations, et l'élément resterait figé à sa première image (invisible). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}

/* ——— Pages de texte (mentions légales, 404) ——— */

.doc {
  position: relative;
  z-index: 1;
  width: min(760px, 100% - 32px);
  margin-inline: auto;
  padding-block: clamp(28px, 7vh, 80px) 48px;
}

.doc__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
}

.doc__back:hover {
  color: var(--cream);
}

.doc__panel {
  padding: clamp(22px, 5vw, 44px);
  border-radius: 20px;
  background-color: rgb(20 10 6 / 0.72);
  box-shadow:
    inset 0 0 0 1px rgb(255 170 120 / 0.14),
    0 30px 70px -30px rgb(0 0 0 / 0.95);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
}

.doc h1 {
  margin: 0 0 6px;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.6rem);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.doc h2 {
  margin: 34px 0 10px;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.doc p,
.doc dd {
  margin: 0 0 12px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
}

.doc .doc__updated {
  font-size: 13px;
  color: var(--muted);
}

.doc dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px 24px;
  margin: 0;
}

@media (min-width: 640px) {
  .doc dl {
    grid-template-columns: 190px minmax(0, 1fr);
  }
}

.doc dt {
  padding-top: 3px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.doc a {
  color: #ffc59c;
  text-underline-offset: 3px;
}

.doc--lost {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
}

.doc--lost .doc__panel {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

.doc a.doc__home {
  display: inline-grid;
  place-items: center;
  height: 48px;
  margin-top: 16px;
  padding: 0 22px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cream);
  text-decoration: none;
  background-image: linear-gradient(180deg, rgb(255 106 31 / 0.24), rgb(255 106 31 / 0.1));
  box-shadow: inset 0 0 0 1px rgb(255 150 95 / 0.55);
}