/* ==========================================================================
   Studio Aria — pages secondaires (lot 2b)
   Expertises · Projets · Étude de cas · Studio · Contact · 404 · pages légales.
   Règles scopées (body.p-*, ou classes propres à ces pages : .ih, .xp-*, .pj-*, .cs-*, .st-*, .ct-*)
   pour ne rien changer à l'accueil. S'appuie sur les tokens de site.css (typo, motion, palette).
   Grammaires : héros interne en aplat + sticker-héros collé au H1 · listes typographiques à filets
   (pas de grilles de cartes) · panneaux encre/pêche · stickers = objets (ressort), texte = éditorial.
   ========================================================================== */

/* ---------- Outils communs ---------- */
/* contournement local (demande partagée n° 1) : sur Contact, le CTA de nav masqué laisse le burger collé au logo */
.p-contact .nav-cta[aria-current="page"]+.nav-toggle{margin-left:auto}
:root{--filet:1.5px solid var(--encre);--filet-cl:1.5px solid rgba(238,242,255,.22)}
.p-int .kicker .idx{margin-right:2px;color:var(--perv-f)}
.p-int .tone-encre .kicker .idx,.p-int .cta-final .kicker .idx{color:var(--peche)}
.amp{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.08em;letter-spacing:0;line-height:.8}
.h1 .amp,.h2 .amp{color:var(--perv-f)}

/* ==========================================================================
   Héros internes (.ih) : aplat brume/nuage + grain, H1 aligné à gauche (une phrase par ligne),
   sticker-héros (.ih-stk) collé au H1 — position calculée par pages.js à partir des lignes réelles
   du titre (jamais sur un texte : marge 20 px), décollable comme les stickers de planche.
   ========================================================================== */
.ih{position:relative;overflow:hidden;background:var(--nuage);padding:calc(var(--nav-h) + clamp(40px,6vw,92px)) 0 clamp(48px,6vw,88px)}
.ih--brume{background:var(--brume)}
.ih .wrap{position:relative;z-index:2}
.ih .crumbs{margin-bottom:clamp(20px,3vw,40px);font-size:15px}
.ih .kicker{margin-bottom:clamp(16px,2vw,26px)}
.ih-t{position:relative;max-width:none}
.ih-t .l{display:block}
/* phrase longue : la taille s'ajuste pour qu'une phrase tienne sur une ligne en desktop (--fit = vw par caractère) */
@media (min-width:701px){.ih-t--fit{font-size:min(var(--fs-h1),var(--fit,7.6vw))}}
.ih .lede{margin-top:clamp(22px,2.6vw,34px)}

/* Sticker-héros : un .stk hors planche, ancré en px (--x/--y) par pages.js. Classe .pin = contrôle des recouvrements. */
.ih-stk.stk{position:absolute;left:var(--x,88%);top:var(--y,32%);z-index:4;width:calc(var(--w) * var(--k,1));
  transform:translate(-50%,-50%) translate3d(calc(var(--dx,0px) + var(--px,0px)),calc(var(--dy,0px) + var(--py,0px)),0) rotate(var(--r,0deg));
  cursor:grab;touch-action:pan-y pinch-zoom;pointer-events:auto}
.ih-stk.stk.drag{cursor:grabbing;will-change:transform}
html.js .ih-stk:not(.is-set){visibility:hidden}
.ih-stk.ih-off{display:none}
/* collage à l'arrivée (objet : ressort), après la mise en place du titre */
.ih-stk.is-in .stk-in{animation:stick-on var(--t-4) var(--ease-stick) 160ms backwards}
.ih-stk.is-in .stk-in::before{animation:shadow-on var(--t-4) var(--ease-out) 160ms backwards}
.ih-stk.stuck .stk-in{animation:stick-on-short var(--t-4) var(--ease-stick)}
@media (min-width:701px) and (max-width:1080px){
  .ih-stk.stk{width:calc(var(--w) * var(--wt,.8) * var(--k,1))}
  /* réserve en fin de titre (tablette) pour les pages où le titre occupe toute la largeur */
  .ih--xp .ih-room,.ih--pj .ih-room,.ih--legal .ih-room{display:inline-block}
}
@media (max-width:700px){.ih-stk.stk{width:calc(var(--w) * var(--wm,.56) * var(--k,1))}}

/* Héros Projets : affiche en escalier, lede calée à droite sur la ligne de base */
.ih--pj .ih-t .l:nth-child(2){padding-left:1.15em}
.ih--pj .ih-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24em);gap:20px 60px;align-items:start}
.ih--pj .ih-t{grid-column:1/-1}
.ih--pj .lede{grid-column:2;margin:0}
@media (max-width:860px){.ih--pj .ih-row{grid-template-columns:1fr}.ih--pj .lede{grid-column:1}.ih--pj .ih-t .l:nth-child(2){padding-left:.6em}}


/* ==========================================================================
   CTA final des pages internes : panneau encre, composition gauche/droite (≠ accueil),
   H2 en deux lignes décalées, stickers propres à la page (une apparition par page).
   ========================================================================== */
.cta-int{position:relative;overflow:hidden;text-align:left;padding:clamp(88px,11vw,170px) 0;background:var(--peche);color:var(--encre)}
.cta-int .wrap{position:relative;z-index:2;pointer-events:none}
.cta-int .wrap a{pointer-events:auto}
.cta-int .kicker{color:var(--encre)}
.cta-int .h2 em.s{color:var(--perv-f)}
.cta-int p:not(.kicker){font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--encre2)}
.cta-int p.racontez{font-family:var(--serif);font-style:italic;font-size:var(--fs-serif-lead);line-height:var(--lh-serif);color:var(--encre)}
.cta-int .wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:36px clamp(40px,6vw,96px);align-items:end}
.cta-int .kicker{justify-content:flex-start;grid-column:1/-1;margin:0}
.cta-int .h2{grid-column:1/-1;font-size:min(var(--fs-h1),7.4vw);line-height:var(--lh-h1);letter-spacing:var(--ls-h1);max-width:none;margin:0}
.cta-int .h2 .l{display:block}
.cta-int .h2 .l+.l{padding-left:1.1em}
.cta-int .cta-side{grid-column:2;display:grid;gap:14px;justify-items:start;padding-bottom:.4em}
.cta-int p:not(.kicker){margin:0;max-width:30em}
.cta-int p.racontez{margin-top:0}
.cta-int .btns{justify-content:flex-start;margin-top:14px}
@media (max-width:860px){
  .cta-int .wrap{grid-template-columns:1fr}
  .cta-int .cta-side{grid-column:1}
  .cta-int .h2 .l+.l{padding-left:.5em}
}

/* ==========================================================================
   Contact : décision rapide. Formulaire dans le premier écran (héros compact à gauche,
   formulaire à droite en desktop ; empilé et resserré en mobile).
   ========================================================================== */
