/* Plan Large · studio photo et film fictif · une seule famille : Radio Canada (wdth 75–100, wght 300–700) */
@font-face{font-family:'Radio Canada';font-style:normal;font-weight:300 700;font-stretch:75% 100%;font-display:swap;src:url(fonts/radio-canada.woff2) format('woff2')}
@font-face{font-family:'Radio Canada';font-style:italic;font-weight:300 700;font-stretch:75% 100%;font-display:swap;src:url(fonts/radio-canada-italic.woff2) format('woff2')}

:root{
  --nuit:#0f1522;--nuit-2:#151d2c;--nuit-3:#1c2537;
  --lin:#f1efea;--lin-2:#e7e3db;--blanc:#faf9f6;
  --encre:#121722;--gris:#525866;--gris-c:#a7acb6;
  --brume:#ebe8e1;--filet:#d2cdc3;--filet-d:rgba(235,232,225,.14);
  --rec:#ff5b3a;--rec-h:#ff7656;--sur-rec:#0f1522;
  --head:72px;
  --ease:cubic-bezier(.2,.7,.1,1);--ease-io:cubic-bezier(.65,0,.25,1);
  --f:'Radio Canada',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:calc(var(--head) + 8px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--nuit);color:var(--encre);font-family:var(--f);font-size:1.0625rem;line-height:1.6;font-weight:400;font-stretch:100%;font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--blanc);color:var(--encre);padding:10px 16px;border-radius:2px;font-weight:560;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--rec);outline-offset:3px}
.dark :focus-visible,.hero :focus-visible,.top :focus-visible{outline-color:#ffb19f}

.wrap{width:min(1320px,100% - 2*clamp(16px,4vw,56px));margin-inline:auto}
.light{background:var(--lin);color:var(--encre)}
.dark{background:var(--nuit);color:var(--brume)}
.label{font-size:.75rem;font-weight:580;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);display:flex;align-items:center;gap:.7em;margin-bottom:1.1rem}
.label::before{content:'';width:22px;height:1px;background:currentColor;opacity:.7}
.dark .label{color:var(--gris-c)}
.h2{font-size:clamp(2.3rem,5.4vw,4.6rem);line-height:.98;font-weight:620;font-stretch:78%;letter-spacing:-.018em;text-wrap:balance;max-width:16ch}
.h3{font-size:1.5rem;font-weight:600;font-stretch:85%;line-height:1.15;letter-spacing:-.005em}

/* Boutons : la couleur « rec » est réservée aux actions */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:50px;padding:0 1.5em;border-radius:2px;background:var(--rec);color:var(--sur-rec);font-weight:600;font-size:1rem;letter-spacing:.01em;text-decoration:none;border:0;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;transition:transform .35s var(--ease)}
.btn::after{content:'';position:absolute;inset:0;background:var(--rec-h);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);z-index:-1}
.btn:hover::after{transform:scaleX(1)}
.btn:active{transform:scale(.98)}
.btn-sm{min-height:40px;padding:0 1.1em;font-size:.92rem}
.btn-big{min-height:56px;padding:0 2em;font-size:1.05rem}
.btn-ghost{background:transparent;color:var(--brume);box-shadow:inset 0 0 0 1px rgba(235,232,225,.55)}
.btn-ghost::after{background:var(--brume)}
.btn-ghost:hover{color:var(--nuit)}
.btn-line{background:transparent;color:var(--encre);box-shadow:inset 0 0 0 1px var(--encre)}
.btn-line::after{background:var(--encre)}
.btn-line:hover{color:var(--lin)}
.btn-line-dark{color:var(--brume);box-shadow:inset 0 0 0 1px rgba(235,232,225,.5)}
.btn-line-dark::after{background:var(--brume)}
.btn-line-dark:hover{color:var(--nuit)}
.btn svg{width:18px;height:18px}
.btn .sm{display:none}

