/* Le Studio : styles propres à l'accueil. Le socle commun (variables, typographie, boutons, en-tête, menu, pied de page)
   vient de base.css, chargé avant ce fichier (src/layouts/Base.astro) ; ce fichier ne garde que ce qui diffère sur l'accueil
   (copie du socle retirée le 10 nov. 2026). */

/* 01 Stratégie et UX : un parcours. Le carré avance d'étape en étape */
[data-motif="parcours"] .m-dot,[data-motif="parcours"] .m-ping{inline-size:1.5em;block-size:1.5em;border-radius:50%;margin:.45em 0 0 -.75em}
[data-motif="parcours"] .m-dot:nth-child(1){margin-inline-start:calc(-.75em - 4.6em)}
[data-motif="parcours"] .m-dot:nth-child(3),[data-motif="parcours"] .m-ping{margin-inline-start:calc(-.75em + 4.6em)}
[data-motif="parcours"] .m-sq{inline-size:2.2em;block-size:2.2em;margin:-1.1em 0 0 -1.1em}
html:not(.anim) [data-motif="parcours"] .m-sq{translate:0 -43%}
/* 02 Branding et direction artistique : deux formes deviennent une signature (un mot et son carré), puis un sigle */
[data-motif="identite"] .m-cap,[data-motif="identite"] .m-ping{inline-size:3.4em;block-size:3.4em;margin:-1.7em 0 0 -1.7em;border-radius:50%}
[data-motif="identite"] .m-word{inline-size:5em;block-size:3.4em;margin:-1.7em 0 0 -2.5em}
[data-motif="identite"] .m-sq{inline-size:1.5em;block-size:1.5em;margin:-.75em 0 0 -.75em}
html:not(.anim) [data-motif="identite"] .m-cap:nth-child(2){translate:-112% 0}
html:not(.anim) [data-motif="identite"] .m-cap:nth-child(3){translate:35% 0}
html:not(.anim) [data-motif="identite"] .m-word{translate:-26% 0}
html:not(.anim) [data-motif="identite"] .m-sq{translate:320% 0}
/* 03 Design d'interface : les mêmes blocs se recomposent, de l'écran large à l'écran mobile */
[data-motif="interface"] .m-img{inline-size:5em;block-size:5.6em;margin:-2.8em 0 0 -2.5em}
[data-motif="interface"] .m-t1{inline-size:4.6em;block-size:1em;margin:-.5em 0 0 -2.3em}
[data-motif="interface"] .m-t2{inline-size:3.2em;block-size:1em;margin:-.5em 0 0 -1.6em}
[data-motif="interface"] .m-sq,[data-motif="interface"] .m-ping{inline-size:1.5em;block-size:1.5em;margin:-.75em 0 0 -.75em}
html:not(.anim) [data-motif="interface"] .m-img{translate:-60% 0}
html:not(.anim) [data-motif="interface"] .m-t1{translate:63% -230%}
html:not(.anim) [data-motif="interface"] .m-t2{translate:68.75% -80%}
html:not(.anim) [data-motif="interface"] .m-sq{translate:90% 137%}
/* 04 Développement Webflow : une grille se construit case après case */
[data-motif="construction"] .m-c{inline-size:1.7em;block-size:1.7em}
[data-motif="construction"] .m-c:nth-child(1){margin:calc(-.85em + -2.05em) 0 0 calc(-.85em + -2.05em)}
[data-motif="construction"] .m-c:nth-child(2){margin:calc(-.85em + -2.05em) 0 0 calc(-.85em + 0.0em)}
[data-motif="construction"] .m-c:nth-child(3){margin:calc(-.85em + -2.05em) 0 0 calc(-.85em + 2.05em)}
[data-motif="construction"] .m-c:nth-child(4){margin:calc(-.85em + 0.0em) 0 0 calc(-.85em + -2.05em)}
[data-motif="construction"] .m-c:nth-child(5){margin:calc(-.85em + 0.0em) 0 0 calc(-.85em + 0.0em)}
[data-motif="construction"] .m-c:nth-child(6){margin:calc(-.85em + 0.0em) 0 0 calc(-.85em + 2.05em)}
[data-motif="construction"] .m-c:nth-child(7){margin:calc(-.85em + 2.05em) 0 0 calc(-.85em + -2.05em)}
[data-motif="construction"] .m-c:nth-child(8){margin:calc(-.85em + 2.05em) 0 0 calc(-.85em + 0.0em)}
[data-motif="construction"] .m-c:nth-child(9){margin:calc(-.85em + 2.05em) 0 0 calc(-.85em + 2.05em)}
/* 05 Optimisation SEO : trois résultats ; le vôtre remonte jusqu'à la première place */
[data-motif="classement"] .m-row{position:absolute;inset-block-start:50%;inset-inline-start:50%;inline-size:8.2em;block-size:1.4em;margin:-.7em 0 0 -4.1em;display:flex;gap:.6em}
[data-motif="classement"] .m-row:not(.m-you){opacity:.34}
.m-pt,.m-ln{display:block;background:currentColor}
.m-pt{flex:none;inline-size:1.4em}
.m-ln{inline-size:6.2em}
.m-row:nth-child(1) .m-ln{inline-size:5.2em}
.m-row:nth-child(2) .m-ln{inline-size:4.4em}
.m-you .m-pt{background:var(--sq)}
[data-motif="classement"] .m-ping{inline-size:1.4em;block-size:1.4em;margin:calc(-.7em - 2.3em) 0 0 calc(-.7em - 3.4em)}
html:not(.anim) [data-motif="classement"] .m-you{translate:0 -164%}
html:not(.anim) [data-motif="classement"] .m-row:nth-child(2){translate:0 164%}

