/* =========================================================
   NAÏM LE POÈTE — DOSSIER SPECTACLE 2026
   Charte graphique alignée sur naimzriouel.fr
   ========================================================= */

/* ---- Kobe (fournie par l'artiste) ----
   Fichiers disponibles :
     - Kobe-black.otf          (900)
     - Kobe-blackoblique.otf   (900 italic)
     - Kobe-boldoblique.otf    (700 italic)
   Fallbacks : Bebas Neue / Oswald pour regular & bold upright
*/
@font-face {
  font-family: 'Kobe';
  src: url('fonts/Kobe-black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kobe';
  src: url('fonts/Kobe-blackoblique.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Kobe';
  src: url('fonts/Kobe-boldoblique.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Palette — tirée de src/styles/global.css du repo du site */
  --bordeaux: #6E1F28;
  --bordeaux-hover: #8A2A35;
  --bleu: #284B63;
  --bleu-hover: #335D78;
  --vert: #4A6B4A;
  --sable: #EDE6DB;     /* fond dominant site */
  --ocre: #B67A2D;
  --olive: #5E6B4A;
  --noir: #1F1A17;
  --ivoire: #FAF7F2;
  --gris: #7A7A6B;

  /* Alias tactiles pour ce dossier */
  --papier: #EDE6DB;
  --papier-chaud: #E4D8C4;
  --papier-creme: #FAF7F2;
  --encre: #1F1A17;
}

@page { size: A4 portrait; margin: 0; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: 'EB Garamond', Georgia, serif;
  color: var(--encre);
  background: #2B2622;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 11pt;
  line-height: 1.5;
}

/* Classes utilitaires typo */
.kobe  { font-family: 'Kobe', 'Bebas Neue', 'Oswald', 'Arial Black', sans-serif; font-weight: 900; letter-spacing: 0.02em; }
.serif { font-family: 'EB Garamond', Georgia, serif; }
.italic { font-style: italic; }

/* --- A4 PAGE SHELL ---------------------------------------- */
.deck {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14mm;
  padding: 14mm 0 28mm;
}

.page {
  position: relative;
  width: 210mm;
  height: 297mm;
  background: var(--papier);
  overflow: hidden;
  box-shadow: 0 2mm 8mm rgba(0,0,0,.35), 0 .5mm 1mm rgba(0,0,0,.2);
  color: var(--encre);
  /* Grain papier très discret */
  background-image:
    radial-gradient(1200px 800px at 15% -10%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(900px 600px at 110% 110%, rgba(110,31,40,.04), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.10  0 0 0 0 0.09  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.page.ivoire  { background-color: var(--ivoire); }
.page.noir    { background-color: var(--noir); color: var(--papier); }
.page.bordeaux{ background-color: var(--bordeaux); color: var(--papier); }
.page.bleu    { background-color: var(--bleu); color: var(--papier); }

/* --- HEADER / FOOTER --------------------------------------- */
.pg-chrome {
  position: absolute;
  left: 16mm;
  right: 16mm;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Kobe', 'Bebas Neue', sans-serif;
  font-weight: 900;
  font-size: 8pt;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bleu);
  opacity: 0.8;
}
.pg-head { top: 10mm; }
.pg-foot { bottom: 10mm; }
.pg-chrome.on-dark { color: rgba(237,230,219,.85); }

.pg-num {
  display: inline-flex;
  align-items: center;
  gap: 2mm;
}
.pg-num .bar {
  width: 8mm; height: 1px; background: currentColor; opacity: .5;
}

/* --- DOTTED BAND (amazigh trace) --------------------------- */
.dots-band {
  position: absolute; left: 16mm; right: 16mm; height: 3mm;
  background-image: radial-gradient(circle, currentColor 0.5mm, transparent 0.6mm);
  background-size: 2.4mm 2.4mm;
  background-position: 0 50%;
  background-repeat: repeat-x;
  color: var(--ocre);
  opacity: .5;
}
.dots-band.band-top { top: 14mm; }
.dots-band.band-bot { bottom: 14mm; }
.dots-band.bord { color: var(--bordeaux); }
.dots-band.bleu { color: var(--bleu); }

/* --- AMAZIGH CORNER FILIGREE ------------------------------- */
.amazigh-corner {
  position: absolute;
  width: 40mm; height: 40mm;
  color: var(--bordeaux);
  opacity: .10;
  pointer-events: none;
}
.amazigh-corner svg { width: 100%; height: 100%; fill: currentColor; }
.amazigh-corner.tr { top: 12mm; right: 12mm; }
.amazigh-corner.bl { bottom: 12mm; left: 12mm; transform: rotate(180deg); }
.amazigh-corner.tl { top: 12mm; left: 12mm; transform: rotate(-90deg); }
.amazigh-corner.br { bottom: 12mm; right: 12mm; transform: rotate(90deg); }

/* --- SINGLE SYMBOL INLINE ---------------------------------- */
.sym {
  display: inline-block;
  vertical-align: middle;
  color: var(--ocre);
}
.sym svg { width: 1em; height: 1em; fill: currentColor; }

/* --- TYPOGRAPHIE -------------------------------------------- */
.eyebrow {
  font-family: 'Kobe', 'Bebas Neue', sans-serif;
  font-weight: 900;
  font-size: 8.5pt;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bordeaux);
  text-align: center;
}
.eyebrow.left  { text-align: left; }
.eyebrow.right { text-align: right; }
.eyebrow.bleu { color: var(--bleu); }
.eyebrow.ocre { color: var(--ocre); }
.eyebrow.sable { color: var(--papier); }

h1.display {
  font-family: 'Kobe', 'Bebas Neue', 'Arial Black', sans-serif;
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

h2.title {
  font-family: 'Kobe', 'Bebas Neue', sans-serif;
  font-weight: 900;
  font-size: 34pt;
  line-height: 0.95;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--bleu);
  text-align: center;
}
h2.title.left  { text-align: left; }
h2.title.right { text-align: right; }
h2.title .accent { color: var(--bordeaux); }

h3.sub {
  font-family: 'Kobe', 'Bebas Neue', sans-serif;
  font-weight: 900;
  font-size: 13pt;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bordeaux);
}

.prose p {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 10.5pt;
  line-height: 1.58;
  margin-bottom: 3.2mm;
  color: var(--encre);
  text-wrap: pretty;
  hyphens: auto;
}
.prose p strong { font-weight: 700; color: var(--bordeaux); }

/* Lien vers le site (biographie, contacts) */
.site-link {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 11pt;
  color: var(--bordeaux);
  text-decoration: none;
  border-bottom: 0.5pt dotted currentColor;
  padding-bottom: 1pt;
  letter-spacing: 0.02em;
}
.site-link:hover { opacity: .7; }
.on-dark .site-link { color: var(--ocre); }
.prose p em { font-style: italic; }

.pullquote {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 14pt;
  line-height: 1.45;
  color: var(--bordeaux);
  border-left: 3px solid var(--bordeaux);
  padding-left: 5mm;
  margin: 4mm 0;
  text-wrap: balance;
}
.on-dark .pullquote { color: var(--papier); border-left-color: var(--ocre); }

/* --- IMAGES ------------------------------------------------- */
.ph {
  position: relative;
  overflow: hidden;
  background: #2a2522;
}
.ph img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ph.duotone img {
  filter: grayscale(1) contrast(1.05);
  mix-blend-mode: luminosity;
}
.ph::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
}

/* --- RULES & DIVIDERS -------------------------------------- */
.rule {
  height: 1px;
  background: var(--encre);
  opacity: .18;
  margin: 4mm 0;
}
.rule.thick { height: 3px; opacity: 1; background: var(--bordeaux); width: 16mm; margin-left: auto; margin-right: auto; }
.rule.thick.left  { margin-left: 0; margin-right: auto; }
.rule.thick.right { margin-left: auto; margin-right: 0; }
.rule.thick.bleu { background: var(--bleu); }
.rule.thick.ocre { background: var(--ocre); }

/* --- BADGES / TAGS ----------------------------------------- */
.tag {
  display: inline-block;
  font-family: 'Kobe', 'Bebas Neue', sans-serif;
  font-weight: 900;
  font-size: 7.5pt;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 1.3mm 2.8mm;
  border: 0.75pt solid currentColor;
  color: var(--bordeaux);
  border-radius: 1mm;
}
.tag.solid { background: var(--bordeaux); color: var(--ivoire); border-color: transparent; }
.tag.bleu  { color: var(--bleu); }
.tag.ocre  { color: var(--ocre); }
.tag.olive { color: var(--olive); }

/* --- LAYOUT HELPERS ---------------------------------------- */
.frame {
  position: absolute;
  left: 16mm; right: 16mm;
  top: 22mm; bottom: 22mm;
}
.col-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; }
.col-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6mm; }