/* Petits boutons de contrôle (pause) */
.ctl{display:inline-flex;align-items:center;gap:.55em;min-height:36px;padding:0 .9em 0 .7em;border-radius:2px;border:1px solid currentColor;background:transparent;font-size:.8rem;font-weight:540;letter-spacing:.04em;cursor:pointer;opacity:.85;transition:opacity .2s,background-color .2s}
.ctl:hover{opacity:1}
.ic{width:12px;height:12px;position:relative;flex:none}
.ic-pause::before,.ic-pause::after{content:'';position:absolute;top:1px;bottom:1px;width:3px;background:currentColor}
.ic-pause::before{left:2px}.ic-pause::after{right:2px}
.ctl[aria-pressed=true] .ic-pause::before{left:2px;top:0;bottom:0;width:0;height:0;background:none;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.ctl[aria-pressed=true] .ic-pause::after{display:none}

/* En-tête */
.top{position:fixed;inset:0 0 auto;z-index:50;height:var(--head);display:flex;align-items:center;gap:2rem;padding-inline:clamp(16px,3vw,40px);color:var(--brume)}
.top::before{content:'';position:absolute;inset:0;background:var(--nuit);opacity:0;transition:opacity .35s;z-index:-1;box-shadow:0 1px 0 var(--filet-d)}
.top::after{content:'';position:absolute;inset:0 0 -40px;background:linear-gradient(rgba(10,14,24,.55),rgba(10,14,24,0));z-index:-2;transition:opacity .35s;pointer-events:none}
.top.solid::before{opacity:1}
.top.solid::after{opacity:0}
.logo{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:640;font-stretch:80%;font-size:1.3rem;letter-spacing:.01em;white-space:nowrap}
.logo svg{width:30px;height:15px}
.nav{display:flex;gap:1.6rem;margin-left:auto}
.nav a{font-size:.95rem;text-decoration:none;position:relative;padding:.4em 0;opacity:.88}
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:.1em;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav a:hover::after,.nav a.cur::after{transform:scaleX(1);transform-origin:left}
.nav a:hover,.nav a.cur{opacity:1}
.top-actions{display:flex;align-items:center;gap:1rem}
.call{display:inline-flex;align-items:center;gap:.45em;text-decoration:none;font-size:.92rem;font-variant-numeric:tabular-nums;opacity:.9}
.call svg{width:17px;height:17px}
.call:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.menu-btn{display:none;width:44px;height:44px;border:1px solid rgba(235,232,225,.4);border-radius:2px;background:transparent;cursor:pointer;position:relative}
.menu-btn i{position:absolute;left:13px;right:13px;height:1.5px;background:currentColor;transition:transform .35s var(--ease)}
.menu-btn i:first-of-type{top:17px}.menu-btn i:last-of-type{top:25px}
.menu-btn[aria-expanded=true] i:first-of-type{transform:translateY(4px) rotate(45deg)}
.menu-btn[aria-expanded=true] i:last-of-type{transform:translateY(-4px) rotate(-45deg)}
.menu{position:absolute;top:var(--head);left:0;right:0;background:var(--nuit);padding:12px clamp(16px,4vw,40px) 26px;display:flex;flex-direction:column;border-top:1px solid var(--filet-d);box-shadow:0 20px 40px rgba(0,0,0,.35);transform-origin:top;animation:menu .4s var(--ease)}
.menu a{padding:.75rem 0;font-size:1.5rem;font-weight:560;font-stretch:82%;text-decoration:none;border-bottom:1px solid var(--filet-d)}
.menu a.menu-call{font-size:1rem;font-weight:500;border:0;margin-top:.6rem;color:var(--gris-c)}
@keyframes menu{from{opacity:0;transform:translateY(-10px)}}

/* Ouverture */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;color:var(--brume);overflow:hidden;background:var(--nuit)}
.hero-media{position:absolute;inset:0}
.hero-video,.hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-video{z-index:1;opacity:0;transition:opacity .8s}
.hero-video.playing{opacity:1}
.bars i{position:absolute;left:0;right:0;height:50%;background:var(--nuit);z-index:2;will-change:transform}
.bars .b-t{top:0;transform:translateY(-100%)}
.bars .b-b{bottom:0;transform:translateY(100%)}
.js .hero:not(.open) .b-t{transform:translateY(calc(-1 * var(--half)))}
.js .hero:not(.open) .b-b{transform:translateY(var(--half))}
.hero{--half:21vw}
.hero.open .bars i{transition:transform 1.5s var(--ease-io)}
.hero-shade{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,rgba(10,14,24,.45) 0,rgba(10,14,24,0) 26%,rgba(10,14,24,0) 45%,rgba(10,14,24,.78) 100%);pointer-events:none}
.hero-in{position:absolute;z-index:4;left:clamp(16px,4vw,56px);right:clamp(16px,4vw,56px);bottom:clamp(96px,14vh,140px);max-width:980px}
.kicker{font-size:.8rem;font-weight:560;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1rem;opacity:.9}
.hero-title{font-size:clamp(4.2rem,15vw,13.5rem);line-height:.82;font-weight:640;font-stretch:75%;letter-spacing:-.025em;margin-left:-.04em;display:flex;flex-wrap:wrap;column-gap:.18em}
.ln{display:inline-block;overflow:hidden;padding-bottom:.06em}
.ln>span{display:inline-block}
.hero-lead{max-width:34rem;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.5;margin-top:1.4rem;color:rgba(235,232,225,.92)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.8rem}
.hero-foot{position:absolute;z-index:4;left:clamp(16px,4vw,56px);right:clamp(16px,4vw,56px);bottom:26px;display:flex;align-items:center;gap:1.4rem;font-size:.85rem}
.chapter{display:flex;align-items:center;gap:.8em;min-width:0;white-space:nowrap}
.ch-dom{font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.75rem}
.ch-sep{width:18px;height:1px;background:currentColor;opacity:.6}
.ch-place{opacity:.85;overflow:hidden;text-overflow:ellipsis}
.chapter.swap>span{animation:chap .6s var(--ease)}
@keyframes chap{from{opacity:0;transform:translateY(6px)}}
.ch-marks{display:flex;gap:6px;margin-left:auto}
.ch-marks li{width:22px;height:2px;background:rgba(235,232,225,.3);transition:background-color .4s}
.ch-marks li.on{background:var(--brume)}
.hero-ctrl{display:flex;gap:8px}
.hero .ctl{color:var(--brume);border-color:rgba(235,232,225,.45)}
.js .rise{opacity:0;transform:translateY(16px)}
.js .ln>span{transform:translateY(105%)}
.hero.ready .rise{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.hero.ready .ln>span{transform:none;transition:transform 1.1s var(--ease)}
.hero.ready .ln:nth-child(2)>span{transition-delay:.08s}
.hero.ready .hero-lead{transition-delay:.25s}
.hero.ready .hero-cta{transition-delay:.38s}

/* Révélations génériques */
.js .reveal{opacity:0;transform:translateY(22px)}
.js .reveal.vu{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal-lines .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.js .reveal-lines .w>span{display:inline-block;transform:translateY(108%)}
.js .reveal-lines.vu .w>span{transform:none;transition:transform 1s var(--ease);transition-delay:calc(var(--k)*28ms)}

/* Métiers */
.metiers{padding:clamp(72px,9vw,124px) 0 clamp(68px,8.5vw,116px)}
.met-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(40px,6vw,80px)}
.met-head .label{grid-column:1/-1}
.met-intro{font-size:1.15rem;line-height:1.55;color:var(--gris);max-width:30rem}
.met-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,5vw,80px);align-items:start}
.met-list{border-top:1px solid var(--filet)}
.met-row{border-bottom:1px solid var(--filet);position:relative;display:grid;grid-template-columns:1fr auto;column-gap:1rem;padding:1.4rem 0 1.5rem}
.met-btn{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:1rem;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left}
.met-name{font-size:clamp(2rem,3.6vw,3.3rem);line-height:1;font-weight:600;font-stretch:76%;letter-spacing:-.015em;position:relative;transition:transform .5s var(--ease),color .3s}
.met-btn[aria-pressed=false] .met-name{color:#6f737c}
.met-btn:hover .met-name,.met-btn[aria-pressed=true] .met-name{color:var(--encre);transform:translateX(10px)}
.met-name::before{content:'';position:absolute;left:-18px;top:50%;width:8px;height:8px;margin-top:-4px;background:var(--encre);transform:scale(0);transition:transform .4s var(--ease)}
.met-btn[aria-pressed=true] .met-name::before{transform:scale(1)}
.met-price{font-size:.95rem;font-weight:520;color:var(--gris);font-variant-numeric:tabular-nums;white-space:nowrap}
.met-txt{grid-column:1/2;margin-top:.6rem;color:var(--gris);max-width:32rem}
.met-link{grid-column:2/3;align-self:end;font-size:.9rem;font-weight:560;text-underline-offset:4px;white-space:nowrap}
.met-mini{display:none}
.met-stage{position:sticky;top:calc(var(--head) + 32px)}
.met-frame{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--nuit)}
.met-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .7s var(--ease),transform 1.2s var(--ease)}
.met-frame video.on{opacity:1;transform:none}
.met-cap{position:absolute;left:14px;bottom:12px;z-index:2;color:var(--brume);font-size:.82rem;background:rgba(15,21,34,.72);padding:.3em .7em;border-radius:2px}
.met-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:1px;background:var(--filet)}
.met-facts li{background:var(--lin);padding:1rem .2rem 0 0;font-size:.92rem;line-height:1.4;color:var(--gris)}
.met-facts b{display:block;color:var(--encre);font-weight:600}