/* Titre du hero sur deux lignes de sens (15 oct. 2026) : il prend la largeur de ses lignes, sans atteindre la liste à droite */
#titre{width:max-content;max-width:calc(100vw - 88px)}

/* Clients : chaque case est un masque, le logo y roule de bas en haut */
.clients li{position:relative;overflow:hidden}
.clients__logo{position:absolute;inset:0;display:grid;place-items:center;padding:20px}
/* Les logos SVG des projets sont opaques ; les PNG ont 56 % d'opacité : même gris pour tous */
.clients img[src$=".svg"]{opacity:.39}

.svc__in{display:block}

/* Associés : portrait qui suit la souris au survol d'une ligne. Cadre vertical, centré sur le point visé comme l'aperçu des projets. */
@media (hover:hover) and (pointer:fine){
  /* sélecteurs renforcés : la règle de l'aperçu des projets (.follower__media) vient plus loin dans la feuille, à force égale */
  .follower .follower__media--portrait{--l:clamp(220px,19vw,320px);inline-size:var(--l);aspect-ratio:4/5;margin:calc(var(--l) * -.625) 0 0 calc(var(--l) * -.5)}
  .follower .follower__media--portrait img{object-position:50% 22%}
  .people li[data-portrait]{transition:opacity var(--d-2) ease}
  .people:has(li[data-portrait]:hover) li[data-portrait]:not(:hover){opacity:.32}
}

/* Projets choisis : quatre cartes, deux mockups par projet qui s'enchaînent. */
@media (min-width:860px){
  /* Quatre cartes au format des mockups (4/3), en quinconce (colonnes héritées de la v3). Jamais de carte centrée :
     si une cinquième revient, elle doit continuer l'alternance (grande à gauche, colonnes 1 à 7). */
  .cases--mock .case:nth-child(n) .case__media{aspect-ratio:4/3}   /* plus précis que la règle portrait des cartes 2 et 3 héritée de la v3 */
  .cases--mock .case:nth-child(2){grid-column:8 / span 5;margin-block-start:18vh}
  .cases--mock .case:nth-child(3){grid-column:1 / span 5}
}
/* Les vues d'un projet sont empilées dans la carte. L'ordre d'empilement ne change jamais : seule la vue du dessus
   se fond (apparition ou disparition), celle du dessous reste opaque. Pas de creux gris au milieu du fondu, et un survol
   interrompu repart de l'opacité en cours. La vue affichée se pose à l'échelle 1, les autres attendent un peu plus grandes.
   Le fondu dure 1 s (courbe douce des deux côtés) ; l'échelle met 3,6 s à se poser, pour rester perceptible après le fondu. */
.views{position:absolute;inset:-9% 0;block-size:118%}
.cases--views .case__media .views .view{inset:0;block-size:100%;height:100%;opacity:0;scale:1.06;transition:opacity 1s cubic-bezier(.37,0,.63,1),scale 3.6s cubic-bezier(.5,1,.89,1)}
.cases--views .case__media .views .view.is-under{opacity:1}
.cases--views .case__media .views .view.is-on{opacity:1;scale:1}
.cases--views .is-held .case__media .views .view{transition:opacity .35s var(--ease-out),scale 3.6s cubic-bezier(.5,1,.89,1)}
/* Repère des vues, dans la légende : une barre par vue, celle de la vue affichée se remplit le temps de l'affichage */
.views__bars{display:none}
.anim .views__bars{display:inline-flex;gap:4px;margin-inline-end:12px;vertical-align:middle}
.views__bars i{position:relative;inline-size:18px;block-size:2px;overflow:hidden;background:rgb(13 13 13 / .16)}
.views__bars b{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:0 50%}
@media (prefers-reduced-motion: reduce){ .cases--views .case__media .views .view{scale:none;transition:opacity var(--d-1) ease} }

