/* ==========================================================================
   Loubar — portfolio one-pager
   Palette Discord : fond charbon (#1e1f22 / #2b2d31), lavande (#e3e5ff),
   blurple (#5865f2), rouge (#ed4245)
   ========================================================================== */

:root {
  /* Palette tirée de la bannière : pervenche -> lavande grisé, texte charbon Discord */
  --bg-top: #c4ceff;          /* pervenche (haut) */
  --bg-mid: #d5daf7;
  --bg-bottom: #e6e1e9;       /* lavande grisé (bas) */
  --text: #1e1f22;            /* charbon Discord */
  --text-muted: rgba(30, 31, 34, 0.55);
  --lavender: #e3e5ff;
  --lavender-2: #a5abff;
  --blurple: #5865f2;
  --blurple-dark: #4752c4;
  --red: #ed4245;
  --card: #ffffff;
  --icon-bg: #1e1f22;         /* pastilles sombres sur fond clair */
  --icon-fill: #ffffff;
  --shadow: 0 1rem 2.5rem rgba(40, 45, 90, .18);

  --font-title: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-stat: "IBM Plex Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --spacing: 1.5rem;
  --padding-h: 6rem;
  --padding-v: 6rem;
  --width: 58rem;
  --gap: 3rem;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, p, ul, li { margin: 0; padding: 0; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .25s ease, transform .25s ease, background-color .25s ease; }

/* Échelle typographique responsive (même logique que le site de référence) */
html { font-size: 18pt; }
@media (max-width: 1680px) { html { font-size: 15pt; } }
@media (max-width: 1280px) { html { font-size: 13pt; } }
@media (max-width: 1024px) { html { font-size: 12pt; } }
@media (max-width: 736px)  { html { font-size: 11pt; } :root { --padding-h: 2rem; --padding-v: 4rem; --gap: 1.5rem; } }
@media (max-width: 480px)  { html { font-size: 10pt; } :root { --padding-h: 1.25rem; } }

body {
  min-height: 100vh;
  min-width: 320px;
  overflow-x: hidden;
  word-wrap: break-word;
  line-height: 1;
  background-color: var(--bg-bottom);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
}

/* Dégradé de fond fixe (charbon -> blurple), identique au comportement Carrd */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  height: 100vh;
  width: 100vw;
  pointer-events: none;
  z-index: 0;
  background-image: linear-gradient(165deg, var(--bg-top) 0%, var(--bg-mid) 55%, var(--bg-bottom) 100%);
}

.site-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
}

.site-main {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  transition: opacity .625s ease-in-out;
}
body.is-loading .site-main { opacity: 0; }

.site-main > .inner {
  width: calc(var(--width) + var(--padding-h) * 2);
  max-width: 100%;
  padding: var(--padding-v) var(--padding-h);
}
.site-main > .inner > * { margin-top: var(--spacing); margin-bottom: var(--spacing); }
.site-main > .inner > :first-child { margin-top: 0; }
.site-main > .inner > :last-child { margin-bottom: 0; }

/* ---- Hero ---- */
.hero > * + * { margin-top: var(--spacing); }
.hero .lead { margin-top: 1rem; }

.avatar .frame {
  display: inline-block;
  width: 8rem;
  height: 8rem;
  border-radius: 100%;
  overflow: hidden;
}
/* Sphère lavande floutée (remplace l'image du site de référence) */
.avatar .orb {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background:
    radial-gradient(circle at 38% 32%, #ffffff 0%, var(--lavender) 22%, var(--lavender-2) 55%, var(--blurple) 100%);
  filter: blur(1.5px) saturate(1.05);
}

.title {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 3.25rem;
  line-height: 1.125;
  text-align: left;
  color: var(--text);
}
.lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 2;
  text-align: left;
  color: var(--text);
}