/* Réalisations */
.works{padding:clamp(68px,8.5vw,116px) 0 clamp(64px,8vw,110px)}
.works-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2rem}
.works-head>div:first-child{flex:1.15}
.works-side{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:1.2rem;max-width:30rem}
.works-intro{color:rgba(235,232,225,.78);font-size:1.08rem}
.works .ctl{color:var(--brume);border-color:rgba(235,232,225,.35)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:2.2rem;position:relative;z-index:5}
.f-btn{min-height:42px;padding:0 1.05em;border-radius:2px;border:1px solid rgba(235,232,225,.28);background:transparent;cursor:pointer;font-size:.95rem;font-weight:500;display:inline-flex;align-items:center;gap:.55em;transition:background-color .3s,color .3s,border-color .3s}
.f-btn span{font-size:.75rem;opacity:.65;font-variant-numeric:tabular-nums}
.f-btn:hover{border-color:rgba(235,232,225,.7)}
.f-btn[aria-pressed=true]{background:var(--brume);color:var(--nuit);border-color:var(--brume)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(26px,2.4vw,36px) clamp(14px,1.5vw,20px)}
.it{grid-column:span var(--span,4);min-width:0;--rh:clamp(200px,22vw,300px)}
.it.r2{--rh:clamp(240px,27vw,370px)}
.it-btn{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;position:relative}
.it-media{display:block;position:relative;height:var(--rh);overflow:hidden;background:var(--nuit-3)}
.it-media img,.it-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%)}
.it-badge{position:absolute;top:10px;left:10px;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:.25em .6em .25em 1.5em;background:rgba(15,21,34,.72);color:var(--brume);border-radius:2px}
.it-badge::before{content:'';position:absolute;left:.65em;top:50%;margin-top:-4px;border-left:6px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent}
.it-cap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.15rem 1rem;padding-top:.75rem}
.it-t{font-weight:560;font-size:1.02rem;line-height:1.3}
.it-m{font-size:.85rem;color:var(--gris-c)}
.it-open{position:absolute;left:0;right:0;top:0;height:var(--rh);display:flex;align-items:flex-end;padding:14px;font-size:.85rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brume);background:linear-gradient(0deg,rgba(10,14,24,.62),rgba(10,14,24,0) 45%);opacity:0;transition:opacity .45s var(--ease)}
.it-open::after{content:'';width:0;height:1px;background:currentColor;margin:0 0 .45em .6em;transition:width .5s var(--ease)}
.it-btn:hover .it-open,.it-btn:focus-visible .it-open{opacity:1}
.it-btn:hover .it-open::after,.it-btn:focus-visible .it-open::after{width:36px}
.js .it{opacity:0;transform:translateY(24px)}
.js .it.vu{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--d,0)*70ms)}
.more{display:none;justify-content:center;margin:6px 0 22px;order:1}
.more .btn{min-width:60%}
.grid.out .it{opacity:0;transform:translateY(10px);transition:opacity .22s,transform .22s;transition-delay:0s}

