/* FULLCNC.TV — noir cinéma partout, jaune #FFD400, Barlow Condensed + Barlow (maquette styles/wow/4-cinema-fenetre) */
@font-face{font-family:'Barlow';src:url(/fonts/barlow-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Barlow';src:url(/fonts/barlow-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url(/fonts/barlowcond-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url(/fonts/barlowcond-800.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url(/fonts/barlowcond-900.woff2) format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(/fonts/jbmono-500.woff2) format('woff2');font-weight:500;font-display:swap}
:root{--j:#FFD400;--n:#0a0a0a;--g:#161616;--g2:#1f1f1f;--t:#f5f5f0;--d:#a3a39b;--r:#ff3b30;--cond:'Barlow Condensed','Arial Narrow',sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--n);-webkit-text-size-adjust:100%}
body{background:var(--n);color:var(--t);font:400 17px/1.45 'Barlow',system-ui,sans-serif;overflow-x:hidden}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3{font-family:var(--cond);line-height:1.04}
:focus-visible{outline:3px solid var(--j);outline-offset:2px}
[hidden]{display:none!important}
.vig{background-size:cover;background-position:center;background-color:var(--g2)}

/* tête, posée sur l'image */
.barre{position:absolute;z-index:20;left:0;right:0;top:0;min-height:68px;display:flex;align-items:center;gap:30px;padding:0 28px}
.logo{background:var(--j);display:flex;align-items:center;padding:8px 14px;flex:none}
.logo img{display:block;height:21px;width:auto}
.nav{display:flex;gap:24px;font:700 18px var(--cond);letter-spacing:.05em;text-transform:uppercase;overflow-x:auto;scrollbar-width:none}
.nav a{opacity:.76;text-decoration:none;white-space:nowrap}
.nav a:hover{opacity:1}.nav a.on{opacity:1;color:var(--j)}
.droite{margin-left:auto;display:flex;gap:18px;align-items:center;font:700 16px var(--cond);letter-spacing:.06em;flex:none}
.langues{display:flex;gap:2px}.langues a{text-decoration:none;padding:2px 7px;opacity:.7}.langues a.on{opacity:1;color:#111;background:var(--t)}
.air{display:flex;gap:8px;align-items:center;white-space:nowrap}
.air i,.hg i{width:10px;height:10px;border-radius:50%;background:var(--r);box-shadow:0 0 14px var(--r);animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.35}}
.btn{background:var(--j);color:#111;padding:10px 16px;font:800 17px var(--cond);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;border:0;display:inline-block;white-space:nowrap;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn.b2{background:rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(8px)}

/* premier écran */
.hero{position:relative;min-height:100vh;overflow:hidden;background:#000;padding:80px 40px 18px}
.fond{position:absolute;inset:-4%;background-position:center;background-size:cover;filter:saturate(.7);animation:zoom 24s ease-in-out infinite alternate;transition:background-image .8s}
@keyframes zoom{to{transform:scale(1.12) translateX(-1.5%)}}
.voile{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.93) 0,rgba(0,0,0,.72) 42%,rgba(0,0,0,.5) 100%),linear-gradient(0deg,#000 0,transparent 30%)}
.grille{position:relative;z-index:4;display:grid;grid-template-columns:minmax(0,1fr) min(820px,56vw);gap:40px;align-items:start}
.titre{font:900 clamp(52px,5.7vw,102px)/1.04 var(--cond);text-transform:uppercase;margin-top:26px;white-space:nowrap}
.titre span{display:block;opacity:0;transform:translateY(40px);animation:mon .7s cubic-bezier(.2,.8,.2,1) forwards}
.titre span:nth-child(2){animation-delay:.18s}.titre span:nth-child(3){animation-delay:.36s}.titre .y{color:var(--j)}
@keyframes mon{to{opacity:1;transform:none}}
.lead{font-size:clamp(19px,1.45vw,23px);font-weight:600;line-height:1.28;margin-top:20px;max-width:540px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.cta .btn{font-size:23px;padding:14px 22px}

/* la fenêtre du lecteur */
.fen{background:#0c0c0c;box-shadow:0 0 0 1px rgba(255,212,0,.5),0 30px 110px rgba(255,212,0,.16);border-radius:14px;overflow:hidden}
.ecran{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;container-type:inline-size}
.ecran iframe,#yt{position:absolute;inset:0;width:100%;height:100%;border:0}
.rideau{position:absolute;inset:0;background:#000 center/cover no-repeat;transition:opacity .3s}
.rideau.off{opacity:0;pointer-events:none}
.hg{position:absolute;left:14px;top:12px;display:flex;gap:10px;align-items:center;background:rgba(0,0,0,.72);padding:6px 11px;border-radius:7px;font:500 15px 'JetBrains Mono',monospace;z-index:2}
.ch{position:absolute;right:16px;top:12px;text-align:right;color:var(--j);font:900 44px/.95 var(--cond);text-shadow:0 2px 12px rgba(0,0,0,.8);z-index:2;pointer-events:none}
.ch small{display:block;font:700 15px var(--cond);color:#fff;letter-spacing:.08em}
.ctrl{position:absolute;right:14px;top:82px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;z-index:2} /* le bas reste aux sous-titres */
.ctrl button{background:rgba(0,0,0,.72);color:#fff;border:0;padding:7px 12px;border-radius:7px;font:700 15px var(--cond);letter-spacing:.05em;text-transform:uppercase}
.ctrl button:hover{background:var(--j);color:#111}
.ctrl button[aria-pressed=false]{opacity:.55}
.carton{position:absolute;inset:0;background:var(--j);color:#111;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;padding:7%;z-index:3}
.carton small{font:700 max(15px,2.6cqw) var(--cond);letter-spacing:.06em;text-transform:uppercase}
.carton b{font:900 max(26px,6cqw)/1.02 var(--cond);max-width:24ch}
.carton a{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000}
.carton img{max-width:100%;max-height:100%;object-fit:contain}
.carton i{position:absolute;top:10px;right:12px;font:700 15px var(--cond);letter-spacing:.06em;font-style:normal;background:#111;color:var(--j);padding:2px 8px;z-index:1}
.carton.noir{background:#000;color:var(--t)}
.barre-prog{height:5px;background:#262626}.barre-prog i{display:block;height:100%;width:0;background:var(--j);transition:width 1s linear}
.info{display:grid;grid-template-columns:minmax(0,1fr) 262px;gap:16px;padding:13px 16px 15px;align-items:center}
.info h2{font:800 29px/1.05 var(--cond);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.info p{color:var(--d);font-size:15px;margin-top:3px}
.reacs{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.reac,.abo{background:#1d1d1d;color:var(--t);border:0;border-radius:20px;padding:4px 12px;font:700 15px var(--cond);letter-spacing:.04em;text-decoration:none}
.reac:hover{background:#333}.reac i{font-style:normal;color:var(--j);margin-left:3px}
.abo{background:var(--j);color:#111}
.suivant{text-decoration:none;display:flex;gap:10px;background:#181818;border-radius:9px;padding:7px;align-items:center;min-width:0}
.suivant .vig{width:88px;height:50px;border-radius:5px;flex:none}
.suivant small{display:block;color:var(--j);font:700 14px var(--cond);letter-spacing:.05em}
.suivant span{font:700 16px/1.05 var(--cond);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.film{position:relative;z-index:4;display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:14px}
.film a{text-decoration:none;min-width:0}
.film .vig{height:clamp(84px,7vw,120px);border-radius:7px}
.film b{display:block;font:800 17px var(--cond);color:var(--j);margin-top:6px}
.film em{font:600 14px/1.2 'Barlow',sans-serif;font-style:normal;color:#d7d7d0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.at{display:none}

/* le parcours sous le premier écran */
.parcours{padding:30px 40px 60px;display:grid;gap:54px}
.parcours h2,.page h2{font:900 clamp(34px,3.4vw,52px)/1 var(--cond);text-transform:uppercase;margin-bottom:16px}
.parcours h2 a{text-decoration:none}.parcours h2 a:hover{color:var(--j)}
.grands{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.grand{position:relative;display:flex;align-items:flex-end;min-height:clamp(240px,24vw,380px);padding:18px;text-decoration:none;overflow:hidden;border-radius:10px;background:var(--g2)}
.grand .vig{position:absolute;inset:0;transition:transform .6s}
.grand:hover .vig{transform:scale(1.07)}
.grand::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.9) 0,rgba(0,0,0,.05) 62%)}
.grand>div:last-child{position:relative;z-index:1}
.grand b{display:block;font:900 clamp(30px,2.7vw,44px)/1 var(--cond);text-transform:uppercase}
.grand small{display:block;color:var(--j);font:700 17px var(--cond);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.grand:hover b{color:var(--j)}
.trio{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:14px}
.panneau{background:var(--g);border-radius:10px;padding:20px;min-width:0}
.panneau h2{font-size:34px;margin-bottom:10px}
#chat-liste{height:190px;overflow-y:auto;margin-bottom:10px;font-size:16px}
#chat-liste p b{font-weight:600;color:var(--j)}
#chat-form{display:grid;grid-template-columns:100px 1fr auto;gap:6px}
input,textarea,select{background:#0f0f0f;border:1px solid #3a3a3a;padding:8px 10px;width:100%;border-radius:6px;color:var(--t)}
input::placeholder{color:#8a8a82}
.carte-j{display:flex;flex-direction:column;justify-content:space-between;gap:14px;background:var(--j);color:#111;border-radius:10px;padding:20px;text-decoration:none;min-height:230px}
.carte-j small{font:700 17px var(--cond);letter-spacing:.06em;text-transform:uppercase}
.carte-j b{font:900 clamp(28px,2.5vw,38px)/1.04 var(--cond)}
.carte-j span{font:800 18px var(--cond);letter-spacing:.05em;text-transform:uppercase}
.carte-j:hover{background:#fff}

/* cartes partagées par les pages */
.cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.carte{background:var(--g);border-radius:10px;padding:16px 18px;text-decoration:none;display:flex;flex-direction:column;gap:4px;min-width:0;transition:background .15s}
a.carte:hover{background:var(--g2)}
.carte b{font:800 25px/1.08 var(--cond)}
.carte small{color:var(--d);font-size:14.5px}
.carte .vu{color:var(--j);font:700 17px var(--cond);letter-spacing:.04em;margin-top:auto;padding-top:8px}
.carte a{color:var(--j);font-weight:600}
.date{display:flex;align-items:baseline;gap:7px;color:var(--j);font:900 54px/1 var(--cond)}
.date i{font:700 21px var(--cond);font-style:normal;text-transform:uppercase;color:var(--t)}
.chiffre{font:900 clamp(38px,3.3vw,52px)/1 var(--cond);color:var(--j)}
.chiffre i{font:700 19px var(--cond);font-style:normal;color:var(--t)}
.notes{padding-left:18px;color:var(--d);font-size:15px}
.matiere{font:800 22px var(--cond);text-transform:uppercase;letter-spacing:.03em}
.video{background:var(--g);border-radius:10px;overflow:hidden;text-decoration:none;display:block}
.video .vig{aspect-ratio:16/9;transition:transform .4s}
.video:hover .vig{transform:scale(1.04)}
.video>div:last-child{padding:10px 12px 12px}
.video b{display:block;color:var(--j);font:800 18px var(--cond)}
.video span{font-weight:600;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.video small{display:block;color:var(--d);margin-top:2px;font-size:14px}
.videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}

/* pages intérieures */
.fond-page{position:absolute;left:0;right:0;top:0;height:420px;overflow:hidden;z-index:0}
.fond-page .fond{inset:-6%}
.fond-page::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.92),rgba(0,0,0,.7)),linear-gradient(0deg,var(--n) 0,transparent 70%)}
.page{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:120px 24px 60px}
.page.etroit{max-width:820px}
.page h2{margin-top:34px;font-size:clamp(30px,3vw,42px)}
.tete-page{margin-bottom:26px;min-height:150px}
.tete-page h1{font:900 clamp(46px,7vw,92px)/1 var(--cond);text-transform:uppercase}
.tete-page p{color:#d7d7d0;max-width:62ch;margin-top:8px;font-size:19px}
.vide{background:var(--g);border-left:6px solid var(--j);border-radius:6px;padding:22px;margin:14px 0}
.vide b{font:800 30px/1.1 var(--cond);display:block}
.vide p{color:var(--d)}
.onglets,.filtres,.legende{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.onglets a{background:var(--g);padding:6px 14px;font:700 18px var(--cond);text-decoration:none;border-radius:20px}
.onglets a.on{background:var(--j);color:#111}
.filtres select{width:auto;min-width:210px}
.appel{margin-bottom:18px}
.creneau{display:grid;grid-template-columns:150px 86px minmax(0,1fr);gap:14px;align-items:center;background:var(--g);border-radius:9px;padding:8px;text-decoration:none;margin-bottom:8px}
.creneau:hover{background:var(--g2)}
.creneau .vig{aspect-ratio:16/9;border-radius:6px}
.creneau b{font:900 30px var(--cond);color:var(--j)}
.creneau span{font-weight:600;line-height:1.2;display:block}
.creneau small{color:var(--d);font-size:14px}
.mots{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.mots a{display:block;background:var(--g);padding:7px 14px;border-radius:20px;text-decoration:none;font-weight:600}
.mots a:hover{background:var(--j);color:#111}
.def{font-size:23px;line-height:1.35;margin-bottom:20px}
.suisse{width:100%;max-width:900px;display:block;margin:10px auto}
.suisse polygon{fill:var(--g);stroke:var(--j);stroke-width:2.5;stroke-linejoin:round}
.pt.salon{fill:var(--j)}
.pt.ecole{fill:#fff}
.pt.place{fill:var(--r)}
.pt.off{display:none}
.legende label{display:flex;align-items:center;gap:6px;margin-right:14px;font-weight:600}
.legende input{width:auto}
.lg{width:14px;height:14px;display:inline-block}
.lg.salon{background:var(--j)}.lg.ecole{background:#fff;border-radius:50%}.lg.place{background:var(--r);clip-path:polygon(50% 0,100% 100%,0 100%)}
.article>small{color:var(--j);font-weight:600}
.article h1{font:900 clamp(40px,6vw,66px)/1.02 var(--cond);margin:8px 0 12px}
.article .chapo{font-size:22px;font-weight:600;margin-bottom:18px}
.article p{margin-bottom:14px}
.article a,.legal a{color:var(--j)}
.legal p,.legal ul{margin-bottom:8px;color:#d7d7d0}.legal ul{padding-left:20px}
.formulaire{display:grid;gap:12px}
.formulaire label{font-weight:600;display:grid;gap:4px}
.piege{position:absolute;left:-9999px;width:1px}
.choix{display:grid;gap:8px;margin:14px 0}
.choix button{background:var(--g);border:0;border-radius:8px;padding:12px 14px;text-align:left;font-weight:600}
.choix button:hover:not(:disabled){background:var(--j);color:#111}
.choix button.bon{background:var(--j);color:#111}.choix button.faux{background:var(--r)}
.qn{font:700 18px var(--cond);letter-spacing:.05em;text-transform:uppercase;color:var(--j)}
.qt{font:800 34px/1.08 var(--cond)}
.expl{margin:10px 0;color:var(--d)}
.verdict{background:var(--j);color:#111;padding:22px;margin-bottom:12px;border-radius:10px}
.verdict b{font:900 46px/1.05 var(--cond);display:block}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.pied{padding:22px 40px;display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;font-size:15px;color:var(--d);border-top:1px solid #2a2a2a}
.pied b{font-family:var(--cond);font-size:19px;color:var(--j)}
.pied nav{display:flex;flex-wrap:wrap;gap:4px 14px}

/* mode atelier : noir, sous-titres en gros, bandeau jaune */
body.atelier{background:#000;overflow:hidden}
body.atelier .barre,body.atelier .parcours,body.atelier .pied,body.atelier .fond,body.atelier .voile,body.atelier .film,body.atelier .accroche,body.atelier .info,body.atelier .barre-prog,body.atelier .hg,body.atelier .ch,body.atelier .ctrl{display:none}
body.atelier .hero{padding:0;min-height:0}
body.atelier .fen{box-shadow:none;border-radius:0}
body.atelier .ecran{position:fixed;inset:0 0 64px 0;aspect-ratio:auto}
body.atelier .at{display:block}
.marque{position:absolute;top:18px;left:18px;background:var(--j);color:#111;font:900 clamp(24px,2.4vw,40px) var(--cond);padding:2px 14px;z-index:2}
.heure{position:absolute;top:10px;right:20px;color:#fff;font:900 clamp(54px,6vw,104px)/1 var(--cond);text-shadow:0 2px 12px rgba(0,0,0,.75);z-index:2}
.qr{position:absolute;right:18px;top:calc(clamp(54px,6vw,104px) + 22px);width:clamp(96px,8.5vw,150px);background:#fff;z-index:2} /* sous l'heure : le bas reste aux sous-titres */
.qr img{display:block;width:100%;height:auto}
.sortir{position:absolute;top:18px;left:50%;transform:translateX(-50%);background:#111;color:var(--j);border:0;padding:6px 14px;font:700 18px var(--cond);opacity:0;transition:opacity .2s;z-index:4}
body.atelier.bouge .sortir{opacity:1}
body.atelier:not(.bouge){cursor:none}
.prixbande{position:fixed;left:0;right:0;bottom:0;height:64px;background:var(--j);color:#111;overflow:hidden;z-index:2}
.defile{display:inline-flex;align-items:center;height:100%;gap:44px;padding:0 22px;white-space:nowrap;font:800 clamp(22px,2.2vw,34px) var(--cond);letter-spacing:.02em}
.defile small{font:700 .6em var(--cond);margin-left:8px}
.defile.bouge{animation:defile var(--d,40s) linear infinite}
@keyframes defile{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.defile.bouge,.fond{animation:none}.titre span{animation:none;opacity:1;transform:none}}

@media (max-width:1280px){
 .air{display:none}
 .info{grid-template-columns:1fr}
 .film{grid-template-columns:repeat(4,1fr)}.film a:nth-child(n+5){display:none}
 .grands{grid-template-columns:repeat(2,1fr)}
 .trio{grid-template-columns:1fr 1fr}.trio .panneau{grid-column:1/-1}
}
@media (max-width:1000px){
 .barre{flex-wrap:wrap;gap:8px 16px;padding:8px 16px}
 .nav{order:3;width:100%;gap:18px}
 .hero{min-height:0;padding:112px 16px 20px}
 .grille{grid-template-columns:1fr;gap:18px}
 .titre{margin-top:0}
 .parcours{padding:24px 16px 44px;gap:40px}
 .page{padding-top:124px}
 .pied{padding:20px 16px}
}
@media (max-width:640px){
 .droite{gap:8px}
 #btn-atelier{display:none}
 .nav{font-size:16px;gap:14px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
 .hero{padding-top:104px}
 .btn{padding:8px 11px;font-size:15px}
 .cta .btn{font-size:19px;padding:11px 15px}
 .film{grid-template-columns:repeat(2,1fr)}.film a:nth-child(n+3){display:none}
 .grands,.trio{grid-template-columns:1fr}
 .ch{font-size:30px}.ch small{font-size:12px}
 .hg{font-size:12px;padding:4px 8px}
 .ctrl{top:58px;right:10px;gap:4px}
 .ctrl button{padding:4px 7px;font-size:12px}
 .creneau{grid-template-columns:96px minmax(0,1fr)}.creneau b{font-size:22px;grid-row:1}.creneau .vig{grid-row:1/3}
 #chat-form{grid-template-columns:1fr}
 .page{padding-left:16px;padding-right:16px}
}