/* Rideau de transition entre pages */
.curtain i{display:block;background:var(--bg);margin-inline:-.5px;transform:translateY(-101%)}
.svc__more{margin-block-start:clamp(32px,4vw,56px)}
@media (min-width:1024px){ .svc__more{grid-column:1} }
.method__more{margin-block-start:8px}
/* v4 : la section épinglée tient dans l'écran, le bouton se place à droite du titre */
@media (min-width:900px){ .method{padding-block:clamp(48px,7vh,96px)} .method__head{grid-template-columns:minmax(0,1fr) auto;column-gap:var(--gutter);margin-block-end:clamp(28px,4vh,56px)} .method__head > *{grid-column:1} .method__head .method__more{grid-column:2;grid-row:1 / span 3;align-self:end;margin:0} }

/* Hero : la bobine de présentation dans la fenêtre. Sous 900 px, un bloc au format de la vidéo ; au-dessus, une fenêtre découpée
   dans le cadre (4/3, 36 % de la largeur), que le défilement ouvre jusqu'au plein cadre. --wl et --wb : bords gauche et bas de la fenêtre. */
#hero-media{aspect-ratio:4/3;background:var(--night)}   /* sous 900 px : 4/3 plutôt que 16/9, la vidéo plus haute sur mobile (retour de Jeremy, 12 nov. 2026) */
.hero__video{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;background:var(--night)}
.reelbar{position:absolute;z-index:3;inset-inline-start:10px;inset-block-end:10px;display:flex;gap:2px;padding:4px;border-radius:var(--r-pill);background:var(--night);color:var(--on-night);box-shadow:0 0 0 1px rgb(242 242 239 / .14)}
.reelbar[hidden],.reelbar__btn[hidden]{display:none}
.reelbar__btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px 0 13px;border-radius:var(--r-pill);font-size:var(--fs-sm);letter-spacing:-.01em;white-space:nowrap;transition:background-color var(--d-1) ease,transform var(--d-1) var(--ease-out)}
.reelbar__btn svg{display:block;inline-size:14px;block-size:14px;flex:none}
.reelbar__btn:active{transform:scale(.97)}
.reelbar__btn:focus-visible{outline-offset:2px;border-radius:var(--r-pill)}
#reel-play .i-pause,#reel-play.is-playing .i-play{display:none}
#reel-play.is-playing .i-pause{display:block}
/* la couverture : par-dessus la vidéo tant qu'elle ne joue pas (sans JavaScript, c'est l'image d'attente de la vidéo qui la montre).
   Au-dessus de 900 px, elle remplit exactement la fenêtre au repos : posée dessus quand rien ne s'anime ; sinon, une boîte 4/3 de la
   largeur du cadre, centrée, que le script réduit à la fenêtre puis fait grandir avec elle. */
.hero__cover{display:none}
.js #bobine-cover{display:block;position:absolute;inset:0;inline-size:100%;block-size:100%;height:100%;object-fit:cover;opacity:1;pointer-events:none;transition:opacity var(--d-2) ease}
.js #bobine-cover.is-off{opacity:0}
@media (hover:hover) and (pointer:fine){
  .reelbar__btn:hover{background:var(--night-2)} .js #bobine{cursor:pointer}
  /* avec la pastille orange, le bouton Pause ne se montre qu'au focus clavier : à l'écran, il ferait doublon */
  .anim #reel-play:not(:focus-visible){position:absolute;inline-size:1px;block-size:1px;min-height:0;padding:0;overflow:hidden;clip-path:inset(50%)}
}
@media (prefers-reduced-motion: reduce){ .reelbar__btn:active{transform:none} }
@media (min-width:900px){
  /* --wt, --wl, --wb : haut, gauche et bas de la fenêtre. Valeurs de repli (sans animation) : 32 % de la largeur, à 19 % du haut.
     Quand la page s'anime, le script les recalcule pour loger la fenêtre entre la ligne du haut et le mot géant (fonction win). */
  #hero-media{aspect-ratio:auto;--wt:19%;--wl:64.8%;--wb:calc(81% - (100vw - var(--inset) * 2) * .24);clip-path:inset(var(--wt) 3.2% var(--wb) var(--wl) round 16px)}
  #hero-reel{inset:var(--wt) 3.2% var(--wb) var(--wl)}
  .anim #hero-reel{inset:0}
  .js #bobine-cover{inset:var(--wt) 3.2% auto auto;inline-size:calc(96.8% - var(--wl));block-size:auto;height:auto;aspect-ratio:4/3}
  .anim #bobine-cover{inset:50% auto auto 0;inline-size:100%;margin-block-start:-37.5%}
  .reelbar{inset-inline-start:calc(var(--wl) + 12px);inset-block-end:calc(var(--wb) + 12px)}
  /* le bouton du son ne se montre pas sur la couverture : le script le fait apparaître quand la fenêtre s'agrandit */
  .anim .reelbar{opacity:0;visibility:hidden}
}
/* sous 900 px la fenêtre ne s'agrandit pas : la barre attend que la vidéo joue */
@media (max-width:899.98px){
  .anim .reelbar{transition:opacity var(--d-1) ease,visibility var(--d-1)}
  .anim .reelbar.is-idle{opacity:0;visibility:hidden}
}