/* Plan serré → plan large */
.wide{height:210vh;position:relative;background:var(--nuit)}
.wide-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.wide-frame{position:absolute;inset:0;overflow:hidden;transform:scale(var(--s,.5));will-change:transform}
.wide-img{width:100%;height:100%;object-fit:cover;transform:scale(var(--k,2));transform-origin:var(--ox,53%) var(--oy,58%);will-change:transform}
.wide-w{position:absolute;z-index:2;color:var(--brume)}
.wide-a{left:clamp(16px,4vw,56px);top:calc(var(--head) + 4vh);font-size:clamp(2.2rem,5vw,4.4rem);font-weight:620;font-stretch:76%;letter-spacing:-.015em;opacity:calc(1 - var(--p,0)*2.4)}
.wide-b{left:clamp(16px,4vw,56px);bottom:clamp(40px,9vh,90px);max-width:24ch;font-size:clamp(1.9rem,4vw,3.6rem);line-height:1.02;font-weight:620;font-stretch:78%;letter-spacing:-.015em;opacity:clamp(0,calc(var(--p,0)*3 - 1.8),1);transform:translateY(calc((1 - clamp(0,calc(var(--p,0)*3 - 1.8),1))*24px));text-shadow:0 2px 30px rgba(0,0,0,.35)}
.wide-b span{display:block;color:rgba(235,232,225,.82);font-weight:400;font-size:.55em;font-stretch:100%;letter-spacing:0;margin-top:.6em}
.wide-cap{position:absolute;right:clamp(16px,4vw,56px);bottom:clamp(40px,9vh,90px);z-index:2;color:var(--brume);font-size:.82rem;letter-spacing:.06em;opacity:clamp(0,calc(var(--p,0)*3 - 1.8),1)}
.wide-stage::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(10,14,24,.6),rgba(10,14,24,0) 50%);opacity:clamp(0,calc(var(--p,0)*3 - 1.4),1);pointer-events:none}