.ct{position:relative;overflow:hidden;background:var(--brume);padding:calc(var(--nav-h) + clamp(28px,4vw,56px)) 0 clamp(72px,9vw,128px)}
.ct-grid{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,1fr);grid-template-areas:"head card" "aside card";gap:0 clamp(40px,5.5vw,96px);align-items:start;position:relative;z-index:2}
.ct-head{grid-area:head}
.ct-card{grid-area:card}
.ct-aside{grid-area:aside;margin-top:clamp(40px,5vw,72px)}
.ct .crumbs{margin-bottom:clamp(14px,2vw,28px);font-size:15px}
.ct .kicker{margin-bottom:18px}
.ct .ih-t{font-size:clamp(42px,16px + 4.2vw,78px);line-height:var(--lh-h1);letter-spacing:var(--ls-h1)}
.ct .lede{margin-top:clamp(18px,2vw,28px);max-width:21em}
/* réserve en fin de titre pour le sticker-héros quand la place manque (mobile) : présente dès le 1er rendu, pas de décalage */
.ih-room{display:none;vertical-align:top;width:var(--room-w,110px);height:var(--room-h,80px)}
/* Carte du formulaire : filet encre, plus d'ombre lourde */
.ct-card.form-card{border:var(--filet);box-shadow:none;border-radius:30px;padding:clamp(22px,3.2vw,44px)}
.ct-card .form-status{margin:0 0 20px}
.ct-card .form-status.err{display:flex;gap:10px;align-items:flex-start}
.ct-card .form-status.err::before{content:"!";flex:none;width:20px;height:20px;border-radius:50%;background:#B4233C;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;margin-top:2px}
.ct-card .fgrid{gap:18px 16px}
.ct-card .field textarea{min-height:140px}
.ct-msg-foot{display:flex;justify-content:space-between;gap:6px 16px;align-items:baseline;flex-wrap:wrap}
.ct-msg-foot .hint-t{flex:1 1 18em}
.ct-min{font-weight:700;color:var(--encre2);white-space:nowrap}
.ct-count{font-size:13px;font-weight:700;color:var(--ardoise);font-variant-numeric:tabular-nums;white-space:nowrap;transition:color var(--t-2) var(--ease-out)}
.ct-count.ok{color:var(--perv-f)}
.ct-card .form-foot{margin-top:24px}
.ct-card .form-foot a{display:inline-block;padding-block:12px;margin-block:-12px}
/* Aside « Et ensuite ? » : liste typographique à filets (plus de cartes) */
.ct-aside .h3{font-size:var(--fs-h4);line-height:var(--lh-h4);margin-bottom:18px}
.ct-aside .aside-steps{gap:0;border-top:var(--filet)}
.ct-aside .aside-steps li{grid-template-columns:48px 1fr;gap:12px;padding:18px 0;border-radius:0;background:none;border:0;border-bottom:1px solid var(--givre)}
.ct-aside .aside-steps li::before{width:auto;height:auto;background:none;color:var(--perv-f);font-size:30px;line-height:1;place-items:start}
.ct-aside .aside-steps b{font-size:19px}
.ct-direct{margin-top:28px;padding-top:20px;border-top:var(--filet)}
.ct-direct.is-top{margin:0 0 clamp(28px,3vw,40px);padding:0 0 20px;border-top:0;border-bottom:var(--filet)}
.ct-direct .ct-mail{margin:0;font-size:var(--fs-h4);font-weight:700;letter-spacing:var(--ls-h4)}
.ct-direct .ct-mail a{display:inline-block;padding-block:6px}
/* Confirmation : la carte se pose, le sticker se colle */
.ct-card .done{position:relative;text-align:left;padding:clamp(28px,4vw,56px) clamp(4px,1vw,12px) clamp(12px,2vw,24px)}
.ct-card .done h2{font-size:clamp(36px,18px + 2.7vw,60px)}
.ct-card .done h2 .l{display:block}
.ct-card .done .ok{margin:0 0 24px}
.ct-card .done p{margin:18px 0 0}
.ct-card .done .btns{justify-content:flex-start}
.done-pin.pin{right:-6px;top:-34px}
.ct-card .done:not([hidden]){animation:rise var(--t-4) var(--ease-out) both}
.ct-card .done:not([hidden]) .done-pin .stk-in{animation:stick-on var(--t-4) var(--ease-stick) 320ms backwards}
.ct-card .done:not([hidden]) .done-pin .stk-in::before{animation:shadow-on var(--t-4) var(--ease-out) 320ms backwards}
.ct-card .done:not([hidden]) .ok{animation:stick-on-short var(--t-4) var(--ease-stick) 120ms backwards}
@media (min-width:1000px) and (max-width:1199px){.ct-card .fgrid{grid-template-columns:1fr}}
@media (min-width:701px) and (max-width:999px){.ct-head{padding-right:clamp(0px,24vw - 20px,210px)}}
@media (min-width:1000px) and (max-width:1199px){.ct .ih-room{display:inline-block;--room-w:176px;--room-h:124px;margin-left:2px}}
@media (max-width:999px){
  .ct-grid{grid-template-columns:1fr;grid-template-areas:"head" "card" "aside"}
  .ct .lede{max-width:30em}
  .ct-card{margin-top:clamp(24px,4vw,40px)}
}
@media (max-width:700px){
  .ct{padding-top:calc(var(--nav-h) + 14px)}
  .ct .crumbs{margin-bottom:8px}
  .ct .kicker{margin-bottom:12px}
  .ct .lede{font-size:18px;margin-top:6px;max-width:none}
  .ct .ih-room{display:inline-block;--room-w:128px;--room-h:108px;margin-left:2px}
  .ct-card{margin-top:22px}
  .ct-card.form-card{border-radius:24px;padding:20px 18px 24px}
  .done-pin.pin{top:-26px;right:-4px}
}

/* ==========================================================================
   Projets : FitnessLac en couverture plein écran, puis les emplacements vides 02 / 03 / 04
   (silhouettes pointillées d'étiquettes vinyle). Bleu FitnessLac uniquement via les visuels réels.
   ========================================================================== */
.pj{position:relative;background:var(--brume);padding:0 0 clamp(80px,10vw,150px)}
.pj-fl{position:relative;margin-inline:clamp(8px,1.4vw,18px);border-radius:var(--radius-panel);overflow:hidden;background:var(--encre);color:var(--nuage);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto 1fr;column-gap:clamp(16px,2vw,28px);
  min-height:min(100svh,940px);padding:clamp(28px,3.6vw,56px) clamp(20px,3.6vw,56px) clamp(28px,3.6vw,56px)}
.pj-top{grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;position:relative;z-index:2}
.pj-top .kicker{margin:0;color:var(--peche);white-space:nowrap}
.pj-logo{width:clamp(150px,18vw,280px);height:auto}
.pj-name{grid-column:1/-1;position:relative;z-index:2;margin:clamp(10px,1.5vw,22px) 0 clamp(20px,2.6vw,36px);color:#fff;font-size:var(--fs-display-xxl);line-height:var(--lh-xxl);letter-spacing:var(--ls-xxl);font-variation-settings:var(--opsz-display)}
.pj-stage{grid-column:1/span 7;position:relative;align-self:stretch;min-height:clamp(260px,32vw,520px)}
.pj-photo{position:absolute;inset:0;margin:0;border-radius:calc(var(--radius-panel) * .55);overflow:hidden;background:var(--encre2)}
.pj-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;transform-origin:50% 60%;transition:transform var(--t-5) var(--ease-out)}
.pj-shot{position:absolute;z-index:2;right:-10%;bottom:-9%;width:min(58%,460px);margin:0;padding:7px;background:#fff;border-radius:16px;transform:rotate(-3.5deg);transition:transform var(--t-4) var(--ease-stick)}
.pj-shot img{border-radius:10px;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.pj-shot::before{content:"";position:absolute;inset:8% 6% -4%;z-index:-1;border-radius:24px;background:radial-gradient(closest-side,rgba(5,10,30,.55),rgba(5,10,30,0));transform:translateY(14px);opacity:.7;transition:opacity var(--t-4) var(--ease-out),transform var(--t-4) var(--ease-out)}
.pj-txt{grid-column:9/-1;position:relative;z-index:2;display:flex;flex-direction:column;gap:18px;align-self:end}
.pj-sub{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);font-weight:800;color:#fff;text-wrap:balance}
.pj-sub em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--peche);font-size:1.08em;letter-spacing:var(--ls-serif)}
.pj-txt>p:not(.pj-sub){color:var(--sur-encre)}
.pj-cart{display:grid;gap:0;margin:6px 0 0;border-top:var(--filet-cl)}
.pj-cart div{display:grid;grid-template-columns:7.5em 1fr;gap:12px;padding:11px 0;border-bottom:var(--filet-cl)}
.pj-cart dt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--peche);padding-top:.25em}
.pj-cart dd{margin:0;font-weight:600;font-size:15px;color:var(--nuage)}
.pj-go{display:inline-flex;align-items:center;gap:10px;min-height:var(--hit);font-weight:800;font-size:18px;color:var(--peche);text-decoration:none;margin-top:4px}
.pj-go .ar{display:inline-block;transition:transform var(--t-3) var(--ease-stick)}
/* bloc entièrement cliquable : lien étiré ; focus clavier = même chorégraphie que le survol */
.pj-go::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit}
.pj-fl:has(.pj-go:focus-visible){outline:3px solid var(--perv-f);outline-offset:4px}
.pj-go:focus-visible{outline:none}
.pj-fl .pin{z-index:3}
.pj-pin{left:-16px;top:auto;bottom:-28px}
@media (hover:hover){.pj-fl{cursor:pointer}}
/* chorégraphie : la salle respire, le tirage du site se soulève et pivote, la flèche avance */
.pj-fl:hover .pj-photo img,.pj-fl:focus-within .pj-photo img,.pj-fl.play .pj-photo img{transform:scale(1.035)}
.pj-fl:hover .pj-shot,.pj-fl:focus-within .pj-shot,.pj-fl.play .pj-shot{transform:translate(-10px,-14px) rotate(-1deg)}
.pj-fl:hover .pj-shot::before,.pj-fl:focus-within .pj-shot::before,.pj-fl.play .pj-shot::before{opacity:1;transform:translateY(26px)}
.pj-fl:hover .pj-go .ar,.pj-fl:focus-within .pj-go .ar,.pj-fl.play .pj-go .ar{transform:translateX(6px)}

