/* Vrézyo — système visuel unifié
   Fond noir cinématographique + accent ambre + duo typographique Termes/Heros (auto-hébergées) */

@font-face{font-family:'Termes';src:url('assets/fonts/carlito-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Termes';src:url('assets/fonts/carlito-bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Termes';src:url('assets/fonts/carlito-italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Heros';src:url('assets/fonts/carlito-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Heros';src:url('assets/fonts/carlito-bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#07070a;
  --paper:#f2eee6;
  --paper-dim:#cdc6b9;
  --ember:#d8892a;
  --line:rgba(242,238,230,.1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--paper);font-family:'Heros',Arial,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3{font-family:'Termes',Georgia,serif}

/* ---------- Skip link / accessibility ---------- */
.skip{position:absolute;left:-999px;top:0;background:var(--paper);color:var(--ink);padding:10px 16px;z-index:100}
.skip:focus{left:16px;top:16px}
a:focus-visible,button:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

/* ---------- Arrivée Tahiti : hero + bandeau fusionnés, fixé en haut en permanence une fois rétréci ---------- */
.arrival{position:relative;background:var(--ink)} /* simple réservation d'espace de scroll ; hauteur en JS */
.arrival-sticky{position:fixed;top:0;left:0;right:0;z-index:40;height:100svh;min-height:150px;overflow:hidden;background:var(--ink)}
.arrival-frame{position:absolute;inset:0;background-repeat:no-repeat}
.arrival-sticky:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent 0%,transparent 55%,var(--ink) 100%)}
.arrival-fade{position:absolute;top:0;bottom:0;z-index:3;pointer-events:none;opacity:0}
.arrival-fade.side-l{background:linear-gradient(90deg,var(--ink),transparent)}
.arrival-fade.side-r{background:linear-gradient(270deg,var(--ink),transparent)}
.arrival-bottom-fade{position:absolute;left:0;right:0;bottom:0;height:35%;z-index:3;pointer-events:none;background:linear-gradient(180deg,transparent,var(--ink))}
.arrival-logo{position:absolute;z-index:5;left:50%;top:8.5%;transform:translateX(-50%) scale(var(--logo-scale,1));transform-origin:top center;width:min(16vw,230px);min-width:150px;filter:drop-shadow(0 0 16px rgba(0,0,0,.4))}
.scroll-cue{position:absolute;z-index:5;bottom:26px;left:50%;transform:translateX(-50%);font-size:20px;opacity:.7;animation:bob 2.4s ease-in-out infinite;transition:opacity .2s linear}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}

/* ---------- Top UI (menu + social) ---------- */
.top-ui{position:absolute;z-index:10;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:24px 32px}
.menu-btn{display:flex;align-items:center;gap:16px;font-family:'Heros';font-size:16px;letter-spacing:.14em;font-weight:700;background:none;border:0;color:var(--paper);cursor:pointer;padding:0}
.hamb{width:36px;display:grid;gap:7px}
.hamb i{height:2px;background:currentColor;display:block}
.social{display:flex;gap:24px;align-items:center}
.social a,.social span{width:26px;height:26px;display:grid;place-items:center;color:var(--paper);opacity:.92}
.social span{opacity:.4}
.social img{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1)} /* force les icônes SVG en blanc (currentColor ne traverse pas <img>) */

/* ---------- Full-screen menu overlay ---------- */
.menu-panel{position:fixed;inset:0;z-index:200;background:rgba(5,5,6,.98);display:flex;flex-direction:column;justify-content:center;padding:9vh 8vw;opacity:0;pointer-events:none;transition:opacity .35s ease}
.menu-panel.open{opacity:1;pointer-events:auto}
.menu-close{position:absolute;top:24px;right:32px;background:none;border:0;color:var(--paper);font-size:14px;letter-spacing:.14em;cursor:pointer;font-family:'Heros'}
.menu-list{list-style:none;margin:0;padding:0}
.menu-list li{border-bottom:1px solid var(--line)}
.menu-list a{display:block;padding:22px 0;font-family:'Termes';font-weight:700;font-size:clamp(30px,5.5vw,58px);letter-spacing:-.01em;transition:color .2s ease}
.menu-list a:hover,.menu-list a:focus-visible{color:var(--ember)}
.menu-foot{margin-top:6vh;display:flex;gap:24px;flex-wrap:wrap}
.menu-foot a{font-size:11px;letter-spacing:.14em;color:var(--paper-dim)}

/* ---------- Album ---------- */
.album{min-height:92svh;display:grid;place-items:center;background:var(--ink);padding:9vh 5vw 12vh}
.album-inner{width:min(1080px,90vw)}
.album-art{width:100%;height:auto;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.album-caption{display:flex;justify-content:space-between;margin-top:22px;font-size:11px;letter-spacing:.14em;color:var(--paper-dim)}
.album-caption a{color:var(--paper)}

/* ---------- Manifesto ---------- */
.manifesto{min-height:100svh;display:grid;place-items:center;position:relative;overflow:hidden;background:var(--ink)}
.manifesto:before{content:"";position:absolute;width:70vw;height:70vw;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(216,137,42,.16),rgba(216,137,42,.03) 30%,transparent 65%);filter:blur(20px)}
.manifesto-inner{position:relative;z-index:2;width:min(920px,86vw);text-align:center;padding:10vh 0}
.eyebrow{font-family:'Heros';font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--ember);margin-bottom:36px;font-weight:700}
.manifesto h1{font-weight:700;font-size:clamp(42px,7vw,100px);line-height:.94;letter-spacing:-.01em;margin:0;text-transform:uppercase}
.manifesto h1 em{font-style:italic;font-weight:400;display:block;text-transform:none}
.manifesto p{max-width:620px;margin:40px auto 0;font-size:clamp(15px,1.4vw,18px);line-height:1.75;color:var(--paper-dim);font-family:'Heros'}
.words{display:flex;justify-content:center;gap:clamp(50px,9vw,150px);margin-top:84px;font-size:clamp(19px,2.5vw,27px);letter-spacing:.5em;font-family:'Heros';font-weight:700}
.listen-btn{display:inline-block;margin-top:64px;padding:17px 46px;border:1px solid var(--paper);border-radius:999px;font-family:'Heros';font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--paper);transition:background .25s ease,color .25s ease}
.listen-btn:hover{background:var(--paper);color:var(--ink)}