/* Offres */
.offres{padding:clamp(72px,9vw,124px) 0 clamp(68px,8.5vw,116px)}
.off-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(36px,5vw,60px)}
.off-head .label{grid-column:1/-1}
.off-intro{color:var(--gris);font-size:1.08rem;max-width:30rem}
.tabs{display:flex;gap:clamp(18px,3vw,40px);border-bottom:1px solid var(--filet);position:relative;margin-bottom:clamp(24px,3vw,40px);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0;background:none;padding:.9rem 0 1rem;font-size:1.15rem;font-weight:560;cursor:pointer;color:#5d616b;white-space:nowrap;transition:color .3s}
.tabs button[aria-selected=true],.tabs button:hover{color:var(--encre)}
.tab-ink{position:absolute;left:0;bottom:-1px;height:2px;width:100px;background:var(--encre);transform-origin:left;transition:transform .55s var(--ease);pointer-events:none}
.panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.panel:focus-visible{outline-offset:8px}
.plan{background:var(--blanc);padding:clamp(22px,2.4vw,34px);display:flex;flex-direction:column;position:relative;border:1px solid transparent}
.plan h3{font-size:1.7rem;font-weight:620;font-stretch:80%;letter-spacing:-.01em;line-height:1.05}
.price{margin-top:.9rem;font-size:2.1rem;font-weight:600;font-stretch:85%;font-variant-numeric:tabular-nums;line-height:1}
.price small{display:block;font-size:.78rem;font-weight:500;font-stretch:100%;color:var(--gris);letter-spacing:.02em;margin-bottom:.35rem}
.plan-sum{margin-top:1rem;color:var(--gris);line-height:1.45}
.plan-sum em{font-style:italic}
.plan ul{margin:1.4rem 0 1.8rem;border-top:1px solid var(--filet);flex:1}
.plan li{padding:.62rem 0 .62rem 1.4rem;border-bottom:1px solid var(--filet);position:relative;font-size:.97rem;line-height:1.4}
.plan li::before{content:'';position:absolute;left:0;top:calc(.62rem + .7em);width:9px;height:1px;background:var(--encre)}
.plan .btn{align-self:flex-start}
.plan-star{background:var(--nuit);color:var(--brume)}
.plan-star .price small,.plan-star .plan-sum{color:var(--gris-c)}
.plan-star ul,.plan-star li{border-color:var(--filet-d)}
.plan-star li::before{background:var(--brume)}
.plan-tag{position:absolute;top:clamp(22px,2.4vw,34px);right:clamp(22px,2.4vw,34px);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-c)}
.panel.enter .plan{animation:planIn .7s var(--ease) both}
.panel.enter .plan:nth-child(2){animation-delay:.07s}
.panel.enter .plan:nth-child(3){animation-delay:.14s}
@keyframes planIn{from{opacity:0;transform:translateY(18px)}}
.options{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:clamp(20px,4vw,56px);align-items:center;margin-top:clamp(36px,5vw,64px);padding-top:clamp(36px,5vw,64px);border-top:1px solid var(--filet)}
.opt-fig{aspect-ratio:3/2;overflow:hidden}
.opt-fig img{width:100%;height:100%;object-fit:cover}
.opt-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,3vw,40px);margin-top:1.2rem}
.opt-list li{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--filet);font-size:1rem}
.opt-list b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Déroulé */
.deroule{padding:clamp(72px,9vw,124px) 0 clamp(68px,8.5vw,116px)}
.der-head{margin-bottom:clamp(40px,6vw,72px)}
.steps{position:relative;--fill:0}
.steps::before,.steps::after{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--filet-d)}
.steps::after{background:var(--brume);transform:scaleY(var(--fill));transform-origin:top}
.step{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr) minmax(0,240px);gap:clamp(18px,3vw,48px);align-items:center;padding:clamp(18px,2vw,24px) 0 clamp(18px,2vw,24px) clamp(24px,3vw,48px);border-bottom:1px solid var(--filet-d);position:relative}
.step::before{content:'';position:absolute;left:-4px;top:50%;width:9px;height:9px;margin-top:-4.5px;background:var(--nuit);box-shadow:inset 0 0 0 1px var(--gris-c);transition:background-color .4s,box-shadow .4s}
.step.on::before{background:var(--brume);box-shadow:inset 0 0 0 1px var(--brume)}
.st-when{font-size:.8rem;font-weight:580;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-c)}
.st-body h3{font-size:clamp(1.7rem,2.6vw,2.4rem);font-weight:610;font-stretch:78%;letter-spacing:-.01em;line-height:1.05;margin-bottom:.55rem}
.st-body p{color:rgba(235,232,225,.78);max-width:34rem}
.st-fig{aspect-ratio:3/2;overflow:hidden;max-width:240px;justify-self:end;width:100%}
.st-fig img{width:100%;height:100%;object-fit:cover}
.js .st-fig{clip-path:inset(0 0 0 100%)}
.js .step.on .st-fig{clip-path:inset(0);transition:clip-path 1.1s var(--ease-io)}
.js .step .st-fig img{transform:scale(1.12);transition:transform 1.6s var(--ease)}
.js .step.on .st-fig img{transform:none}

/* Avis */
.avis{padding:clamp(72px,9vw,124px) 0}
.avis-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(28px,6vw,96px);align-items:center}
.avis-figs{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--lin-2)}
.avis-figs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s var(--ease)}
.avis-figs img.on{opacity:1}
.quotes{min-height:12.5rem;display:grid}
.q{grid-area:1/1}
.q p{font-size:clamp(1.7rem,3.3vw,2.9rem);line-height:1.12;font-weight:520;font-stretch:84%;letter-spacing:-.01em;text-wrap:pretty}
.q footer{margin-top:1.3rem;color:var(--gris);font-size:.95rem}
.q.on{animation:qIn .8s var(--ease)}
@keyframes qIn{from{opacity:0;transform:translateY(12px)}}
.q-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:2.2rem;flex-wrap:wrap}
.q-dots{display:flex;gap:6px;flex-wrap:wrap}
.q-dots button{border:0;background:none;padding:.5rem 0;cursor:pointer;font-size:.88rem;font-weight:540;color:var(--gris);min-width:92px;text-align:left}
.q-dots button i{display:block;height:2px;margin-top:.45rem;background:var(--filet);position:relative;overflow:hidden}
.q-dots button i::after{content:'';position:absolute;inset:0;background:var(--encre);transform:scaleX(0);transform-origin:left}
.q-dots button[aria-pressed=true]{color:var(--encre)}
.q-dots button[aria-pressed=true] i::after{transform:scaleX(1)}
.q-dots button.run i::after{transform:scaleX(0);animation:qbar var(--qt,7s) linear forwards}
.avis.paused .q-dots button.run i::after{animation-play-state:paused}
@keyframes qbar{to{transform:scaleX(1)}}
.avis .ctl{color:var(--encre)}
.fict{margin-top:1.6rem;font-size:.82rem;color:var(--gris);display:flex;align-items:center;gap:.6em}
.fict::before{content:'';width:6px;height:6px;border:1px solid currentColor;transform:rotate(45deg)}