/* --- TOOLBAR (screen only) --------------------------------- */
.toolbar {
  position: fixed; top: 12px; right: 12px; z-index: 9999;
  display: flex; gap: 8px;
}
.toolbar button {
  font-family: 'Kobe', 'Bebas Neue', sans-serif;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 10px 16px;
  background: var(--bordeaux);
  color: var(--ivoire);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.toolbar button:hover { background: var(--bordeaux-hover); }

@media print {
  .screen-only { display: none !important; }
  html, body { background: white; }
  .deck { gap: 0; padding: 0; }
  .page { box-shadow: none; page-break-after: always; break-after: page; }
  .page:last-child { page-break-after: auto; }

  /* Forcer le rendu fidèle des couleurs/backgrounds en PDF */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Les ombres avec offset sont gérées via ::after pseudo-éléments — rien à override ici */
}

/* --- CARTES DISCO ------------------------------------------ */
.disc-card {
  position: relative;
  padding: 5mm 5mm 5mm 5mm;
  background: var(--ivoire);
  border: 0.5pt solid rgba(31,26,23,.15);
  display: flex; flex-direction: column; gap: 2mm;
}
.disc-card .n {
  font-family: 'Kobe', 'Bebas Neue', sans-serif; font-weight: 900;
  font-size: 8pt; letter-spacing: 0.2em; color: var(--ocre);
}
.disc-card .t {
  font-family: 'Kobe', 'Bebas Neue', sans-serif; font-weight: 900;
  font-size: 14pt; letter-spacing: 0.02em; color: var(--bleu); line-height: 1.05;
}
.disc-card .d {
  font-family: 'EB Garamond', serif; font-style: italic;
  font-size: 9.5pt; color: var(--gris);
}
.disc-card .links {
  margin-top: 1mm; display: flex; gap: 3mm;
  font-family: 'Kobe', 'Bebas Neue', sans-serif; font-weight: 900;
  font-size: 7.5pt; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bordeaux);
}