/* ---------- Songs ---------- */
/* ---------- Chapitres : liste épurée, texte seul (renvoie vers une page par chanson) ---------- */
.chapters{background:var(--ink);padding:14vh 8vw 16vh}
.chapters-header{margin-bottom:8vh;text-align:center;max-width:900px;margin-left:auto;margin-right:auto}
.chapters-header .eyebrow{margin-bottom:22px}
.chapters-header h2{font-family:'Termes';font-size:clamp(42px,6.5vw,92px);font-weight:700;letter-spacing:-.01em;line-height:1.02;margin:0 0 22px;text-transform:uppercase}
.chapters-header p{font-size:clamp(15px,1.3vw,17px);color:var(--paper-dim);margin:0 auto;max-width:560px}
.chapters-list{list-style:none;margin:0;padding:0;max-width:1300px;border-top:1px solid var(--line)}
.chapters-list li{border-bottom:1px solid var(--line)}
.chapters-list a{display:flex;align-items:baseline;padding:34px 0;transition:padding-left .25s ease}
.chapters-list a:hover{padding-left:14px}
.chapters-list .n{font-family:'Heros';font-size:12px;letter-spacing:.16em;color:var(--ember);flex:0 0 46px;margin-right:44px}
.chapters-list .t{font-family:'Termes';font-weight:700;font-size:clamp(22px,3.2vw,40px);letter-spacing:-.01em}
.chapters-list .theme{font-family:'Heros';font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim);white-space:nowrap;margin-left:auto;padding-left:24px}

