/* Souplesse Studio — page d'accueil
   Points de rupture : 640 (hero mobile) · 760 (mobile / tablette) · 900 (galerie Expertises)
   · 1024 (hero tablette) · 1200 + souris (aperçu plein cadre des projets).
   Les effets de survol sont réservés à (hover: hover) and (pointer: fine). Socle commun : base.css. */

html.no-anim *,html.no-anim *::before,html.no-anim *::after{transition:none!important}

/* Phases de l'intro : intro → logo → enter → site */
html[data-phase=intro] .site-main,html[data-phase=logo] .site-main{display:none}

@keyframes spPulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes spDrop{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
@keyframes spBorderSpin{0%{transform:translate(-50%,-50%) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes spMarquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes glowPulse{0%{opacity:0}100%{opacity:1}}

/* ───────────── Hero / intro ───────────── */
.hero{position:relative;width:100%;height:100vh;height:100svh;min-height:320px;background:var(--bg);color:var(--fg);overflow:hidden;container-type:inline-size;font-family:var(--ff);-webkit-tap-highlight-color:transparent;--R:420px}

/* Halo lumineux : au repos il pulse en CSS (aucun calcul JS),
   à la souris il suit le curseur (styles posés par le JS, classe .tracking). */
.glow{position:absolute;inset:0;pointer-events:none}
.glow::before{content:"";position:absolute;inset:0;animation:glowPulse 2.42s ease-in-out -1.21s infinite alternate}
.hero-glow{transition:opacity .6s;background:radial-gradient(circle var(--R) at 50% 50%,rgba(242,236,224,.04) 0%,rgba(242,236,224,.015) 45%,rgba(242,236,224,0) 100%)}
.hero-glow::before{background:radial-gradient(circle var(--R) at 50% 50%,rgba(242,236,224,.06) 0%,rgba(242,236,224,.025) 45%,rgba(242,236,224,0) 100%)}
.hero-site-glow{mix-blend-mode:screen}
.hero-site-glow::before{background:radial-gradient(circle var(--R) at 50% 50%,rgba(242,236,224,.04) 0%,rgba(242,236,224,.015) 45%,rgba(242,236,224,0) 100%)}
.hero.tracking .glow{background:none}
.hero.tracking .glow::before{display:none}
html:not([data-phase=intro]) .hero-glow{opacity:0}
html:not([data-phase=intro]) .hero-glow::before{animation:none}

.intro-logo{position:absolute;left:0;top:0;width:0;pointer-events:none}
.intro-logo img{width:100%;height:auto}
.intro-rest img{opacity:1;transition:clip-path .9s cubic-bezier(.6,0,.2,1) .25s,opacity .4s .25s}
html[data-phase=intro] .intro-rest img{opacity:0}
.intro-o{transition:transform 1.1s cubic-bezier(.7,0,.2,1)}
/* Survol du « O » (souris) : lueur blanche diffuse autour de l'anneau, qui monte et s'éteint en douceur */
.intro-o img{filter:drop-shadow(0 0 0 rgba(242,241,236,0)) drop-shadow(0 0 0 rgba(242,241,236,0));transition:filter .8s ease}
.intro-o.is-hover img{filter:drop-shadow(0 0 10px rgba(242,241,236,.35)) drop-shadow(0 0 34px rgba(242,241,236,.22))}
.intro-hit{position:absolute;border-radius:50%;pointer-events:none;cursor:default}
html[data-phase=intro] .intro-hit{pointer-events:auto;cursor:pointer}
.intro-hint{position:absolute;left:0;right:0;top:60%;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none;opacity:0;transition:opacity .4s,top 1.1s cubic-bezier(.7,0,.2,1)}
html[data-phase=intro] .intro-hint{opacity:1}
.intro-hint-arrow{font-size:clamp(20px,2cqw,28px);line-height:1;animation:spPulse 1.6s ease-in-out infinite}
.intro-hint-txt{font-size:clamp(14px,1.55cqw,22px);font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-align:center;padding:0 20px}
/* « Cliquez pour entrer » : même pilule à lumière tournante que « Tous les projets » ; cliquable (entre sur le site) */
.intro-hint-txt.btn-spin{font-size:clamp(14px,1.55cqw,22px);display:inline-flex;justify-content:center;padding:clamp(12px,1.1cqw,16px) clamp(20px,2cqw,30px);margin:0 20px;pointer-events:auto;cursor:pointer;background:transparent}
/* Fond transparent : la lumière tournante est découpée en simple contour (masque), au lieu d'être cachée par un fond noir */
.intro-hint-txt .btn-spin-edge{position:absolute;inset:0;z-index:-2;border-radius:999px;padding:1.5px;overflow:hidden;background:rgba(242,241,236,.22);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.intro-hint-txt .btn-spin-bg{background:transparent}
.only-touch{display:none}
@media (hover:none){.only-touch{display:inline}.only-mouse{display:none}}

/* Fond de l'intro : matière organique (bruit déformé, gris sur noir) + grain de pellicule, calculée en WebGL dans accueil.js.
   Ne tourne que pendant l'intro ; disparaît en fondu à l'entrée sur le site. Sans WebGL : fond noir habituel. */
.intro-mist{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity 1.2s}
html[data-phase=intro] .intro-mist.is-on{opacity:1}
/* La fumée remplace l'ancien halo lumineux qui suivait la souris pendant l'intro */
.intro-mist.is-on~.hero-glow{display:none}
.site-layer{position:absolute;inset:0;pointer-events:none;clip-path:ellipse(0px 0px at 50% 50%);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
html[data-phase=enter] .site-layer,html[data-phase=site] .site-layer{transition:clip-path 1.4s cubic-bezier(.8,0,.15,1)}
html[data-phase=site] .site-layer{pointer-events:auto}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#1a1a19}
/* Fenêtre ovale de l'intro (écrans tactiles) : position et taille posées par le JS = trou du « O » ; la vidéo dedans est cadrée comme celle du fond */
.intro-peek{display:none;position:absolute;left:0;top:0;width:0;height:0;border-radius:50%;overflow:hidden;pointer-events:none;transform:translateZ(0)}
.intro-peek video{position:absolute;left:0;top:0;object-fit:cover;display:block;background:#1a1a19}
@media (hover:none),(pointer:coarse){html[data-phase=intro] .intro-peek{display:block}}
/* Intro (souris uniquement) : le « O » est rempli de noir ; une lueur douce y révèle la vidéo autour du curseur.
   Dégradé en courbe douce pour un bord très diffus. Position et rayon posés par le JS.
   Au toucher, rien ne change : la vidéo reste visible dans le « O ». */
.intro-dark{display:none}
/* Seulement avec une souris ET un écran d'au moins 1024 px : sur toute tablette ou mobile, la vidéo reste visible dans le « O » */
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
  .intro-dark{display:block;position:absolute;inset:0;background:#000;opacity:0;transition:opacity .7s;--sx:-999px;--sy:-999px;--sr:0px;-webkit-mask-image:radial-gradient(circle var(--sr) at var(--sx) var(--sy),rgba(0,0,0,0) 0%,rgba(0,0,0,.03) 12%,rgba(0,0,0,.1) 24%,rgba(0,0,0,.22) 36%,rgba(0,0,0,.38) 48%,rgba(0,0,0,.56) 60%,rgba(0,0,0,.73) 72%,rgba(0,0,0,.87) 84%,rgba(0,0,0,.96) 93%,#000 100%);mask-image:radial-gradient(circle var(--sr) at var(--sx) var(--sy),rgba(0,0,0,0) 0%,rgba(0,0,0,.03) 12%,rgba(0,0,0,.1) 24%,rgba(0,0,0,.22) 36%,rgba(0,0,0,.38) 48%,rgba(0,0,0,.56) 60%,rgba(0,0,0,.73) 72%,rgba(0,0,0,.87) 84%,rgba(0,0,0,.96) 93%,#000 100%)}
  html[data-phase=intro] .intro-dark{opacity:1}
  /* Survol de « Cliquez pour entrer » : le noir du « O » s'efface en douceur, la vidéo apparaît entièrement */
  html[data-phase=intro] .hero.is-peek .intro-dark{opacity:0;transition:opacity 1.1s cubic-bezier(.4,0,.2,1)}
}
/* Voile noir à 70 % sur la vidéo de fond, une fois sur le site (dans le « O » de l'intro, la vidéo reste visible). */
.hero-veil{position:absolute;inset:0;background:#000;opacity:0;transition:opacity .8s .6s}
html[data-phase=enter] .hero-veil,html[data-phase=site] .hero-veil{opacity:.7}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,14,13,.6) 0%,rgba(14,14,13,0) 24%,rgba(14,14,13,0) 45%,rgba(14,14,13,.92) 100%);opacity:0;transition:opacity .8s .6s}
.hero-ui{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,2.2cqw,32px) clamp(20px,3.33cqw,48px) clamp(24px,2.8cqw,40px);opacity:0;transform:translateY(24px);transition:opacity .8s .7s,transform 1s var(--ease) .7s}
html[data-phase=enter] .hero-shade,html[data-phase=site] .hero-shade,
html[data-phase=enter] .hero-ui,html[data-phase=site] .hero-ui{opacity:1;transform:none}

.hero-top{display:flex;justify-content:space-between;align-items:center;gap:24px}
.hero-logo img{height:clamp(24px,2.8cqw,40px);width:auto}
.pill-btn{font-family:var(--ff);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:1px solid rgba(242,241,236,.6);padding:12px 20px;border-radius:999px;line-height:normal}
.hero-nav{display:flex;gap:clamp(20px,2.8cqw,40px);font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.menu-open{display:none}
@media (pointer:coarse){.hero-nav a{padding:12px 0;margin:-12px 0}}

.hero-mid{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:clamp(20px,3cqw,40px);min-height:0}
.hero-title{margin:0;font-size:min(104px,6.5cqw);line-height:.95;font-weight:800;text-transform:uppercase;text-align:left}
.ht-studio{display:block}
.ht-words{display:grid;justify-items:start;font-size:.62em;font-weight:300;margin:-.02em -.4em 0;padding:.12em .4em;overflow:hidden;cursor:pointer;white-space:nowrap;text-shadow:0 0 18px rgba(255,255,255,.45),0 0 42px rgba(255,255,255,.22);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%)}
.ht-strip{display:grid;justify-items:start}
.ht-strip>span{grid-area:1/1;line-height:1.15;will-change:transform;transform:translate3d(0,300%,0)}
.ht-strip>span:first-child{transform:none}
.hero-mets{list-style:none;margin:0 0 0 auto;padding:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:clamp(11px,1cqw,14px);font-weight:400;text-transform:uppercase;letter-spacing:.05em;color:#d6d5cf;text-align:right;line-height:1.5;white-space:nowrap}

.hero-cta-wrap{display:flex;justify-content:center}
.hero-cta{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:8px 12px;color:#fff;text-transform:uppercase;font-size:clamp(14px,1.3cqw,19px);font-weight:700;letter-spacing:.08em;text-align:center;text-shadow:0 0 16px rgba(255,255,255,.55),0 0 36px rgba(255,255,255,.25);transition:transform .5s var(--ease)}
.hero-cta>span:first-child{white-space:nowrap}
.hero-cta-line{position:relative;width:2px;height:clamp(36px,4cqw,56px);background:rgba(255,255,255,.22);overflow:hidden;box-shadow:0 0 12px rgba(255,255,255,.35)}
.hero-cta-line>span{position:absolute;inset:0;background:#fff;animation:spDrop 1.6s cubic-bezier(.6,0,.3,1) infinite}
@media (hover:hover) and (pointer:fine){.hero-cta:hover{transform:translateY(4px);opacity:1}}

.menu{position:absolute;inset:0;z-index:10;background:var(--bg);display:flex;flex-direction:column;padding:20px;gap:48px;overflow-y:auto}
.menu[hidden]{display:none}
.menu-top{display:flex;justify-content:space-between;align-items:center}
.menu-top img{height:24px;width:auto}
.menu-links{display:flex;flex-direction:column;gap:8px;font-size:clamp(26px,8cqw,40px);font-weight:900;text-transform:uppercase}
.menu-links a{padding:10px 0;border-bottom:1px solid rgba(242,241,236,.16)}
.menu-foot{margin-top:auto;display:flex;flex-direction:column;gap:20px}
.menu-mail{font-size:14px;font-weight:300;color:var(--mute2)}
/* Réseaux sociaux en bas du menu mobile : un peu plus grands, faciles à toucher */
.socials--menu{gap:28px}
.socials--menu a{color:var(--mute2);padding:6px;margin:-6px}
.socials--menu svg{width:24px;height:24px}

/* Tablette (hero) */
@media (max-width:1023px){
  .hero-title{font-size:6.8cqw}
}
/* Mobile / tablette : menu */
@media (max-width:759px){
  .menu-open{display:block}
  .hero-nav{display:none}
}
@media (min-width:760px){.menu{display:none!important}}
/* Hero mobile */
@media (max-width:639px){
  .hero-mid{flex-direction:column;flex-wrap:nowrap;justify-content:center}
  .hero-title{font-size:min(13.5cqw,10svh);text-align:center}
  .ht-words,.ht-strip{justify-items:center}
  .hero-mets{align-items:center;margin:min(56px,6.6svh) 0 max(-160px,-19svh);text-align:center;font-size:10px}
}
/* Téléphones à l'horizontale : hauteur réduite */
@media (max-height:520px) and (orientation:landscape){
  .hero-ui{padding-top:16px;padding-bottom:14px}
  .hero-title{font-size:min(6.8cqw,13svh)}
  .hero-mets{font-size:10px;line-height:1.4}
  .hero-cta{gap:8px;padding:4px 12px;font-size:13px}
  .hero-cta-line{height:26px}
  .menu{gap:24px}
}

/* ───────────── Projets récents ───────────── */
.proj{padding:clamp(56px,6cqw,90px) var(--px) clamp(32px,3cqw,48px);display:flex;flex-direction:column;gap:clamp(28px,3.5cqw,52px);overflow:hidden}
.proj-head{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.h2{margin:0;font-size:clamp(30px,4cqw,64px);line-height:.95;font-weight:800;text-transform:uppercase}
.btn-spin{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:12px;font-size:clamp(13px,1.1cqw,16px);font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:14px 24px;border-radius:999px;background:rgba(242,241,236,.22);color:var(--fg);transition:color .3s}
.btn-spin-ring{position:absolute;left:50%;top:50%;width:300%;aspect-ratio:1;z-index:-2;background:conic-gradient(from 0deg,transparent 0deg,transparent 250deg,rgba(242,241,236,.15) 290deg,#f2f1ec 340deg,transparent 360deg);animation:spBorderSpin 3.2s linear infinite}
.btn-spin-bg{position:absolute;inset:1.5px;z-index:-1;border-radius:999px;background:var(--bg);transition:background .3s}
@media (hover:hover) and (pointer:fine){.btn-spin:hover{color:var(--bg);opacity:1}.btn-spin:hover .btn-spin-bg{background:var(--fg)}}

.proj-list{position:relative;z-index:3;display:none;flex-direction:column;border-top:var(--line)}
.proj-row{position:relative;z-index:3;margin:0 calc(-1 * var(--px));display:grid;grid-template-columns:clamp(40px,5cqw,80px) minmax(0,1fr) auto;align-items:center;gap:clamp(16px,2cqw,32px);padding:clamp(14px,1.6cqw,24px) var(--px);border-bottom:var(--line);opacity:1;transition:opacity .35s}
.proj-list .proj-row:hover{opacity:1}
.proj-list.has-hover .proj-row:not(.is-on){opacity:.35}
.pr-num,.pr-year{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.pr-main{display:flex;flex-direction:column;gap:10px;min-width:0}
.pr-name{font-size:clamp(24px,3.6cqw,60px);font-weight:800;text-transform:uppercase;line-height:.95;text-wrap:balance;transition:transform .5s var(--ease)}
.pr-sub{font-size:clamp(16px,1.5cqw,22px);font-weight:300;line-height:1.3;color:var(--mute2);transition:transform .5s var(--ease)}
.proj-row.is-on .pr-name,.proj-row.is-on .pr-sub{transform:translateX(1.2cqw)}
.pr-year{line-height:1.5;white-space:nowrap}

.proj-preview{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .5s ease;display:none}
.proj-preview.is-on{opacity:1}
.pp-media{position:absolute;inset:0;transform:scale(1.06);transition:transform 1.2s var(--ease)}
.proj-preview.is-on .pp-media{transform:scale(1)}
.pp-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .6s ease;background-size:cover;background-position:center}
.pp-layer.is-shown{opacity:1}
.pp-veil{position:absolute;inset:0;background:rgba(10,10,9,.7)}
.proj-pill{position:absolute;left:0;top:0;z-index:5;pointer-events:none;will-change:transform;display:none}
.proj-pill>div{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:10px;white-space:nowrap;padding:14px 22px;border-radius:999px;background:var(--fg);color:var(--bg);font-weight:500;opacity:0;transform:scale(.4);transition:opacity .3s,transform .4s var(--ease)}
.proj-pill.is-on>div{opacity:1;transform:scale(1)}

.proj-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4cqw,56px) clamp(16px,2.4cqw,32px)}
@media (min-width:640px){.proj-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pg-card{display:flex;flex-direction:column;gap:14px;min-width:0}
.pg-media{aspect-ratio:16/8;overflow:hidden;background:#161614}
.pg-img{width:100%;height:100%;background-size:cover;background-position:center}
.pg-video{width:100%;height:100%;object-fit:cover;display:block}
.pg-txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.pg-name{font-size:clamp(20px,6.2cqw,26px);font-weight:800;text-transform:uppercase;line-height:1;overflow-wrap:break-word;text-wrap:balance}
.pg-sub{font-size:clamp(15px,4.4cqw,17px);font-weight:300;line-height:1.3;color:var(--mute2)}
.pg-year{line-height:1.5;color:var(--mute)}
@media (min-width:640px){.pg-name{font-size:clamp(20px,2.6cqw,26px)}.pg-sub{font-size:clamp(15px,1.6cqw,17px)}}

@media (min-width:1200px) and (hover:hover) and (pointer:fine){
  .proj-list{display:flex}
  .proj-preview,.proj-pill{display:block}
  .proj-grid{display:none}
}



/* ───────────── Références ───────────── */
.refs{padding:clamp(24px,3cqw,44px) var(--px) clamp(56px,6cqw,96px);display:flex;flex-direction:column;align-items:center;gap:20px clamp(28px,4cqw,64px)}
.refs-label{flex:none;line-height:1.5;text-wrap:balance;text-align:center;color:var(--mute);margin:0}
.refs-track{flex:1 1 auto;min-width:0;min-height:clamp(30px,8cqw,60px);width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%)}
.marquee{display:flex;width:max-content;animation:spMarquee 40s linear infinite}
.marquee-group{display:flex;align-items:center;gap:clamp(40px,5.5cqw,88px);padding-right:clamp(40px,5.5cqw,88px)}
.marquee img{flex:none;display:block;width:auto;max-width:38cqw;opacity:.9}
.lg-premices{height:clamp(30px,7.02cqw,6.21cqw)}
.lg-liberty{height:clamp(30px,4.63cqw,4.63cqw)}
.lg-docks{height:clamp(30px,5.02cqw,5.02cqw)}
.lg-tta{height:clamp(30px,6.35cqw,6.21cqw)}
.lg-givres{height:clamp(30px,3.54cqw,3.54cqw)}
.lg-iscom{height:clamp(30px,5.05cqw,5.05cqw)}
.lg-cc{height:clamp(30px,3.35cqw,3.35cqw)}
@media (min-width:760px){
  .refs{flex-direction:row}
  .refs-label{max-width:16ch;text-align:left}
}

/* ───────────── Créations Souplesse ───────────── */
.labo{background:#0b0b0b;overflow:hidden;padding:clamp(48px,5cqw,80px) var(--px)}
.labo-gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.labo-card{z-index:1;position:relative;display:block;overflow:hidden;width:100%;height:calc((100cqw - 2 * var(--px)) / 4);min-height:220px;border-radius:clamp(10px,1.2cqw,18px);background:#161614;color:var(--fg);cursor:pointer}
.labo-zoom{position:absolute;inset:0;transition:transform 1.2s var(--ease)}
.labo-img{width:100%;height:100%;object-fit:cover;object-position:62% 55%;display:block}
.labo-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,9,.15) 0%,rgba(10,10,9,.7) 100%)}
.labo-content{position:absolute;inset:0;padding:clamp(20px,3cqw,48px);display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.labo-tag{display:flex;justify-content:space-between;gap:16px}
.labo-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:nowrap}
.labo-txt{flex:1 1 0;display:flex;flex-direction:column;gap:14px;min-width:0}
.labo-title{font-size:clamp(24px,3.4cqw,54px);font-weight:800;text-transform:uppercase;line-height:.95;text-wrap:balance}
.labo-desc{font-size:clamp(15px,1.5cqw,22px);font-weight:300;line-height:1.35;max-width:34ch;text-wrap:pretty}
.labo-btn{display:flex;align-items:center;gap:12px;font-size:clamp(13px,1.1cqw,16px);font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:14px 24px;border-radius:999px;background:var(--fg);color:var(--bg);white-space:nowrap;transition:background .3s,color .3s,transform .5s var(--ease)}
/* Survol : souris uniquement */
@media (hover:hover) and (pointer:fine){
  .labo-card:hover{opacity:1}
  .labo-card:hover .labo-zoom{transform:scale(1.05)}
  .labo-card:hover .labo-btn{background:var(--bg);color:var(--fg);transform:translateX(-6px)}
}
@media (min-width:760px) and (max-width:1023px){
  .labo-card{height:calc((100cqw - 2 * var(--px)) / 2.6)}
}
@media (max-width:759px){
  .labo-card{height:calc((100cqw - 2 * var(--px)) * .75)}
  /* Mobile : titre et phrase en haut, juste sous « Hors brief » ; bouton en bas */
  .labo-content{justify-content:flex-start;gap:14px}
  .labo-row{flex:1 1 auto;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:16px}
  .labo-txt{flex:0 0 auto;width:100%;gap:8px}
  .labo-btn{font-size:12px;padding:10px 16px}
}

/* ───────────── Expertises ───────────── */
.serv{padding:clamp(56px,6cqw,90px) var(--px) clamp(56px,6cqw,96px);display:flex;flex-direction:column;gap:clamp(28px,3.5cqw,52px)}
.serv-tag{color:var(--mute);margin:0}
.sv-media{position:absolute;inset:0;pointer-events:none;filter:grayscale(1);transition:filter .7s ease}
.sv-media video{width:100%;height:100%;object-fit:cover;display:block}
.sv-media video[data-vz]{transform:scale(1.08)}
/* Image de repos (Production vidéo) : posée sur la vidéo, elle s'efface quand le cadre est actif */
.sv-rest{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 45%;display:block;transition:opacity .5s ease}
.is-on>.sv-media .sv-rest{opacity:0}
.sv-img{width:100%;height:100%;background-size:cover;background-position:center}
/* Diaporama (Photographie) : la nouvelle photo apparaît en fondu par-dessus la précédente, restée opaque dessous
   (pas de creux de luminosité) ; défile seulement quand le cadre est actif (accueil.js) */
.sv-slides{position:relative;width:100%;height:100%}
.sv-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .6s ease}
.sv-slides img.is-prev{opacity:1;z-index:1;transition:none}
.sv-slides img.is-cur{opacity:1;z-index:2}
.sv-veil{position:absolute;inset:0;pointer-events:none;background:var(--bg);opacity:.75;transition:opacity .7s ease}
.is-on>.sv-media{filter:grayscale(0)}
.is-on>.sv-veil{opacity:.4}
/* Phrase d'une expertise : un surligneur blanc passe de gauche à droite, ligne après ligne,
   et le texte passe au noir sous la bande. Lignes découpées par accueil.js (.hl-line / .hl-txt). */
.sv-hl.measuring{padding:.14em .4em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hl-line{white-space:nowrap;padding:.14em .4em;background:linear-gradient(var(--fg),var(--fg)) no-repeat 0 0/0% 100%}
.hl-txt{background:linear-gradient(90deg,var(--bg) 50%,var(--fg) 50%) no-repeat 100% 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.hl-go .hl-line{background-size:100% 100%;transition:background-size .5s cubic-bezier(.55,0,.35,1) calc(var(--i) * .5s)}
.hl-go .hl-txt{background-position:0 0;transition:background-position .5s cubic-bezier(.55,0,.35,1) calc(var(--i) * .5s)}
@media (prefers-reduced-motion:reduce){.hl-go .hl-line,.hl-go .hl-txt{transition:none}}

/* Galerie (≥ 900 px) */
.serv-collage{display:none;flex-direction:column;gap:clamp(8px,1cqw,14px);width:100%;height:clamp(520px,50cqw,860px)}
.sc-row{display:flex;gap:clamp(8px,1cqw,14px);flex:1 1 0;min-height:0;transition:flex-grow .7s cubic-bezier(.3,.7,.2,1)}
.sc-item{position:relative;overflow:hidden;background:#161614;border-radius:6px;cursor:default;flex:1 1 0;min-width:0;contain:layout paint style;transform:translateZ(0);transition:flex-grow .7s cubic-bezier(.3,.7,.2,1)}
.sc-item .sv-media{will-change:filter}
.sc-item .sv-veil{will-change:opacity}
.sc-content{position:absolute;inset:0;pointer-events:none;padding:clamp(14px,1.5cqw,24px);display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.sc-head{display:flex;flex-direction:column;gap:10px;min-width:0}
.sc-name{font-size:clamp(15px,1.9cqw,34px);font-weight:800;text-transform:uppercase;line-height:1;text-wrap:balance;overflow-wrap:anywhere;transition:font-size .7s cubic-bezier(.3,.7,.2,1)}
.sc-item.is-on .sc-name{font-size:clamp(20px,2.4cqw,44px)}
.sc-desc{font-size:clamp(12px,1cqw,16px);font-weight:400;line-height:1.7;max-width:34ch;opacity:0;transform:translate3d(0,10px,0);transition:opacity .15s,transform .6s cubic-bezier(.3,.7,.2,1)}
.sc-item.is-on .sc-desc{opacity:1;transform:translate3d(0,0,0)}
@media (hover:none){.sc-item{cursor:pointer}}

/* Accordéon (< 900 px) */
.serv-acc{display:flex;flex-direction:column;gap:clamp(6px,.8cqw,12px)}
.sa-item{--sa-pad:clamp(16px,1.8cqw,28px);--sa-fs:clamp(14px,5.2cqw,38px);position:relative;overflow:hidden;background:#161614;cursor:pointer;height:calc(var(--sa-fs) + 2 * var(--sa-pad) + 34px);min-width:0;transition:height .7s var(--ease)}
.sa-item.is-on{height:max(380px,min(64cqw,520px))}
.sa-content{position:absolute;inset:0;pointer-events:none;padding:var(--sa-pad);display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.sa-top{display:flex;justify-content:space-between;align-items:center;gap:12px;line-height:18px}
.sa-plus{font-size:18px;transition:transform .5s}
.is-on .sa-plus{transform:rotate(45deg)}
.sa-body{display:flex;flex-direction:column;gap:14px;min-width:0}
.sa-name{font-size:var(--sa-fs);font-weight:800;text-transform:uppercase;line-height:1;white-space:nowrap}
.sa-desc{font-size:clamp(14px,2.2cqw,16px);font-weight:400;line-height:1.7;max-width:min(36ch,100%);text-wrap:pretty;opacity:0;max-height:0;overflow:hidden;transition:opacity .15s,max-height .6s}
.sa-item.is-on .sa-desc{opacity:1;max-height:24em}

@media (min-width:900px){
  .serv-collage{display:flex}
  .serv-acc{display:none}
}
/* Téléphones à l'horizontale : la galerie tient dans la hauteur de l'écran */
@media (min-width:900px) and (max-height:560px){
  .serv-collage{height:max(340px,calc(100svh - 48px))}
}


/* ───────────── Mouvement réduit ───────────── */
@media (prefers-reduced-motion:reduce){
  .glow::before{animation:none;opacity:.5}
  .intro-hint-arrow,.hero-cta-line>span{animation:none}
  .marquee{animation-duration:160s}
  .btn-spin-ring{animation:none;transform:translate(-50%,-50%) rotate(35deg)}
}