/* Bouton rond noir : orange au survol et au focus clavier */
.orb--ink{transition:background-color var(--d-1) ease,color var(--d-1) ease}
@media (hover:hover) and (pointer:fine){ .orb--ink:hover{background:var(--accent);color:var(--on-accent)} }
.orb--ink:focus-visible{background:var(--accent);color:var(--on-accent)}

html:not(.js) .svc__detail{grid-template-rows:1fr;visibility:visible;opacity:1}
@media (max-width:1023.98px){
  .js .svc__detail{visibility:hidden;transition:grid-template-rows var(--d-2) var(--ease-out),visibility 0s linear var(--d-2)}
  .js .svc__detail[data-open="true"]{visibility:visible;transition-delay:0s,0s}
}

.svc__vid{position:relative;background:#191918}
.svc__vid video{position:absolute;inset:0;inline-size:100%;block-size:100%;height:100%;object-fit:cover;display:block}
.svc__vid video[hidden]{display:none}
/* Liste des expertises : sans filets, le carré du logo devant l'expertise ouverte */
#svc .svc__row,#svc .svc__end{border-block-start:0}
#svc .svc__row{position:relative;padding-block:clamp(12px,1.3vw,20px)}
#svc .svc__row::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:50%;inline-size:clamp(8px,.7vw,11px);aspect-ratio:1;background:var(--accent);transform:translateY(-50%) scale(0);transition:transform .45s var(--ease-out)}
#svc .svc__row[aria-expanded="true"]::before{transform:translateY(-50%) scale(1)}
#svc .svc__row[aria-expanded="true"] .svc__name{transform:translateX(clamp(22px,2.2vw,34px))}
#svc .svc__row sup{transition:transform var(--d-2) var(--ease-out)}
#svc .svc__row[aria-expanded="true"] sup{transform:translateX(clamp(22px,2.2vw,34px))}
@media (prefers-reduced-motion:reduce){ #svc .svc__row::before,#svc .svc__row sup{transition:none} }

#t-studio + .lead{max-inline-size:27em;text-wrap:pretty}

@media (min-width:900px){ #titre{width:max-content;max-width:calc(100vw - 88px)} }   /* 29 oct. : bureau seulement (sur mobile, le titre était bridé à 287 px) */

.voice figcaption{grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center}
.voice figcaption .voice__av{grid-row:1 / 3;display:grid;place-items:center;inline-size:48px;block-size:48px;border-radius:50%;background:var(--night);color:var(--on-night);font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.02em}
.voices__video{display:none}
[data-temoins="video"] .voices__video{display:block;position:relative;margin:0;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:var(--night) url(/img/ambiances/noir-hero-faisceau.jpg) center/cover;color:var(--on-night)}
/* Témoignage vidéo : l'image de couverture, puis la lecture avec le son au clic */
.voices__media{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 30%;background:var(--night)}
.voices__video::after{content:"";position:absolute;inset:auto 0 0;block-size:55%;background:linear-gradient(to top,rgb(10 10 10 / .72),transparent);pointer-events:none;transition:opacity var(--d-1) ease}
.voices__video.is-playing::after,.voices__video.is-playing .voices__play,.voices__video.is-playing .voices__vcap,.voices__video.is-playing .voices__vtag{opacity:0;pointer-events:none}
.voices__vcap{z-index:1;transition:opacity var(--d-1) ease}
.voices__play{z-index:1;transition:opacity var(--d-1) ease,transform var(--d-1) var(--ease-out)}
.voices__play:active{transform:scale(.96)}
/* 12 nov. 2026 (retour de Jeremy) : le bouton de lecture ne cache plus le visage ; il passe en bas à droite, la durée en haut à droite */
.voices__video{--v-x:clamp(18px,2vw,28px);--v-y:clamp(16px,2vw,26px);--v-play:clamp(60px,5.5vw,80px)}
.voices__play{position:absolute;inset:auto var(--v-x) var(--v-y) auto;display:grid;place-items:center;inline-size:var(--v-play);block-size:var(--v-play);border-radius:50%;background:var(--on-night);color:var(--night)}
.voices__play svg{inline-size:34%;block-size:34%;margin-inline-start:6%}
.voices__vcap{position:absolute;inset:auto calc(var(--v-x) + var(--v-play) + 16px) var(--v-y) var(--v-x);display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.voices__vcap > span:first-child{display:grid;gap:4px;line-height:1.3}   /* nom et poste resserrés (12 nov. 2026) */
.voices__vcap strong{font-size:var(--fs-xl);font-weight:450;letter-spacing:-.03em}
.voices__vcap .meta,.voices__vrole{color:var(--on-night-2)}
.voices__vtag{position:absolute;z-index:1;inset:var(--v-y) var(--v-x) auto auto;padding:6px 10px;border:1px solid var(--line-night);border-radius:var(--r-pill);white-space:nowrap;color:var(--on-night-2);background:rgb(13 13 13 / .45);transition:opacity var(--d-1) ease}
@media (max-width:639.98px){
  [data-temoins="video"] .voices__video{aspect-ratio:4/5}
}
@media (min-width:1024px){
  [data-temoins="video"] .voices{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(28px,3vw,56px);align-items:stretch}
  [data-temoins="video"] .voices__video{grid-column:1;grid-row:1 / 3;aspect-ratio:auto;min-block-size:max(100%,440px)}
  [data-temoins="video"] .voices__stage{grid-column:2;grid-row:1}
  [data-temoins="video"] .voices__bar{grid-column:2;grid-row:2}
  [data-temoins="video"] .voice blockquote{font-size:var(--fs-h3)}
}

/* Préchargement : colonnes */
.loader{display:none}
.anim .loader{display:block;position:fixed;inset:0;z-index:var(--z-loader);pointer-events:none;color:var(--ink)}
.loader__cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr)}
.loader__cols i{display:block;background:var(--bg);margin-inline:-.5px}
.loader__ui{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto;padding:var(--gutter)}
.loader__word{align-self:center;justify-self:center;font-size:var(--fs-h3l);font-weight:450;letter-spacing:-.04em;display:flex;align-items:center;gap:14px}
.loader__word i{inline-size:10px;block-size:10px;background:var(--accent);display:block}
.loader__foot{display:grid;gap:14px}
.loader__count{font-size:clamp(4rem,13vw,12rem);font-weight:450;letter-spacing:-.07em;line-height:.85;font-variant-numeric:tabular-nums}
.loader__bar{block-size:2px;background:var(--line)}
.loader__bar i{display:block;block-size:100%;background:var(--accent);transform:scaleX(0);transform-origin:left center}

/* Hero */
.hero-pin{padding:var(--inset)}
.hero.frame{margin:0}
.hero{position:relative;min-block-size:calc(100svh - var(--inset) * 2);display:grid}
.hero__in{position:relative;z-index:1;display:grid;grid-template-rows:auto 1fr auto;gap:24px;padding:clamp(96px,14vh,140px) calc(var(--gutter) - var(--inset)) calc(var(--gutter) - var(--inset))}
.hero__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;color:var(--on-night-2)}
.hero__top .label{color:var(--on-night)}
.hero__mid{display:grid;gap:28px;align-content:center;max-inline-size:44rem}
.hero h1{font-size:var(--fs-h2m);letter-spacing:-.05em;line-height:1}
.hero .lead{color:var(--on-night-2);max-inline-size:28em}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.wordmark{font-size:clamp(4.5rem,23.6vw,29rem);font-weight:500;letter-spacing:-.075em;line-height:.78;white-space:nowrap;overflow:hidden;padding-block:.05em .03em;margin-inline:-.05em;margin-block-end:-.03em}
.hero__media{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/11;margin:0 calc(var(--gutter) - var(--inset)) calc(var(--gutter) - var(--inset));background:var(--night-2);order:2}
.hero__reel{position:absolute;inset:0}
.hero__reel img{position:absolute;inset:0;inline-size:100%;block-size:100%;height:100%;object-fit:cover}
.hero__reel img + img{opacity:0}
@media (min-width:900px){
  .hero__media{position:absolute;inset:0;margin:0;aspect-ratio:auto;border-radius:0;z-index:2;clip-path:inset(24% 3.2% 30% 62% round 16px);will-change:clip-path}
}

/* Manifeste */
.intro{display:grid;gap:48px}
.intro__text{font-size:var(--fs-h2m);font-weight:450;letter-spacing:-.045em;line-height:1.04;max-inline-size:20em}
.intro__side{display:grid;gap:28px;align-content:start;justify-items:start;max-inline-size:26em}
@media (min-width:1024px){ .intro{grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:var(--gutter)} .intro__side{padding-block-start:1.2vw;justify-self:end} }
.clients{margin-block-start:clamp(64px,8vw,128px);display:grid;gap:24px}
.clients ul{display:grid;grid-template-columns:repeat(2,1fr);border-block-start:1px solid var(--line);border-inline-start:1px solid var(--line)}
.clients li{display:grid;place-items:center;min-block-size:clamp(96px,11vw,150px);padding:20px;border-block-end:1px solid var(--line);border-inline-end:1px solid var(--line)}
.clients img{block-size:clamp(22px,2.2vw,30px);inline-size:auto;max-inline-size:72%;object-fit:contain;filter:brightness(0);opacity:.7}
.clients img[data-tall]{block-size:clamp(30px,3vw,42px)}
@media (min-width:700px){ .clients ul{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1100px){ .clients ul{grid-template-columns:repeat(6,1fr)} }

/* Projets */
.work__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-block-end:clamp(40px,6vw,88px)}
.work__head sup{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.02em;vertical-align:top;position:relative;inset-block-start:.9em;margin-inline-start:.6em;color:var(--ink-2);font-weight:400}
.cases{display:grid;gap:clamp(40px,6vw,72px)}
.case{display:grid;gap:18px;align-content:start}
.case__media{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--grey);aspect-ratio:4/3}
.case__media img{position:absolute;inset:-9% 0;inline-size:100%;block-size:118%;height:118%;object-fit:cover;transition:scale var(--d-3) var(--ease-out)}
.case__meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.case__meta .meta{color:var(--ink-2);text-align:end}
@media (hover:hover) and (pointer:fine){ .case:hover .case__media img{scale:1.045} }
@media (min-width:860px){
  .cases{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:clamp(56px,7vw,120px)}
  .case:nth-child(1){grid-column:1 / span 7}
  .case:nth-child(2){grid-column:9 / span 4;margin-block-start:22vh}
  .case:nth-child(2) .case__media,.case:nth-child(3) .case__media{aspect-ratio:4/5}
  .case:nth-child(3){grid-column:1 / span 4}
  .case:nth-child(4){grid-column:6 / span 7;margin-block-start:14vh}
}
.index{margin-block-start:clamp(72px,9vw,150px)}
.index__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-block-end:18px}
.index__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;align-items:baseline;padding-block:clamp(16px,1.7vw,26px);border-block-start:1px solid var(--line);transition:opacity var(--d-2) ease}
/* filet final retiré : « le filet sépare, il ne ferme pas » (règle validée par Jeremy, 12 nov. 2026) */
.index__name{font-size:var(--fs-h2s);font-weight:450;letter-spacing:-.045em;line-height:1.05;transition:transform var(--d-2) var(--ease-out)}
.index__row .meta{color:var(--ink-2)}
@media (hover:hover) and (pointer:fine){
  .index ul:hover .index__row{opacity:.32}
  .index ul .index__row:hover,.index ul .index__row:focus-visible{opacity:1}
  .index__row:hover .index__name,.index__row:focus-visible .index__name{transform:translateX(clamp(10px,1.4vw,24px))}
}
.work__more{margin-block-start:clamp(40px,5vw,72px);display:flex;justify-content:center}
@media (hover:hover) and (pointer:fine){
  .js .follower{display:block;position:fixed;inset:0 auto auto 0;z-index:var(--z-follower);pointer-events:none}
  .follower__media{position:absolute;inset:0 auto auto 0;inline-size:clamp(300px,26vw,440px);aspect-ratio:4/3;margin:calc(clamp(300px,26vw,440px) * -.375) 0 0 calc(clamp(300px,26vw,440px) * -.5);border-radius:var(--r-md);overflow:hidden;background:var(--grey);transform:scale(.8);opacity:0;visibility:hidden;will-change:transform}
  .follower__track{will-change:transform}
  .follower__track img{inline-size:100%;object-fit:cover}
}