/* Devis */
.devis{padding:clamp(72px,9vw,124px) 0}
.devis-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:clamp(28px,6vw,96px);align-items:start}
.devis-side{position:sticky;top:calc(var(--head) + 32px)}
.devis-lead{margin-top:1.3rem;color:rgba(235,232,225,.78);max-width:28rem;font-size:1.1rem}
.btn-call{margin-top:2rem}
.devis-info{margin-top:2.4rem;border-top:1px solid var(--filet-d)}
.devis-info div{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--filet-d);font-size:.95rem}
.devis-info dt{color:var(--gris-c)}
.devis-info dd{text-align:right}
.devis-main{background:var(--nuit-2);padding:clamp(22px,3.4vw,48px);position:relative}
.fs{border:0;padding:0;margin:0 0 1.6rem;min-width:0}
.fs legend{font-size:.8rem;font-weight:580;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-c);margin-bottom:.8rem;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chips span{display:inline-flex;align-items:center;min-height:42px;padding:0 1em;border:1px solid rgba(235,232,225,.28);border-radius:2px;font-size:.95rem;transition:background-color .25s,color .25s,border-color .25s}
.chips label:hover span{border-color:rgba(235,232,225,.7)}
.chips input:checked+span{background:var(--brume);color:var(--nuit);border-color:var(--brume)}
.chips input:focus-visible+span{outline:2px solid #ffb19f;outline-offset:2px}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.field{display:flex;flex-direction:column;margin-bottom:1.5rem;position:relative}
.field label{font-size:.8rem;font-weight:580;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-c);margin-bottom:.45rem}
.field input,.field textarea{font:inherit;font-size:1.02rem;color:var(--brume);background:transparent;border:0;border-bottom:1px solid rgba(235,232,225,.3);border-radius:0;padding:.55rem 0;transition:border-color .3s;color-scheme:dark;width:100%}
.field textarea{resize:vertical;min-height:110px}
.field input::placeholder,.field textarea::placeholder{color:rgba(235,232,225,.5)}
.field::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brume);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);pointer-events:none}
.field:has(.hint)::after,.field:has(.err:not([hidden]))::after{bottom:auto;top:calc(100% - 1.6em)}
.field:focus-within::after{transform:scaleX(1)}
.field input:focus,.field textarea:focus{outline:none}
.field input:focus-visible,.field textarea:focus-visible{outline:none}
.hint{font-size:.8rem;color:var(--gris-c);margin-top:.4rem}
.err{font-size:.85rem;color:#ffb19f;margin-top:.4rem}
.field.bad input{border-color:#ffb19f}
.picked{margin:-.6rem 0 1.6rem;font-size:.92rem;color:var(--gris-c)}
.picked b{color:var(--brume);font-weight:560}
.form-end{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:.4rem}
.form-note{font-size:.85rem;color:var(--gris-c)}
.done{text-align:left;outline:none}
.frame-ok{width:200px;height:auto;margin-bottom:1.6rem;overflow:visible}
.fo-out{fill:none;stroke:var(--brume);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:0}
.fo-in{fill:var(--brume);transform-box:fill-box;transform-origin:left center}
.fo-tick{fill:none;stroke:var(--brume);stroke-width:3;stroke-linecap:square;stroke-dasharray:1;stroke-dashoffset:0}
.done.play .fo-out{animation:foDraw 1s var(--ease-io) both}
.done.play .fo-in{animation:foIn .8s .7s var(--ease) both}
.done.play .fo-tick{animation:foDraw .5s 1.2s var(--ease) both}
@keyframes foDraw{from{stroke-dashoffset:1}}
@keyframes foIn{from{transform:scaleX(0)}}
.done-t{font-size:clamp(2.2rem,4vw,3.4rem);font-weight:620;font-stretch:78%;line-height:1;letter-spacing:-.015em}
.done-p{margin-top:1rem;color:rgba(235,232,225,.8);max-width:34rem}
.recap{margin:1.8rem 0 2rem;border-top:1px solid var(--filet-d)}
.recap div{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--filet-d);font-size:.97rem}
.recap dt{color:var(--gris-c)}
.recap dd{overflow-wrap:anywhere}
.done.play .recap div{animation:planIn .6s var(--ease) both;animation-delay:calc(.5s + var(--i)*60ms)}

/* Questions */
.faq{padding:clamp(72px,9vw,124px) 0}
.faq-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:clamp(28px,6vw,96px);align-items:start}
.faq-side{margin-top:1.3rem;color:var(--gris);max-width:24rem}
.faq-list{border-top:1px solid var(--filet)}
.qa{border-bottom:1px solid var(--filet)}
.qa summary{list-style:none;cursor:pointer;padding:1.25rem 3rem 1.25rem 0;position:relative;font-size:clamp(1.15rem,1.6vw,1.35rem);font-weight:560;line-height:1.3}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before,.qa summary::after{content:'';position:absolute;right:6px;top:50%;width:16px;height:1.5px;background:var(--encre);transition:transform .45s var(--ease)}
.qa summary::after{transform:rotate(90deg)}
.qa[open] summary::after{transform:rotate(0)}
.qa-a{overflow:hidden}
.qa-a p{padding:0 3rem 1.4rem 0;color:var(--gris);max-width:40rem}
.qa.anim .qa-a{transition:height .45s var(--ease)}

