@font-face{font-family:'Chakra';src:url(fonts/chakrapetch--w600.ttf) format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Chakra';src:url(fonts/chakrapetch--w700.ttf) format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Barlow';src:url(fonts/barlow--w400.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Barlow';src:url(fonts/barlow--w500.ttf) format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Barlow';src:url(fonts/barlow--w600.ttf) format('truetype');font-weight:600;font-display:swap}

:root{
  --bg:#09090b; --bg2:#0f0f12; --card:#131316; --line:#202026; --line2:#2c2c34;
  --ink:#f5f2ed; --ink2:#aaa6a0; --ink3:#6f6c68;
  --accent:#ff6b1a; --accent2:#ff9248; --ember:#ffc28a;
  --ease:cubic-bezier(.22,.8,.3,1); --pad:clamp(16px,5vw,72px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-width:none;scroll-behavior:smooth}
html::-webkit-scrollbar{display:none}
body{background:var(--bg);color:var(--ink);font:400 16px/1.6 'Barlow',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
body.locked{overflow:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--accent);color:#fff}

.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%,100%{transform:none}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,3%)}}

/* en-tete */
.top{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;gap:14px;padding:18px var(--pad);transition:background .4s,padding .4s var(--ease),border-color .4s;border-bottom:1px solid transparent}
.top.solid{background:rgba(9,9,11,.75);backdrop-filter:blur(14px) saturate(1.3);padding-top:12px;padding-bottom:12px;border-color:var(--line)}
.brand{display:flex;align-items:center;gap:10px;font:600 19px/1 'Chakra',sans-serif}
.brand b{color:var(--accent);font-weight:600}
.tag{font:600 11px/1 'Chakra',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--ink2);border:1px solid var(--line2);border-radius:999px;padding:6px 11px}
.back{margin-left:auto;color:var(--ink2);font-size:14px;transition:color .2s}
.back:hover{color:var(--ink)}

/* intro */
.intro{position:relative;padding:clamp(130px,22vh,220px) var(--pad) clamp(40px,7vh,80px)}
.intro::before{content:'';position:absolute;inset:-20% -10% auto auto;width:70vw;height:70vw;max-width:900px;max-height:900px;background:radial-gradient(closest-side,rgba(255,107,26,.16),transparent);filter:blur(30px);pointer-events:none;animation:breathe 9s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.08) translate(-2%,3%);opacity:.75}}
.kicker{display:flex;align-items:center;gap:10px;font:600 13px/1 'Chakra',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2);margin-bottom:22px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(255,107,26,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(255,107,26,0)}100%{box-shadow:0 0 0 0 rgba(255,107,26,0)}}
h1{font:700 clamp(64px,13vw,200px)/.86 'Chakra',sans-serif;letter-spacing:-.03em}
h1 .l{display:block;overflow:hidden;padding-bottom:.05em}
h1 .l>span{display:inline-block;transform:translateY(105%);animation:rise 1.1s var(--ease) forwards}
h1 .l:nth-child(2)>span{animation-delay:.1s}
h1 .o{color:var(--accent)}
@keyframes rise{to{transform:none}}
.sub{margin-top:26px;color:var(--ink2);font-size:clamp(17px,1.6vw,20px);opacity:0;animation:fade .9s .45s var(--ease) forwards}
@keyframes fade{to{opacity:1}}

/* rec mis en avant */
.featured{padding:0 var(--pad) clamp(70px,12vh,130px)}
.feat{position:relative;display:block;width:100%;aspect-ratio:21/9;border-radius:24px;overflow:hidden;background:var(--card);text-align:left;box-shadow:0 40px 120px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06);transform:translateY(30px);opacity:0;transition:transform 1s var(--ease),opacity 1s var(--ease)}
.feat.in{transform:none;opacity:1}
.feat img,.feat video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease),opacity .6s}
.feat video{opacity:0}
.feat.playing video{opacity:1}
.feat:hover img,.feat:hover video{transform:scale(1.03)}
.feat-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,9,11,.92) 0%,rgba(9,9,11,.25) 45%,transparent 70%)}
.feat-info{position:absolute;left:clamp(20px,4vw,48px);right:clamp(20px,4vw,48px);bottom:clamp(20px,4vw,44px);display:flex;flex-direction:column;gap:10px}
.badge{align-self:flex-start;font:600 11px/1 'Chakra',sans-serif;letter-spacing:.2em;text-transform:uppercase;background:var(--accent);color:#fff;padding:7px 11px;border-radius:999px}
.feat-title{font:700 clamp(28px,4.4vw,60px)/1 'Chakra',sans-serif;letter-spacing:-.01em}
.feat-meta{color:var(--ink2);font-size:15px}
.play{position:absolute;right:clamp(20px,4vw,48px);bottom:clamp(20px,4vw,44px);width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.1);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;transition:background .3s,transform .4s var(--ease)}
.play i{width:0;height:0;border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.feat:hover .play{background:var(--accent);transform:scale(1.08)}

/* chronologie */
.timeline{padding:0 var(--pad) 40px;display:flex;flex-direction:column;gap:clamp(48px,8vh,90px)}
.day{display:grid;grid-template-columns:180px 1fr;gap:32px;align-items:start}
.day-label{position:sticky;top:96px;display:flex;flex-direction:column;gap:4px;padding-top:4px}
.day-label b{font:700 44px/1 'Chakra',sans-serif}
.day-label span{font:600 12px/1.3 'Chakra',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}
.day-label i{display:block;width:28px;height:2px;background:var(--accent);margin-top:12px;font-style:normal}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}

