:root{
  --encre:#160E1B;
  --velours:#2B1830;
  --velours-clair:#3D2442;
  --or:#C9974A;
  --craie:#EDE2DC;
  --craie-doux:#B9A8AF;

  --display:"Fraunces",Georgia,serif;
  --texte:"Karla",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--encre);
  color:var(--craie);
  font-family:var(--texte);
  font-weight:300;
  font-size:17px;
  line-height:1.65;
}
img{max-width:100%;display:block}

.enveloppe{max-width:1040px;margin:0 auto;padding:0 28px}

a{color:var(--craie);text-decoration:none}
a:focus-visible{outline:2px solid var(--or);outline-offset:4px;border-radius:2px}

/* ---------- Bandeau des pages intérieures ---------- */
.bandeau{padding:2.2rem 0 0}
.retour{
  font-size:.9rem;
  color:var(--craie-doux);
  border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.retour:hover{color:var(--or);border-bottom-color:rgba(201,151,74,.4)}

/* ---------- Bannière ---------- */
.banniere{position:relative;overflow:hidden;line-height:0}
.banniere img{
  width:100%;
  height:clamp(300px,54vh,580px);
  object-fit:cover;
  object-position:50% 26%;
}
.banniere::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,
    rgba(22,14,27,.12) 0%,
    rgba(22,14,27,0) 38%,
    rgba(22,14,27,.75) 84%,
    var(--encre) 100%);
}

/* ---------- Ouverture ---------- */
.ouverture{padding:2.2rem 0 9vh;border-bottom:1px solid var(--velours-clair)}
.nom{
  font-family:var(--display);
  font-variation-settings:"opsz" 144,"SOFT" 20;
  font-weight:400;
  font-size:clamp(2.9rem,8.4vw,6.4rem);
  line-height:.98;
  letter-spacing:-.015em;
  margin:0;
  max-width:14ch;
}
.nom .esperluette{font-style:italic;font-weight:300;color:var(--or)}
.accroche{
  margin:2.2rem 0 0;
  max-width:36ch;
  color:var(--craie-doux);
  font-size:1.06rem;
}

/* ---------- Présentation ---------- */
.presentation{padding:6rem 0 5rem;display:grid;gap:3rem;grid-template-columns:1fr}
.presentation p{margin:0;max-width:62ch}
.presentation .anglais{color:var(--craie-doux)}
@media(min-width:800px){
  .presentation{grid-template-columns:1fr 1fr;gap:4.5rem}
}

/* ---------- Titres de section ---------- */
.section{padding:4.5rem 0;border-top:1px solid var(--velours-clair)}
.section h2{
  font-family:var(--display);
  font-variation-settings:"opsz" 48;
  font-weight:400;
  font-size:1.6rem;
  margin:0 0 1.9rem;
}

/* ---------- Grille des albums (accueil) ---------- */
.discographie{display:grid;gap:2.4rem;grid-template-columns:1fr;margin:0;padding:0;list-style:none}
@media(min-width:620px){.discographie{grid-template-columns:repeat(3,1fr)}}
.disque-carte{display:block}
.disque-carte .pochette{transition:opacity .25s}
.disque-carte:hover .pochette{opacity:.82}
.disque-carte h3{
  font-family:var(--display);
  font-variation-settings:"opsz" 36;
  font-weight:400;
  font-size:1.22rem;
  margin:.95rem 0 .1rem;
}
.disque-carte span{color:var(--craie-doux);font-size:.88rem}
.disque-carte.bientot{opacity:.45;pointer-events:none}

.pochette{background:var(--velours);aspect-ratio:1;border-radius:2px;overflow:hidden}
.pochette img{width:100%;height:100%;object-fit:cover}

/* ---------- Page album ---------- */
.disque{padding:3.5rem 0 5rem}
.disque-titre{
  font-family:var(--display);
  font-variation-settings:"opsz" 96;
  font-weight:400;
  font-size:clamp(2.4rem,6.4vw,4.4rem);
  line-height:1;
  letter-spacing:-.01em;
  margin:0 0 .45rem;
}
.disque-meta{margin:0 0 3rem;color:var(--craie-doux);font-size:.95rem}

.disque-corps{display:grid;gap:3rem;grid-template-columns:1fr}
@media(min-width:860px){
  .disque-corps{grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:4rem;align-items:start}
}
.note{margin:1.6rem 0 0;color:var(--craie-doux);font-size:.95rem;max-width:46ch}

.lecteur{margin-top:1.4rem;border-radius:10px;overflow:hidden;background:var(--velours)}
.lecteur iframe{display:block;border:0;width:100%;height:152px}

/* Dos de pochette : la liste des titres */
.faceb{margin:0;padding:0;list-style:none;border-top:1px solid var(--velours-clair)}
.faceb li{
  display:grid;
  grid-template-columns:1.6rem minmax(0,1fr) auto;
  gap:.9rem;
  align-items:baseline;
  padding:.78rem 0;
  border-bottom:1px solid var(--velours-clair);
}
.rang{color:var(--or);font-size:.78rem;font-variant-numeric:tabular-nums}
.titre{font-family:var(--display);font-variation-settings:"opsz" 24;font-weight:400;font-size:1.12rem}
.voix{display:block;font-family:var(--texte);font-size:.82rem;color:var(--craie-doux);margin-top:.1rem}
.duree{color:var(--craie-doux);font-size:.88rem;font-variant-numeric:tabular-nums}
.a-completer .titre{color:var(--craie-doux);font-style:italic}

/* ---------- Plateformes ---------- */
.plateformes{display:flex;flex-wrap:wrap;gap:.7rem;margin:0;padding:0;list-style:none}
.plateformes a{
  display:inline-block;
  padding:.62rem 1.25rem;
  border:1px solid var(--velours-clair);
  border-radius:999px;
  font-size:.95rem;
  transition:border-color .2s,color .2s;
}
.plateformes a:hover{border-color:var(--or);color:var(--or)}

/* ---------- Contact ---------- */
.courriel{
  font-family:var(--display);
  font-variation-settings:"opsz" 48;
  font-size:clamp(1.3rem,3.4vw,2rem);
  color:var(--or);
  border-bottom:1px solid rgba(201,151,74,.35);
}
.section .mention{margin:.9rem 0 0;color:var(--craie-doux);max-width:46ch;font-size:.95rem}

footer{padding:2.5rem 0 4rem;color:var(--craie-doux);font-size:.82rem;border-top:1px solid var(--velours-clair)}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}