/* ---- Preuves chiffrées ---- */
.stat {
  font-family: var(--font-stat);
  font-weight: 500;
  font-size: 1.625rem;
  line-height: 1.875;
  letter-spacing: -0.05rem;
  text-align: center;
  color: var(--text);
}

.gallery { text-align: center; }
.gallery .frame {
  display: inline-block;
  width: 100%;
  border-radius: 1.125rem;
  overflow: hidden;
  background: var(--card);
}
.gallery img { width: 100%; height: auto; }

/* Placeholder affiché tant que la capture n'existe pas */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1583 / 410;
  background: var(--card);
  color: #4e5058;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
  border: 2px dashed #c4c9d4;
  border-radius: 1.125rem;
}
.placeholder.tall { aspect-ratio: 1319 / 580; }
.placeholder small { font-size: .8rem; opacity: .7; }

/* ---- Titres de section ---- */
.heading {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 3.25rem;
  line-height: 1.125;
  text-align: center;
  color: var(--text);
}

/* ---- Colonnes de vidéos 9:16 ---- */
.columns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
}
.columns > * { flex: 1 1 0; min-width: 0; }

.video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: .5rem;
  overflow: hidden;
  background: #000;
}
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: .5rem;
}
/* Placeholder vidéo (aucun ID YouTube renseigné) */
.video.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.video.empty svg {
  width: 3rem;
  height: 3rem;
  fill: rgba(255,255,255,.35);
}

@media (max-width: 736px) {
  .columns { flex-direction: column; }
  .columns > * { width: 100%; }
  .video { max-width: 22rem; margin: 0 auto; }
}

/* ---- Footer ---- */
.footer > * + * { margin-top: 2rem; }

.icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1.375rem;
}
.icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 100%;
  background: var(--icon-bg);
}
.icons a:hover { background: var(--blurple); transform: translateY(-2px); }
.icons svg {
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  fill: var(--icon-fill);
}

.copyright {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 2;
  text-align: left;
  color: var(--text);
}

/* ---- Animations d'apparition (fade + translate, comme Carrd) ---- */
.reveal {
  opacity: 0;
  transform: translateY(.9rem);
  transition: opacity .625s ease, transform .625s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-group .reveal:nth-child(2) { transition-delay: .1s; }
.reveal-group .reveal:nth-child(3) { transition-delay: .2s; }
.reveal-group .reveal:nth-child(4) { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Preuves de résultats
   ========================================================================== */
.proof-caption {
  font-family: var(--font-stat);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.6;
  letter-spacing: -0.03rem;
  text-align: center;
  color: var(--blurple-dark);
  margin-bottom: 0.75rem !important;
}
.proof-caption + .gallery { margin-top: 0; }
.gallery .frame { box-shadow: var(--shadow); }

/* ==========================================================================
   Carrousel vidéo (scroll-snap horizontal, vidéos 9:16)
   ========================================================================== */
.carousel {
  position: relative;
  --slide-w: 16rem;
  --slide-gap: 1.5rem;
}
.carousel .track {
  display: flex;
  gap: var(--slide-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 0.5rem 0 1rem;
  outline: none;
}
.carousel .track::-webkit-scrollbar { display: none; }
.carousel .slide {
  flex: 0 0 var(--slide-w);
  scroll-snap-align: center;
  margin: 0;
}
.carousel .slide .video {
  aspect-ratio: 9 / 16;
  border-radius: .75rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  background-size: cover;
  background-position: center;
}
.carousel .slide .video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: .75rem;
  background: #000;
}
.carousel .slide .video .play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%);
  transition: opacity .3s ease;
}
.carousel .slide .video .play span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 100%;
  background: rgba(255,255,255,.92);
  color: #1e1f22;
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.35);
  transition: transform .25s ease, background-color .25s ease;
}
.carousel .slide .video:hover .play span { transform: scale(1.06); background: var(--blurple); }
.carousel .slide .video:hover .play svg { fill: #fff; }
.carousel .slide .video .play svg { width: 1.6rem; height: 1.6rem; fill: #1e1f22; margin-left: .15rem; }
.carousel .slide .video.is-playing .play { opacity: 0; pointer-events: none; }
.carousel figcaption {
  margin-top: .75rem;
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: 1.4;
  text-align: center;
  color: var(--text-muted);
}

.carousel-btn {
  position: absolute;
  top: calc(var(--slide-w) * 16 / 9 / 2 + .5rem);
  transform: translateY(-50%);
  z-index: 2;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 100%;
  background: var(--icon-bg);
  color: var(--icon-fill);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  transition: background-color .25s ease, transform .25s ease, opacity .25s ease;
}
.carousel-btn:hover { background: var(--blurple); }
.carousel-btn.prev { left: -1.5rem; }
.carousel-btn.next { right: -1.5rem; }
.carousel-btn svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.carousel-btn[disabled] { opacity: .35; cursor: default; }

@media (max-width: 736px) {
  .carousel { --slide-w: 70vw; --slide-gap: 1rem; }
  .carousel-btn.prev { left: .25rem; }
  .carousel-btn.next { right: .25rem; }
}

/* ==========================================================================
   Photo de profil, bouton, page contact
   ========================================================================== */
.avatar .frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; border-radius: 100%; display: block; }
.avatar .frame { box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .6), var(--shadow); }

