/* =========================================================================
   Deux mondes, un seul site.
   [data-world="jules"]  : fanzine photocopié, scotch fluo, papier déchiré
   [data-world="julius"] : jaune, noir, blanc et gaffer
   ========================================================================= */

@font-face{
  font-family:'Bricolage';
  src:url('../assets/fonts/bricolage-latin-wdth.woff2') format('woff2');
  font-weight:200 800;font-stretch:75% 100%;font-display:swap;
}
@font-face{
  font-family:'VT323';
  src:url('../assets/fonts/vt323-latin.woff2') format('woff2');
  font-weight:400;font-display:swap;
}

:root{
  --paper:#ffffff;
  --ink:#000000;
  --mute:#5c5c5c;
  --line:#d6d6d6;
  --violet:#6f2dff;
  --neon:#d8ff2a;
  --night:#14032b;
  --pad:clamp(16px,3.2vw,44px);
  --bar:58px;
  --logo-h:30px;
  --tape:rgba(216,255,42,.92);
}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--bar) + 16px);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);overflow-x:clip;
  font-family:'Bricolage',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:17px;line-height:1.5;
}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
::selection{background:var(--violet);color:#fff}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:300}
.skip:focus{top:8px}
#chrome{display:contents}

/* grain de photocopie, uniquement côté Jules */
body[data-world="jules"]::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .8 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================================
   MONDE JULES : en-tête
   ========================================================================= */
/* une seule barre noire, toujours visible : logo Jules Gondry à gauche, menu au centre, logo Julius On The Wave
   à droite, en miroir. Les deux colonnes des logos ont la même largeur : le menu reste au centre de la page. */
.bar{
  position:sticky;top:0;z-index:20;background:#000;color:#fff;
  display:grid;grid-template-columns:1fr minmax(0,max-content) 1fr;align-items:center;column-gap:20px;
  min-height:var(--bar);padding:0 var(--pad);
}
/* bord déchiré sous la barre */
.bar::after{
  content:'';position:absolute;left:0;right:0;top:calc(100% - 1px);height:18px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='18' viewBox='0 0 360 18'%3E%3Cpath fill='%23000' d='M0 0H360L360.0 8.3L358.8 6.3L347.0 15.6L340.1 5.0L331.8 3.6L321.5 3.8L310.4 4.7L301.9 9.8L295.8 13.2L290.8 3.4L284.1 3.7L272.7 15.5L265.2 3.2L258.3 12.9L248.1 3.0L240.1 15.7L231.3 14.7L224.9 2.0L212.8 15.4L204.8 13.9L196.7 12.7L191.6 6.0L185.0 6.4L174.2 13.8L160.7 16.0L153.7 8.4L143.2 9.0L133.0 9.3L120.9 8.2L112.2 2.4L105.5 4.7L100.5 9.4L95.9 4.2L85.8 11.2L72.7 15.8L67.8 11.7L56.0 3.3L48.8 3.3L37.1 10.8L28.0 4.6L18.2 9.1L9.5 14.9L0.0 8.3Z'/%3E%3C/svg%3E") repeat-x left top/360px 18px;
}
.mini,.jlogo{display:flex;align-items:center;height:var(--logo-h);text-decoration:none}
.mini{justify-self:start}
.jlogo{justify-self:end}
.mini img{height:100%;width:auto;max-width:none}
.jlogo img{height:100%;width:auto;max-width:min(220px,22vw);object-fit:contain;object-position:right center}
.jlogo:hover img,.mini:hover img{opacity:.8}
.jlogo.txt{height:auto;padding:6px 10px;font-size:.95rem;font-weight:550;color:var(--neon);white-space:nowrap}
.jlogo.txt:hover{background:var(--violet);color:#fff}
.bar ul{
  display:flex;gap:2px;list-style:none;margin:0;padding:0;min-width:0;
  overflow-x:auto;scrollbar-width:none;
}
.bar ul::-webkit-scrollbar{display:none}
.bar li a{
  display:block;padding:6px 13px;text-decoration:none;white-space:nowrap;color:#fff;
  font-size:1.16rem;font-weight:650;letter-spacing:-.01em;
}
.bar li a:hover{background:#fff;color:var(--ink)}
.bar li a[aria-current="page"]{
  background:linear-gradient(transparent 80%,var(--neon) 80% 93%,transparent 93%);
}
.bar li a[aria-current="page"]:hover{background:#fff}
.bar :focus-visible,footer :focus-visible{outline-color:#fff}
.bar ::selection,footer ::selection{background:var(--neon);color:#000}
/* écran moyen : menu un peu plus serré */
@media (max-width:1180px){
  .bar{column-gap:12px}
  .bar li a{padding:6px 9px;font-size:1.06rem}
}
/* téléphone et petite tablette : les deux logos sur une ligne, le menu dessous (il défile de côté s'il déborde) */
@media (max-width:860px){
  html[data-world="jules"]{scroll-padding-top:100px}
  .bar{grid-template-columns:1fr auto;grid-template-areas:"jg jw" "nav nav";row-gap:6px;min-height:0;padding-top:12px;padding-bottom:4px}
  .mini{grid-area:jg}
  /* le logo Julius, plus petit que celui de Jules Gondry : deux signatures bien distinctes */
  .jlogo{grid-area:jw;height:calc(var(--logo-h) * .66)}
  .jlogo img{max-width:34vw}
  /* tout le menu tient sur la largeur de l'écran, sans défilement (au pire, sur deux lignes) */
  .bar ul{grid-area:nav;overflow:visible;flex-wrap:wrap;justify-content:center;column-gap:clamp(4px,2vw,18px);row-gap:0}
}
@media (max-width:560px){
  .bar ul{justify-content:space-between;column-gap:0;margin:0 -4px}
  /* lettres un peu resserrées (la police le permet) et taille calculée sur la largeur de l'écran : les 5 rubriques tiennent sur une ligne */
  .bar li a{padding:6px 4px;font-stretch:85%;font-size:clamp(12px,calc((100vw - 72px) / 19.8),16.5px);letter-spacing:-.015em}
}

main{padding:clamp(28px,4vw,52px) var(--pad) 90px;outline:none;position:relative}

/* =========================================================================
   Vidéos
   ========================================================================= */
.frame{position:relative;aspect-ratio:16/9;background:#000;color:#fff;container-type:inline-size}
.frame iframe,.frame video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.nosrc{position:absolute;inset:0;margin:0;display:grid;place-items:center;padding:20px;text-align:center;font-weight:600}
.pbtn{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;display:block}
.poster{
  position:absolute;inset:0;background:#000 center/cover no-repeat;color:#fff;
  display:flex;flex-direction:column;justify-content:space-between;padding:clamp(10px,3.4cqw,30px);text-align:left;
}
.poster .pt{font-size:clamp(.8rem,2.6cqw,1.3rem);font-weight:500;max-width:28ch}
.poster .pa{
  font-size:clamp(1.5rem,11cqw,6.2rem);line-height:.92;font-weight:800;font-stretch:75%;
  letter-spacing:-.03em;overflow-wrap:anywhere;
}
.poster.has-img .pa,.poster.has-img .pt{display:none}
.tri{
  position:absolute;right:clamp(10px,3.4cqw,30px);bottom:clamp(10px,3.4cqw,30px);
  width:clamp(30px,8cqw,76px);aspect-ratio:1;background:currentColor;
  clip-path:polygon(18% 8%,94% 50%,18% 92%);
}
.poster.has-img .tri{color:#fff;filter:drop-shadow(0 0 6px rgba(0,0,0,.6))}

.vid{width:min(100%,1100px)}
.meta{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-top:22px}
.meta h3{margin:0;font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1.5;font-weight:700;letter-spacing:-.02em}
.meta h3 span{
  background:var(--ink);color:var(--paper);padding:.06em .4em .1em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.who{margin:6px 0 0;line-height:1.7}
.who span{background:var(--violet);color:#fff;padding:.1em .45em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.cbtn{
  flex:none;background:var(--paper);border:2px solid var(--ink);padding:7px 14px;font-weight:600;
}
.cbtn:hover{background:var(--ink);color:var(--paper)}
.credits{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.credits.open{grid-template-rows:1fr}
.ci{overflow:hidden;min-height:0}
.note{
  margin:22px 10px 12px;padding:20px 24px 22px;max-width:640px;
  background:var(--neon);color:#000;transform:rotate(-.7deg);box-shadow:5px 6px 0 #000;
}
.note p{margin:0 0 14px}
.note dl{display:grid;grid-template-columns:minmax(110px,max-content) 1fr;gap:6px 22px;margin:0}
.note dt{opacity:.62}
.note dd{margin:0;font-weight:600}
.note dt.full{grid-column:1 / -1;opacity:1;font-weight:600}
.more{
  display:inline-block;margin-top:clamp(48px,7vw,90px);font-size:1.3rem;font-weight:650;padding:9px 20px;
  background:var(--ink);color:var(--paper);text-decoration:none;transform:rotate(-1deg);
}
.more:hover{background:var(--violet)}
.center{text-align:center}

[data-world="jules"] .vid .frame,[data-world="jules"] .reel .frame{box-shadow:9px 9px 0 var(--ink)}
[data-world="jules"] .vid .frame:hover,[data-world="jules"] .reel .frame:hover{box-shadow:9px 9px 0 var(--violet)}

[data-world="jules"] .pbtn:hover .poster:not(.has-img),
[data-world="jules"] .card:hover .poster:not(.has-img){background:var(--violet)}

/* =========================================================================
   Pages
   ========================================================================= */
.page{max-width:1300px;margin:0 auto}
.ptitle{
  margin:0 0 clamp(26px,3.4vw,44px);font-size:clamp(2.8rem,8vw,6rem);line-height:.92;
  font-weight:800;font-stretch:75%;letter-spacing:-.035em;
}
.ptitle span{
  background:linear-gradient(transparent 58%,var(--neon) 58% 90%,transparent 90%);
  padding:0 .14em;margin-left:-.14em;
}
.filters{display:flex;flex-wrap:wrap;gap:10px 8px;margin:0 0 clamp(30px,3.6vw,48px)}
.filters button{
  background:var(--ink);color:var(--paper);border:0;padding:5px 13px;font-size:1.02rem;font-weight:600;
  transform:rotate(var(--r,0deg));
}
.filters button:nth-child(4n+1){--r:-1.3deg}
.filters button:nth-child(4n+2){--r:.9deg}
.filters button:nth-child(4n+3){--r:-.5deg}
.filters button:nth-child(4n){--r:1.4deg}
.filters button sup{opacity:.6;margin-left:4px;font-size:.7em}
.filters button:hover{background:var(--neon);color:#000}
.filters button[aria-pressed="true"]{background:var(--violet);color:#fff}


/* liste déroulante d'artistes */
.pkrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 clamp(32px,3.8vw,52px)}
.pk{position:relative}
.pk-btn{
  background:var(--ink);color:var(--paper);border:0;padding:10px 18px;font-size:1.1rem;font-weight:650;
  display:inline-flex;align-items:center;gap:16px;transform:rotate(-.6deg);
}
.pk-btn::after{content:'';border:6px solid transparent;border-top:7px solid currentColor;border-bottom:0}
.pk-btn:hover,.pk.open .pk-btn{background:var(--violet)}
.pk-panel{
  position:absolute;z-index:30;left:0;top:calc(100% + 10px);width:min(400px,calc(100vw - 2 * var(--pad)));
  background:var(--paper);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);
}
.pk-panel[hidden]{display:none}
.pk-search{display:block;width:100%;border:0;border-bottom:3px solid var(--ink);padding:13px 14px;font-size:1.05rem;background:var(--paper);color:var(--ink);border-radius:0}
.pk-search:focus-visible{outline:3px solid var(--violet);outline-offset:-3px}
.pk-list{list-style:none;margin:0;padding:0;max-height:min(52vh,380px);overflow:auto}
.pk-item{display:flex;justify-content:space-between;gap:14px;width:100%;padding:9px 14px;background:none;border:0;text-align:left;font-weight:600;font-size:1.05rem}
.pk-item small{opacity:.6;font-weight:500;font-size:.9rem}
.pk-item:hover,.pk-item:focus-visible{background:var(--violet);color:#fff;outline:none}
.pk-item[aria-current="true"]{background:var(--neon);color:#000}
.pk-none{padding:14px;color:var(--mute)}
.pkcount{color:var(--mute)}
.pager{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:clamp(44px,5vw,66px) 0 0}
.pg{min-width:46px;padding:9px 15px;background:var(--ink);color:#fff;text-decoration:none;font-weight:650;text-align:center}
.pg:hover{background:var(--violet)}
.pg.cur{background:var(--violet)}
.textlink{font-weight:600;text-decoration:underline;text-underline-offset:.22em}
.textlink:hover{background:var(--violet);color:#fff;text-decoration:none}

/* Clips vidéo, Live sessions, Fiction : 2 vidéos par rangée (1 sur téléphone) */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(44px,5vw,72px) clamp(24px,3.4vw,52px)}
.card{background:none;border:0;padding:0;text-align:left;display:block;width:100%}
.card .frame{margin-bottom:14px}
.card .ct{display:inline;font-weight:700;font-size:clamp(1.05rem,1.45vw,1.25rem);line-height:1.5;letter-spacing:-.01em}
.card .ct b{font:inherit;background:var(--ink);color:var(--paper);padding:.05em .38em .1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.card .ca{display:block;margin-top:3px;color:var(--mute)}
[data-world="jules"] .card .frame{box-shadow:6px 6px 0 var(--ink)}
[data-world="jules"] .card:hover .frame{box-shadow:6px 6px 0 var(--violet)}
[data-world="jules"] .grid .card:nth-child(4n+1) .frame{transform:rotate(-.6deg)}
[data-world="jules"] .grid .card:nth-child(4n+2) .frame{transform:rotate(.45deg)}
[data-world="jules"] .grid .card:nth-child(4n+3) .frame{transform:rotate(.35deg)}
[data-world="jules"] .grid .card:nth-child(4n) .frame{transform:rotate(-.4deg)}
.empty{color:var(--mute);font-size:1.1rem}

.intro{max-width:60ch;margin:0 0 clamp(26px,3.4vw,44px);font-size:1.2rem}
.subh{margin:clamp(30px,4vw,46px) 0 18px;font-size:clamp(1.5rem,3.4vw,2.2rem);font-weight:800;font-stretch:75%;letter-spacing:-.02em;line-height:1.5}
.subh span{background:var(--ink);color:#fff;padding:.05em .4em .1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.fzlast{margin-bottom:clamp(30px,5vw,60px)}
.fzlast .subh{margin-top:0}
.rows{list-style:none;margin:0;padding:0;border-top:3px solid var(--ink)}
.row{
  display:grid;grid-template-columns:minmax(72px,8rem) 1fr auto;gap:8px 20px;align-items:baseline;
  width:100%;background:none;border:0;border-bottom:1px solid var(--ink);padding:16px 10px;text-align:left;
}
.row.nonum{grid-template-columns:1fr auto}
.row:hover{background:var(--violet);color:#fff}
.row .n{font-weight:800;font-stretch:75%;font-size:1.6rem;letter-spacing:-.02em}
.row .t{font-weight:600;font-size:1.2rem}
.row.nonum .t{font-weight:800;font-stretch:75%;font-size:1.7rem;letter-spacing:-.02em}
.row .g{opacity:.65}
.row .d{opacity:.65;white-space:nowrap}

/* photographies : tirages collés */
.photos{columns:3 280px;column-gap:clamp(22px,3vw,40px)}
.print{break-inside:avoid;margin:0 0 clamp(30px,3.6vw,46px);display:block;width:100%;text-align:left;
  background:#fff;border:0;padding:10px 10px 12px;box-shadow:0 0 0 1px rgba(0,0,0,.12),3px 4px 0 rgba(0,0,0,.85);position:relative}
.print:nth-child(3n+1){transform:rotate(-1deg)}
.print:nth-child(3n+2){transform:rotate(.8deg)}
.print:nth-child(3n){transform:rotate(-.4deg)}
.print::before{
  content:'';position:absolute;top:-11px;left:50%;width:70px;height:22px;margin-left:-35px;z-index:3;
  transform:rotate(-4deg);background:var(--tape);
  clip-path:polygon(0 0,100% 0,97% 22%,100% 46%,97% 72%,100% 100%,0 100%,3% 74%,0 50%,3% 24%);
}
.print:nth-child(even)::before{transform:rotate(3deg)}
.print img{width:100%;height:auto;background:#eee}
.print .blank{
  width:100%;aspect-ratio:var(--ratio,3/2);display:grid;place-items:center;text-align:center;padding:12px;
  background:#000;color:#fff;font-weight:700;font-stretch:75%;font-size:1.3rem;letter-spacing:-.01em;
}
.print:hover .blank{background:var(--violet)}
.print figcaption,.print .cap{display:block;padding-top:10px;font-weight:600;line-height:1.3}
.print .cap small{display:block;font-weight:400;color:var(--mute)}
.wip{max-width:60ch;margin:0 0 clamp(26px,3.4vw,44px)}
.wipt{margin:0 0 12px;font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;font-stretch:75%;letter-spacing:-.02em;line-height:1.1}
.wipt span{background:var(--ink);color:#fff;padding:.05em .4em .1em;transform:rotate(-1deg);display:inline-block}
.wip p:not(.wipt){margin:0;font-size:1.2rem}
.lightbox img{width:100%;height:auto;max-height:78vh;object-fit:contain;background:#000}
.lightbox p{margin:12px 0 0;font-weight:600}
.lightbox small{display:block;font-weight:400;color:var(--mute)}

.text{max-width:62ch;margin:0 auto}
.text h1{font-size:clamp(2.6rem,7vw,5rem);line-height:.92;font-weight:800;font-stretch:75%;letter-spacing:-.035em;margin:0 0 30px}
.text h1 span{background:linear-gradient(transparent 58%,var(--neon) 58% 90%,transparent 90%);padding:0 .14em;margin-left:-.14em}
.text p{margin:0 0 1.1em;font-size:1.15rem}
.mail{font-weight:600;overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:.2em}
.mail:hover{background:var(--violet);color:#fff;text-decoration:none}
.contactline{margin:0;font-size:clamp(1.05rem,2.2vw,1.3rem);line-height:1.4}
.about .abouth{margin:2.2em 0 .7em;font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:800;font-stretch:75%;letter-spacing:-.02em}
.social{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:12px 30px}
.social a{display:inline-flex;align-items:center;gap:10px;padding:4px 8px 4px 0;font-weight:600;font-size:1.1rem;text-decoration:none}
.social a:hover{background:var(--violet);color:#fff;padding-left:8px;margin-left:-8px}
.social svg{width:26px;height:26px;flex:none}
.mail:hover{background:var(--violet);color:#fff}
.links{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:4px}
.links a{font-size:1.25rem;font-weight:600}
.links a:hover{background:var(--violet);color:#fff}

/* pied de page : papier noir déchiré */
footer{
  position:relative;margin-top:30px;background:#000;color:#fff;
  padding:46px var(--pad) 42px;text-align:center;display:grid;gap:8px;justify-items:center;
}
footer::before{
  content:'';position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='20' viewBox='0 0 360 20'%3E%3Cpath fill='%23000' d='M0 20V5.4L0.0 5.4L8.0 15.7L18.3 3.6L31.7 5.4L38.6 14.4L46.0 6.7L51.2 3.4L60.9 5.9L70.8 7.9L79.4 17.3L88.3 11.2L100.6 4.9L106.4 16.5L118.3 6.0L124.5 13.8L137.5 5.1L150.5 16.1L160.5 8.7L165.9 2.6L179.1 5.8L189.9 6.1L201.8 11.5L209.0 4.8L219.9 3.1L226.5 10.9L238.7 11.8L245.7 16.7L252.0 2.3L258.9 9.1L264.0 4.8L271.8 11.2L277.5 7.8L290.0 17.7L300.4 13.1L310.2 4.2L315.0 2.3L327.7 13.2L340.9 2.3L351.1 9.7L360.0 5.4V20Z'/%3E%3C/svg%3E") repeat-x left bottom/360px 20px;
}
footer p{margin:0}
footer a{color:var(--neon);font-weight:600}
footer a:hover{background:var(--neon);color:#000}
footer small{opacity:.7}
footer a.rep{display:inline-flex;align-items:center;gap:16px;margin-top:26px;padding:8px 12px;color:#fff;text-decoration:none;font-weight:600}
footer a.rep:hover{background:rgba(255,255,255,.16);color:#fff}
footer a.rep img{height:36px;width:auto}

/* =========================================================================
   Fenêtres
   ========================================================================= */
dialog{color:var(--ink)}
dialog::backdrop{background:rgba(0,0,0,.84)}
#viewer{width:min(1100px,94vw);max-height:94vh;overflow:auto;border:0;padding:0;background:var(--paper)}
.vhead{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px 26px}
.vhead p{margin:0;font-weight:600}
.vbody{padding:0 20px 26px}
.x{background:var(--paper);border:2px solid var(--ink);padding:6px 14px;font-weight:600}
/* Précédent / Suivant : grandes flèches de chaque côté de la fenêtre, à hauteur de la vidéo (--vy, réglé en JS).
   La fenêtre se resserre un peu pour leur laisser la place. Sur téléphone : petites flèches en haut de la fenêtre. */
.vhead .vsteps{display:flex;align-items:center;gap:10px;margin-left:auto}
.vhead .vsteps:empty{display:none}
.vcount{font-weight:600;font-variant-numeric:tabular-nums;color:var(--mute);white-space:nowrap}
.vstep{display:grid;place-items:center;padding:0;border:2px solid var(--ink);background:var(--paper);color:var(--ink);font-weight:700;line-height:1}
.vstep:hover{background:var(--neon);color:#000;border-color:#000}
[data-world="julius"] .vstep:hover{background:var(--jk);color:var(--jy);border-color:var(--jk)}
@media (min-width:700px){
  #viewer.hasnav{width:min(1100px,calc(100vw - 168px))}
  .vstep{position:fixed;z-index:5;top:var(--vy,50%);transform:translateY(-50%);width:56px;height:56px;font-size:1.7rem;box-shadow:5px 5px 0 #000}
  .vstep:active{transform:translateY(calc(-50% + 3px));box-shadow:2px 2px 0 #000}
  .vprev{left:calc(50vw - min(550px,50vw - 84px) - 70px)}
  .vnext{right:calc(50vw - min(550px,50vw - 84px) - 70px)}
  .vstep:focus-visible{outline:3px solid var(--neon);outline-offset:3px}
}
@media (max-width:699px){
  #viewer.hasnav .vhead{position:sticky;top:0;z-index:3;background:var(--paper);padding-bottom:14px;margin-bottom:12px}
  .vstep{width:42px;height:38px;font-size:1.25rem}
  .vhead .vsteps{gap:6px;margin-right:4px}
}
.x:hover{background:var(--ink);color:var(--paper)}


/* =========================================================================
   MONDE JULIUS : le jaune du studio (cyclo), du noir, du blanc. Une page courte et simple :
   la bannière avec le logo en noir, une ligne de clips à faire glisser, puis le lecteur de musique
   et la présentation. Titres des morceaux en blanc sur du gaffer noir. Le tout sur une texture
   de papier légère (voir plus bas).
   ========================================================================= */
html[data-world="julius"]{background:var(--jy-auto,#e49e00)}
body[data-world="julius"]{
  --jy:var(--jy-auto,#e49e00);--jk:#0c0c0c;
  --paper:var(--jy);--ink:var(--jk);--mute:#3f2c00;--line:var(--jk);
  position:relative;color-scheme:light;background:var(--jy);color:var(--jk);
}
body[data-world="julius"] main{padding-top:0;padding-bottom:24px}
[data-world="julius"] ::selection{background:var(--jk);color:var(--jy)}
[data-world="julius"] :focus-visible{outline-color:var(--jk)}

/* l'effet papier : une grande feuille un peu fatiguée, passée au scanner. Le grain, les fibres et les poussières
   sont calculés d'un seul tenant sur toute la page (aucune répétition, donc aucune démarcation), et la lumière
   inégale n'est faite que de dégradés très doux, sans aucune ligne droite. La barre du haut et le pied de page restent nets. */
body[data-world="julius"]::before{
  content:'';position:absolute;inset:0;z-index:95;pointer-events:none;mix-blend-mode:multiply;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003 .22' numOctaves='2' seed='11'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cfilter id='d' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='1' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 10 0 0 0 -8.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.2'/%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.1'/%3E%3Crect width='100%25' height='100%25' filter='url(%23d)' opacity='.45'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat,
    radial-gradient(60% 45% at 22% 30%,rgba(90,55,0,.07),transparent 70%),
    radial-gradient(50% 40% at 78% 72%,rgba(90,55,0,.06),transparent 70%),
    radial-gradient(140% 100% at 45% 38%,transparent 58%,rgba(70,40,0,.2) 100%);
}

/* barre du haut : retour vers Jules à gauche, liens de Julius à droite */
.jbar{
  position:sticky;top:0;z-index:96;display:flex;align-items:center;gap:6px;min-height:var(--bar);padding:0 var(--pad);
  background:var(--jk);color:#fff;
}
.jbar a{background:none;border:0;color:#fff;font:inherit;font-weight:650;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:8px 12px;white-space:nowrap}
.jbar a:hover{color:var(--jy)}
.jbar .back{margin-right:auto;padding-left:0}
.jbar .back::before{content:'←';margin-right:.6em;letter-spacing:0}
.jbar .jnav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.jbar .jnav::-webkit-scrollbar{display:none}
/* bouton Contact de la barre : un clic affiche l'adresse juste en dessous */
.jcontactbtn{flex:none;margin-left:8px;padding:6px 12px;border:2px solid #fff;background:none;color:#fff;font:inherit;font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.jcontactbtn:hover,.jcontactbtn[aria-expanded="true"]{background:var(--jy);border-color:var(--jy);color:var(--jk)}
.jmailpop{position:absolute;right:var(--pad);top:calc(100% + 8px);z-index:97;display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--jk);color:#fff;box-shadow:0 12px 26px rgba(0,0,0,.3)}
.jmailpop[hidden]{display:none}
.jmailpop a{color:#fff;font-weight:700;font-size:1rem;letter-spacing:0;text-transform:none;padding:0;border-bottom:2px solid var(--jy)}
.jmailpop a:hover{color:var(--jy)}
.jmailpop button{padding:4px 9px;border:1px solid #fff;background:none;color:#fff;font:inherit;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.jmailpop button:hover{background:#fff;color:var(--jk)}

/* la bannière garde ses proportions ; le logo en noir, au centre */
.jhero{position:relative;margin:0 calc(-1 * var(--pad));overflow:hidden;background:var(--jy)}
/* le bas de l'image est légèrement rogné : ta bannière a un fin liseré noir tout en bas */
.jhero-img{display:block;width:100%;height:auto;max-height:520px;object-fit:cover;object-position:right center;clip-path:inset(0 0 1.2% 0)}
.jhero.noimg{height:clamp(160px,20vw,300px)}
.jmark{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;line-height:1}
.jmark img{display:block;width:clamp(180px,24vw,400px);height:auto;filter:brightness(0)}
.jmark .j1,.jmark .j2{display:block;text-align:center;font-weight:800;font-stretch:75%;letter-spacing:-.02em;color:var(--jk)}
.jmark .j1{font-size:clamp(1.6rem,3.6vw,2.6rem)}
.jmark .j2{font-size:clamp(.9rem,1.8vw,1.2rem);letter-spacing:.14em;text-transform:uppercase}

/* les clips sur une seule ligne : on la fait glisser vers la gauche (souris, doigt, pavé tactile ou flèches) */
.jstriphead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:clamp(14px,2vw,22px) 0 0}
.jstriphead .jlabel{margin:0}
.jarrows{display:flex;gap:6px}
.jarrow{width:40px;height:32px;padding:0;border:0;background:var(--jk);color:#fff;font:inherit;font-size:1.05rem;line-height:1;cursor:pointer}
.jarrow:hover:not(:disabled){color:var(--jy)}
.jarrow:disabled{opacity:.28;cursor:default}
.jstrip{position:relative;margin:0 calc(-1 * var(--pad))}
.jtrack{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:0 var(--pad);padding:12px var(--pad) 14px;
  scrollbar-width:thin;scrollbar-color:var(--jk) transparent;user-select:none;-webkit-user-select:none;cursor:grab}
.jtrack.drag{cursor:grabbing;scroll-snap-type:none}
.jtrack::-webkit-scrollbar{height:6px}
.jtrack::-webkit-scrollbar-thumb{background:var(--jk)}
.jclip{flex:none;position:relative;display:block;width:clamp(200px,18.5vw,265px);margin:0;padding:0 0 16px;border:0;background:none;color:inherit;cursor:inherit;text-align:left;scroll-snap-align:start}
.jclip-shot{display:block;position:relative;aspect-ratio:16/9;background:var(--jk);overflow:hidden;container-type:inline-size;transition:transform .2s}
.jclip:hover .jclip-shot{transform:translateY(-3px)}
.jclip:focus-visible{outline:3px solid var(--jk);outline-offset:4px}
.jclip .poster .pa,.jclip .poster .pt{display:none}
/* titre en bas à gauche, à cheval sur le bord de l'image, toujours sur une ligne (réduit si le titre est long) */
.jclip .tape{top:auto;bottom:0;left:-6px;max-width:none;white-space:nowrap;font-size:var(--fs,clamp(.8rem,1vw,.95rem));padding:.28em .75em .32em}

/* le bas de page : lecteur de musique, présentation, contact */
.jrow{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start;max-width:1240px;margin:clamp(18px,2.4vw,30px) auto 0}
.jlabel{margin:0 0 16px;font-size:.74rem;font-weight:750;letter-spacing:.18em;text-transform:uppercase}
.jplayer{position:relative;padding:10px;background:var(--jk);box-shadow:0 12px 26px rgba(0,0,0,.18)}
.jplayer iframe{display:block;width:100%;border:0;border-radius:10px}
.jplayer .gaffer:first-child{left:-16px;top:-12px;transform:rotate(-9deg)}
.jplayer .gaffer:nth-child(2){right:-14px;top:-10px;transform:rotate(7deg)}
/* sous le lecteur : un bouton par plateforme, pour écouter sur celle qu'on préfère */
.jplatforms{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.jplatforms button{padding:6px 11px;border:2px solid var(--jk);background:none;color:var(--jk);font:inherit;font-weight:750;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.jplatforms button:hover{background:var(--jk);color:var(--jy)}
.jplatforms button[aria-pressed="true"]{background:var(--jk);color:var(--jy)}
.jabout .tagline{margin:0 0 14px;max-width:none;font-size:clamp(1.1rem,1.6vw,1.35rem);font-weight:700;line-height:1.3;text-align:left;color:var(--jk)}
.jabout p{margin:0 0 .8em;font-size:1.02rem;line-height:1.55;max-width:78ch}
.jmore{padding:5px 10px;border:2px solid var(--jk);background:none;color:var(--jk);font:inherit;font-weight:750;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.jmore:hover{background:var(--jk);color:var(--jy)}
/* la bio complète, dans la fenêtre du milieu */
.jbiofull{max-width:62ch;margin:0 auto;padding:6px 4px 10px}
.jbiofull p{margin:0 0 1em;font-size:1.05rem;line-height:1.6}
.jbiofull p:last-child{margin-bottom:0}
[data-world="julius"] .mail{display:inline-block;color:var(--jk);font-weight:700;font-size:clamp(1.05rem,1.6vw,1.2rem);text-decoration:none;border-bottom:2px solid currentColor;line-height:1.3;word-break:break-all}
[data-world="julius"] .mail:hover{background:var(--jk);color:var(--jy)}
@media (max-width:860px){.jrow{grid-template-columns:1fr}}

/* le gaffer noir aux bords déchirés, avec le titre en lettres simples */
.tape{
  position:absolute;z-index:2;left:-10px;top:-.2em;max-width:calc(100% + 6px);margin:0;padding:.26em .85em .34em;
  color:#fff;font-family:'Bricolage',system-ui,sans-serif;font-weight:700;font-stretch:87.5%;font-size:clamp(1.3rem,2.3vw,1.75rem);line-height:1.15;letter-spacing:.01em;
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 42%,rgba(0,0,0,.2)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .04' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    #131313;
  clip-path:polygon(0 4%,3% 0,6% 6%,9% 1%,12% 5%,88% 2%,91% 7%,94% 0,97% 5%,100% 2%,99% 30%,100% 55%,98% 78%,100% 100%,96% 95%,93% 100%,90% 96%,10% 99%,7% 94%,4% 100%,1% 95%,0 70%,2% 45%,0 20%);
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.3));transform:rotate(var(--r,-2deg));transform-origin:left center;pointer-events:none;
}
/* petit bout de gaffer décoratif */
.gaffer{position:absolute;z-index:2;width:clamp(64px,8vw,100px);height:24px;background:#131313;
  clip-path:polygon(0 8%,4% 0,8% 10%,12% 0,88% 4%,92% 0,96% 12%,100% 2%,98% 50%,100% 96%,95% 90%,91% 100%,87% 92%,13% 98%,9% 90%,5% 100%,1% 92%,2% 50%);
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.28))}

/* fenêtre de lecture, affiches, boutons : noir sur jaune */
[data-world="julius"] .poster{background-color:var(--jk);color:#fff}
[data-world="julius"] .poster .pa{color:#fff}
[data-world="julius"] .poster .pt{color:var(--jy)}
[data-world="julius"] .tri{color:var(--jy)}
[data-world="julius"] .pbtn:hover .poster:not(.has-img){background-color:#1f1f1f}
[data-world="julius"] .cbtn{background:none;border:2px solid var(--jk);color:var(--jk)}
[data-world="julius"] .cbtn:hover{background:var(--jk);color:var(--jy)}
[data-world="julius"] .note{background:#fff;color:var(--jk);border:0;box-shadow:6px 6px 0 var(--jk);transform:none}
[data-world="julius"] .meta h3 span{background:none;padding:0;color:var(--jk)}
[data-world="julius"] .who span{background:none;padding:0;color:var(--mute)}
[data-world="julius"] .more{background:none;border:2px solid var(--jk);color:var(--jk);transform:none}
[data-world="julius"] .more:hover{background:var(--jk);color:var(--jy)}
[data-world="julius"] #viewer{border:2px solid var(--jk)}
#viewer.vbio{width:min(720px,94vw)}
[data-world="julius"] .x{background:none;border-color:var(--jk);color:var(--jk)}
[data-world="julius"] .x:hover{background:var(--jk);color:var(--jy)}
[data-world="julius"] .links a:hover{background:var(--jk);color:var(--jy)}

/* pied de page */
[data-world="julius"] footer{position:relative;z-index:96;background:var(--jk);color:#fff;border-top:0;margin-top:clamp(26px,3.5vw,40px)}
[data-world="julius"] footer::before{display:none}
[data-world="julius"] footer a{color:var(--jy)}
[data-world="julius"] footer a:hover{background:var(--jy);color:var(--jk)}
[data-world="julius"] footer a.rep{color:#fff}


/* coupure de bande entre les deux mondes : une seule fois, au changement */
.cut{position:fixed;inset:0;z-index:400;pointer-events:none;background:#000;animation:cut .55s steps(6,end) forwards}
.cut::before,.cut::after{content:'';position:absolute;left:0;right:0;height:9%}
.cut::before{top:22%;background:#ffd000}
.cut::after{top:61%;background:#fff;height:14%}
@keyframes cut{
  0%{opacity:1;transform:translateY(0)}
  25%{opacity:.9;transform:translateY(-3%)}
  50%{opacity:.7;transform:translateY(2%)}
  75%{opacity:.35;transform:translateY(-1%)}
  100%{opacity:0;transform:translateY(0)}
}

/* =========================================================================
   Adaptation
   ========================================================================= */
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .meta{flex-direction:column}
  .row{grid-template-columns:1fr auto}
  .row .n{grid-column:1/-1}
  :root{--logo-h:24px}
  [data-world="jules"] .vid .frame,[data-world="jules"] .reel .frame{box-shadow:6px 6px 0 var(--ink)}
  [data-world="jules"] .vid .frame:hover,[data-world="jules"] .reel .frame:hover{box-shadow:6px 6px 0 var(--violet)}
  .jbar button,.jbar a{padding:6px 7px;font-size:.72rem;letter-spacing:.12em}
  .jplayer .gaffer:first-child{left:-6px}
  .jplayer .gaffer:nth-child(2){right:-6px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .cut{display:none}
}

/* =========================================================================
   PAGE D'ENTRÉE : petite vidéo en plein écran, logo au centre, un clic pour entrer
   ========================================================================= */
html[data-world="entree"]{background:#000}
body[data-world="entree"]{background:#000;color:#fff}
body[data-world="entree"] main{padding:0}
body[data-world="entree"] footer{display:none}
/* plein écran : la vidéo couvre tout l'écran (recadrée si besoin, sans bandes noires), logo au centre */
html[data-world="entree"],html[data-world="entree"] body{overflow:hidden;overscroll-behavior:none}
/* hauteur : 100dvh, la hauteur de l'écran visible, y compris sur Chrome pour iPhone (dont la « fenêtre » des éléments
   fixes est plus petite que la zone affichée : on ne cale donc pas la page d'entrée sur le bas de cette fenêtre) */
.entree{position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;overflow:hidden;background:#000;cursor:pointer;container-type:size}
.intro-media{position:absolute;inset:0}
/* voile noir le temps que la vidéo démarre (la vidéo elle-même reste « visible » pour le navigateur :
   certains refusent de lancer une vidéo masquée) */
.intro-veil{position:absolute;inset:0;z-index:1;background:#000;pointer-events:none;transition:opacity .6s ease}
.entree.playing .intro-veil{opacity:0}
/* la vidéo couvre l'écran, centrée, sans « transform » (placée par ses bords) */
.intro-media iframe,.intro-media video{
  position:absolute;border:0;pointer-events:none;object-fit:cover;
  --vw:max(100cqw,calc(100cqh * var(--ir,1.7778)));--vh:max(100cqh,calc(100cqw / var(--ir,1.7778)));
  width:var(--vw);height:var(--vh);left:calc((100cqw - var(--vw)) / 2);top:calc((100cqh - var(--vh)) / 2);
}
.diag{position:absolute;z-index:5;top:8px;left:8px;right:8px;max-height:60%;overflow:hidden;margin:0;padding:8px 10px;background:rgba(0,0,0,.8);color:#d8ff2a;font:11px/1.4 ui-monospace,Menlo,monospace;white-space:pre-wrap;pointer-events:none}
.intro-shield{position:absolute;inset:0;z-index:1}
@media (prefers-reduced-motion:reduce){.intro-veil{display:none}}
.nlogo{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);display:block;width:min(560px,72vw);height:auto;pointer-events:none;filter:drop-shadow(0 2px 18px rgba(0,0,0,.45))}
.enter{
  position:absolute;z-index:2;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);
  color:#fff;text-decoration:none;font-size:.82rem;font-weight:650;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 14px;opacity:.75;text-shadow:0 1px 8px rgba(0,0,0,.6);white-space:nowrap;
}
.enter:hover,.enter:focus-visible{opacity:1;background:var(--neon);color:#000;text-shadow:none;outline-color:#fff}

/* =========================================================================
   THÈME SOMBRE (essai : ouvrir le site avec ?theme=dark)
   ========================================================================= */
:root[data-theme="dark"]{--paper:#141414;--ink:#f4f4f4;--mute:#a8a8a8;--line:#333}
html[data-theme="dark"] body[data-world="jules"]::before{display:none}
/* cadres : ombre discrète, violette au survol */
html[data-theme="dark"] [data-world="jules"] .vid .frame,html[data-theme="dark"] [data-world="jules"] .reel .frame{box-shadow:9px 9px 0 #2b2b2b}
html[data-theme="dark"] [data-world="jules"] .vid .frame:hover,html[data-theme="dark"] [data-world="jules"] .reel .frame:hover{box-shadow:9px 9px 0 var(--violet)}
html[data-theme="dark"] [data-world="jules"] .card .frame{box-shadow:6px 6px 0 #2b2b2b}
html[data-theme="dark"] [data-world="jules"] .card:hover .frame{box-shadow:6px 6px 0 var(--violet)}
html[data-theme="dark"] .pk-panel{box-shadow:8px 8px 0 #000;border-color:#555}
html[data-theme="dark"] .pk-search{border-bottom-color:#555}
/* titres de page : étiquette néon, texte noir */
html[data-theme="dark"] .ptitle span,html[data-theme="dark"] .text h1 span{background:var(--neon);color:#000;padding:.02em .16em .07em;margin-left:0}
/* boutons et pastilles qui étaient noirs sur fond blanc */
html[data-theme="dark"] .pg{background:#2b2b2b;color:#fff}
html[data-theme="dark"] .pg:hover,html[data-theme="dark"] .pg.cur{background:var(--violet)}
html[data-theme="dark"] .more:hover,html[data-theme="dark"] .pk-btn:hover,html[data-theme="dark"] .pk.open .pk-btn{color:#fff}
html[data-theme="dark"] .rows{border-top-color:#555}
html[data-theme="dark"] .row{border-bottom-color:#333}
html[data-theme="dark"] .row:hover{color:#fff}
html[data-theme="dark"] #viewer{border:1px solid #333}
html[data-theme="dark"] .cbtn{border-color:#777}
html[data-theme="dark"] .cbtn:hover{border-color:var(--ink)}
html[data-theme="dark"] .x{border-color:#777}

/* =========================================================================
   CHAÎNES TV : diffusion enchaînée, logo incrusté, cartouche à l'ancienne
   ========================================================================= */
@media (max-width:700px){.tvgrid{grid-template-columns:1fr}}

.tvstage{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;box-shadow:9px 9px 0 var(--ink);container-type:inline-size}
.tvstage iframe,.tvstage video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain;background:#000}
.tvstage .nosrc{position:absolute;inset:0;margin:0;display:grid;place-items:center;color:#fff;padding:20px;text-align:center}
.tvlogo{position:absolute;top:16px;right:16px;z-index:3;max-height:clamp(72px,11cqw,160px);max-width:clamp(160px,26cqw,340px);opacity:.92;filter:drop-shadow(0 1px 3px rgba(0,0,0,.75))}
/* la chaîne Reggae/Palm Treev a un logo volontairement énorme, ça fait partie de la blague */
.tvlogo-reggae{max-height:clamp(80px,14.1cqw,220px);max-width:70cqw}
.tvlogo-text{background:rgba(0,0,0,.55);color:#fff;padding:10px 18px;font-weight:800;font-stretch:75%;font-size:1.9rem;letter-spacing:-.01em}
.tvlower{position:absolute;left:16px;bottom:16px;z-index:3;background:rgba(0,0,0,.72);color:#fff;padding:9px 15px;max-width:72%;
  transform:translateY(10px);opacity:0;transition:opacity .4s,transform .4s;pointer-events:none}
.tvlower.in{opacity:1;transform:translateY(0)}
.tvlower b{display:block;font-weight:800;font-stretch:75%;letter-spacing:-.01em;line-height:1.2}
.tvlower span{display:block;opacity:.85;font-size:.92rem}


/* =========================================================================
   FENÊTRE DU CLIP : images du film sous la vidéo, bouton Partager
   ========================================================================= */
.metabtns{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;flex:none}
a.cbtn{display:inline-block;text-decoration:none}
.vstills{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:10px;margin-top:22px}
.pstill{display:block;padding:0;border:0;background:#000;cursor:zoom-in;aspect-ratio:16/9;overflow:hidden}
.pstill img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.pstill:hover img{transform:scale(1.03)}
.pstill:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
@media (max-width:560px){.vstills{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}}
/* image agrandie, par-dessus la fenêtre */
.szoom{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;gap:12px;padding:clamp(12px,3vw,28px);background:rgba(0,0,0,.94);color:#fff}
.szhead{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:700}
.szimg{flex:1;min-height:0;display:grid;place-items:center}
.szimg img{max-width:100%;max-height:100%;object-fit:contain}
.sznav{display:flex;justify-content:center;align-items:center;gap:16px;font-weight:700}
.szoom .cbtn{background:#fff;color:#000;border-color:#fff}
.szoom .cbtn:hover{background:var(--neon);border-color:var(--neon);color:#000}
/* menu Partager */
.sharewrap{position:relative;display:inline-block}
.sharemenu{position:fixed;z-index:30;display:flex;flex-direction:column;min-width:230px;padding:6px;background:#0c0c0c;box-shadow:0 14px 30px rgba(0,0,0,.35)}
.sharemenu a,.sharemenu button{display:block;width:100%;padding:9px 12px;border:0;background:none;color:#fff;font:inherit;font-weight:650;font-size:.92rem;text-align:left;text-decoration:none;cursor:pointer}
.sharemenu a:hover,.sharemenu button:hover,.sharemenu a:focus-visible,.sharemenu button:focus-visible{background:var(--neon);color:#000;outline:none}
[data-world="julius"] .sharemenu a:hover,[data-world="julius"] .sharemenu button:hover{background:var(--jy)}

/* =========================================================================
   MENTIONS LÉGALES (lien en bas de chaque page)
   ========================================================================= */
.legal h2{margin:34px 0 10px;font-size:1.15rem;font-weight:800}
.legal p{font-size:1rem;margin:0 0 .6em;line-height:1.55}
.legal .todo{color:var(--mute);font-style:italic}
footer .legalink{font-size:.85rem;opacity:.8}

/* =========================================================================
   TÉLÉVISION (#/television) : une seule grande télé, face à soi (d'après la GoldStar).
   Boutons Marche, Son, Chaîne − / + ; le petit bouton en relief au bout à droite ouvre Pirates TV.
   ========================================================================= */
.telepage{max-width:1180px;margin:0 auto;padding-top:clamp(0px,1vw,12px)}
/* la télé prend toute la hauteur disponible sous le menu (la page se place dessus en arrivant) */
.tele{position:relative;container-type:inline-size;width:min(100%,max(320px,calc((100vh - 112px) * 1.42)));margin:0 auto 24px}
@supports (height:100svh){.tele{width:min(100%,max(320px,calc((100svh - 112px) * 1.42)))}}
.tele-body{position:relative;padding:3cqw 3cqw 1.8cqw;border-radius:3.4cqw 3.4cqw 2.4cqw 2.4cqw;background:linear-gradient(180deg,#38383d,#222226);
  box-shadow:inset 0 .35cqw 0 rgba(255,255,255,.08),inset 0 -.5cqw 0 rgba(0,0,0,.35),inset .3cqw 0 0 rgba(255,255,255,.03),0 2cqw 4cqw rgba(0,0,0,.35)}
.tele-bezel{padding:1.7cqw;border-radius:3.2cqw/4.2cqw;background:#17171a;box-shadow:inset 0 0 0 .3cqw #0e0e10,inset 0 1cqw 2cqw rgba(0,0,0,.7),0 .25cqw 0 rgba(255,255,255,.05)}
.tele .tvstage{box-shadow:none;border-radius:3%/5.4%;background:#000}
.tele-logo{display:contents}
.tele .tvlogo-text{font-size:clamp(14px,3.4cqw,32px);padding:.35em .6em;max-width:40cqw}
.tele .tvlower{left:3.5%;bottom:6%;padding:.5em .85em}
.tele .tvlower b{font-size:clamp(13px,2.4cqw,20px)}
.tele .tvlower span{font-size:clamp(11px,1.8cqw,15px)}
/* petit écran (téléphone) : logos de chaîne 2 à 2,5 fois plus petits, collés dans le coin */
@container (max-width:640px){
  .tvlogo{top:8px;right:8px;max-height:9cqw;max-width:24cqw}
  .tvlogo-reggae{max-height:10.5cqw;max-width:30cqw}
  .tvlogo-text{padding:4px 8px;font-size:max(11px,3.4cqw)}
  .tele .tvlogo-text{font-size:max(11px,3.2cqw)}
}
/* la vitre de l'écran en deux couches : les bords assombris passent sous le logo de la chaîne (il ressort),
   les lignes et le reflet passent par-dessus (il fait partie de l'image) */
.tele-glass{position:absolute;inset:0;pointer-events:none}
/* écran de lecture : un calque par lecteur (Vimeo, YouTube), un seul visible à la fois */
.scr-layer{position:absolute;inset:0}
/* ---- plein écran de la télé ---- */
.tele-tap{position:absolute;inset:0;z-index:6;display:none}
.tele-fsbar{display:none}
.tele .tvstage.tv-full{border-radius:0;aspect-ratio:auto;box-shadow:none}
.tvstage.tv-full .tele-tap{display:block;cursor:none}
.tvstage.tv-full.bar-on .tele-tap{cursor:default}
.tvstage.tv-full .tele-fsbar{display:flex;position:absolute;left:50%;bottom:max(4%,env(safe-area-inset-bottom));z-index:8;transform:translateX(-50%);
  gap:8px;padding:8px;border-radius:12px;background:rgba(10,10,12,.72);opacity:0;pointer-events:none;transition:opacity .25s}
.tvstage.tv-full.bar-on .tele-fsbar{opacity:1;pointer-events:auto}
.tvstage.tv-full.bar-on .tele-mutei{opacity:0;pointer-events:none}
.fs-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:52px;height:44px;padding:0 14px;border:0;border-radius:8px;
  background:linear-gradient(#2f2f34,#18181b);color:#f2f2f4;font-family:inherit;font-weight:700;font-size:1.05rem;line-height:1;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 0 #09090a}
.fs-btn:hover{background:linear-gradient(#3a3a40,#1d1d21)}
.fs-btn:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
.fs-btn .tele-ic svg{display:block;width:20px;height:20px}
.fs-btn:first-child,.fs-btn:nth-child(2){font-size:1.5rem}
.tvstage:fullscreen{width:100%;height:100%;border-radius:0;aspect-ratio:auto}
.tvstage:-webkit-full-screen{width:100%;height:100%;border-radius:0}
/* iPhone (pas de vrai plein écran pour une page web) : l'écran de la télé couvre toute la fenêtre ;
   téléphone tenu droit, l'image est tournée d'un quart de tour, pour la regarder téléphone couché */
.tvstage.tv-pseudo{position:fixed;z-index:1000;top:0;left:0;width:100vw;height:100vh;margin:0}
@supports (height:100dvh){.tvstage.tv-pseudo{height:100dvh}}
@media (orientation:portrait){
  .tvstage.tv-pseudo{width:100vh;height:100vw;transform-origin:0 0;transform:translateX(100vw) rotate(90deg)}
  @supports (height:100dvh){.tvstage.tv-pseudo{width:100dvh}}
}
html.tv-lock,html.tv-lock body{overflow:hidden;overscroll-behavior:none}
.tele-glass::before,.tele-glass::after{content:'';position:absolute;inset:0;pointer-events:none}
.tele-glass::before{z-index:2;background:radial-gradient(ellipse at center,transparent 62%,rgba(0,0,0,.45));box-shadow:inset 0 0 3cqw rgba(0,0,0,.7)}
.tele-glass::after{z-index:5;background:linear-gradient(128deg,rgba(255,255,255,.1) 0 13%,rgba(255,255,255,.03) 26%,transparent 40%),repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.12) 2px 3px)}
.tele-osd{position:absolute;left:3.5%;top:5%;z-index:3;font-family:'VT323',monospace;color:var(--neon);line-height:1;text-shadow:0 0 6px rgba(216,255,42,.7),2px 2px 0 #000;pointer-events:none;transition:opacity .4s}
.tele-osd b{display:block;font-weight:400;font-size:clamp(24px,4.4cqw,58px)}
.tele-osd span{display:block;margin-top:.25em;font-size:clamp(15px,2.2cqw,28px)}
.tele-osd.hide{opacity:0}
.tele-mutei{position:absolute;right:3.5%;bottom:6%;z-index:7;display:none;align-items:center;gap:.4em;font-family:'VT323',monospace;font-size:clamp(15px,2.1cqw,26px);color:var(--neon);text-shadow:0 0 6px rgba(216,255,42,.7),2px 2px 0 #000;
  background:none;border:0;padding:.2em .3em;margin:0;cursor:pointer}
.tele-mutei:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
/* au doigt, le message dit quoi faire */
.mi-touch{display:none}
@media (hover:none){.mi-desk{display:none}.mi-touch{display:inline}}
.tele-mutei.on{display:flex}
.tele-mutei-ic svg{display:block;width:1.3em;height:1.3em}
.tele-flash{position:absolute;inset:0;z-index:4;background:#000;opacity:0;pointer-events:none}
.tele-flash.go{animation:telezap .5s ease-out}
@keyframes telezap{0%,55%{opacity:1}100%{opacity:0}}
.tele-offscreen{position:absolute;inset:0;z-index:4;display:none;background:#030303}
.tele.off .tele-offscreen{display:block}
.tele.off .tele-offscreen::after{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:#fff;box-shadow:0 0 22px 8px rgba(255,255,255,.65);animation:teledot 1.1s ease-out forwards}
@keyframes teledot{to{opacity:0;transform:scale(.2)}}

/* le bandeau de commandes : des vrais boutons de télé */
.tele-panel{display:flex;align-items:flex-end;gap:clamp(10px,2.2cqw,28px);margin-top:1.8cqw;padding:1.1cqw 2cqw 1.3cqw;border-radius:1.6cqw;background:linear-gradient(#27272a,#1b1b1e);
  box-shadow:inset 0 .3cqw .6cqw rgba(0,0,0,.6),0 .2cqw 0 rgba(255,255,255,.05)}
.tele-ctl{display:flex;flex-direction:column;align-items:center;gap:clamp(4px,.6cqw,8px);flex:none}
.tele-lbl{font-size:clamp(9px,1cqw,12px);font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1;color:#9d9da3}
.tele-row{display:flex;align-items:center;gap:clamp(6px,.9cqw,12px)}
.tele-btn{display:inline-grid;place-items:center;height:clamp(34px,3.7cqw,48px);min-width:clamp(42px,4.8cqw,62px);padding:0 clamp(8px,1cqw,14px);border:0;border-radius:clamp(6px,.8cqw,10px);
  color:#dcdce0;font-family:inherit;font-weight:800;font-size:clamp(18px,2.1cqw,26px);line-height:1;cursor:pointer;
  background:linear-gradient(#2e2e33,#17171a);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),inset 0 -2px 0 rgba(0,0,0,.45),0 3px 0 #09090a,0 4px 7px rgba(0,0,0,.5);
  transition:transform .06s,box-shadow .06s,background .15s}
.tele-btn:hover{background:linear-gradient(#37373d,#1c1c20)}
.tele-btn:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 2px 5px rgba(0,0,0,.65),0 0 0 #09090a}
.tele-btn:focus-visible{outline:2px solid var(--neon);outline-offset:3px}
.tele-btn:disabled{cursor:default;color:#77777c}
.tele-ic svg{display:block;width:clamp(17px,2cqw,25px);height:auto}
.tele-rock{display:flex;gap:2px}
.tele-rock .tele-btn:first-child{border-radius:clamp(6px,.8cqw,10px) 2px 2px clamp(6px,.8cqw,10px)}
.tele-rock .tele-btn:last-child{border-radius:2px clamp(6px,.8cqw,10px) clamp(6px,.8cqw,10px) 2px}
.tele-led{display:block;width:clamp(7px,.8cqw,10px);height:clamp(7px,.8cqw,10px);border-radius:50%;background:#ff3b22;box-shadow:0 0 8px rgba(255,59,34,.85)}
.tele.off .tele-led{background:#4a140e;box-shadow:none}
.tele-lcd{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:clamp(8px,1.2cqw,16px);height:clamp(34px,3.7cqw,48px);padding:0 clamp(10px,1.4cqw,18px);border-radius:clamp(4px,.6cqw,8px);
  background:#060707;color:var(--neon);font-family:'VT323',monospace;font-size:clamp(20px,2.5cqw,32px);line-height:clamp(34px,3.7cqw,48px);white-space:nowrap;overflow:hidden;
  box-shadow:inset 0 0 0 2px #000,inset 0 3px 6px rgba(0,0,0,.8);text-shadow:0 0 .8cqw rgba(216,255,42,.45)}
.tele-lcd span{overflow:hidden;text-overflow:ellipsis}
.tele.off .tele-lcd{color:#3c3f33;text-shadow:none}
.tele-grille{flex:0 1 15cqw;align-self:stretch;min-width:0;border-radius:.8cqw;background:radial-gradient(circle,#0b0b0c 0 .3cqw,transparent .38cqw) 0 0/1cqw 1cqw,#1f1f22}
.tele-secret{align-self:center;width:clamp(10px,1.1cqw,14px);height:clamp(10px,1.1cqw,14px);min-width:10px;min-height:10px}
.tele-foot{display:block;width:84%;height:1.6cqw;margin:0 auto;border-radius:0 0 1.2cqw 1.2cqw;background:linear-gradient(#1c1c1f,#0f0f11)}
@container (max-width:620px){
  .tele-panel{flex-wrap:wrap;align-items:flex-end;row-gap:12px}
  .tele-lcd{order:-1;flex-basis:100%}
  .tele-grille{flex:1 1 30px;min-height:34px}
}

/* =========================================================================
   PIRATES TV : chaîne cachée derrière la télévision
   (entrée : le petit bouton en relief au bout à droite de la télévision)
   ========================================================================= */
/* le bouton secret de la télévision (Pirates TV) : en relief, contrairement aux autres touches */
.crt-secret{position:relative;z-index:2;flex:none;width:2.8cqw;height:2.8cqw;min-width:10px;min-height:10px;padding:0;border:0;border-radius:50%;
  background:#26262a;box-shadow:inset 0 .3cqw .35cqw rgba(255,255,255,.16),0 .3cqw .4cqw rgba(0,0,0,.75);cursor:pointer;transition:background .2s,box-shadow .2s}
.crt-secret:hover{background:#34343a;box-shadow:inset 0 .3cqw .35cqw rgba(255,255,255,.22),0 0 1.4cqw rgba(216,255,42,.35)}
.crt-secret:focus-visible{outline:2px solid var(--neon);outline-offset:3px}


html.pt-lock{overflow:hidden}
#pirate{--pt-silk:#ebe6da;--pt-plastic:#1c1c1a;--pt-led:#ff3b22;--pt-mat:#1d4e46;
  width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;border:0;padding:0;background:#000;color:var(--pt-silk);overflow:hidden}
#pirate::backdrop{background:#000}
#pirate :focus-visible{outline:2px solid var(--neon);outline-offset:3px}
#pirate button{font-family:inherit}
#pirate [hidden]{display:none !important}

/* --- le panneau de réglage, dans le noir, éclairé par une lampe de bureau --- */
.pt-deck{position:absolute;inset:0;overflow:auto;display:flex;padding:max(14px,env(safe-area-inset-top,0px)) 12px max(14px,env(safe-area-inset-bottom,0px));
  background:radial-gradient(ellipse 62% 58% at 50% 34%,rgba(255,206,140,.2),rgba(255,180,100,.07) 48%,transparent 74%),#000}
.pt-frame{position:relative;margin:auto;width:100%;max-width:960px;padding:22px;border-radius:16px;
  background:
    radial-gradient(circle at 30% 40%,rgba(196,34,8,.55) 0 1.4px,transparent 2px) 0 0/23px 19px,
    radial-gradient(circle at 70% 20%,rgba(120,24,0,.4) 0 1px,transparent 1.5px) 5px 7px/17px 29px,
    radial-gradient(circle at 50% 50%,rgba(255,240,180,.35) 0 1px,transparent 1.6px) 3px 2px/31px 13px,
    radial-gradient(ellipse at 15% 0%,#f8c724,transparent 55%),
    radial-gradient(ellipse at 95% 100%,#e04a0c,transparent 50%),
    linear-gradient(160deg,#f6b51b,#ef6a12);
  box-shadow:0 30px 70px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.25);
  animation:ptrise .45s cubic-bezier(.2,.9,.3,1) both}
@keyframes ptrise{from{transform:translateY(40px);opacity:0}}
.pt-deck.pt-dive .pt-frame{animation:ptdive .6s ease-in forwards}
/* la lumière tombe d'en haut : le haut du panneau est éclairé, le bas se perd dans l'ombre */
.pt-frame::after{content:'';position:absolute;inset:0;z-index:5;border-radius:inherit;pointer-events:none;
  background:radial-gradient(ellipse 75% 55% at 50% 12%,rgba(255,236,200,.16),transparent 70%),linear-gradient(180deg,transparent 45%,rgba(0,0,0,.42) 100%)}
.pt-frame{box-shadow:0 40px 90px rgba(0,0,0,.8),0 0 120px rgba(255,190,110,.1),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.25)}
@keyframes ptdive{to{transform:scale(1.9);opacity:0;filter:brightness(3)}}
.pt-panel{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  grid-template-areas:"head head" "screen picture" "tuner tuner" "bottom bottom" "sol sol";gap:24px 30px;padding:18px 22px 26px;border-radius:6px;color:var(--pt-silk);
  font-stretch:75%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),var(--pt-plastic);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 2px 0 rgba(0,0,0,.25)}
.pt-head{grid-area:head;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.pt-btn{background:transparent;border:1px solid var(--pt-silk);color:var(--pt-silk);border-radius:3px;padding:3px 12px;font-size:.9rem;font-weight:650;font-stretch:75%}
.pt-btn:hover{background:rgba(235,230,218,.12)}
.pt-model{margin:0 0 0 auto;text-align:right;line-height:1.25}
.pt-model b{display:block;font-style:italic;font-weight:800;font-size:clamp(1.05rem,2.4vw,1.5rem);letter-spacing:-.005em}
.pt-model span{font-size:.9rem;opacity:.75}
.pt-group{position:relative;border-top:1px solid var(--pt-silk);border-left:1px solid var(--pt-silk);padding:22px 12px 8px 16px}
.pt-glabel{position:absolute;top:-.72em;left:10px;padding:0 7px;background:var(--pt-plastic);font-size:.9rem;font-weight:650;line-height:1.4}

.pt-screen{grid-area:screen}
.pt-bezel{padding:12px;border-radius:20px;background:linear-gradient(#2c2c29,#161614);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 3px 0 #000}
.pt-crt{position:relative;aspect-ratio:4/3;border-radius:22px/18px;overflow:hidden;background:#000}
.pt-crt canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#ptNoise{image-rendering:pixelated}
.pt-fx{position:absolute;inset:0;pointer-events:none;background:
  repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.25) 2px 3px),
  radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.07),transparent 40%),
  radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,.65))}
.pt-osd{position:absolute;left:0;right:0;bottom:4%;text-align:center;font-family:'VT323',monospace;font-size:clamp(20px,3vw,30px);color:var(--neon);text-shadow:0 0 6px rgba(216,255,42,.8),2px 2px 0 #000;pointer-events:none}

.pt-picture{grid-area:picture;align-self:start;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"badge contrast" "color sharp";gap:34px 10px;justify-items:center;padding-top:30px;padding-bottom:22px}
.pt-badge{grid-area:badge;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-stretch:75%;font-size:1.3rem;color:#f5edff;
  background:radial-gradient(circle at 40% 32%,#b995ff,#6f2dff 55%,#26086b);box-shadow:0 0 18px rgba(111,45,255,.65),inset 0 0 10px rgba(0,0,0,.55),0 0 0 3px #0b0b0a}
#ptKContrast{grid-area:contrast}#ptKColor{grid-area:color}#ptKSharp{grid-area:sharp}

.pt-knob{display:flex;flex-direction:column;align-items:center;gap:22px}
.pt-dial{--s:60px;position:relative;width:var(--s);height:var(--s);border-radius:50%;touch-action:none;cursor:grab;outline:none}
.pt-dial.on{cursor:grabbing}
.pt-dial:focus-visible .pt-cap{box-shadow:0 0 0 3px var(--pt-plastic),0 0 0 5px var(--neon)}
.pt-cap{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,#2e2e2b 0 54%,#0c0c0b 55% 58%,transparent 59%),repeating-conic-gradient(#0b0b0a 0 5deg,#2f2f2c 5deg 10deg);
  box-shadow:0 5px 9px rgba(0,0,0,.7),inset 0 1px 1px rgba(255,255,255,.18)}
.pt-ptr{position:absolute;left:50%;top:7%;width:3px;height:33%;margin-left:-1.5px;border-radius:2px;background:var(--pt-silk)}
.pt-ticks span{position:absolute;left:calc(50% + var(--x) * (50% + 13px));top:calc(50% + var(--y) * (50% + 13px));transform:translate(-50%,-50%);font-size:.75rem;line-height:1;pointer-events:none}
.pt-lbl{font-size:.9rem;font-weight:650}
.pt-knob.big{gap:10px}
.pt-knob.big .pt-dial{--s:84px}
.pt-knob.big .pt-cap{background:radial-gradient(circle at 44% 36%,#fffaf0,#e3dac3 45%,#b9ae92 58%,#0c0c0b 59% 62%,transparent 63%),repeating-conic-gradient(#0b0b0a 0 5deg,#2f2f2c 5deg 10deg)}
.pt-knob.big .pt-ptr{background:#151513;top:10%;height:26%;width:4px;margin-left:-2px}

.pt-tuner{grid-area:tuner;display:flex;align-items:center;gap:24px}
.pt-band{position:relative;flex:1;min-width:0;height:74px;border-radius:6px;overflow:hidden;touch-action:none;cursor:ew-resize;
  background:linear-gradient(#f4e8c8,#e1cf9e);box-shadow:inset 0 0 0 2px #070706,inset 0 8px 16px rgba(0,0,0,.35)}
.pt-band::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,.28) 0 18%,transparent 30%);pointer-events:none}
#ptBandTicks i{position:absolute;bottom:12px;width:1px;height:10px;margin-left:-.5px;background:#2d2519}
#ptBandTicks i.maj{height:18px;width:2px;margin-left:-1px}
#ptBandNums b{position:absolute;top:8px;transform:translateX(-50%);font-size:.85rem;font-weight:750;color:#2d2519}
.pt-bunit{position:absolute;right:10px;bottom:0;font-size:.7rem;font-weight:750;color:#2d2519}
.pt-needle{position:absolute;top:5px;bottom:5px;width:2px;margin-left:-1px;background:#e01d18;box-shadow:0 0 6px rgba(224,29,24,.75)}

.pt-bottom{grid-area:bottom;display:flex;flex-wrap:wrap;align-items:stretch;gap:26px 30px}
.pt-bottom .pt-group{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:22px}
.pt-rockers{display:flex;gap:16px}
.pt-rk{display:flex;flex-direction:column;align-items:center;gap:14px;font-size:.9rem;font-weight:650}
.pt-rocker{position:relative;width:36px;height:54px;border:0;padding:0;border-radius:5px;
  background:repeating-linear-gradient(transparent 0 5px,rgba(0,0,0,.14) 5px 7px) 0 0/100% 50% no-repeat,linear-gradient(#a5ef72,#5eaf35);
  box-shadow:0 6px 0 #2c6515,0 8px 12px rgba(0,0,0,.55);transition:transform .08s,box-shadow .08s}
.pt-rocker[aria-checked="true"]{transform:translateY(5px);box-shadow:0 1px 0 #2c6515,0 2px 4px rgba(0,0,0,.55);
  background:repeating-linear-gradient(transparent 0 5px,rgba(0,0,0,.14) 5px 7px) 0 100%/100% 50% no-repeat,linear-gradient(#86d657,#4d9828)}
.pt-fader{display:flex;flex-direction:column;align-items:center;gap:8px;touch-action:none;cursor:grab;outline:none;font-size:.9rem;font-weight:650}
.pt-rail{position:relative;width:10px;height:150px;border-radius:5px;background:#040404;box-shadow:inset 0 1px 3px #000,0 1px 0 rgba(255,255,255,.12)}
.pt-tbar{position:absolute;left:50%;width:48px;height:26px;transform:translate(-50%,-50%);border-radius:4px;
  background:repeating-linear-gradient(90deg,#191917 0 3px,#30302c 3px 5px);box-shadow:0 5px 7px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.16)}
.pt-fader:focus-visible .pt-tbar{outline:2px solid var(--neon);outline-offset:2px}
.pt-meter{display:flex;flex-direction:column;align-items:center;gap:5px}
.pt-meter i{display:block;height:6px;border-radius:1px;background:#3a3a36}
.pt-meter i.on{background:var(--neon);box-shadow:0 0 6px rgba(216,255,42,.7)}
.pt-pwr{flex-direction:column}
.pt-pwrrow{display:flex;align-items:center;gap:14px}
.pt-led{width:10px;height:10px;border-radius:50%;background:#561511;box-shadow:inset 0 1px 2px rgba(0,0,0,.7)}
.pt-led.on{background:var(--pt-led);box-shadow:0 0 8px var(--pt-led),0 0 20px rgba(255,59,34,.6)}
.pt-switch{position:relative;width:66px;height:28px;padding:0;border:0;border-radius:4px;background:#040404;box-shadow:inset 0 1px 3px #000,0 1px 0 rgba(255,255,255,.12)}
.pt-switch i{position:absolute;top:3px;left:4px;width:28px;height:22px;border-radius:3px;background:repeating-linear-gradient(90deg,#1c1c1a 0 2px,#383833 2px 4px);box-shadow:0 2px 4px rgba(0,0,0,.85);transition:left .12s}
.pt-switch[aria-checked="true"] i{left:34px}
.pt-switch.pt-refuse i{animation:ptrefuse .5s}
@keyframes ptrefuse{0%{left:4px}35%{left:31px}55%{left:24px}100%{left:4px}}
.pt-swl{display:flex;justify-content:space-between;width:66px;font-size:.85rem;font-weight:650}
.pt-sol{grid-area:sol;margin:0;font-family:'VT323',monospace;font-size:1.25rem;line-height:1.2;color:var(--neon)}

@media (max-width:760px){
  .pt-frame{padding:12px;border-radius:12px}
  .pt-panel{grid-template-columns:1fr;grid-template-areas:"head" "screen" "tuner" "picture" "bottom" "sol";padding:14px 14px 20px;gap:28px}
  .pt-model{margin:0;text-align:left;width:100%;order:-1}
  .pt-picture{grid-template-columns:repeat(3,1fr);grid-template-areas:"contrast color sharp"}
  .pt-badge{display:none}
  .pt-tuner{gap:14px}
  .pt-knob.big .pt-dial{--s:72px}
  #ptBandNums b.minor{display:none}
  .pt-bottom{gap:30px 16px}
  .pt-bottom .pt-group{padding:22px 10px 10px 12px}
}

/* --- la diffusion --- */
.pt-live{position:absolute;inset:0;overflow:auto;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;justify-content:safe center;gap:14px;
  padding:max(14px,env(safe-area-inset-top,0px)) 14px max(14px,env(safe-area-inset-bottom,0px));
  --pw:min(1120px,100%,calc((100vh - 250px) * 16 / 9))}
@supports (height:100dvh){.pt-live{--pw:min(1120px,100%,calc((100dvh - 250px) * 16 / 9))}}
.pt-bar{width:var(--pw);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;font-family:'VT323',monospace;font-size:1.5rem;line-height:1}
.pt-bar>*{white-space:nowrap}
.pt-onair{display:flex;align-items:center;gap:8px;color:#fff}
.pt-onair i{width:11px;height:11px;border-radius:50%;background:var(--pt-led);box-shadow:0 0 8px var(--pt-led);animation:ptblink 1.2s steps(2,start) infinite}
@keyframes ptblink{to{visibility:hidden}}
.pt-name{font-family:'Bricolage',system-ui,sans-serif;font-weight:800;font-stretch:75%;font-size:1.7rem;letter-spacing:-.01em;color:var(--neon)}
.pt-clock{color:#cfcfc6}
.pt-tv{position:relative;width:var(--pw);aspect-ratio:16/9;overflow:hidden;background:#000;container-type:inline-size;box-shadow:0 0 0 1px #222,0 0 60px rgba(111,45,255,.22)}
.pt-tv.pt-on{animation:ptcrt .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes ptcrt{0%{transform:scale(.03,.004);filter:brightness(6)}35%{transform:scale(1,.006);filter:brightness(4)}70%{transform:scale(1,1);filter:brightness(1.6)}100%{transform:none;filter:none}}
.pt-tv canvas{display:block;width:100%;height:100%}
.pt-host{position:absolute;inset:0;background:#000;pointer-events:none}
.pt-host>div,.pt-host iframe,.pt-host video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
/* le voile de l'écran en deux couches : les bords sombres passent sous le logo (il ressort),
   les lignes par-dessus (il fait partie de l'image) */
.pt-tvfx{position:absolute;inset:0;pointer-events:none}
.pt-tvfx::before,.pt-tvfx::after{content:'';position:absolute;inset:0;pointer-events:none}
.pt-tvfx::before{z-index:2;background:radial-gradient(ellipse at center,transparent 62%,rgba(0,0,0,.5))}
.pt-tvfx::after{z-index:4;background:repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.16) 2px 3px)}
.pt-bug{position:absolute;right:3%;top:5%;font-weight:800;font-stretch:75%;font-size:clamp(14px,2.4vw,28px);color:rgba(255,255,255,.6);pointer-events:none}
.pt-lower{position:absolute;z-index:5;left:3%;bottom:10%;max-width:80%;padding:.4em .8em .5em;background:var(--neon);color:#000;transform:translateX(-120%);opacity:0;transition:transform .55s cubic-bezier(.2,.9,.3,1),opacity .3s;pointer-events:none}
.pt-lower.pt-show{transform:none;opacity:1}
.pt-lower b{display:block;font-weight:800;font-stretch:75%;font-size:clamp(16px,2.4vw,26px);line-height:1.1}
.pt-lower span{font-size:clamp(13px,1.6vw,17px);font-weight:600}
.pt-toast{position:absolute;z-index:5;left:50%;top:6%;transform:translateX(-50%);width:max-content;max-width:88%;text-align:center;padding:.2em .7em;background:rgba(0,0,0,.72);font-family:'VT323',monospace;font-size:clamp(16px,2.4vw,26px);line-height:1.1;color:#fff;transition:opacity .6s;pointer-events:none}
.pt-toast.pt-gone{opacity:0}
.pt-guide{width:var(--pw);display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;font-size:1rem;color:#bdbcb3}
.pt-guide p{margin:0}
.pt-guide b{color:#fff}
.pt-ctrl{width:var(--pw);display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.pt-ctrl button{background:transparent;border:1px solid #6d6c65;color:#eeede6;padding:5px 14px;font-weight:650;font-size:.95rem}
.pt-ctrl button:hover{border-color:#fff}
.pt-rule{margin-left:auto;font-size:.9rem;color:#8e8d86}
.pt-infobox{width:var(--pw)}
.pt-infobox .note{margin-top:4px}
@media (max-width:760px){
  .pt-bar{font-size:1.2rem}
  .pt-name{font-size:1.35rem}
  .pt-guide{font-size:.95rem}
}