/* Expertises */
.svc{padding:clamp(72px,9vw,150px) calc(var(--gutter) - var(--inset))}
.svc__head{display:grid;gap:24px;margin-block-end:clamp(48px,6vw,96px)}
.svc__head h2{max-inline-size:13em}
.svc__grid{display:grid}
.svc__row{display:flex;align-items:baseline;gap:18px;inline-size:100%;padding-block:clamp(16px,1.8vw,28px);border-block-start:1px solid var(--line-night);color:var(--on-night-2);transition:color var(--d-2) ease}
.svc__row[aria-expanded="true"]{color:var(--on-night)}
.svc__name{font-size:var(--fs-h2s);font-weight:450;letter-spacing:-.045em;line-height:1.05;transition:transform var(--d-2) var(--ease-out)}
.svc__row sup{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.02em;align-self:flex-start;padding-block-start:.6em}
.svc__arrow{margin-inline-start:auto;align-self:center;flex:none;inline-size:clamp(22px,2.1vw,32px);block-size:clamp(22px,2.1vw,32px);color:var(--accent);opacity:0;transform:translateX(-16px);transition:opacity var(--d-2) ease,transform var(--d-2) var(--ease-out)}
.svc__row[aria-expanded="true"] .svc__arrow{opacity:1;transform:none}
.svc__row[aria-expanded="true"] .svc__name{transform:translateX(clamp(8px,1.2vw,20px))}
.svc__detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--d-2) var(--ease-out)}
.svc__detail > div{overflow:hidden;display:grid;gap:20px}
.svc__detail[data-open="true"]{grid-template-rows:1fr}
.svc__detail .inner{display:grid;gap:20px;padding-block:4px 32px}
.svc__detail p{color:var(--on-night-2);max-inline-size:30em;font-size:var(--fs-md);line-height:1.45}
.svc__img{border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/10;background:var(--night-2)}
.svc__img img{inline-size:100%;block-size:100%;height:100%;object-fit:cover}
.tags li{border:1px solid var(--line-night);border-radius:var(--r-pill);padding:7px 14px;font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.svc__end{border-block-start:1px solid var(--line-night)}
@media (min-width:1024px){
  .svc__grid{grid-template-columns:minmax(max-content,1fr) minmax(0,1fr);column-gap:var(--gutter)}
  .svc__row{grid-column:1}
  .svc__end{grid-column:1}
  .svc__detail{grid-column:2;grid-row:1 / span 7;align-self:start;position:sticky;inset-block-start:96px;grid-template-rows:1fr;transition:none}
  .svc__detail .inner{padding:0}
  .svc__detail:not([data-open="true"]){visibility:hidden;opacity:0}
  .svc__img{aspect-ratio:16/10}
}

/* Méthode : défilement horizontal épinglé (bureau), liste (mobile) */
.method{background:var(--white);padding-block:clamp(72px,9vw,140px);overflow:clip}
.method__head{display:grid;gap:20px;margin-block-end:clamp(40px,5vw,72px)}
.method__head .lead{max-inline-size:32em}
.method__track{display:grid;gap:16px}
.panel{display:grid;gap:clamp(32px,6vh,80px);align-content:space-between;padding:clamp(24px,2.4vw,40px);border-radius:var(--r-md);background:var(--bg)}
.panel__n{font-size:clamp(3.5rem,7vw,7.5rem);font-weight:450;letter-spacing:-.07em;line-height:.85;color:var(--accent);font-variant-numeric:tabular-nums}
.panel__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.panel__body{display:grid;gap:12px}
.panel__body p{color:var(--ink-2);max-inline-size:26em}
.panel--ink{background:var(--night);color:var(--on-night)}
.panel--ink .panel__body p,.panel--ink .meta{color:var(--on-night-2)}
.method__bar{display:none}
@media (min-width:900px){
  .method{min-block-size:100svh;display:grid;grid-template-columns:minmax(0,1fr);align-content:center}
  .method__track{display:flex;gap:clamp(16px,1.6vw,24px);inline-size:max-content;padding-inline:var(--gutter);will-change:transform}
  .panel{inline-size:clamp(360px,34vw,560px);flex:none;min-block-size:clamp(320px,46vh,480px)}
  .method__bar{display:block;block-size:2px;background:var(--line);margin:clamp(32px,4vw,56px) var(--gutter) 0}
  .method__bar i{display:block;block-size:100%;background:var(--accent);transform:scaleX(0);transform-origin:left center}
}

/* Témoignages */
.voices{display:grid;gap:40px;background:var(--white);border-radius:var(--r-frame);padding:clamp(28px,4vw,72px)}
.voices__stage{display:grid}
.voice{grid-area:1/1;display:grid;gap:32px;align-content:start}
.js .voice:not(.is-active){visibility:hidden;opacity:0}
.voice blockquote{font-size:var(--fs-h2s);font-weight:450;letter-spacing:-.045em;line-height:1.05;max-inline-size:21em}
.voice figcaption{display:grid;row-gap:2px;column-gap:16px;line-height:1.3}   /* nom et poste resserrés, 16 px entre la photo et le texte (12 nov. 2026) */
.voice figcaption span{color:var(--ink-2)}
.voices__bar{display:flex;align-items:center;justify-content:space-between;gap:24px;border-block-start:1px solid var(--line);padding-block-start:24px}
.voices__nav{display:flex;gap:10px}
.round{display:inline-grid;place-items:center;inline-size:60px;block-size:60px;border-radius:50%;border:1px solid var(--ink);transition:background-color var(--d-1) ease,color var(--d-1) ease,border-color var(--d-1) ease}
@media (hover:hover) and (pointer:fine){ .round:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} }