/* ---------- Actualités : un seul clip mis en avant, pas de grille ---------- */
.news{background:var(--ink);padding:14vh 8vw 16vh;text-align:center}
.news-inner{max-width:920px;margin:0 auto}
.news .eyebrow{margin-bottom:34px}
.news-video{position:relative;width:100%;aspect-ratio:16/9;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.news-video iframe{width:100%;height:100%;border:0;display:block}
.news-link{display:inline-block;margin-top:30px;font-family:'Termes';font-style:italic;font-size:clamp(18px,2.2vw,26px);color:var(--paper)}
.news-link:hover{color:var(--ember)}

/* ---------- Footer ---------- */footer{background:var(--ink);padding:70px 8vw 38px;border-top:1px solid var(--line)}
.footer-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
footer img{width:110px}
.footer-links{display:flex;gap:22px;flex-wrap:wrap;font-size:11px;letter-spacing:.1em;color:var(--paper-dim)}
.footer-links a:hover{color:var(--paper)}
footer small{display:block;margin-top:60px;color:#6b6a65;font-size:9px;letter-spacing:.14em}

/* ---------- En-tête statique des pages intérieures (pas de photo d'arrivée à rétrécir) ---------- */
.site-bar{position:fixed;top:0;left:0;right:0;z-index:40;height:150px;background:var(--ink);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 32px}
.site-logo{width:150px}
main.inner{padding-top:150px}

/* ---------- Essai : artwork en fond, presque transparent, répété sur toute la page (une chanson en test) ---------- */
.song-page--bgart{position:relative}
.page-bgart{position:absolute;top:150px;left:0;right:0;bottom:0;z-index:0;opacity:.11;background-repeat:repeat-y;background-position:top center;background-size:100% auto;pointer-events:none}
.song-page--bgart main.inner,.song-page--bgart footer{position:relative;z-index:1}

/* ---------- En-tête d'une page chanson ---------- */
.song-hero{text-align:center;padding:11vh 8vw 7vh;max-width:900px;margin:0 auto}
.song-hero .eyebrow{margin-bottom:22px}
.song-hero h1{font-size:clamp(38px,6vw,80px);font-weight:700;letter-spacing:-.01em;line-height:1.02;margin:0}
.song-art{padding:0 8vw 9vh;max-width:900px;margin:0 auto}
.song-art img{width:100%;height:auto;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.song-blurb{font-family:'Termes';font-style:italic;font-size:clamp(14px,1.5vw,17px);color:var(--paper-dim);text-align:center;max-width:100%;margin:26px auto 0}
.song-video{padding:0 8vw 9vh;max-width:900px;margin:0 auto}
.song-video .embed{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.song-video .embed iframe{width:100%;height:100%;border:0;display:block}

/* ---------- Paroles ---------- */
.lyrics{padding:2vh 8vw 14vh}
.lyrics-inner{max-width:640px;margin:0 auto}
.lyrics-inner .eyebrow{margin-bottom:30px;text-align:center;display:block}
.lyrics-text{font-family:'Termes';font-style:italic;font-size:clamp(17px,2vw,21px);line-height:1.85;color:var(--paper);white-space:pre-line;text-align:center}

/* ---------- Navigation chanson précédente / suivante ---------- */
.song-nav{display:flex;justify-content:space-between;gap:24px;padding:6vh 8vw 12vh;max-width:900px;margin:0 auto;border-top:1px solid var(--line)}
.song-nav a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim);padding-top:6vh}
.song-nav a:hover{color:var(--paper)}
.song-nav a b{display:block;font-family:'Termes';font-size:clamp(18px,2.4vw,26px);font-weight:700;color:var(--paper);text-transform:none;letter-spacing:-.01em;margin-top:10px}
.song-nav .next{text-align:right}

/* ---------- Sommaire des chansons (chansons.html) ---------- */
.song-index{padding:2vh 8vw 14vh}
.song-index-list{list-style:none;margin:0;padding:0;max-width:900px;margin:0 auto;border-top:1px solid var(--line)}
.song-index-list li{border-bottom:1px solid var(--line)}
.song-index-list a{display:flex;align-items:center;gap:36px;padding:30px 0;transition:padding-left .25s ease}
.song-index-list a:hover{padding-left:14px}
.song-index-list img{width:110px;height:110px;object-fit:cover;flex:0 0 auto}
.song-index-text{flex:1 1 auto;min-width:0}
.song-index-text .n{font-family:'Heros';font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember)}
.song-index-text h2{font-family:'Termes';font-weight:700;font-size:clamp(22px,3vw,32px);letter-spacing:-.01em;margin:8px 0 8px}
.song-index-text p{font-size:14px;color:var(--paper-dim);margin:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Pages intérieures génériques : album, bio, contact ---------- */
.album-page{padding:0 8vw 14vh;max-width:1000px;margin:0 auto}
.album-page-layout{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:7vw;align-items:start}
.album-page-art img{width:100%;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.album-page-text p{font-size:16px;line-height:1.75;color:var(--paper-dim);margin:0 0 26px}
.album-page-text .btn{display:inline-block;margin:8px 0 40px;padding:16px 40px;border:1px solid var(--paper);border-radius:999px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;transition:background .25s ease,color .25s ease}
.album-page-text .btn:hover{background:var(--paper);color:var(--ink)}
.album-page.album-single{max-width:900px}
.album-page-art-big{margin:0 0 54px}
.album-page-art-big img{width:100%;box-shadow:0 30px 90px rgba(0,0,0,.5)}
.tracklist{border-top:1px solid var(--line);margin-top:16px}
.tracklist a{display:flex;align-items:baseline;padding:32px 0;border-bottom:1px solid var(--line);transition:padding-left .25s ease}
.tracklist a:hover{padding-left:14px}
.tracklist .n{font-family:'Heros';font-size:12px;color:var(--ember);letter-spacing:.16em;flex:0 0 46px;margin-right:44px}
.tracklist .t{font-family:'Termes';font-weight:700;font-size:clamp(22px,3.2vw,38px);letter-spacing:-.01em}
.tracklist .theme{margin-left:auto;padding-left:24px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim);white-space:nowrap}

.album-page.bio-page{max-width:820px}
.bio-photo{margin:0 0 42px}
.bio-photo img{width:100%;height:auto;display:block;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.bio-photo figcaption{margin-top:12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember)}
.bio-quote{font-family:'Termes';font-style:italic;font-size:clamp(24px,3vw,36px);color:var(--paper);line-height:1.3;margin:0 0 36px}
.bio-single p{font-size:17px;line-height:1.85;color:var(--paper-dim);margin:0 0 26px}

.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:7vw}
.contact-layout h2{font-family:'Termes';font-weight:700;font-size:clamp(26px,3.4vw,38px);margin:0 0 18px}
.contact-layout p{color:var(--paper-dim);font-size:15px;margin:0 0 24px}
.contact-layout .btn{display:inline-block;padding:15px 34px;border:1px solid var(--paper);border-radius:999px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;transition:background .25s ease,color .25s ease}
.contact-layout .btn:hover{background:var(--paper);color:var(--ink)}
.contact-socials{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;align-items:center}
.contact-socials a,.contact-socials span{width:30px;height:30px;display:grid;place-items:center;color:var(--paper);opacity:.92}
.contact-socials span{opacity:.35}
.contact-socials img{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1)}
.contact-socials a:hover{opacity:.7}
.contact-note{margin-top:34px;padding:20px;border:1px solid var(--line);color:var(--paper-dim);font-size:13px;line-height:1.6}