/* --- PAGE 13 — Réseaux sociaux & contacts ------------------ */
.social-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.social-list li {
  display: flex;
  align-items: center;
  gap: 5mm;
  padding: 2.5mm 1mm;
  transition: background .15s ease;
  border-radius: 1mm;
}
.social-list li:hover { background: rgba(110,31,40,.06); }
.social-list li .ico {
  width: 11mm; height: 11mm;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.social-list li .ico img {
  width: 100%; height: 100%; object-fit: contain;
}
.social-list li a {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 14pt;
  font-weight: 600;
  color: var(--encre);
  text-decoration: none;
  background: linear-gradient(180deg, transparent 60%, rgba(182,122,45,.30) 60%, rgba(182,122,45,.30) 92%, transparent 92%);
  padding: 0 1.5mm;
}
.social-list li a:hover { color: var(--bordeaux); }

/* Lien site web - highlight central au-dessus de la boîte contact */
.web-cta {
  display: inline-block;
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 16pt;
  color: var(--bordeaux);
  text-decoration: none;
  background: linear-gradient(180deg, transparent 65%, rgba(182,122,45,.32) 65%, rgba(182,122,45,.32) 92%, transparent 92%);
  padding: 0 3mm;
}
.web-cta::before { content: '⌖ '; color: var(--bleu); margin-right: 1mm; }

/* Boîte contact en couleurs charte */
.contacts-box {
  margin: 7mm auto 0;
  max-width: 140mm;
  padding: 7mm 10mm;
  background: var(--bordeaux);
  color: var(--ivoire);
  border: none;
  text-align: center;
  position: relative;
  box-shadow: 3mm 3mm 1mm rgba(31,26,23,.22);
}
.contacts-box::before {
  content: '';
  position: absolute;
  top: 2.5mm; left: 2.5mm; right: 2.5mm; bottom: 2.5mm;
  border: 0.4pt solid rgba(244,238,227,.22);
  pointer-events: none;
}
.contacts-box .ct-title {
  font-family: 'Kobe', 'Bebas Neue', sans-serif;
  font-weight: 900;
  font-size: 17pt;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivoire);
  line-height: 1.1;
}
.contacts-box .ct-info {
  margin-top: 4mm;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 14pt;
  line-height: 1.7;
  color: var(--ivoire);
}
.contacts-box .ct-info a {
  color: var(--ocre);
  text-decoration: none;
  border-bottom: 0.6pt solid var(--ocre);
  padding-bottom: 0.3pt;
}