/* Fin */
.fin{position:relative;min-height:88vh;min-height:88svh;display:flex;align-items:center;color:var(--brume);overflow:hidden;background:var(--nuit)}
.fin-media{position:absolute;inset:0}
.fin-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fin-veil{position:absolute;inset:0;background:var(--nuit);opacity:.92;transition:opacity 2.2s var(--ease)}
.fin.vu .fin-veil{opacity:0}
.fin-media::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,17,28,.72) 0,rgba(12,17,28,.35) 55%,rgba(12,17,28,.15) 100%)}
.fin-in{position:relative;z-index:2;width:min(1320px,100% - 2*clamp(16px,4vw,56px));margin-inline:auto;padding:120px 0}
.fin-t{font-size:clamp(2.6rem,6.4vw,6rem);line-height:.96;font-weight:630;font-stretch:76%;letter-spacing:-.02em;max-width:15ch;text-wrap:balance}
.fin-cta{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:2.2rem}
.fin-call{font-size:1rem;text-underline-offset:5px;font-variant-numeric:tabular-nums}
.fin-ctl{position:absolute;z-index:2;right:clamp(16px,4vw,56px);bottom:24px;color:var(--brume);border-color:rgba(235,232,225,.45)}

/* Pied de page */
.foot{padding:clamp(60px,8vw,100px) 0 32px;border-top:1px solid var(--filet-d)}
.foot-top{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding-bottom:clamp(30px,4vw,50px);border-bottom:1px solid var(--filet-d)}
.logo-big{font-size:clamp(2.6rem,6vw,5rem);gap:1rem}
.logo-big svg{width:clamp(48px,7vw,86px);height:auto}
.foot-line{color:var(--gris-c)}
.foot-cols{display:grid;grid-template-columns:1fr .8fr 1.3fr 1.5fr;gap:clamp(20px,3vw,48px);padding:clamp(30px,4vw,50px) 0}
.foot-h{font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-c);margin-bottom:.9rem}
.foot-cols p,.foot-cols li{font-size:.93rem;line-height:1.65;color:rgba(235,232,225,.82)}
.foot-cols a{text-underline-offset:3px}
.foot-cols li a{text-decoration:none}
.foot-cols li a:hover{text-decoration:underline}
.cred{margin-top:.6rem;font-size:.9rem;color:rgba(235,232,225,.82)}
.cred summary{cursor:pointer;text-decoration:underline;text-underline-offset:3px;width:max-content}
.cred p{margin-top:.6rem;font-size:.85rem!important;color:var(--gris-c)!important}
.foot-legal{border-top:1px solid var(--filet-d);padding-top:22px;font-size:.85rem;color:var(--gris-c);letter-spacing:.04em}