/* Emplacements vides : silhouettes d'étiquettes vinyle, de tailles différentes */
.slots{list-style:none;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr) minmax(0,.62fr);gap:clamp(18px,3vw,48px);align-items:end;margin-top:clamp(56px,7vw,104px)}
.slot{position:relative;color:var(--perv-f)}
.slot svg{width:100%;height:auto;overflow:visible}
.slot .sil{fill:rgba(255,255,255,.5);stroke:currentColor;stroke-width:2.5;stroke-dasharray:9 9;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:fill var(--t-2) var(--ease-out),stroke-dasharray var(--t-3) var(--ease-out)}
.slot .n{position:absolute;font-family:var(--serif);font-style:italic;font-weight:400;line-height:1;color:var(--perv-f)}
.slot--02{transform:rotate(-2.5deg)}
.slot--02 .n{position:static;font-size:clamp(26px,2.4vw,38px)}
.slot--02 a{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;padding:0 9% 0 26%;text-decoration:none;color:var(--encre);border-radius:20px}
.slot--02 strong{display:block;font-size:var(--fs-h4);line-height:1.08;letter-spacing:var(--ls-h3);font-weight:800;text-wrap:balance}
.slot--02 strong em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--perv-f);font-size:1.08em}
.slot--02 .small{display:block;font-size:15px;color:var(--ardoise);text-wrap:pretty}
.slot--02 .ar{font-size:24px;font-weight:700;line-height:1;transition:transform var(--t-3) var(--ease-stick)}
.slot--02{transition:transform var(--t-3) var(--ease-stick)}
.slot--02:hover,.slot--02:focus-within{transform:rotate(-1deg) translateY(-6px)}
.slot--02:hover .sil,.slot--02:focus-within .sil{fill:var(--peche-cl);stroke-dasharray:1 0}
.slot--02:hover .ar,.slot--02:focus-within .ar{transform:translateX(6px)}
.slot--02 a:focus-visible{outline-offset:6px}
.slot--03{transform:rotate(3deg);margin-bottom:clamp(10px,2vw,30px);opacity:.85}
.slot--03 .n{left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(36px,4vw,64px)}
.slot--04{transform:rotate(-7deg);opacity:.7;margin-bottom:clamp(30px,4vw,70px)}
.slot--04 .n{left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(28px,3vw,48px)}
.pj-note{margin-top:clamp(28px,3vw,44px);color:var(--ardoise);font-size:var(--fs-small);max-width:44em}