/* --- PAGE 12 — Vidéos de scène ----------------------------- */
.video-thumb {
  position: relative;
  overflow: hidden;
  background: #1a1a1a;
  border: 1.5pt solid var(--bordeaux);
  display: block;
  text-decoration: none;
  box-shadow: 3mm 3mm 1mm rgba(31,26,23,.20);
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-thumb .play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.video-thumb .play .circle {
  width: 18mm; height: 18mm;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  border: 1pt solid rgba(255,255,255,.7);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1mm 3mm rgba(0,0,0,.25);
}
.video-thumb .play .circle::after {
  content: '';
  width: 0; height: 0;
  border-left: 5.5mm solid rgba(255,255,255,.85);
  border-top: 3.5mm solid transparent;
  border-bottom: 3.5mm solid transparent;
  margin-left: 1.5mm;
}

/* Logo TEDx stylisé (texte rouge avec contour noir) */
.tedx-logo {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 900;
  font-size: 32pt;
  color: #e62b1e;
  line-height: 1;
  letter-spacing: -0.04em;
  display: inline-block;
  -webkit-text-stroke: 0.4pt #1a1a1a;
  text-shadow:
    0.4pt 0.4pt 0 rgba(0,0,0,.35),
    0 0.5mm 1mm rgba(0,0,0,.20);
}
.tedx-logo .x {
  font-size: 58%;
  vertical-align: 0.55em;
  font-weight: 700;
  margin-left: -0.05em;
}

/* CTA boutons gros et évidents pour vidéos */
.btn-cta {
  display: inline-block;
  padding: 2.5mm 6mm;
  font-family: 'Kobe', 'Bebas Neue', sans-serif;
  font-weight: 900;
  font-size: 11pt;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivoire);
  background: var(--bordeaux);
  text-decoration: none;
  border-radius: 1mm;
  box-shadow: 0 1mm 3mm rgba(0,0,0,.22);
}
.btn-cta::after {
  content: ' \2192';
  color: var(--ocre);
  margin-left: 1.5mm;
  font-weight: 900;
}
.btn-cta:hover { opacity: .9; }
.video-thumb .label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 4mm 5mm;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.75) 100%);
  color: var(--ivoire);
  font-family: 'Kobe', 'Bebas Neue', sans-serif;
  font-weight: 900;
  font-size: 11pt;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
}

/* --- PAGE 06 — Grille concerts (CSS Grid strict) ----------- */
.concert-zone {
  overflow: hidden;
}
.concert-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(6, 1fr);
  gap: 2mm;
  width: 100%;
  height: 100%;
  padding: 2mm;
  box-sizing: border-box;
}
.concert-grid .photo {
  overflow: hidden;
  background: #1a1a1a;
  min-width: 0;
  min-height: 0;
}
.concert-grid .photo.tall {
  grid-row: span 2;
}
.concert-grid .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- CONCERTS LIST ----------------------------------------- */
.gig {
  display: grid;
  grid-template-columns: 11mm 12mm 1fr auto;
  gap: 3mm;
  padding: 2mm 0;
  border-bottom: 0.5pt dashed rgba(31,26,23,.25);
  align-items: center;
}
.gig .logo {
  width: 11mm;
  height: 11mm;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 0.3mm 1mm rgba(31,26,23,.15);
  background: var(--ivoire);
}
.gig .logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gig .yr {
  font-family: 'Kobe', 'Bebas Neue', sans-serif; font-weight: 900;
  font-size: 12pt; color: var(--bordeaux); letter-spacing: 0.04em;
}
.gig .lieu {
  font-family: 'Kobe', 'Bebas Neue', sans-serif; font-weight: 900;
  font-size: 11pt; color: var(--bleu); letter-spacing: 0.06em; text-transform: uppercase;
}
.gig .fmt {
  font-family: 'EB Garamond', serif; font-style: italic; font-size: 9.5pt; color: var(--gris);
}