/* Visionneuse */
.lb{border:0;padding:0;margin:auto;width:min(1240px,100% - 32px);max-height:calc(100% - 32px);background:var(--nuit-2);color:var(--brume);border-radius:2px;overflow:auto}
.lb::backdrop{background:rgba(6,9,15,.84)}
.lb[open]{animation:lbIn .5s var(--ease)}
@keyframes lbIn{from{opacity:0;transform:translateY(16px)}}
.lb-in{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);position:relative}
.lb-media{background:#090d16;display:flex;align-items:center;justify-content:center;min-height:320px;max-height:calc(100vh - 32px)}
.lb-media img,.lb-media video{width:100%;height:100%;max-height:calc(100vh - 32px);object-fit:contain}
.lb-side{padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
.lb-side .label{margin:0}
.lb-t{font-size:clamp(1.8rem,2.8vw,2.6rem);font-weight:620;font-stretch:78%;line-height:1.02;letter-spacing:-.01em;padding-right:2.4rem}
.lb-meta{font-weight:560}
.lb-desc{color:rgba(235,232,225,.8)}
.lb-place{color:var(--gris-c);font-size:.92rem;margin-bottom:.6rem}
.lb-nav{display:flex;gap:8px;margin-top:auto;padding-top:1rem}
.lb-arrow,.lb-close{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(235,232,225,.35);border-radius:2px;background:transparent;cursor:pointer;transition:border-color .2s}
.lb-arrow:hover,.lb-close:hover{border-color:var(--brume)}
.lb-arrow svg,.lb-close svg{width:18px;height:18px}
.lb-close{position:absolute;top:14px;right:14px;background:var(--nuit-2)}

/* Écrans moyens */
@media (max-width:1100px){
  .nav{display:none}
  .menu-btn{display:block}
  .top-actions{margin-left:auto}
  .step{grid-template-columns:minmax(0,1fr) minmax(0,200px)}
  .st-when{grid-column:1/-1;margin-bottom:-.6rem}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  :root{--head:64px}
  .call span{display:none}
  .call{width:44px;height:44px;justify-content:center;border:1px solid rgba(235,232,225,.4);border-radius:2px}
  .met-head,.off-head{grid-template-columns:1fr;row-gap:1.2rem}
  .met-grid{grid-template-columns:1fr}
  .met-stage{display:none}
  .met-row{grid-template-columns:1fr;row-gap:.9rem}
  .met-mini{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--nuit);order:-1;grid-row:2}
  .met-mini video{width:100%;height:100%;object-fit:cover}
  .met-btn{pointer-events:none}
  .met-btn .met-name{color:var(--encre)!important;transform:none!important}
  .met-name::before{display:none}
  .met-txt,.met-link{grid-column:1}
  .met-link{justify-self:start}
  /* offres : les trois formules glissent sous les onglets */
  .panel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 calc(-1*clamp(16px,4vw,56px));padding:0 clamp(16px,4vw,56px) 6px;scroll-padding:0 clamp(16px,4vw,56px);scrollbar-width:none}
  .panel::-webkit-scrollbar{display:none}
  .plan{flex:0 0 min(84%,380px);scroll-snap-align:start}
  .opt-fig{aspect-ratio:21/9}
  .options{grid-template-columns:1fr}
  .avis-grid,.devis-grid,.faq-grid{grid-template-columns:1fr}
  .avis-figs{aspect-ratio:16/9}
  .devis-side{position:static}
  .lb-in{grid-template-columns:1fr}
  .lb-media{min-height:0}
}
@media (max-width:700px){
  body{font-size:1rem}
  .top{gap:.8rem}
  .top .btn-sm{padding:0 1.1em}
  .top .btn .lg{display:none}
  .top .btn .sm{display:inline}
  .logo{font-size:1.15rem}
  .logo svg{width:26px}
  .hero{--half:28vw}
  .hero-in{bottom:96px}
  .hero-title{font-size:clamp(4.2rem,24vw,7rem)}
  .hero-cta .btn{flex:1 1 auto}
  .hero-foot{bottom:18px;gap:.8rem}
  .ch-marks{display:none}
  .chapter{flex:1}
  .hero-ctrl{margin-left:auto}
  .hero .ctl-l{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .hero .ctl{width:40px;padding:0;justify-content:center}
  .works-head{flex-direction:column;align-items:flex-start;gap:1.2rem}
  /* au téléphone, les filtres restent sous le pouce, avec le résultat au-dessus */
  .filters{position:sticky;bottom:12px;top:auto;order:2;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px 0;padding:10px 16px;background:rgba(15,21,34,.94);box-shadow:0 -1px 0 var(--filet-d)}
  .filters::-webkit-scrollbar{display:none}
  .f-btn{flex:none;min-height:40px}
  .works .wrap{display:flex;flex-direction:column}
  .works-head{order:0}
  .grid{order:1;margin-bottom:18px}
  .grid{grid-template-columns:1fr;gap:26px}
  .it{grid-column:1/-1}
  .it-media{height:auto;aspect-ratio:16/10}
  .it.port .it-media{aspect-ratio:1}
  .it-open{height:auto;bottom:2.6rem}
  .more{display:flex}
  .wide{height:200vh}
  .wide-cap{display:none}
  .step{grid-template-columns:minmax(0,1fr) 31%;padding-left:22px;column-gap:16px;align-items:start}
  .st-fig{aspect-ratio:4/5;margin-top:.3rem}
  .st-body h3{font-size:1.55rem}
  .st-body p{font-size:.95rem}
  .plan ul{margin:1.1rem 0 1.3rem}
  .plan li{padding:.5rem 0 .5rem 1.3rem;font-size:.93rem}
  .opt-list{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr;gap:0}
  .recap div{grid-template-columns:7rem minmax(0,1fr)}
  .q-dots button{min-width:70px}
  .foot-cols{grid-template-columns:1fr}
  .fin-ctl .ctl-l{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .fin-ctl{width:40px;padding:0;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rise,.js .reveal,.js .it,.js .ln>span,.js .reveal-lines .w>span{opacity:1!important;transform:none!important}
  .js .hero .bars{display:none}
  .js .st-fig{clip-path:none}
  .js .step .st-fig img{transform:none}
  .wide{height:auto}
  .wide-stage{position:relative}
  .wide-frame{transform:none}
  .wide-img{transform:none}
  .wide-a{display:none}
  .wide-b,.wide-cap,.wide-stage::after{opacity:1;transform:none}
  .fin-veil{opacity:0}
}