@media (max-width:1080px){
  .pj-stage{grid-column:1/-1;min-height:clamp(240px,52vw,480px)}
  .pj-txt{grid-column:1/-1;margin-top:clamp(56px,9vw,90px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 32px;align-items:start}
  .pj-txt .pj-sub,.pj-txt>p{grid-column:1}
  .pj-cart{grid-column:2;grid-row:1/span 3;margin:0}
  .pj-go{grid-column:1}
  .pj-shot{right:4%;bottom:-12%;width:min(48%,380px)}
}
@media (max-width:700px){
  .pj-fl{min-height:0;padding:22px 18px 26px;border-radius:28px}
  .pj-name{font-size:clamp(54px,17vw,80px);margin:14px 0 18px}
  .pj-logo{width:104px}
  .pj-top .kicker{letter-spacing:.1em}
  .pj-pin.pin{left:-8px;bottom:-22px;width:calc(var(--w) * .62)}
  .pj-stage{min-height:0;aspect-ratio:4/3.4}
  .pj-shot{right:-4px;bottom:-16%;width:62%;padding:5px;border-radius:12px}
  .pj-shot img{border-radius:8px}
  /* mobile : titre, promesse, puis la salle (sous la ligne de flottaison), puis le cartouche */
  .pj-fl{display:flex;flex-direction:column}
  .pj-txt{display:contents}
  .pj-top{order:1}.pj-name{order:2}.pj-sub{order:3}.pj-txt>p:not(.pj-sub){order:4;margin-top:12px}
  .pj-stage{order:5;margin-top:26px}
  .pj-cart{order:6;margin-top:64px}
  .pj-go{order:7;margin-top:14px}
  .pj-cart div{grid-template-columns:6.4em 1fr}
  .slots{grid-template-columns:1fr 1fr;row-gap:20px}
  .slot--02{grid-column:1/-1}
  .slot--02 a{padding:0 8% 0 23%;gap:6px}
  .slot--02 strong{font-size:19px}
  .slot--02 .small{font-size:13.5px}
  .slot--03{margin:0}
  .slot--04{margin:0 18% 0 8%}
}
@media (max-width:400px){
  .slot--02 .small{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pj-fl:hover .pj-shot,.pj-fl:focus-within .pj-shot,.pj-fl.play .pj-shot{transform:rotate(-3.5deg)}
  .slot--02:hover,.slot--02:focus-within{transform:rotate(-2.5deg)}
}

/* ==========================================================================
   Expertises : cinq planches éditoriales (≠ index typographique de l'accueil).
   Numéro serif XXL en filigrane, mini-interface vivante, problématiques en liste à filets,
   livrables + méthode en colonnes (desktop) ou en <details> fermés (mobile).
   ========================================================================== */
.ih--xp .ih-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:14px clamp(40px,6vw,96px);align-items:end;margin-top:clamp(26px,3.2vw,46px);padding-top:clamp(18px,2.2vw,30px);border-top:var(--filet)}
.ih--xp .serif-lead{color:var(--perv-f)}
.ih--xp .ih-foot .lede{margin:0;max-width:28em}
.ih--xp{padding-bottom:clamp(64px,8vw,112px)}
@media (max-width:700px){.ih--xp .ih-foot{grid-template-columns:1fr}}

/* Sous-navigation : barre à filet, actif centré, masque de bord si débordement, repli mobile */
.p-expertises .subnav{top:84px;margin-top:-30px;transition:transform var(--t-3) var(--ease-out),opacity var(--t-3) var(--ease-out)}
.p-expertises .subnav ul{position:relative;border:var(--filet);box-shadow:0 8px 24px -20px rgba(30,44,90,.5);background:rgba(248,250,255,.92);scroll-behavior:auto}
.p-expertises .subnav a{gap:6px;padding:8px 14px}
.p-expertises .subnav a:focus-visible{outline-offset:-3px}
.sn-n{font-family:var(--serif);font-style:italic;font-weight:400;font-size:17px;line-height:1;color:var(--perv-f);transition:color var(--t-2) var(--ease-out)}
.subnav a.on .sn-n{color:var(--peche)}
.sn-s{display:none}
.subnav.is-over ul{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent)}
.subnav.is-over.at-start ul{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 32px),transparent)}
.subnav.is-over.at-end ul{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 100%)}
.subnav.is-over.at-start.at-end ul{-webkit-mask-image:none;mask-image:none}
.subnav.sn-up{opacity:0;transform:translateY(-14px);pointer-events:none}
.subnav.sn-up:focus-within{opacity:1;transform:none;pointer-events:auto}
@media (max-width:700px){
  .p-expertises .subnav{top:76px;margin-top:-26px}
  .p-expertises .subnav .wrap{width:calc(100% - 16px)}
  .p-expertises .subnav ul{width:100%;margin:0}
  .p-expertises .subnav a{padding:8px 12px;font-size:14px}
  .sn-l{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .sn-s{display:inline}
}

/* Planches */
.p-expertises .xp{position:relative;border-bottom:0;padding:clamp(64px,9vw,140px) 0;scroll-margin-top:70px;--xp-ink:var(--encre);--xp-mute:var(--encre2);--xp-rule:var(--encre)}
.xp--brume{background:var(--brume)}
.xp--nuage{background:var(--nuage)}
.xp--peche{background:var(--peche-cl)}
.p-expertises .xp--encre{--xp-ink:#fff;--xp-mute:var(--sur-encre);--xp-rule:rgba(238,242,255,.32)}
.p-expertises .xp.panel{margin-block:clamp(8px,1.4vw,18px)}
.p-expertises .xp-head{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:end}
.xp--flip .xp-head{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
.xp--flip .xp-vis{order:-1}
.xp-intro{position:relative}
.xp-num{position:absolute;left:-.06em;top:0;margin:0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:var(--fs-numeral);line-height:.8;letter-spacing:-.02em;color:var(--perv);opacity:.3;pointer-events:none;user-select:none}
.xp--encre .xp-num{color:var(--perv);opacity:.42}
.xp--peche .xp-num{color:var(--perv-f);opacity:.22}
.p-expertises .xp-t{position:relative;font-size:var(--fs-h2-sm);margin:calc(var(--fs-numeral) * .5) 0 22px;color:var(--xp-ink)}
.p-expertises .xp-intro .lede{color:var(--xp-mute)}
.p-expertises .xp-intro .tags{margin-top:22px}
.xp--peche .tags li,.xp--nuage .tags li{background:#fff}
.p-expertises .xp-vis .mui{min-height:240px;padding:20px;font-size:13px;border-color:transparent}
.xp--brume .xp-vis .mui{background:var(--nuage)}
.xp--nuage .xp-vis .mui{background:var(--papier)}
.xp--peche .xp-vis .mui{background:var(--papier)}
.p-expertises .xp-vis .pin{right:-10px;top:-34px}
.xp--flip .xp-vis .pin{right:auto;left:-14px}

/* Corps : listes typographiques à filets (pas de cartes) */
.xp-body{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:28px clamp(28px,4vw,64px);margin-top:clamp(48px,6vw,88px);color:var(--xp-ink)}
.xp-h{font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;font-weight:800;color:var(--perv-f);margin:0}
.xp--encre .xp-h{color:var(--peche)}
.xp-pb,.xp-d{border-top:1.5px solid var(--xp-rule);padding-top:16px}
.xp-pb ul{list-style:none;display:grid;margin-top:12px}
.xp-pb li{font-size:var(--fs-h4);line-height:1.22;letter-spacing:var(--ls-h4);font-weight:600;padding:12px 0 14px;border-bottom:1px solid var(--xp-rule);border-bottom-color:color-mix(in srgb,var(--xp-rule) 30%,transparent);text-wrap:pretty}
.xp-pb li:last-child{border-bottom:0}
.xp-d summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.xp-d summary::-webkit-details-marker{display:none}
.xp-d summary::marker{content:""}
.xp-liv,.xp-how{list-style:none;display:grid;gap:12px;margin-top:16px;font-size:16px;color:var(--xp-mute)}
.xp-liv li{position:relative;padding-left:24px}
.xp-liv li::before{content:"+";position:absolute;left:0;top:.06em;font-family:var(--serif);font-style:italic;font-size:22px;line-height:1;color:var(--perv-f)}
.xp--encre .xp-liv li::before{color:var(--peche)}
.xp-how{counter-reset:o}
.xp-how li{counter-increment:o;display:grid;grid-template-columns:34px 1fr;gap:4px}
.xp-how li::before{content:counter(o,decimal-leading-zero);font-family:var(--serif);font-style:italic;color:var(--perv-f);font-size:20px;line-height:1.25}
.xp--encre .xp-how li::before{color:var(--peche)}
.xp-how b{color:var(--xp-ink)}
/* bouton « + » (mobile) */
.xp-plus{position:relative;flex:none;width:36px;height:36px;border-radius:50%;background:var(--encre);transition:transform var(--t-3) var(--ease-stick),background-color var(--t-2) var(--ease-out)}
.xp-plus::before,.xp-plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2.5px;margin:-1.25px 0 0 -7px;border-radius:2px;background:#fff}
.xp-plus::after{transform:rotate(90deg)}
.xp--encre .xp-plus{background:var(--peche)}
.xp--encre .xp-plus::before,.xp--encre .xp-plus::after{background:var(--encre)}
.xp-d[open] .xp-plus{transform:rotate(45deg)}
@media (min-width:701px){
  .xp-plus{display:none}
  .xp-d summary{cursor:default}
  /* en desktop, le contenu est lisible dès le premier rendu (pas de décalage quand le script ouvre les <details>) */
  details.xp-d::details-content{content-visibility:visible;display:block}
}
.p-expertises .xp-cta{margin-top:clamp(36px,4vw,56px);padding-top:28px;border-top:1.5px solid var(--xp-rule)}
.p-expertises .xp-cta p{color:var(--xp-mute);font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.25}

/* Boucle d'acquisition (uniquement dans Campagnes & acquisition) : séquence à flèches, sans cartes */
.p-expertises .loop{margin-top:clamp(40px,5vw,72px);padding:clamp(24px,3vw,40px) 0 0;background:none;border-radius:0;border-top:1.5px solid var(--xp-rule);overflow:visible}
.p-expertises .loop h3{font-size:var(--fs-h3)}
.p-expertises .loop h3 .l{display:block}
.p-expertises .loop ol{gap:0;margin-top:28px;counter-reset:lp}
.p-expertises .loop li{background:none;border-radius:0;padding:4px clamp(14px,2vw,28px) 4px 0;counter-increment:lp}
.p-expertises .loop li+li{padding-left:clamp(14px,2vw,28px);border-left:1px solid rgba(238,242,255,.18)}
.p-expertises .loop li b{font-size:var(--fs-h4);letter-spacing:var(--ls-h4)}
.p-expertises .loop li b::before{content:counter(lp,decimal-leading-zero) " ";font-family:var(--serif);font-style:italic;font-weight:400;color:var(--peche);font-size:.8em}
.p-expertises .loop li:not(:last-child)::after{top:2px;right:-12px;box-shadow:0 0 0 4px var(--encre)}
.ia-note{position:relative}
.p-expertises .ia-note{margin-top:clamp(32px,4vw,56px);padding:18px 0 0;border-radius:0;background:none;border-top:1.5px solid var(--xp-rule);font-family:var(--serif);font-style:italic;font-size:var(--fs-h4);line-height:1.3;color:var(--encre2);max-width:40em}
.p-expertises .ia-note b{font-family:var(--display);font-style:normal;font-weight:800;font-size:.86em;color:var(--encre);margin-right:.3em}

/* Mini-interfaces vivantes : mêmes gestes que l'accueil, en transform/opacity uniquement.
   Déclencheurs : survol de la planche, focus dans la planche, ou .play (une fois au reveal, tactile compris). */
.p-expertises .xp-vis .m-sw i{margin-left:6px;transform:translateX(calc((1.5 - var(--n,0)) * 22px));transition:transform var(--t-4) var(--ease-stick)}
.p-expertises .xp-vis .m-sw i:first-child{margin-left:0}
.p-expertises .xp-vis .m-sw i:nth-child(2){--n:1}
.p-expertises .xp-vis .m-sw i:nth-child(3){--n:2}
.p-expertises .xp-vis .m-sw i:nth-child(4){--n:3}
.p-expertises .xp-vis .m-axis div::after{left:86%;transform:translateX(-190%);transition:transform var(--t-5) var(--ease-stick) 60ms}
.p-expertises .xp-vis .m-hero{position:relative;isolation:isolate;background:linear-gradient(160deg,var(--perv),var(--encre2));background-size:100% 100%;transition:none}
.p-expertises .xp-vis .m-hero::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(160deg,var(--perv-f),var(--encre));opacity:0;transition:opacity var(--t-4) var(--ease-out) 60ms}
.p-expertises .xp-vis .m-cursor{transition:transform var(--t-4) var(--ease-out) 60ms}
.p-expertises .xp-vis .m-ad{transition:transform var(--t-4) var(--ease-stick) 60ms}
.p-expertises .xp-vis .m-bars i{height:100%;transform-origin:50% 100%;transform:scaleY(var(--s,.5));transition:transform var(--t-4) var(--ease-stick) 60ms}
.p-expertises .xp-vis .m-feed i{transition:transform var(--t-4) var(--ease-stick) 60ms}
:is(.xp-head:hover,.xp:focus-within) .xp-vis .m-sw i,.xp-vis.play .m-sw i{transform:none}
:is(.xp-head:hover,.xp:focus-within) .xp-vis .m-sw i:nth-child(2),.xp-vis.play .m-sw i:nth-child(2){transform:translateY(-6px)}
:is(.xp-head:hover,.xp:focus-within) .xp-vis .m-axis div::after,.xp-vis.play .m-axis div::after{transform:none}
:is(.xp-head:hover,.xp:focus-within) .xp-vis .m-hero::after,.xp-vis.play .m-hero::after{opacity:1}
:is(.xp-head:hover,.xp:focus-within) .xp-vis .m-cursor,.xp-vis.play .m-cursor{transform:translate(-60px,-34px)}
:is(.xp-head:hover,.xp:focus-within) .xp-vis .m-ad:first-child,.xp-vis.play .m-ad:first-child{transform:rotate(-3deg) translateY(-4px)}
:is(.xp-head:hover,.xp:focus-within) .xp-vis .m-ad:nth-child(2),.xp-vis.play .m-ad:nth-child(2){transform:rotate(3deg) translateY(-4px)}
:is(.xp-head:hover,.xp:focus-within) .xp-vis .m-bars i,.xp-vis.play .m-bars i{transform:scaleY(calc(var(--s,.5) + .12))}
:is(.xp-head:hover,.xp:focus-within) .xp-vis .m-bars i.on,.xp-vis.play .m-bars i.on{transform:scaleY(1)}
:is(.xp-head:hover,.xp:focus-within) .xp-vis .m-feed i:nth-child(odd),.xp-vis.play .m-feed i:nth-child(odd){transform:translateY(-5px)}
:is(.xp-head:hover,.xp:focus-within) .xp-vis .m-feed i:nth-child(even),.xp-vis.play .m-feed i:nth-child(even){transform:translateY(4px)}
:is(.xp-head:hover,.xp:focus-within) .xp-vis .m-node .dot,.xp-vis.play .m-node .dot{animation:flowdot 1.4s var(--ease-out) 2}
:is(.xp-head:hover,.xp:focus-within) .xp-vis .m-node:nth-child(3) .dot,.xp-vis.play .m-node:nth-child(3) .dot{animation-delay:.5s}

/* Combinaison d'expertises */
.xp-combo{position:relative;padding:clamp(72px,9vw,128px) 0}
.xp-combo .wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:32px clamp(40px,6vw,96px);align-items:end}
.xp-combo .h2 .l{display:block}
.xp-combo .btns{margin-top:24px}

@media (max-width:1080px){
  .xp-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .xp-pb{grid-column:1/-1}
  .xp-pb ul{grid-template-columns:1fr 1fr;column-gap:32px}
  .xp-pb li:nth-last-child(2){border-bottom:0}
}
@media (max-width:860px){
  .p-expertises .xp-head,.xp--flip .xp-head{grid-template-columns:1fr}
  .xp--flip .xp-vis{order:0}
  .xp-combo .wrap{grid-template-columns:1fr}
}
@media (max-width:700px){
  .p-expertises .xp{padding:48px 0 52px;scroll-margin-top:60px}
  .p-expertises .xp-t{margin-top:calc(var(--fs-numeral) * .42)}
  .p-expertises .xp-vis .mui{min-height:0;padding:14px}
  .p-expertises .xp-vis .pin{top:-26px;right:-4px}
  .xp--flip .xp-vis .pin{left:auto;right:-4px}
  .xp-body{grid-template-columns:1fr;gap:0;margin-top:32px}
  .xp-pb ul{grid-template-columns:1fr}
  .xp-pb li{font-size:17.5px;padding:9px 0 10px}
  .xp-pb li:nth-last-child(2){border-bottom:1px solid color-mix(in srgb,var(--xp-rule) 30%,transparent)}
  .xp-pb{padding-bottom:12px}
  .xp-d{padding-top:0}
  .xp-d summary{min-height:56px;cursor:pointer}
  .xp-d[open]{padding-bottom:18px}
  .xp-d .xp-liv,.xp-d .xp-how{margin-top:2px}
  .p-expertises .loop ol{grid-template-columns:1fr 1fr;row-gap:22px}
  .p-expertises .loop li:nth-child(3){padding-left:0;border-left:0}
  .p-expertises .xp-cta{margin-top:20px;padding-top:20px}
  .p-expertises .xp-cta .btn{width:100%}
  .p-expertises .xp-cta p{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  /* état final directement : l'information est conservée, rien ne bouge */
  .p-expertises .xp-vis .m-sw i{transform:none}
  .p-expertises .xp-vis .m-axis div::after{transform:none}
  .p-expertises .xp-vis .m-bars i{transform:scaleY(calc(var(--s,.5) + .12))}
  .p-expertises .xp-vis .m-bars i.on{transform:scaleY(1)}
  .subnav.sn-up{transform:none}
}

/* ==========================================================================
   Étude de cas FitnessLac : héros encre avec la vraie salle en grand, logo agrandi,
   récit en compositions éditoriales variées, galerie à rythme (grand / petit, recadrages).
   ========================================================================== */
.ih--case{background:var(--encre);color:var(--nuage);padding-bottom:clamp(56px,7vw,104px)}
.ih--case .crumbs,.ih--case .crumbs a,.ih--case .crumbs li+li::before{color:var(--sur-encre)}
.ih--case .h1{color:#fff}
.ih--case .h1 em.s{color:var(--peche)}
.cs-id{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 40px;margin-bottom:clamp(26px,3.4vw,48px)}
.cs-logo{width:clamp(220px,32vw,460px);height:auto}
.cs-id .kicker{margin:0}
.cs-stage{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:28px clamp(32px,4.6vw,72px);align-items:end;margin-top:clamp(36px,4.4vw,64px)}
.cs-photo{margin:0;border-radius:calc(var(--radius-panel) * .6);overflow:hidden;background:var(--encre2)}
.cs-photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.cs-side .lede{margin:0 0 26px;color:var(--sur-encre)}
.ih--case .cs-meta{grid-template-columns:1fr;margin:0;border-top:var(--filet-cl)}
.ih--case .cs-meta div{display:grid;grid-template-columns:7.5em 1fr;gap:12px;padding:12px 0;border-bottom:var(--filet-cl)}
.ih--case .cs-meta dt{margin:0;padding-top:.2em}

/* Récit : quatre compositions, pas une pile de blocs identiques */
.cs-story{padding:clamp(64px,9vw,140px) 0 clamp(40px,5vw,80px)}
.cs-b{padding:clamp(48px,6vw,96px) 0;border-top:var(--filet)}
.cs-b:first-child{border-top:0;padding-top:0}
.cs-b .kicker{margin-bottom:14px}
.cs-b .prose{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--encre2)}
.cs-b--ctx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:28px clamp(40px,6vw,100px)}
.cs-b--ctx .h3{font-size:var(--fs-h2-sm);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
.cs-turn{font-family:var(--serif);font-style:italic;font-size:var(--fs-serif-lead);line-height:var(--lh-serif);color:var(--encre)}
.cs-b--enj{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px)}
.cs-b--enj .kicker{grid-column:1/-1}
.cs-b--enj .h2{grid-column:1/span 10}
.cs-b--enj .prose{grid-column:6/-1;margin-top:clamp(24px,3vw,40px)}
.cs-b--app{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px clamp(40px,6vw,100px)}
.cs-b--app .cs-b-h{order:2;align-self:start;position:sticky;top:130px}
.cs-b--app .h3{font-size:var(--fs-h2-sm);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
.cs-pull{margin-top:1.4em!important;padding-left:20px;border-left:3px solid var(--perv-f);font-weight:700;color:var(--encre)}
.cs-b--liv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:28px clamp(40px,6vw,100px)}
.cs-b--liv .h3{font-size:var(--fs-h2-sm);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
.p-case .cs-livr{list-style:none;display:grid;gap:0;counter-reset:lv;border-top:var(--filet)}
.p-case .cs-livr li{counter-increment:lv;display:grid;grid-template-columns:minmax(64px,.3fr) minmax(0,1fr);gap:4px 16px;padding:22px 0 24px;border-bottom:1px solid var(--givre)}
.p-case .cs-livr li::before{content:counter(lv,decimal-leading-zero);grid-row:span 2;font-family:var(--serif);font-style:italic;font-size:clamp(40px,4vw,64px);line-height:.9;color:var(--perv-f)}
.p-case .cs-livr h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
.p-case .cs-livr p{margin-top:6px;color:var(--ardoise)}

/* Galerie : logos agrandis, puis grand / petit, recadrages variés ; 2 colonnes en tablette */
.cs-gal{padding:clamp(72px,9vw,140px) 0}
.cs-gal-head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px 60px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.cs-gal-head .lede{margin:0 0 8px}
.cs-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);align-items:start}
.cs-grid figure{margin:0;position:relative;border-radius:22px;overflow:hidden;background:var(--givre)}
.cs-grid figure img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-5) var(--ease-out)}
.cs-grid figcaption{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.92);color:var(--encre);font-size:13px;font-weight:700;padding:5px 11px;border-radius:999px}
.g-id{position:relative;display:grid;place-items:center;border-radius:22px;padding:clamp(36px,6vw,96px) clamp(20px,3vw,48px);min-height:clamp(200px,24vw,340px)}
.g-id img{width:78%;max-width:560px;height:auto}
.g-id--pos{grid-column:1/span 7;background:#fff}
.g-id--neg{grid-column:8/-1;background:var(--encre);margin-top:clamp(40px,6vw,96px)}
.g-id--neg img{width:84%}
.g-pin{right:-12px;top:-30px}
.g-site{grid-column:1/span 8;margin-top:clamp(12px,1.6vw,22px)!important}
.g-site img{aspect-ratio:16/10;object-position:top}
.g-p1{grid-column:9/-1;margin-top:clamp(40px,5vw,80px)!important}
.g-p1 img{aspect-ratio:4/5}
.g-p4{grid-column:1/span 5}
.g-p4 img{aspect-ratio:1/1;object-position:50% 30%}
.g-p3{grid-column:6/span 3;margin-top:clamp(60px,9vw,150px)!important}
.g-p3 img{aspect-ratio:3/4}
.g-c2{grid-column:9/-1;margin-top:clamp(20px,3vw,48px)!important}
.g-c2 img{aspect-ratio:4/5}
.cs-res{margin-top:clamp(36px,4vw,56px);font-size:15px;color:var(--ardoise)}

/* Navigation de fin */
.cs-end{padding:clamp(20px,3vw,40px) 0 clamp(56px,7vw,96px)}
.cs-end .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:0;border-top:var(--filet);border-bottom:var(--filet)}
.cs-end-a{display:flex;align-items:center;gap:16px;min-height:96px;padding:22px 0;text-decoration:none;color:var(--encre);font-weight:800;font-size:var(--fs-h4);letter-spacing:var(--ls-h4);transition:color var(--t-2) var(--ease-out)}
.cs-end-a em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--perv-f);font-size:1.08em}
.cs-end--next{justify-content:flex-end;text-align:right;border-left:var(--filet);padding-left:24px}
.cs-end-a .ar{display:inline-block;font-size:1.2em;transition:transform var(--t-3) var(--ease-stick)}
.cs-end--back:hover .ar,.cs-end--back:focus-visible .ar{transform:translateX(-6px)}
.cs-end--next:hover .ar,.cs-end--next:focus-visible .ar{transform:translateX(6px)}
.cs-end-a:hover,.cs-end-a:focus-visible{color:var(--perv-f)}
.cs-end-a:focus-visible{outline-offset:-3px}