/* --- PAGE 07 — Bande radio (1 photo par ligne) ------------- */
.radio-zone {
  overflow: hidden;
}
.radio-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(6, 1fr);
  gap: 2mm;
  width: 100%;
  height: 100%;
  padding: 2mm;
  box-sizing: border-box;
}
.radio-grid .photo {
  overflow: hidden;
  background: var(--ivoire);
  min-width: 0;
  min-height: 0;
  border: 0.4pt solid rgba(31,26,23,.18);
  box-shadow: 0 0.5mm 1.5mm rgba(31,26,23,.10);
}
.radio-grid .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- PAGE 07 — Presse / Actus ------------------------------ */
.press-list {
  position: relative;
  margin-top: 5mm;
  padding-left: 14mm;
}
.press-list::before {
  content: '';
  position: absolute;
  left: 6mm;
  top: 4mm;
  bottom: 4mm;
  border-left: 0.8pt dotted rgba(31,26,23,.5);
}
.press-row {
  display: grid;
  grid-template-columns: 11mm 1fr;
  gap: 4mm;
  align-items: center;
  padding: 1.6mm 0;
  position: relative;
}
.press-row + .press-row { border-top: 0.5pt dashed rgba(31,26,23,.18); }
.press-row .vinyl {
  position: absolute;
  left: -12mm;
  top: 50%;
  transform: translateY(-50%);
  width: 8mm;
  height: 8mm;
  color: var(--encre);
}
.press-row .vinyl svg { width: 100%; height: 100%; }
.press-row .vinyl img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  background: var(--ivoire);
}
.press-row .logo {
  width: 11mm;
  height: 11mm;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 0.3mm 1mm rgba(31,26,23,.15);
  background: var(--ivoire);
  display: flex;
  align-items: center;
  justify-content: center;
}
.press-row .logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.press-row .logo.contain { background: #fff; }
.press-row .logo.contain img { width: 75%; height: 75%; object-fit: contain; }
.press-row .logo.empty {
  background: var(--ivoire);
  border: 0.5pt dashed var(--gris);
}
.press-row .logo.empty span {
  font-family: 'Kobe', 'Bebas Neue', sans-serif;
  font-size: 7pt;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--gris);
}
.press-row .content .name {
  font-family: 'Kobe', 'Bebas Neue', sans-serif;
  font-weight: 900;
  font-size: 10pt;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bordeaux);
  line-height: 1.15;
}
.press-row .content .show {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 8.5pt;
  color: var(--encre);
  margin-top: 0.5mm;
  line-height: 1.25;
}
.press-row .content .desc {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 8.5pt;
  line-height: 1.35;
  color: var(--gris);
  margin-top: 0.8mm;
}
.press-row .content .desc em { font-style: italic; color: var(--encre); }
.press-row .content .desc strong { font-weight: 700; color: var(--encre); }
.press-row .content .sub {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 8pt;
  line-height: 1.35;
  color: var(--encre);
  margin-top: 0.8mm;
}
.press-row .content .sub strong { font-weight: 700; color: var(--bordeaux); }
/* Lien presse : pill bordé bordeaux + flèche ocre — visiblement cliquable */
.press-row .content a.press-link {
  display: inline-block;
  margin-left: 2mm;
  padding: 0.4mm 2mm 0.4mm 2.2mm;
  font-family: 'Kobe', 'Bebas Neue', sans-serif;
  font-weight: 900;
  font-size: 6.5pt;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bordeaux);
  text-decoration: none;
  white-space: nowrap;
  border: 0.5pt solid var(--bordeaux);
  border-radius: 0.8mm;
  vertical-align: 1pt;
  background: rgba(110,31,40,.04);
  transition: all .15s ease;
}
.press-row .content a.press-link::after {
  content: ' \2192';
  color: var(--ocre);
  font-weight: 900;
  margin-left: 1mm;
  letter-spacing: 0;
}
.press-row .content a.press-link:hover {
  background: var(--bordeaux);
  color: var(--ivoire);
}
.press-row .content a.press-link:hover::after { color: var(--ivoire); }

