:root{
  --paper:#F6F7FB; --surface:#FFFFFF; --ink:#141A4A; --muted:#4A5078;
  --blue:#2B3BE0; --yellow:#FFC62E; --coral:#FF5C6C; --mint:#22C293;
  --on-accent:#141A4A; --line:rgba(20,26,74,.14);
  --display:"Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --max:1180px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0F1333; --surface:#181D47; --ink:#EEF0FF; --muted:#A8AEDA; --line:rgba(238,240,255,.16);
  }
}
:root[data-theme="dark"]{
  --paper:#0F1333; --surface:#181D47; --ink:#EEF0FF; --muted:#A8AEDA; --line:rgba(238,240,255,.16);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px)}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--yellow); outline-offset:3px; border-radius:4px}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
h1,h2,h3{font-family:var(--display); line-height:1.02; margin:0; letter-spacing:-.02em}
h2{font-size:clamp(2.2rem,5vw,3.9rem); font-weight:800; max-width:16ch}
h3{font-size:1.5rem; font-weight:600; letter-spacing:-.01em}
p{margin:0 0 1em; max-width:62ch}
section{padding:clamp(72px,10vw,128px) 0}

/* Header */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:10; background:var(--paper); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; height:68px; gap:16px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--display); font-weight:800; font-size:1.3rem}
.logo-mark{display:grid; grid-template-columns:repeat(5,5px); gap:2px}
.logo-mark i{width:5px; height:5px; border-radius:1px; background:var(--blue)}
.logo-mark i:nth-child(3n){background:var(--coral)} .logo-mark i:nth-child(4n){background:var(--yellow)} .logo-mark i:nth-child(7n){background:var(--mint)}
.nav{display:flex; align-items:center; gap:28px}
.nav a{text-decoration:none; font-weight:500}
.nav a:hover{color:var(--blue)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 24px; border-radius:999px; font-weight:600; text-decoration:none; border:2px solid transparent; transition:transform .15s ease, background .15s ease}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--blue); color:#fff}
.btn-primary:hover{background:#1E2CC0}
.btn-ghost{border-color:currentColor}
.nav .btn{padding:10px 18px; color:#fff}
.menu-toggle{display:none; background:none; border:2px solid var(--ink); color:var(--ink); border-radius:999px; padding:8px 16px; font:600 .95rem var(--body); cursor:pointer}
@media (max-width:860px){
  .menu-toggle{display:block}
  .nav{display:none; position:absolute; left:0; right:0; top:68px; background:var(--paper); flex-direction:column; align-items:flex-start; padding:24px; gap:18px; border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
}

/* Hero */
.hero{padding-top:clamp(48px,8vw,96px)}
.hero .wrap{display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(32px,6vw,80px); align-items:center}
.hero h1{font-size:clamp(2.3rem,4.6vw,3.9rem); font-weight:800; max-width:17ch}
.hero .lede{font-size:1.25rem; color:var(--muted); margin:28px 0 36px; max-width:44ch}
.hero .actions{display:flex; flex-wrap:wrap; gap:12px}
.reel{position:relative}
.frames{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; aspect-ratio:1}
.frame{border-radius:6px; position:relative; opacity:0; transform:scale(.6)}
.frame span{position:absolute; left:6px; bottom:4px; font:600 .7rem var(--body); color:rgba(20,26,74,.55)}
.frame.light span{color:rgba(255,255,255,.75)}
.frame.on{opacity:1; transform:none; transition:opacity .12s linear, transform .2s cubic-bezier(.2,.9,.3,1.3)}
.timecode{display:flex; justify-content:space-between; gap:12px; margin-top:16px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--muted)}
.timecode strong{color:var(--ink); font-size:1.1rem}
@media (max-width:860px){ .hero .wrap{grid-template-columns:1fr} .reel{max-width:420px} }


/* Banque de visuels */
.bank-head{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:end; margin-bottom:56px}
.bank-head p{font-size:1.15rem; color:var(--muted)}
.bank-visual{display:grid; grid-template-columns:280px 1fr; gap:20px; align-items:stretch}
.shoot{background:var(--blue); color:#fff; border-radius:18px; padding:28px; display:flex; flex-direction:column; gap:10px}
.shoot strong{font:800 1.9rem/1.05 var(--display)}
.shoot span{color:rgba(255,255,255,.85)}
.legend{list-style:none; margin:auto 0 0; padding:16px 0 0; display:grid; gap:6px; font-size:.92rem}
.legend li{display:flex; align-items:center; gap:8px}
.legend li::before{content:""; width:12px; height:12px; border-radius:3px; background:var(--c); box-shadow:0 0 0 1px rgba(255,255,255,.6)}
.calendar{display:grid; grid-template-columns:repeat(6,1fr); gap:8px}
.week{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:6px; min-height:112px}
.wk{font-size:.8rem; font-weight:600; color:var(--muted)}
.chip{background:var(--c); color:#141A4A; font-size:.8rem; font-weight:600; padding:5px 8px; border-radius:6px; line-height:1.2}
.chip[style*="blue"], .chip[style*="8A7CFF"]{color:#fff}
.bank-note{font-size:.92rem; color:var(--muted); margin:14px 0 64px}
.gains{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px)}
.gain h3{font-size:1.35rem; line-height:1.15; margin-bottom:10px}
.gain p{color:var(--muted)}
@media (max-width:980px){ .bank-visual{grid-template-columns:1fr} .calendar{grid-template-columns:repeat(4,1fr)} }
@media (max-width:860px){ .bank-head,.gains{grid-template-columns:1fr} }
@media (max-width:520px){ .calendar{grid-template-columns:repeat(2,1fr)} }

/* Showreel */
.reel-section{padding-top:0}
.reel-section h2{margin-bottom:32px}
.reel-frame{position:relative; aspect-ratio:16/9; border-radius:20px; overflow:hidden; background:#141A4A}
.reel-frame iframe,.reel-frame video{position:absolute; inset:0; width:100%; height:100%; border:0}
.reel-placeholder{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; color:#fff;
  background:linear-gradient(135deg, rgba(43,59,224,.55), rgba(255,92,108,.35) 55%, rgba(255,198,46,.3))}
.reel-placeholder .play{width:88px; height:88px; border-radius:50%; background:#fff; display:grid; place-items:center}
.reel-placeholder .play::after{content:""; border-left:26px solid #141A4A; border-top:15px solid transparent; border-bottom:15px solid transparent; margin-left:8px}
.reel-placeholder p{margin:0; font:600 1.1rem var(--display)}

/* Cadrage */
.analysis{background:var(--mint); color:#141A4A}
.analysis-head{display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:end; margin-bottom:64px}
.analysis-head h2{max-width:14ch}
.analysis-head p{font-size:1.15rem; color:#12304A}
.analysis-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,80px)}
.sub{font-size:1.25rem; margin-bottom:24px}
.cadrage-steps{list-style:none; margin:0; padding:0; counter-reset:c}
.cadrage-steps li{counter-increment:c; display:grid; grid-template-columns:56px 1fr; column-gap:8px; padding:14px 0; border-top:2px solid rgba(20,26,74,.8)}
.cadrage-steps li::before{content:counter(c); grid-row:span 2; font:800 2.2rem/1 var(--display)}
.cadrage-steps strong{font:600 1.2rem var(--display)}
.cadrage-steps span{color:#12304A}
.axes{list-style:none; margin:0 0 40px; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.axes li{background:var(--c); color:#141A4A; padding:10px 18px; border-radius:999px; font-weight:600}
.axes li[style*="blue"]{color:#fff}
.deliverable{margin:0; background:#141A4A; color:#fff; border-radius:18px; padding:32px}
.deliverable p{font:600 clamp(1.3rem,2.4vw,1.7rem)/1.25 var(--display); margin-bottom:18px}
.deliverable p.small{font:400 1rem/1.6 var(--body); color:rgba(255,255,255,.8); margin:0}
@media (max-width:900px){ .analysis-head,.analysis-grid{grid-template-columns:1fr} }
.scope{margin-top:56px; display:grid; grid-template-columns:1fr 1.4fr; gap:40px; align-items:start; padding-top:32px; border-top:2px solid rgba(20,26,74,.8)}
.scope h3{font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.1}
.scope p{color:#12304A; font-size:1.1rem; margin:0}
@media (max-width:900px){ .scope{grid-template-columns:1fr; gap:14px} }


/* Niveaux */
.levels h2{margin-bottom:20px}
.levels-intro{font-size:1.15rem; color:var(--muted); margin-bottom:48px}
.level-list{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px)}
.level{border-top:4px solid var(--blue); padding-top:20px}
.level:nth-child(2){border-color:var(--coral)} .level:nth-child(3){border-color:var(--yellow)}
.level h3{font-size:1.3rem; line-height:1.15; margin-bottom:12px}
.level p{color:var(--muted)}
@media (max-width:860px){ .level-list{grid-template-columns:1fr} }

/* Méthode */
.method{background:var(--blue); color:#fff}
.method .intro{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:end; margin-bottom:64px}
.method .intro p{color:rgba(255,255,255,.85); font-size:1.15rem}
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); column-gap:24px; counter-reset:s}
.steps li{padding:28px 0 8px 0; border-top:3px solid rgba(255,255,255,.35); counter-increment:s; position:relative}
.steps li:first-child{border-top-color:var(--yellow)}
.steps li::before{content:counter(s); display:block; font:800 3rem/1 var(--display); color:var(--yellow); margin-bottom:16px}
.steps h3{font-size:1.2rem; margin-bottom:10px}
.steps p{color:rgba(255,255,255,.82); font-size:.98rem}
@media (max-width:980px){ .steps{grid-template-columns:1fr 1fr} .method .intro{grid-template-columns:1fr} }
@media (max-width:560px){ .steps{grid-template-columns:1fr} }

/* Réalisations */
.work h2{margin-bottom:56px}
.case{display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(24px,5vw,64px); align-items:center; padding:40px 0; border-top:1px solid var(--line)}
.case:nth-of-type(even) .player{order:2}
.player{aspect-ratio:16/9; border-radius:14px; display:grid; place-items:center; position:relative; overflow:hidden}
.player .play{width:72px; height:72px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center}
.player .play::after{content:""; border-left:20px solid var(--ink); border-top:12px solid transparent; border-bottom:12px solid transparent; margin-left:6px}
.player small{position:absolute; left:16px; bottom:12px; font-weight:600; color:var(--on-accent); opacity:.75}
.p-blue{background:var(--blue)} .p-blue small{color:#fff}
.p-coral{background:var(--coral)} .p-yellow{background:var(--yellow)} .p-mint{background:var(--mint)}
.case .client{font-weight:600; color:var(--muted); margin-bottom:8px}
.case h3{font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:18px}
.case dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 16px}
.case dt{font-weight:600}
.case dd{margin:0; color:var(--muted)}
@media (max-width:860px){ .case{grid-template-columns:1fr} .case:nth-of-type(even) .player{order:0} }

/* Offres */
.offers{background:var(--yellow); color:#141A4A}
.offers h2{margin-bottom:56px}
.offer-list{display:grid; grid-template-columns:1fr 1fr; gap:0}
.offer{padding:32px 32px 32px 0; border-top:2px solid rgba(20,26,74,.85)}
.offer:nth-child(odd){padding-right:48px}
.offer h3{font-size:1.8rem; margin-bottom:12px}
.offer p{color:#2C3266}
@media (max-width:760px){ .offer-list{grid-template-columns:1fr} }

/* Engagements */
.promises .wrap{display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(32px,6vw,80px)}
.promise{padding:22px 0; border-bottom:1px solid var(--line)}
.promise:first-child{padding-top:0}
.promise h3{font-size:1.3rem; margin-bottom:6px}
.promise p{color:var(--muted); margin:0}
@media (max-width:860px){ .promises .wrap{grid-template-columns:1fr} }

/* Équipe */
.team{background:var(--surface)}
.team h2{margin-bottom:48px}
.people{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,56px)}
.portrait{aspect-ratio:4/5; border-radius:14px; display:grid; place-items:center; font:800 5rem var(--display); color:#fff; margin-bottom:24px}
.person .role{color:var(--muted); font-weight:600; margin:6px 0 12px}
@media (max-width:640px){ .people{grid-template-columns:1fr} }

/* Références */
.refs{padding:64px 0}
.refs p.label{color:var(--muted); font-weight:600}
.ref-names{display:flex; flex-wrap:wrap; gap:14px 40px; font:600 clamp(1.4rem,3vw,2.1rem)/1.2 var(--display)}

/* Contact */
.contact{background:var(--coral); color:#141A4A}
.contact h2{font-size:clamp(2.8rem,8vw,6rem); max-width:12ch; margin-bottom:28px}
.contact p{font-size:1.2rem; color:#2A1F4A}
.contact .actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.contact .btn-primary{background:#141A4A}
.contact .btn-ghost{color:#141A4A}

footer{padding:40px 0; color:var(--muted); font-size:.95rem}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px}


/* Frise méthode */
.timeline{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(7,1fr); counter-reset:t}
.timeline li{counter-increment:t; padding:18px 14px 0 0; border-top:3px solid rgba(255,255,255,.35); display:flex; flex-direction:column; gap:4px}
.timeline li:first-child{border-top-color:var(--yellow)}
.timeline li::before{content:counter(t); font:800 1.8rem/1 var(--display); color:var(--yellow); margin-bottom:8px}
.timeline strong{font:600 1.05rem/1.2 var(--display)}
.timeline span{color:rgba(255,255,255,.8); font-size:.92rem; line-height:1.35}
@media (max-width:1000px){ .timeline{grid-template-columns:repeat(4,1fr); row-gap:28px} }
@media (max-width:560px){ .timeline{grid-template-columns:1fr 1fr} }

/* Offre mise en avant */
.featured-offer{background:#141A4A; color:#fff; border-radius:18px; padding:clamp(24px,4vw,44px); display:grid; grid-template-columns:1fr auto; gap:32px; align-items:end; margin-bottom:48px}
.featured-offer h3{font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:14px; color:var(--yellow)}
.featured-offer p{color:rgba(255,255,255,.88); margin:0}
.featured-offer .btn-primary{background:var(--yellow); color:#141A4A}
@media (max-width:760px){ .featured-offer{grid-template-columns:1fr} }

/* Mentions légales */
.legal{padding:64px 0; border-top:1px solid var(--line)}
.legal h2{font-size:1.8rem; margin-bottom:28px}
.legal-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; font-size:.92rem; color:var(--muted)}
.legal h3{font-size:1.05rem; color:var(--ink); margin:0 0 6px}
.legal p{margin:0 0 18px}
@media (max-width:860px){ .legal-grid{grid-template-columns:1fr} }
footer a{color:inherit}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .frame{opacity:1; transform:none}
  .frame.on{transition:none}
}

/* Pages offres */
.crumbs{font-size:.92rem; margin-bottom:28px; opacity:.85}
.crumbs a{text-decoration:none; font-weight:600}
.crumbs a:hover{text-decoration:underline}
.o-hero{background:var(--oc); color:var(--ot); padding:clamp(56px,8vw,104px) 0}
.o-hero h1{font-size:clamp(2.6rem,6vw,4.8rem); font-weight:800; max-width:14ch}
.o-hero .lede{font-size:1.25rem; margin:24px 0 36px; max-width:52ch; opacity:.92}
.o-hero .btn-primary{background:var(--ot); color:var(--oc)}
.o-when h2,.o-how h2,.o-faq h2{margin-bottom:40px}
.when-list{display:grid; grid-template-columns:1fr 1fr; gap:0 48px}
.when-item{padding:24px 0; border-top:2px solid var(--ink)}
.when-item h3{font-size:1.35rem; line-height:1.15; margin-bottom:8px}
.when-item p{color:var(--muted); margin:0}
.gets{display:flex; flex-wrap:wrap; gap:10px; margin:48px 0 0; padding:0}
.gets li{list-style:none; padding:10px 18px; border-radius:999px; font-weight:600; background:var(--oc); color:var(--ot)}
.gets-wrap p{color:var(--muted); margin-top:16px}
.o-how{background:var(--surface)}
.o-how .wrap{display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(32px,6vw,80px)}
.how-list{list-style:none; margin:0; padding:0}
.how-list li{padding:18px 0 18px 32px; border-bottom:1px solid var(--line); position:relative}
.how-list li::before{content:""; position:absolute; left:0; top:27px; width:14px; height:14px; border-radius:4px; background:var(--oc)}
.o-ref{padding:56px 0}
.o-ref .ref-card{border-left:6px solid var(--oc); padding:8px 0 8px 28px}
.o-ref .client{font-weight:600; color:var(--muted); margin-bottom:6px}
.o-ref h3{font-size:clamp(1.4rem,2.6vw,1.9rem); line-height:1.2; max-width:40ch}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item summary{cursor:pointer; list-style:none; padding:22px 40px 22px 0; font:600 1.2rem/1.3 var(--display); position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+"; position:absolute; right:4px; top:16px; font-size:1.8rem; font-weight:400; transition:transform .2s ease}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{color:var(--muted); padding-bottom:22px; margin:0}
.o-cta{background:var(--oc); color:var(--ot)}
.o-cta h2{max-width:18ch; margin-bottom:24px}
.o-cta p{opacity:.9; font-size:1.15rem}
.o-cta .btn-primary{background:var(--ot); color:var(--oc); margin-top:12px}
.others{padding:64px 0}
.others p{color:var(--muted); font-weight:600}
.others-list{display:flex; flex-wrap:wrap; gap:12px}
.others-list a{padding:12px 20px; border:2px solid var(--ink); border-radius:999px; text-decoration:none; font-weight:600}
.others-list a:hover{background:var(--ink); color:var(--paper)}
.offer h3 a{text-decoration:none}
.offer h3 a:hover{text-decoration:underline}
.offer .more{font-weight:600; text-decoration:underline; text-underline-offset:3px}
.featured-offer .fo-actions{display:flex; flex-direction:column; gap:10px; align-items:stretch}
.featured-offer .more-light{color:#fff; text-align:center; font-weight:600}
@media (max-width:860px){ .when-list,.o-how .wrap{grid-template-columns:1fr} }
/* Menu déroulant des offres */
.dd{position:relative}
.dd-btn{background:none; border:0; padding:0; font:500 1.0625rem var(--body); color:var(--ink); cursor:pointer; display:flex; align-items:center; gap:6px}
.dd-btn::after{content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-3px); transition:transform .2s ease}
.dd.open .dd-btn::after{transform:rotate(225deg) translateY(-1px)}
.dd-panel{display:none; position:absolute; top:calc(100% + 18px); left:-18px; min-width:300px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:8px; box-shadow:0 12px 32px rgba(20,26,74,.14); flex-direction:column; z-index:20}
.dd.open .dd-panel{display:flex}
.dd-panel a{padding:10px 12px; border-radius:8px; text-decoration:none; font-weight:500}
.dd-panel a:hover{background:var(--paper); color:var(--blue)}
.dd-panel .dd-all{border-top:1px solid var(--line); margin-top:4px; padding-top:12px; font-weight:600}
@media (max-width:860px){ .dd-panel{position:static; box-shadow:none; border:0; padding:6px 0 0 8px; min-width:0; background:none} }


/* Bilingue */
.lang{font-weight:700; text-decoration:none; border:2px solid var(--ink); border-radius:8px; padding:4px 9px; font-size:.9rem; letter-spacing:.04em}
.nav .lang:hover{background:var(--ink); color:var(--paper)}
.newfr{background:var(--surface)}
.newfr-head{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:end; margin-bottom:56px}
.newfr-head p{font-size:1.15rem; color:var(--muted)}
.also{margin-top:36px; font-weight:600}
@media (max-width:860px){ .newfr-head{grid-template-columns:1fr} }