/* ---------- Mentions légales ---------- */
.legal-page{padding:0 8vw 14vh;max-width:760px;margin:0 auto}
.legal-page h2{font-family:'Termes';font-weight:700;font-size:22px;margin:48px 0 16px}
.legal-page h2:first-child{margin-top:0}
.legal-page p{font-size:15px;line-height:1.75;color:var(--paper-dim);margin:0 0 14px}
.legal-page a{color:var(--paper);text-decoration:underline}
footer small a{color:var(--paper-dim);text-decoration:underline}
footer small a:hover{color:var(--paper)}

/* ---------- Mobile ---------- */
@media(max-width:760px){
  .site-bar{height:90px;padding:0 18px}
  .site-logo{width:105px}
  main.inner{padding-top:90px}
  .song-hero{padding:8vh 6vw 5vh}
  .song-art,.song-video,.lyrics{padding-left:6vw;padding-right:6vw}
  .lyrics{padding-top:1vh;padding-bottom:10vh}
  .song-nav{padding:5vh 6vw 9vh;flex-direction:column;gap:36px}
  .song-nav .next{text-align:left}
  .top-ui{padding:16px}
  .menu-btn{font-size:12px;gap:10px}
  .hamb{width:24px;gap:5px}
  .arrival-logo{top:8%;width:135px}
  .social{gap:12px}
  .social a,.social span{width:16px;height:16px}
  .album{padding:7vh 5vw 9vh}
  .album-inner{width:90vw}
  .manifesto{min-height:88svh}
  .manifesto p{font-size:14px}
  .words{gap:26px;font-size:13px;letter-spacing:.34em;margin-top:56px}
  .chapters{padding:9vh 6vw 12vh}
  .news{padding:9vh 6vw 11vh}
  .chapters-header{margin-bottom:6vh}
  .chapters-list a{flex-wrap:wrap;gap:4px 14px;padding:24px 0}
  .chapters-list .theme{margin-left:0;flex-basis:100%;margin-left:60px}
  .song-index-list a{flex-direction:column;align-items:flex-start;gap:16px;padding:26px 0}
  .song-index-list img{width:100%;height:200px}
  .album-page-layout,.contact-layout{grid-template-columns:1fr;gap:40px}
  .album-page-art{max-width:340px;margin:0 auto}
  .tracklist .theme{display:none}
  .menu-list a{font-size:34px;padding:16px 0}
  .menu-panel{padding:9vh 7vw}
  footer{padding:55px 7vw 32px}
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .arrival-frame{transition:none}
  .scroll-cue{animation:none}
  html{scroll-behavior:auto}
}