/* =========================================================
   TYLT — tylt.ch
   Simple : fond blanc cassé, texte noir, Archivo + Arial.
   ========================================================= */

:root {
  --bg:#f2f2ee;
  --ink:#0b0b0b;
  --soft:#0b0b0b8c;
  --line:#0b0b0b26;
  --signal:#c6fd00;
  --pad:clamp(18px,2.4vw,36px);
}

* { box-sizing:border-box; margin:0; padding:0; }
html { background:var(--bg); -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
section { scroll-margin-top:70px; }
body { background:var(--bg); color:var(--ink); font-family:Arial, Helvetica, sans-serif; font-size:16px; line-height:1.5; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--signal); color:var(--ink); }

.wrap { padding:0 var(--pad); }
.archivo, h1, h2, h3, .nav, .logo-txt { font-family:"Archivo", Arial, sans-serif; }

/* lien texte : un trait qui apparaît, surligné en signal au survol */
.lnk { background:linear-gradient(var(--signal),var(--signal)) 0 100% / 0 100% no-repeat; transition:background-size .25s ease; }
.lnk:hover { background-size:100% 100%; }

/* ---------- en-tête ---------- */
.top { position:sticky; top:0; z-index:5; background:var(--bg); display:flex; align-items:center;
       justify-content:space-between; gap:24px; padding:18px var(--pad); border-bottom:1px solid transparent; }
.top.is-scrolled { border-bottom-color:var(--line); }
.top__logo svg { display:block; height:26px; width:auto; }
.nav { display:flex; align-items:center; white-space:nowrap; gap:clamp(14px,2vw,28px); font-weight:500; font-size:15px; }
.nav button { font:inherit; color:var(--soft); background:none; border:0; cursor:pointer; padding:0; }
.nav button.is-on { color:var(--ink); }
.nav .sep { color:var(--soft); }

/* ---------- accueil ---------- */
.intro { min-height:calc(100vh - 62px); min-height:calc(100svh - 62px); display:flex; align-items:center; justify-content:center;
         text-align:center; padding:40px var(--pad); }
.intro h1 { margin:0 auto; }
.intro h1 { font-weight:500; font-size:clamp(32px,4.4vw,70px); line-height:1.08; letter-spacing:-.02em; }
.intro p { margin-top:28px; color:var(--soft); font-size:clamp(15px,1.1vw,17px); }

.label { display:flex; justify-content:space-between; align-items:baseline; gap:16px;
         font-family:"Archivo", Arial, sans-serif; font-weight:500; font-size:15px;
         padding:14px 0; border-top:1px solid var(--ink); margin-bottom:28px; }
.label span:last-child { color:var(--soft); }

/* projets */
.work { padding:0 var(--pad); }
.grid { display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(16px,1.6vw,24px); }
.card { width:clamp(260px,24vw,360px); }           /* toutes les cartes ont la même taille */
.card__img { aspect-ratio:9 / 10; overflow:hidden; border-radius:6px; background:#e6e6e1; }
.card__img img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.card:hover .card__img img { transform:scale(1.03); }
.card__cap { padding-top:12px; font-size:15px; line-height:1.35; }
.card__cap b { display:block; font-family:"Archivo", Arial, sans-serif; font-weight:600; }
.card__cap span { color:var(--soft); }
.work__note { text-align:center; margin-top:28px; color:var(--soft); font-size:14px; }

/* studio */
.studio { padding:clamp(80px,14vh,160px) var(--pad) 0; }
.studio__grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(18px,2.4vw,36px); }
.studio__txt { grid-column:1 / span 6; font-size:clamp(17px,1.35vw,21px); line-height:1.45; }
.studio__txt p + p { margin-top:1em; }
.offer { grid-column:span 3; }
.offer:first-of-type { grid-column:7 / span 3; }
.offer h3 { font-weight:600; font-size:15px; margin-bottom:10px; }
.offer li { list-style:none; padding:7px 0; border-bottom:1px solid var(--line); font-size:15px; }