/* Studio */
.studio__head{display:grid;gap:24px;margin-block-end:clamp(48px,6vw,96px)}
.studio__head h2{max-inline-size:13em}
.studio__head p{max-inline-size:30em}
.people li{display:grid;gap:12px 24px;padding-block:32px}
.people h3{font-size:var(--fs-h2m);letter-spacing:-.05em;line-height:1}
.people p{color:var(--ink-2);max-inline-size:30em}
.people .meta{color:var(--ink)}
@media (min-width:1024px){ .people li{grid-template-columns:minmax(0,6fr) minmax(0,2fr) minmax(0,4fr);align-items:baseline} }


/* Expertises figées au défilement, sous 1024 px (12 nov. 2026) : version compacte pour que la liste et l'expertise ouverte
   tiennent ensemble au-dessus de la barre « Menu ». Le script retire la classe si l'écran est trop petit. */
/* Expertises figées au défilement, sous 1024 px (12 nov. 2026, 2e version après retour de Jeremy) :
   une expertise à la fois, en grand. Repère 01 / 05, titre, visuel au format habituel, texte, mots-clés sur plusieurs lignes.
   Titres et contenus superposés dans la même cellule de grille : la hauteur ne bouge pas, le passage se fait en fondu. */
.svc__prog{display:none}
#svc.svc--fige{grid-template-columns:minmax(0,1fr)}
.svc--fige .svc__prog{display:flex;align-items:center;justify-content:space-between;gap:16px;grid-row:1;grid-column:1;margin-block-end:clamp(24px,7vw,36px);font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.02em;color:var(--on-night-2)}
.svc--fige .svc__compte b{font-weight:400;color:var(--on-night)}
.svc--fige .svc__barres{display:flex;gap:6px}
.svc--fige .svc__barres i{display:block;inline-size:22px;block-size:2px;background:var(--line-night);transition:background-color .4s ease}
.svc--fige .svc__barres i.is-on{background:var(--accent)}
#svc.svc--fige .svc__row{grid-row:2;grid-column:1;align-self:end;border:0;padding-block:0;margin-block-end:clamp(20px,6vw,28px);align-items:center;   /* marge et non padding : le carré orange reste centré sur le titre */
  
  opacity:0;visibility:hidden;translate:0 10px;transition:opacity .2s ease,translate .2s ease,visibility 0s linear .2s}
