/* ------------------------------
   Custom Font — Aubrey (Elegant Serif)
------------------------------ */
@font-face {
  font-family: 'Aubrey';
  src: url('../fonts/Aubrey-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Performance optimization */
}

/* ------------------------------
   Tokens (design system)
------------------------------ */
:root{
  --bg:#0a0a0a;        /* fond noir profond */
  --fg:#e6e6e6;        /* texte principal */
  --muted:#9a9a9a;     /* texte secondaire */
  --accent:#b31217;    /* rouge carmin */
  --accent-2:#6e0f13;  /* sang séché */
  --line:#141414;      /* séparateurs */
  --radius:14px;
  --w:1180px;
  --gap:16px;
  --step--1: 1rem; /* taille de police de base */
}

/* ------------------------------
   About (titre serif + lede + 2 colonnes + divider)
------------------------------ */
.about-title{
  font-family:"EB Garamond", Garamond, Georgia, serif; /* fallback serif */
  font-size:clamp(2.8rem, 7vw, 4.6rem);
  line-height:1.1;
  letter-spacing:.03em;
  margin:0 0 1rem;
}
.about-lede{
  font-family:"EB Garamond", Garamond, Georgia, serif;
  font-size:clamp(1rem, 1.2vw + .9rem, 1.25rem);
  line-height:1.95;
  letter-spacing:.06em;          /* rendu “spacieux” */
  color:#dcdcdc;                 /* léger contraste vs body */
  max-width:1100px;
  margin:.5rem 0 1.8rem;
}
.about-columns{
  display:grid; grid-template-columns:1fr 1fr; gap:2.2rem; max-width:1100px;
}
.about-columns p{ color:var(--muted); line-height:1.9; margin:0 0 1rem }

.about-divider{
  border:0; height:1px; margin:2rem 0 0;
  background:linear-gradient(to right, transparent, #2a2a2a, transparent);
}

/* ------------------------------
   Socials (Font Awesome) palette maison
------------------------------ */
.socials{ 
  display:flex; gap: 0.2em; flex-wrap:wrap 
}

.socials a{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .8rem;
  color:var(--fg);
  transition:background-color .2s, border-color .2s, color .2s;
}
.socials a i{ font-size:1.1rem; color:var(--fg); opacity:.9 }

.socials a:hover{

  border-color:var(--accent);
  color:var(--fg);
}
.socials a:hover i{
   color:var(--accent);
   transform:scale(1.1);
   transition: transform .2s ease;
  }


/* Size modifiers */
.socials.socials-sm a { padding: .3rem .6rem; }
.socials.socials-sm a i { font-size: .9rem; }

.socials.socials-lg a { padding: .8rem 1.2rem; }
.socials.socials-lg a i { font-size: 1.4rem; }

.socials.socials-xl a { padding: 1rem 1.5rem; }
.socials.socials-xl a i { font-size: 1.8rem; }

.music-preview-img {
  max-width: 100%;
  height: auto;
  border: 2px solid var(--line);
  box-shadow: 0 0 15px rgba(204, 31, 31, 0.5);
  display:inline-flex; align-items:center; gap:.5rem;
}

.music-preview {
  padding-top: 2rem;
  padding-bottom: 2rem;
}