@media (max-width:1080px){
  .cs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-id--pos,.g-id--neg,.g-site,.g-p1,.g-p4,.g-p3,.g-c2{grid-column:auto;margin-top:0!important}
  .g-site{grid-column:1/-1}
  .g-id--neg{margin-top:clamp(28px,5vw,56px)!important}
  .g-p3{margin-top:clamp(40px,7vw,80px)!important}
  .g-c2{grid-column:auto;margin-top:clamp(-40px,-3vw,-20px)!important}
  .g-p4 img{aspect-ratio:4/5}
}
@media (max-width:860px){
  .cs-stage{grid-template-columns:1fr}
  .cs-b--ctx,.cs-b--app,.cs-b--liv,.cs-gal-head{grid-template-columns:1fr}
  .cs-b--app .cs-b-h{order:0;position:static}
  .cs-b--enj .h2,.cs-b--enj .prose{grid-column:1/-1}
}
@media (max-width:700px){
  .cs-id{margin-bottom:22px}
  .cs-logo{width:min(72vw,300px)}
  .cs-photo img{aspect-ratio:4/3.2}
  .cs-stage{gap:24px;margin-top:26px}
  .cs-grid{gap:12px}
  .g-id{min-height:150px;padding:28px 16px}
  .g-id--pos,.g-id--neg{grid-column:1/-1;margin-top:0!important}
  .g-p1{grid-column:1/-1}
  .g-p1 img{aspect-ratio:1/1;object-position:50% 20%}
  .g-p3{margin-top:28px!important}
  .g-c2{grid-column:1/-1;margin-top:0!important}
  .g-c2 img{aspect-ratio:16/10;object-position:50% 40%}
  .cs-end .wrap{grid-template-columns:1fr}
  .cs-end--next{border-left:0;border-top:1px solid var(--givre);padding-left:0;justify-content:space-between;text-align:left}
  .cs-end-a{min-height:72px}
  .p-case .cs-livr li{grid-template-columns:48px 1fr}
}