#svc.svc--fige .svc__row[aria-expanded="true"]{opacity:1;visibility:visible;translate:0 0;transition:opacity .45s ease .2s,translate .6s var(--ease-out) .2s,visibility 0s}
#svc.svc--fige .svc__detail{grid-row:3;grid-column:1;grid-template-rows:1fr;
  opacity:0;visibility:hidden;translate:0 16px;transition:opacity .2s ease,translate .2s ease,visibility 0s linear .2s}   /* le sortant s'efface d'abord */
#svc.svc--fige .svc__detail[data-open="true"]{opacity:1;visibility:visible;translate:0 0;transition:opacity .5s ease .24s,translate .7s var(--ease-out) .24s,visibility 0s}   /* puis l'entrant apparaît */
.svc--fige .svc__detail .inner{gap:clamp(20px,6vw,26px);padding-block:0}
.svc--fige .svc__end{display:none}
.svc--fige .svc__more{grid-row:4;grid-column:1}
@media (prefers-reduced-motion:reduce){ #svc.svc--fige .svc__row,#svc.svc--fige .svc__detail{translate:none} }
/* Fond noir uni sous 1024 px : l'image d'ambiance de la section paraissait pixelisée sur mobile (retour de Jeremy, 12 nov. 2026) */
@media (max-width:1023.98px){ #expertises > .amb{display:none} }

/* Équipe sous 1024 px (12 nov. 2026, retour de Jeremy) : sans survol, les portraits n'apparaissaient pas.
   Petite photo 4:5 à gauche du nom et du rôle, la présentation passe dessous sur toute la largeur. */
.people__photo{display:none}
@media (max-width:1023.98px){
  .people li[data-portrait]{grid-template-columns:clamp(84px,24vw,112px) minmax(0,1fr);column-gap:18px}
  .people__photo{display:block;grid-column:1;grid-row:2 / span 2;inline-size:100%;block-size:auto;aspect-ratio:4 / 5;object-fit:cover;border-radius:var(--r-sm);background:var(--grey)}
  .people li[data-portrait] > h3{grid-column:2;grid-row:2;align-self:end}
  .people li[data-portrait] > .meta{grid-column:2;grid-row:3;align-self:start}
  .people li[data-portrait] > p:not(.meta){grid-column:1 / -1}
}
.svc__more{transition:opacity var(--d-1) ease}
.svc--en-cours .svc__more{opacity:0!important;pointer-events:none}   /* !important : le fondu d’apparition pose une opacité en ligne */