
:root{--bg:#0C0D0C;--fg:#F2EFE9;--mut:#A6998F;--card:#161715;--line:#2c2b27;--lf:invert(1);--a:#BF3C1F;--b:#595734;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--bg:#F2EFE9;--fg:#0C0D0C;--mut:#6b6258;--card:#faf8f3;--line:#d8d2c5;--lf:invert(0)}}
:root[data-theme="light"]{--bg:#F2EFE9;--fg:#0C0D0C;--mut:#6b6258;--card:#faf8f3;--line:#d8d2c5;--lf:invert(0)}
:root[data-theme="dark"]{--bg:#0C0D0C;--fg:#F2EFE9;--mut:#A6998F;--card:#161715;--line:#2c2b27;--lf:invert(1)}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:"Courier New",Courier,monospace;line-height:1.65;overflow-x:hidden}
h1,h2,h3,.sans,button,input,select,textarea,nav{font-family:"Helvetica Neue",Arial,sans-serif}
a{color:inherit}
#bar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--a),var(--b));z-index:60}
header{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:14px 5vw;backdrop-filter:blur(14px);background:color-mix(in srgb,var(--bg) 70%,transparent)}
.logo{font:900 1.1rem "Helvetica Neue",Arial,sans-serif;letter-spacing:.15em;text-decoration:none}
.logo i{color:var(--a);font-style:normal}
nav{display:flex;gap:22px;align-items:center;font-size:.85rem;text-transform:uppercase;letter-spacing:.12em}
nav a{text-decoration:none;opacity:.8}nav a:hover{opacity:1;color:var(--a)}
.ib{background:none;border:1px solid var(--line);color:var(--fg);border-radius:99px;padding:6px 12px;cursor:pointer}
@media(max-width:720px){nav a{display:none}}
.hero{min-height:100svh;display:grid;place-items:center;position:relative;overflow:hidden;padding:110px 5vw 60px}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;animation:fl 14s ease-in-out infinite alternate}
.b1{width:46vmax;height:46vmax;background:var(--a);top:-12vmax;left:-10vmax}
.b2{width:40vmax;height:40vmax;background:var(--b);bottom:-14vmax;right:-8vmax;animation-delay:-6s}
@keyframes fl{to{transform:translate(8vw,6vh) scale(1.2)}}
.grain{position:absolute;inset:0;opacity:.12;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none}
.hc{position:relative;text-align:center;max-width:1100px}
.kick{letter-spacing:.35em;text-transform:uppercase;font-size:.75rem;color:var(--mut)}
h1{font-size:clamp(2.6rem,10vw,8rem);line-height:.95;margin:.3em 0;font-weight:900;letter-spacing:-.03em}
h1 span{display:inline-block;opacity:0;transform:translateY(60px) rotate(6deg);animation:up .8s cubic-bezier(.2,.8,.2,1) forwards}
h1 em{font-style:normal;background:linear-gradient(90deg,var(--a),var(--b));-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes up{to{opacity:1;transform:none}}
.hc p{max-width:560px;margin:0 auto 28px;color:var(--mut);font-size:1.1rem}
.btn{display:inline-block;background:linear-gradient(90deg,var(--a),var(--b));color:#fff;border:0;border-radius:99px;padding:14px 30px;font-weight:700;text-decoration:none;cursor:pointer;font-size:.95rem;transition:transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 12px 30px -8px var(--a)}
.btn.o{background:none;border:1px solid var(--line);color:var(--fg)}
.mq{border-block:1px solid var(--line);overflow:hidden;white-space:nowrap;padding:16px 0;font:900 clamp(1.4rem,4vw,2.6rem) "Helvetica Neue",Arial,sans-serif;text-transform:uppercase}
.mq div{display:inline-block;animation:mq 28s linear infinite}
.mq b{color:transparent;-webkit-text-stroke:1px var(--fg);margin:0 .6em}
@keyframes mq{to{transform:translateX(-50%)}}
section{padding:90px 5vw;max-width:1300px;margin:auto}
h2{font-size:clamp(2rem,5vw,3.6rem);margin:0 0 .4em;letter-spacing:-.02em}
h2 small{display:block;font-size:.8rem;letter-spacing:.3em;color:var(--a);text-transform:uppercase;margin-bottom:8px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 30px}
.filters button{background:none;border:1px solid var(--line);color:var(--fg);border-radius:99px;padding:8px 18px;cursor:pointer;transition:.2s}
.filters button.on,.filters button:hover{background:var(--fg);color:var(--bg)}
#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:22px}
.card{position:relative;border-radius:18px;overflow:hidden;background:var(--card);border:1px solid var(--line);cursor:pointer;aspect-ratio:4/3;transition:transform .3s,box-shadow .3s;text-align:left;padding:0;color:#fff;font:inherit}
.card:hover{box-shadow:0 20px 50px -20px var(--a)}
.card .cv,.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s}
.card:hover .cv,.card:hover img{transform:scale(1.1)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.85))}
.card .ct{position:absolute;left:18px;right:18px;bottom:16px;z-index:2}
.card .ct small{letter-spacing:.2em;text-transform:uppercase;font:.7rem "Helvetica Neue",Arial,sans-serif;opacity:.8}
.card h3{margin:.2em 0 0;font-size:1.3rem}
.card .play{position:absolute;top:16px;right:16px;z-index:2;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.2);backdrop-filter:blur(6px);display:grid;place-items:center;opacity:0;transform:scale(.6);transition:.3s}
.card:hover .play{opacity:1;transform:none}
.rv{opacity:0;transform:translateY(40px);transition:opacity .9s,transform .9s}
.rv.in{opacity:1;transform:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
@media(max-width:800px){.two{grid-template-columns:1fr}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.stats div{border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center}
.stats b{display:block;font:900 2.2rem "Helvetica Neue",Arial,sans-serif;color:var(--a)}
.srv{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.srv div{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px;transition:.3s}
.srv div:hover{transform:translateY(-6px);border-color:var(--a)}
.srv span{font-size:1.8rem}
.srv p{color:var(--mut);margin:.3em 0 0;font-size:.95rem}
form.ct2{display:grid;gap:12px}
input,select,textarea{width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--fg);font-size:1rem}
textarea{min-height:120px;resize:vertical}
.note{font-size:.8rem;color:var(--mut)}
footer{border-top:1px solid var(--line);padding:30px 5vw;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;color:var(--mut);font-size:.85rem}
footer button{background:none;border:0;color:inherit;text-decoration:underline;cursor:pointer;padding:0}
.ov{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.8);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,0px)) 16px max(16px,env(safe-area-inset-bottom,0px))}
.ov.open{display:flex}
.box{background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:20px;max-width:760px;width:100%;max-height:100%;overflow:auto;padding:28px;position:relative;animation:up .4s forwards;opacity:0;transform:translateY(30px)}
.x{position:absolute;top:12px;right:14px;font-size:1.6rem;background:none;border:0;color:var(--fg);cursor:pointer}
.lbc{height:340px;border-radius:14px;margin-bottom:16px;background-size:cover;background-position:center}
.row{display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--line);padding:10px 0}
.row b{flex:1}
.row button{border:1px solid var(--line);background:none;color:var(--fg);border-radius:8px;padding:5px 10px;cursor:pointer}
#fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:70;display:none}
#cur{position:fixed;width:16px;height:16px;border:2px solid var(--a);border-radius:50%;pointer-events:none;z-index:90;transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s;mix-blend-mode:difference}
#cur.h{width:56px;height:56px;background:rgba(255,75,43,.3)}
@media(hover:none){#cur{display:none}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}.rv{opacity:1;transform:none}h1 span{opacity:1;transform:none}}

.logo{font:400 1.6rem "Big Caslon",Caslon,Baskerville,"Palatino Linotype",Georgia,serif;letter-spacing:.01em}
.logo i{font:700 .55rem Helvetica,Arial,sans-serif;color:inherit;margin-left:4px;letter-spacing:-.02em;vertical-align:-2px}
nav,.filters button,small{font-family:"Courier New",Courier,monospace}
.hero{color:#F2EFE9;background:linear-gradient(165deg,#7a3a14 0%,#3a2414 38%,#1b1a14 70%,#3a3d22 100%)}
.sk{position:absolute;top:-25%;height:150%;width:7vw;background:linear-gradient(transparent,rgba(255,196,130,.8),transparent);transform:rotate(28deg);filter:blur(16px);opacity:.7;animation:dr 12s ease-in-out infinite alternate}
@keyframes dr{to{transform:rotate(28deg) translateX(7vw);opacity:.3}}
.tl,.tg,.co{position:absolute;font-size:clamp(.7rem,1.7vw,1.05rem);letter-spacing:.1em}
.tl{top:96px;left:5vw;text-transform:uppercase}.tg{bottom:calc(5vh + env(safe-area-inset-bottom,0px));left:5vw;font-family:"Big Caslon",Caslon,Georgia,serif;font-size:clamp(.95rem,2vw,1.3rem)}.co{bottom:calc(5vh + env(safe-area-inset-bottom,0px));right:5vw;text-align:right}
h1{font:400 clamp(3rem,14vw,10.5rem)/1 "Big Caslon",Caslon,Baskerville,"Palatino Linotype",Georgia,serif;letter-spacing:0;margin:0}
.prod{font:700 clamp(1rem,2.6vw,1.9rem) Helvetica,Arial,sans-serif;letter-spacing:-.03em}
.hero .btn.o{color:#F2EFE9;border-color:rgba(242,239,233,.45)}
h2{text-transform:uppercase;font-weight:900;letter-spacing:-.01em}
h2 small{color:var(--a);font-weight:400}
.btn{background:var(--a);border-radius:0;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;font-family:"Courier New",monospace}
.btn:hover{box-shadow:none;background:var(--fg);color:var(--bg)}
.btn.o{background:none}
.card,.box,.lbc,.srv div,.stats div,.filters button,input,select,textarea{border-radius:0}
.srv span{display:block;width:44px;height:88px;border-radius:88px 0 0 88px;background:var(--a);margin-bottom:14px}
.srv div:nth-child(2) span{background:var(--b)}.srv div:nth-child(3) span{background:#A6998F}.srv div:nth-child(4) span{background:var(--fg)}
.hf{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:1;background:var(--card);border:1px solid var(--line)}
.hf i{display:block;width:50%;height:100%}
.mq{font-family:"Big Caslon",Caslon,Georgia,serif;font-weight:400}
.mq b{-webkit-text-stroke:0;color:var(--a)}

[hidden]{display:none!important}
.hb{display:flex;gap:8px}
.ib{width:44px;height:44px;display:inline-grid;place-items:center;padding:0}
#mb{display:none}
.x{width:44px;height:44px;display:grid;place-items:center;font-size:0;top:8px;right:8px;padding:0}
#fab{align-items:center;gap:8px;min-height:48px}
.card .play::before{content:"";border-left:14px solid #fff;border-block:8px solid transparent;margin-left:4px}
.mq b{display:inline-block;width:.5em;height:.5em;margin:0 .8em;background:var(--a);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17L20.7 7' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17L20.7 7' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
footer span:last-child{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
footer button{min-height:44px}
.soc{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);text-decoration:none}
.soc:hover{background:var(--a);color:#fff;border-color:var(--a)}
.row button{min-height:40px}
@media(max-width:720px){
 #mb{display:inline-grid}
 nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:6px 5vw 14px}
 nav.open{display:flex}
 nav a{display:block;padding:16px 0;border-bottom:1px solid var(--line);font-size:1rem}
}
@media(max-width:560px){
 .tl{top:84px;font-size:.7rem}
 .co{left:5vw;right:auto;text-align:left;bottom:calc(5vh + 2.6rem)}
 .hero .btn{display:block;text-align:center;margin:0 0 10px}
 h1{font-size:clamp(2.6rem,17vw,5rem)}
 section{padding:64px 5vw}
 .stats b{font-size:1.6rem}.stats div{padding:12px 6px;font-size:.8rem}
 .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-5vw;padding-inline:5vw}
 .filters button{flex:none;min-height:44px}
 .ov{align-items:flex-end;padding:0}
 .box{padding:22px 18px;max-height:92svh;max-width:none;width:100%}
 .lbc{height:200px}
 #fab{right:12px;width:56px;height:56px;padding:0;border-radius:50%;justify-content:center}
 #fab span{display:none}
 footer{flex-direction:column;align-items:flex-start}
}

.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* Logo SVG : prend la couleur du texte (currentColor), taille pilotée par la hauteur */
.lg{display:inline-block;line-height:0;background:currentColor;-webkit-mask:url("../uploads/brand/b-logo-nobaseline.svg") center/contain no-repeat;mask:url("../uploads/brand/b-logo-nobaseline.svg") center/contain no-repeat}
.lg img{display:block;height:100%;width:auto;visibility:hidden}
.logo{display:inline-flex;align-items:flex-end;gap:6px}
.logo .lg{height:30px}
.logo i{margin:0 0 2px}
.hero h1 .lg{height:clamp(3.4rem,12vw,9.5rem)}
.hero h1 .lg img{max-width:88vw}
h1 span.lg{display:inline-block}

/* Prix, sélections & lauréats */
.mono{filter:brightness(0) var(--lf)}
.cb{position:absolute;top:14px;left:14px;right:72px;z-index:2;display:flex;flex-wrap:wrap;gap:8px;align-items:center;pointer-events:none}
.card .cb img{position:static;inset:auto;width:auto;height:46px;max-width:96px;object-fit:contain;transition:none;filter:brightness(0) invert(1) drop-shadow(0 1px 5px rgba(0,0,0,.65))}
.card .cb img.col{filter:drop-shadow(0 1px 5px rgba(0,0,0,.65))}
.card:hover .cb img{transform:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;background:rgba(12,13,12,.68);backdrop-filter:blur(6px);color:#fff;border:1px solid rgba(255,255,255,.28);font:.65rem "Courier New",Courier,monospace;letter-spacing:.12em;text-transform:uppercase}
.chip svg{color:#ff9d7a;flex:none}
.awl{margin:24px 0 8px;border-top:1px solid var(--line)}
.awl h3{margin:16px 0 4px;font:400 .75rem "Courier New",Courier,monospace;letter-spacing:.25em;text-transform:uppercase;color:var(--a)}
.aw{display:flex;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.aw img{height:56px;width:auto;max-width:100px;object-fit:contain;flex:none}
.aw .ic{flex:none;width:56px;display:grid;place-items:center;color:var(--a)}
.aw b{font-family:"Helvetica Neue",Arial,sans-serif}
.aw small{display:block;color:var(--mut)}
.box .btn{margin-top:18px}

/* Ils en parlent */
#presse .prs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:22px;margin-top:30px}
.pc{display:flex;flex-direction:column;gap:14px;padding:26px;background:var(--card);border:1px solid var(--line);color:inherit;text-decoration:none;transition:transform .3s,border-color .3s}
a.pc:hover{transform:translateY(-6px);border-color:var(--a)}
.pc .src{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:34px;font:.75rem "Courier New",Courier,monospace;letter-spacing:.15em;text-transform:uppercase;color:var(--a)}
.pc .src img{height:34px;width:auto;max-width:150px;object-fit:contain}
.pc .src small{color:var(--mut);text-transform:none;letter-spacing:.04em;text-align:right}
.pc h3{margin:0;font-size:1.2rem;line-height:1.3}
.pc blockquote{margin:0;padding-left:14px;border-left:3px solid var(--a);font:1.1rem/1.5 "Big Caslon",Caslon,Baskerville,"Palatino Linotype",Georgia,serif}
.pc .go{margin-top:auto;font:.75rem "Courier New",Courier,monospace;letter-spacing:.12em;text-transform:uppercase}
a.pc:hover .go{color:var(--a)}