/* ==========================================================================
   Le studio : compositions typographiques (addition des compétences, index à filets,
   liste « pas chez nous » en grand), plus de doublon de la méthode (renvoi vers l'accueil).
   ========================================================================== */
.ih--st .ih-foot{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px clamp(40px,6vw,96px);align-items:end;margin-top:clamp(28px,3.4vw,48px)}
.ih--st .ih-foot .lede{margin:0;max-width:30em}
.ih--st .btns{justify-content:flex-end}
.ih--st .ih-t{--fit:7.3vw}

.st-model{padding:clamp(80px,10vw,150px) 0}
.st-model .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px clamp(40px,7vw,110px);align-items:center}
.st-model .h2 .l{display:block}
.st-model .prose{margin-top:28px}
/* l'addition : chaque compétence s'ajoute, le total = votre projet */
.st-sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 0;font-size:var(--fs-h3);line-height:1.08;letter-spacing:var(--ls-h3);font-weight:800;color:var(--encre)}
.st-sum>span{white-space:nowrap}
.st-sum>span+span:not(.st-eq)::before{content:"+";margin:0 .32em;font-family:var(--serif);font-style:italic;font-weight:400;color:var(--perv-f)}
.st-sum>span:nth-child(even){color:var(--encre2)}
.st-sum .st-eq{flex-basis:100%;margin-top:18px;padding-top:16px;border-top:var(--filet);font-size:1.5em;letter-spacing:var(--ls-h2)}
.st-sum .st-eq::before{content:"= ";font-family:var(--serif);font-style:italic;font-weight:400;color:var(--perv-f)}
.st-sum .st-eq em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--perv-f);font-size:1.12em}