/* tarifs */
.prices { padding:clamp(80px,14vh,160px) var(--pad) 0; }
.packs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,2.4vw,36px); }
.packs { gap:clamp(12px,1.2vw,18px); }
.pack { display:flex; flex-direction:column; background:#e7e7e1; border-radius:6px; padding:clamp(18px,1.6vw,26px); min-height:340px; }
.pack--idea { background:transparent; border:1px solid #0b0b0b2e; }
.pack h3, .live h3 { font-family:"Archivo", Arial, sans-serif; font-weight:600; font-size:clamp(20px,1.6vw,26px); }
.pack__price { font-family:"Archivo", Arial, sans-serif; font-weight:500; font-size:clamp(28px,2.6vw,40px); letter-spacing:-.02em; margin:6px 0 18px; }
.pack ul { list-style:none; flex:1; }
.pack li { padding:7px 0; border-bottom:1px solid #0b0b0b1f; font-size:15px; }
.pack li:first-child { border-top:1px solid #0b0b0b1f; }
.pack__txt { flex:1; font-size:15px; line-height:1.45; }
.pack__btn { align-self:flex-start; margin-top:18px; padding:10px 18px; border-radius:999px; background:var(--ink); color:var(--bg);
             font-family:"Archivo", Arial, sans-serif; font-weight:500; font-size:15px; transition:background .2s ease, color .2s ease; }
.pack__btn:hover { background:var(--signal); color:var(--ink); }
.pack__terms { margin-top:14px; color:var(--soft); font-size:14px; }
.live { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(18px,2.4vw,36px); align-items:baseline;
        margin-top:clamp(48px,8vh,90px); padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.live h3 { grid-column:1 / span 4; }
.live p { grid-column:5 / span 5; font-size:clamp(16px,1.2vw,18px); }
.live__cta { grid-column:10 / span 3; justify-self:end; font-family:"Archivo", Arial, sans-serif; font-weight:500; }

/* contact */
.contact { padding:clamp(80px,14vh,160px) var(--pad) 0; }
.contact__mail { display:inline-block; font-family:"Archivo", Arial, sans-serif; font-weight:500;
                 font-size:clamp(34px,6vw,96px); letter-spacing:-.03em; line-height:1.05; }
.contact p { margin-top:18px; color:var(--soft); }

.foot { display:flex; justify-content:space-between; gap:16px; padding:clamp(60px,10vh,120px) var(--pad) 28px;
        font-size:14px; color:var(--soft); }

/* ---------- pages projet ---------- */
.pj-head { padding:clamp(40px,8vh,90px) var(--pad) 0; }
.back { font-size:15px; font-family:"Archivo", Arial, sans-serif; font-weight:500; }
.pj-head h1 { margin-top:clamp(28px,6vh,60px); font-weight:500; font-size:clamp(44px,7vw,112px);
              letter-spacing:-.035em; line-height:1; }
.pj-head .sub { margin-top:16px; font-size:clamp(18px,1.5vw,24px); max-width:34ch; line-height:1.35; }
.meta { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,2.4vw,36px);
        margin-top:clamp(36px,7vh,72px); padding-top:14px; border-top:1px solid var(--ink); font-size:15px; }
.meta dt { color:var(--soft); margin-bottom:4px; }
.note { margin-top:18px; color:var(--soft); font-size:14px; }

.pj-img { margin:clamp(40px,8vh,90px) var(--pad) 0; }
.pj-img.narrow { width:min(56%, 760px); margin-left:auto; margin-right:auto; }
.pj-img figcaption, .pair figcaption { margin-top:10px; font-size:14px; color:var(--soft); }

.block { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(18px,2.4vw,36px);
         padding:clamp(70px,12vh,140px) var(--pad) 0; }
.block h2 { grid-column:1 / span 4; font-weight:500; font-size:clamp(22px,1.9vw,30px); letter-spacing:-.01em; line-height:1.15; }
.block .body { grid-column:6 / span 7; font-size:clamp(17px,1.3vw,20px); line-height:1.5; }
.block .body p + p { margin-top:1em; }
.block .body ol, .block .body ul { list-style:none; }
.block .body li { padding:12px 0; border-bottom:1px solid var(--line); }
.block .body li:first-child { border-top:1px solid var(--line); }
.block .body li b { font-family:"Archivo", Arial, sans-serif; font-weight:600; margin-right:.4em; }

.pair { display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,36px); align-items:start;
        margin:clamp(40px,8vh,90px) var(--pad) 0; }
.pair.poster { grid-template-columns:5fr 7fr; }

.pj-img.ticket { width:min(calc(100% - 2 * var(--pad)), 1080px); margin-left:auto; margin-right:auto; }
.pj-img.ticket img { border-radius:6px; }
.names.big { columns:1; }
.names.big li { font-family:"Archivo", Arial, sans-serif; font-weight:500; font-size:clamp(40px,5vw,80px); letter-spacing:-.03em; line-height:1.05; }

.swatches { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.swatch div { aspect-ratio:1; border:1px solid var(--line); }
.swatch p { margin-top:8px; font-size:14px; }
.swatch span { display:block; color:var(--soft); font-size:14px; }

.headliner { font-family:"Archivo", Arial, sans-serif; font-weight:500; font-size:clamp(40px,5vw,80px);
             letter-spacing:-.03em; line-height:1; margin-bottom:24px; }
.names { columns:3; column-gap:24px; }
.names li { border:0 !important; padding:4px 0 !important; }

.next { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin:clamp(80px,14vh,160px) var(--pad) 0;
        padding-top:14px; border-top:1px solid var(--ink); font-family:"Archivo", Arial, sans-serif; font-weight:500; }
.next a { font-size:clamp(28px,4vw,60px); letter-spacing:-.03em; line-height:1.1; }
.next span { color:var(--soft); font-size:15px; }

/* ---------- mobile ---------- */
@media (max-width:760px) {
  .nav { gap:12px; font-size:14px; }
  .packs { row-gap:40px; }
  .top__logo svg { height:22px; }
  .pair, .pair.poster { grid-template-columns:1fr; }
  .card { width:100%; }
  .studio__grid, .block, .packs, .live { grid-template-columns:1fr; }
  .live h3, .live p, .live__cta { grid-column:1; justify-self:start; }
  .studio__txt, .offer, .offer:first-of-type, .block h2, .block .body { grid-column:1; }
  .meta { grid-template-columns:1fr 1fr; row-gap:18px; }
  .pj-img.ticket { width:auto; margin-left:var(--pad); margin-right:var(--pad); }
  .pj-img.narrow { width:auto; margin-left:var(--pad); margin-right:var(--pad); }
  .swatches { grid-template-columns:1fr 1fr; }
  .names { columns:2; }
  .foot { flex-direction:column; }
}