/* --- 7 PILIERS (scene) ------------------------------------- */
.pilier {
  display: flex; gap: 4mm;
  padding: 2.5mm 0;
  border-bottom: 0.5pt dashed rgba(31,26,23,.2);
}
.pilier .num {
  flex: 0 0 12mm;
  font-family: 'Kobe', 'Bebas Neue', sans-serif; font-weight: 900;
  font-size: 22pt; color: var(--bordeaux); line-height: 1;
}
.pilier .body h4 {
  font-family: 'Kobe', 'Bebas Neue', sans-serif; font-weight: 900;
  font-size: 13pt; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bleu); margin-bottom: 1.5mm;
}
.pilier .body p {
  font-family: 'EB Garamond', serif; font-size: 9.5pt; line-height: 1.5; color: var(--encre);
}

/* --- OPTIONS SCENIQUES ------------------------------------- */
.opt {
  padding: 6mm 6mm;
  background: var(--ivoire);
  border: none;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 2.5mm 2.5mm 1mm rgba(31,26,23,.18);
}
.opt-pastel-rose { background: #f5e1e3; }
.opt-pastel-bleu { background: #dde7ee; }
.opt-pastel-ocre { background: #f3e9cf; }
.opt-pastel-vert { background: #e3e8d6; }

.opt-pastel-rose .kind { color: var(--bordeaux); }
.opt-pastel-bleu .kind { color: var(--bleu); }
.opt-pastel-ocre .kind { color: #8a5520; }
.opt-pastel-vert .kind { color: #4a5440; }
.opt .kind {
  font-family: 'Kobe', 'Bebas Neue', sans-serif; font-weight: 900;
  font-size: 19pt; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--bordeaux); line-height: 0.95;
  text-shadow: 0 0.5mm 0 rgba(255,255,255,.55);
}
.opt .dur {
  font-family: 'Kobe', 'Bebas Neue', sans-serif; font-weight: 900;
  font-size: 10pt; letter-spacing: 0.22em; color: var(--encre); margin-top: 2.5mm;
  opacity: .8;
}
.opt .desc {
  font-family: 'EB Garamond', serif; font-style: italic; font-size: 10.5pt;
  color: var(--encre); line-height: 1.4;
  margin-top: 3mm;
}

/* --- PAGE 01 — COUVERTURE lumineuse ------------------------ */
.cover-title {
  font-family: 'EB Garamond', Georgia, serif;
  color: var(--encre);
  line-height: 0.95;
}
.cover-title .big {
  display: block;
  font-family: 'Kobe', 'Bebas Neue', sans-serif;
  font-weight: 900;
  font-size: 34pt;
  line-height: 0.95;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--bleu);
  text-align: center;
}
.cover-title .big .accent { color: var(--bordeaux); }
.cover-title .artist {
  display: block;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 54pt;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.01em;
  text-align: center;
  margin-top: 3mm;
  color: var(--bordeaux);
}
.cover-photo {
  overflow: hidden;
  background: #1a1a1a;
  border: 1.5pt solid var(--bordeaux);
  box-shadow: 3mm 3mm 1mm rgba(31,26,23,.20);
}
.cover-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* --- Page 02 — Biographie : texte + photo incrustée --- */
.bio-prose::after {
  content: '';
  display: block;
  clear: both;
}
.bio-prose p {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 12.5pt;
  line-height: 1.5;
  color: var(--encre);
  text-align: justify;
  margin: 0 0 3mm;
  hyphens: auto;
  text-wrap: pretty;
}
.bio-prose p:last-child { margin-bottom: 0; }
.bio-prose p strong { font-weight: 700; color: var(--bordeaux); }
.bio-prose p em { font-style: italic; }
.bio-prose.large p { font-size: 15pt; line-height: 1.55; margin-bottom: 4mm; }
.cover-highlight {
  position: absolute;
  z-index: 5;
  background: var(--ivoire);
  border: 0.75pt solid var(--encre);
  padding: 7mm 8mm 6mm;
  box-shadow: 3mm 3mm 1mm rgba(31,26,23,.18), inset 0 0 0 0.3pt rgba(255,255,255,.55);
}
.cover-highlight::before {
  content: '';
  position: absolute;
  top: 3mm; left: 3mm; right: 3mm; bottom: 3mm;
  border: 0.35pt solid var(--encre);
  opacity: .28;
  pointer-events: none;
}
.cover-highlight .h-title {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 700;
  font-style: italic;
  font-size: 24pt;
  line-height: 1;
  color: var(--bordeaux);
  text-align: center;
  margin-bottom: 5mm;
  letter-spacing: 0.01em;
  text-shadow:
    0.3mm 0.3mm 0 rgba(110,31,40,.22),
    0 0.8mm 1.6mm rgba(31,26,23,.25);
}
.cover-highlight .h-text {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 11pt;
  line-height: 1.4;
  color: var(--encre);
  text-align: justify;
  hyphens: auto;
}
.cover-highlight .h-text p { margin: 0 0 2.5mm; }
.cover-highlight .h-text p:last-child { margin-bottom: 0; }
.cover-highlight .h-text strong { font-weight: 700; color: var(--bordeaux); }
.cover-highlight .h-text em { font-style: italic; }
.cover-year {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 13pt;
  letter-spacing: 0.55em;
  color: var(--encre);
  opacity: .75;
  text-align: center;
}
.cover-tagline {
  font-family: 'Kobe', 'Bebas Neue', sans-serif;
  font-weight: 900;
  font-size: 13pt;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bordeaux);
  text-align: center;
}

/* --- SIGNATURE R/S pivotés (VERTIGE · VESTIGE) ------------ */
.rot-r, .rot-s {
  display: inline-block;
  line-height: 1;
  transform-origin: 50% 55%;
}
.rot-r {
  color: var(--bordeaux);
  transform: rotate(-7deg);
}
.rot-s {
  color: var(--bordeaux);
  transform: rotate(6deg);
}

/* --- PAGE 03 — diptyque EPs --- */
.oeuvre-trio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14mm;
  margin-top: 7mm;
  align-items: start;
}
.oeuvre-trio .cover-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #1a1a1a;
  border: 1.5pt solid var(--ocre);
  overflow: hidden;
  box-shadow: 0 1mm 3mm rgba(0,0,0,.20);
}
.oeuvre-trio .cover-frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.oeuvre-trio .lbl {
  font-family: 'Kobe', 'Bebas Neue', sans-serif;
  font-weight: 900;
  font-size: 13pt;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--encre);
  margin-top: 3mm;
  line-height: 1;
}
.oeuvre-trio .lbl em {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--bordeaux);
  text-transform: none;
  margin-left: 1mm;
}
.oeuvre-trio .sub {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 9pt;
  color: var(--gris);
  margin-top: 1mm;
}
.oeuvre-trio .cover-block { text-align: center; }