.st-pill{padding:clamp(80px,10vw,150px) 0}
.st-pill-head{margin-bottom:clamp(36px,5vw,64px)}
.st-rows{list-style:none;border-top:var(--filet)}
.st-rows li{display:grid;grid-template-columns:minmax(80px,.5fr) minmax(0,1.1fr) minmax(0,1.4fr);gap:12px clamp(24px,4vw,64px);align-items:baseline;padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--givre)}
.st-rows .n{font-family:var(--serif);font-style:italic;font-size:clamp(48px,5vw,88px);line-height:.8;color:var(--perv-f)}
.st-rows h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
.st-rows p{color:var(--encre2);font-size:var(--fs-lead);line-height:var(--lh-lead)}

.st-not{padding:clamp(80px,10vw,150px) 0}
.st-not-head{position:relative}
.st-not-head .h2 .l{display:block}
.st-pin.pin{right:2%;top:-12px}
.p-studio .st-nots{margin-top:clamp(36px,4.4vw,64px);gap:0;border-top:var(--filet-cl)}
.p-studio .st-nots li{gap:clamp(14px,2vw,28px);padding:clamp(18px,2.4vw,30px) 0;font-size:var(--fs-h3);line-height:1.1;letter-spacing:var(--ls-h3);font-weight:800;border-bottom:var(--filet-cl);align-items:baseline}
.p-studio .st-nots li::before{width:auto;height:auto;background:none;border-radius:0;color:var(--peche);font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.3em;line-height:.6;display:inline-block;transform:translateY(.08em)}