.card{display:flex;flex-direction:column;gap:12px;text-align:left;opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.card.in{opacity:1;transform:none}
.thumb{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--card);box-shadow:0 0 0 1px rgba(255,255,255,.05);transition:box-shadow .35s,transform .5s var(--ease)}
.thumb img,.thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb video{opacity:0;transition:opacity .4s}
.card.playing .thumb video{opacity:1}
.thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 40%);pointer-events:none}
.dur{position:absolute;right:10px;bottom:10px;z-index:1;font:600 12px/1 'Chakra',sans-serif;letter-spacing:.04em;background:rgba(9,9,11,.75);backdrop-filter:blur(6px);padding:6px 8px;border-radius:7px}
.card:hover .thumb,.card:focus-visible .thumb{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(255,107,26,.55),0 22px 50px -20px rgba(255,107,26,.35)}
.card:focus-visible{outline:none}
.c-title{font:600 19px/1.25 'Chakra',sans-serif;transition:color .2s}
.card:hover .c-title{color:var(--accent2)}
.c-meta{color:var(--ink3);font-size:14px;margin-top:-6px}

.empty{padding:40px var(--pad) 120px;color:var(--ink2);font-size:18px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:40px var(--pad);border-top:1px solid var(--line);color:var(--ink3);font-size:13px;margin-top:80px}

/* lecteur */
.viewer{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:clamp(12px,3vw,40px)}
.viewer[hidden]{display:none}
.v-backdrop{position:absolute;inset:0;background:rgba(5,5,7,.86);backdrop-filter:blur(16px);animation:fade .35s var(--ease) both;opacity:0}
.v-panel{position:relative;width:min(1240px,100%);max-height:100%;display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--line2);border-radius:22px;overflow:hidden;box-shadow:0 50px 140px -30px rgba(0,0,0,.9);animation:pop .45s var(--ease) both}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.97)}}
.v-stage{background:#000;display:grid;place-items:center;min-height:0}
.v-stage video{width:100%;max-height:min(70vh,700px);background:#000}
.v-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:30px;padding:26px 30px 30px;overflow:auto}
.v-head h2{font:700 clamp(24px,2.6vw,34px)/1.1 'Chakra',sans-serif;margin-bottom:8px;word-break:break-word}
.v-meta{color:var(--ink3);font-size:14px}
.v-desc{margin-top:16px;color:var(--ink2);white-space:pre-wrap;word-break:break-word}
.v-desc:empty{display:none}
/* video : pas de telechargement par le lecteur */
.v-stage video{pointer-events:auto}
.v-stage video::-webkit-media-controls-download-button{display:none}
.v-stage video::-internal-media-controls-download-button{display:none}
.v-stage video::-webkit-media-controls-enclosure{overflow:hidden}

/* commentaires */
.v-comments{display:flex;flex-direction:column;min-width:0;border-left:1px solid var(--line);padding-left:30px}
.v-comments h3{font:600 14px/1 'Chakra',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:14px}
.c-form{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.c-form textarea{background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:11px 13px;color:var(--ink);font:inherit;resize:vertical;outline:none;transition:border-color .2s}
.c-form textarea:focus{border-color:var(--accent)}
.c-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.c-hint{font-size:12.5px;color:var(--ink3)}
.c-hint.err{color:#ff8a6a}
.btn.small{height:36px;padding:0 18px;border-radius:9px;background:var(--accent);color:#fff;font:600 14px/1 'Chakra',sans-serif;transition:background .2s}
.btn.small:hover{background:var(--accent2)}
.btn.small:disabled{opacity:.5;cursor:wait}
.c-list{list-style:none;display:flex;flex-direction:column;gap:2px;overflow:auto}
.c-item{padding:12px 0;border-top:1px solid var(--line)}
.c-item:first-child{border-top:none}
.c-text{color:var(--ink);white-space:pre-wrap;word-break:break-word;margin-bottom:5px}
.c-time{color:var(--ink3);font-size:12.5px}
.c-empty{color:var(--ink3);padding:10px 0;font-size:14px}
.v-close{position:absolute;top:14px;right:14px;z-index:2;width:42px;height:42px;border-radius:50%;background:rgba(9,9,11,.6);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);font-size:16px;transition:background .2s,transform .3s var(--ease)}
.v-close:hover{background:var(--accent);transform:rotate(90deg)}
.v-nav{position:absolute;top:calc(min(70vh,700px) / 2);transform:translateY(-50%);z-index:2;width:46px;height:46px;border-radius:50%;background:rgba(9,9,11,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);font-size:28px;line-height:1;transition:background .2s,opacity .2s}
.v-nav:hover{background:var(--accent)}
.v-nav:disabled{opacity:0;pointer-events:none}
.prev{left:14px}.next{right:14px}

@media (max-width:860px){
  .day{grid-template-columns:1fr;gap:16px}
  .day-label{position:static;flex-direction:row;align-items:baseline;gap:12px}
  .day-label b{font-size:30px}
  .day-label i{display:none}
  .feat{aspect-ratio:16/10}
  .v-body{grid-template-columns:1fr;gap:18px;padding:20px}
  .v-comments{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:16px}
  .v-nav{display:none}
  .tag{display:none}
}
@media (max-width:520px){.grid{grid-template-columns:1fr}.play{width:56px;height:56px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .card,.feat{opacity:1;transform:none}
  h1 .l>span{transform:none}
  .sub{opacity:1}
}