/* --- EP LAYOUT (pages 04 Vertige / 05 Vestige) ------------- */
.ep-head {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4mm;
  flex-wrap: wrap;
}
.ep-head .artist {
  font-family: 'Kobe', 'Bebas Neue', sans-serif;
  font-weight: 900;
  font-size: 34pt;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 0.9;
  color: var(--encre);
}
.ep-head .artist .sub {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 11pt;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--gris);
  margin-left: 3mm;
  vertical-align: middle;
}
.ep-head .name {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 34pt;
  line-height: 0.9;
  color: var(--bordeaux);
}
.ep-head .which {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: normal;
  font-size: 16pt;
  color: var(--encre);
  margin-left: 1mm;
  align-self: flex-end;
  padding-bottom: 1mm;
}

.ep-list {
  position: relative;
  margin-top: 7mm;
  padding-left: 14mm;
}
.ep-list::before {
  content: '';
  position: absolute;
  left: 6mm;
  top: 6mm;
  bottom: 6mm;
  border-left: 0.8pt dotted rgba(31,26,23,.55);
}

.ep-row {
  display: grid;
  grid-template-columns: 1fr auto 26mm;
  align-items: center;
  gap: 6mm;
  padding: 2.5mm 0;
  position: relative;
}
.ep-row + .ep-row { border-top: 0.5pt dashed rgba(31,26,23,.18); }