.st-meth{padding:clamp(64px,8vw,112px) 0}
.st-meth .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px 60px;align-items:end}
.st-meth .h3{font-size:var(--fs-h3)}
.st-meth-a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding:16px 0;border-block:var(--filet);text-decoration:none;color:var(--encre);font-weight:700;font-size:clamp(17px,15px + .35vw,21px)}
.st-meth-a .ar{font-size:1.3em;transition:transform var(--t-3) var(--ease-stick)}
.st-meth-a:hover,.st-meth-a:focus-visible{color:var(--perv-f)}
.st-meth-a:hover .ar,.st-meth-a:focus-visible .ar{transform:translateX(6px)}

@media (max-width:1080px){
  .st-pin.pin{display:none}
  .st-rows li{grid-template-columns:minmax(64px,.4fr) minmax(0,2fr)}
  .st-rows p{grid-column:2}
}
@media (max-width:860px){
  .ih--st .ih-foot,.st-model .wrap,.st-meth .wrap{grid-template-columns:1fr}
  .ih--st .btns{justify-content:flex-start}
}
@media (max-width:700px){
  .st-sum{font-size:22px}
  .st-rows li{grid-template-columns:44px 1fr;gap:6px 14px}
  .st-rows .n{font-size:36px}
  .st-rows p{font-size:17px}
  .p-studio .st-nots li{font-size:22px}
}

/* ==========================================================================
   404 : le contenu dans un cadre (filet encre), le « 404 » en sort par le haut.
   ========================================================================== */
.ih--404{min-height:100svh;display:flex;align-items:center;padding-bottom:clamp(56px,7vw,96px)}
.ih--404 .wrap{width:min(1280px,100% - 2*var(--gutter))}
.e4-frame{position:relative;margin-top:clamp(70px,9vw,150px);padding:clamp(28px,4vw,64px) clamp(22px,4vw,64px) clamp(32px,4vw,64px);border:var(--filet);border-radius:clamp(22px,3vw,40px)}
.e4-big{position:absolute;left:clamp(14px,3vw,48px);top:0;transform:translateY(-62%);margin:0;padding:0 .08em;background:var(--nuage);font-size:var(--fs-display-xxl);line-height:var(--lh-xxl);letter-spacing:var(--ls-xxl);font-weight:800;color:var(--encre);font-variation-settings:var(--opsz-display)}
.e4-big em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--perv-f);font-size:1.1em;letter-spacing:0}
.e4-frame .kicker{margin-top:clamp(30px,5vw,80px)}
.ih--404 .ih-t{max-width:none}
.ih--404 .btns{margin-top:clamp(26px,3vw,40px)}

/* ==========================================================================
   Pages légales : héros interne compact, colonne de lecture, intertitres numérotés à filet.
   Contenu juridique inchangé (les [À compléter] restent visibles).
   ========================================================================== */
.ih--legal{padding-bottom:clamp(28px,4vw,48px)}
.ih--legal .ih-t{font-size:var(--fs-h2)}
.p-legal .legal{padding:clamp(24px,3vw,40px) 0 clamp(80px,10vw,130px);counter-reset:lg}
.p-legal .legal .warn{margin:0 0 clamp(36px,4vw,56px)}
.p-legal .legal h2{counter-increment:lg;display:flex;align-items:baseline;gap:14px;margin:clamp(40px,5vw,60px) 0 16px;padding-top:18px;border-top:var(--filet)}
.p-legal .legal h2::before{content:counter(lg,decimal-leading-zero);font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.15em;color:var(--perv-f)}
.p-legal .legal a{display:inline-block;padding-block:12px;margin-block:-12px}
.p-legal .legal dl{padding-left:0}
/* tailles des réserves (tablette) : sticker au repos + marges de sécurité */
.ih--xp .ih-room{--room-w:118px;--room-h:150px}
.ih--pj .ih-room{--room-w:186px;--room-h:132px}
.ih--legal .ih-room{--room-w:160px;--room-h:120px}
@media (min-width:701px) and (max-width:1080px){.ih--xp .ih-t{font-size:min(var(--fs-h1),9.3vw)}}
@media (max-width:700px){.ih--case .ih-room{display:block;margin:0 0 -14px auto;--room-w:132px;--room-h:100px}}