.actions { margin-top: 1.25rem; }
.button {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.6rem;
  border-radius: 100rem;
  background: var(--icon-bg);
  color: var(--icon-fill);
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  box-shadow: var(--shadow);
}
.button:hover { background: var(--blurple); transform: translateY(-2px); color: #fff; }
.button svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }

.contact-page .site-wrapper { min-height: 100vh; }
.contact-page .site-main > .inner { --width: 40rem; }
.back { display: inline-block; color: var(--text-muted); font-size: 1rem; text-decoration: none; }
.back:hover { color: var(--text); }
.contact-list { display: grid; gap: 1rem; }
.contact-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  border-radius: 1.125rem;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .8);
  text-decoration: none;
  color: var(--text);
  transition: background-color .25s ease, transform .25s ease, border-color .25s ease;
}
.contact-card:hover { background: rgba(255, 255, 255, .85); border-color: var(--blurple); transform: translateY(-2px); box-shadow: var(--shadow); }
.contact-card .ico {
  flex: 0 0 3rem;
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 100%;
  background: var(--icon-bg);
}
.contact-card .ico svg { width: 1.6rem; height: 1.6rem; fill: var(--icon-fill); }
.contact-card .label { font-family: var(--font-body); font-size: .9rem; color: var(--text-muted); line-height: 1.4; }
.contact-card .value { font-family: var(--font-title); font-weight: 500; font-size: 1.2rem; line-height: 1.3; word-break: break-all; }

/* ---- Section contact (sur la page d'accueil) ---- */
.contact > * + * { margin-top: var(--spacing); }
.lead.center { text-align: center; max-width: 34rem; margin-left: auto; margin-right: auto; }
.contact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 44rem; margin-left: auto; margin-right: auto; }
@media (max-width: 736px) { .contact-list { grid-template-columns: 1fr; } }
button.contact-card { font: inherit; cursor: pointer; text-align: left; width: 100%; position: relative; }
.contact-card .hint {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: .8rem;
  color: var(--text-muted);
  padding: .3rem .6rem;
  border-radius: 100rem;
  border: 1px solid rgba(30, 31, 34, .15);
  white-space: nowrap;
}
.contact-card.copied .hint { color: #fff; background: var(--blurple); border-color: var(--blurple); }
.icons button {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border: 0; border-radius: 100%;
  background: var(--icon-bg); cursor: pointer; padding: 0;
  transition: background-color .25s ease, transform .25s ease;
}
.icons button:hover { background: var(--blurple); transform: translateY(-2px); }
html { scroll-behavior: smooth; }