.ep-row .vinyl {
  position: absolute;
  left: -12mm;
  top: 50%;
  transform: translateY(-50%);
  width: 8mm;
  height: 8mm;
  color: var(--encre);
}
.ep-row .vinyl svg { width: 100%; height: 100%; }

.ep-row .info .n {
  font-family: 'Kobe', 'Bebas Neue', sans-serif;
  font-weight: 900;
  font-size: 9pt;
  letter-spacing: 0.22em;
  color: var(--encre);
  text-transform: uppercase;
  line-height: 1.1;
}
.ep-row .info .n .quoted {
  display: block;
  margin-top: 0.5mm;
  font-family: 'Kobe', 'Bebas Neue', sans-serif;
  font-weight: 900;
  font-size: 17pt;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--bordeaux);
  text-transform: uppercase;
}
.ep-row .info .d {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 9pt;
  color: var(--gris);
  line-height: 1.35;
  margin-top: 1.8mm;
}
.ep-row .info .d strong { color: var(--encre); font-weight: 600; }
.ep-row .info .genesis {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 8.5pt;
  line-height: 1.35;
  color: var(--encre);
  opacity: .78;
  margin-top: 1.3mm;
  padding-right: 2mm;
  text-wrap: pretty;
}

.ep-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2mm;
  color: var(--encre);
  text-decoration: none;
  transition: opacity .15s ease;
}
a.ep-action { cursor: pointer; }
a.ep-action:hover { opacity: .7; }
.ep-action .circle {
  width: 11mm;
  height: 11mm;
  color: var(--encre);
}
.ep-action .circle svg { width: 100%; height: 100%; }
.ep-action .label {
  font-family: 'Kobe', 'Bebas Neue', sans-serif;
  font-weight: 900;
  font-size: 6.5pt;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--encre);
  text-align: center;
  line-height: 1.15;
}

.ep-cover {
  width: 24mm;
  height: 24mm;
  background: #1a1a1a;
  overflow: hidden;
  box-shadow: 0 1mm 3mm rgba(0,0,0,.18);
  display: block;
  transition: transform .15s ease, box-shadow .15s ease;
}
a.ep-cover { cursor: pointer; }
a.ep-cover:hover {
  transform: scale(1.03);
  box-shadow: 0 2mm 5mm rgba(0,0,0,.28);
}
.ep-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ep-final {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8mm;
  margin-top: 4mm;
  padding: 5mm 0 0;
  border-top: 0.8pt solid rgba(31,26,23,.35);
  position: relative;
  padding-left: 16mm;
}
.ep-final .vinyl-big {
  position: absolute;
  left: -3mm;
  top: 50%;
  transform: translateY(-50%);
  width: 24mm;
  height: 24mm;
  color: var(--encre);
}
.ep-final .vinyl-big svg { width: 100%; height: 100%; }
.ep-final .title-block {
  padding-left: 8mm;
}
.ep-final .title-block .lbl {
  font-family: 'Kobe', 'Bebas Neue', sans-serif;
  font-weight: 900;
  font-size: 22pt;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--encre);
  line-height: 1;
}
.ep-final .title-block .lbl em {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  color: var(--bordeaux);
}
.ep-final .title-block .date {
  font-family: 'Kobe', 'Bebas Neue', sans-serif;
  font-weight: 900;
  font-size: 13pt;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
  margin-top: 2.5mm;
}
.ep-final .ep-cover {
  width: 42mm;
  height: 42mm;
}

/* --- CONTACT LINKS ----------------------------------------- */
.contact-row {
  display: flex; align-items: baseline; gap: 4mm;
  padding: 2.5mm 0;
  border-bottom: 0.5pt dashed rgba(237,230,219,.3);
}
.contact-row .k {
  flex: 0 0 32mm;
  font-family: 'Kobe', 'Bebas Neue', sans-serif; font-weight: 900;
  font-size: 9pt; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ocre);
}
.contact-row .v {
  font-family: 'EB Garamond', serif; font-size: 11pt; color: var(--papier);
}