/* Projets : vitrines et avant/après (v231) — chargé uniquement sur la page Projets et les études de cas */
.kpi{container-type:inline-size;align-content:start}
.kpi strong{font-size:clamp(1.6rem,15cqi,3rem);overflow-wrap:anywhere}
.kpi span{overflow-wrap:break-word}

/* ---------- fonds unis de la palette, sans étoiles ---------- */
.st-iris{--st:linear-gradient(145deg,#2f2596 0%,#5a4de6 52%,#8a7cf6 100%)}
.st-lagoon{--st:linear-gradient(145deg,#173f8a 0%,#2b86c6 55%,#55c9e8 100%)}
.st-rose{--st:linear-gradient(145deg,#7d2257 0%,#c93f72 55%,#ee7487 100%)}
.st-sun{--st:linear-gradient(145deg,#b5363f 0%,#e2683f 52%,#f3b552 100%)}
.st-orchid{--st:linear-gradient(145deg,#33176b 0%,#7d3cae 55%,#bb5aac 100%)}
.st-night{--st:linear-gradient(145deg,#07051a 0%,#17113a 60%,#2b2066 100%)}
.st{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:var(--st)!important;container-type:inline-size}
.st::before,.st::after{content:none!important;display:none!important}
.st-glow{position:absolute;z-index:-1;top:-38%;right:-18%;width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.26),rgba(255,255,255,0) 64%);transition:transform 1.1s var(--ease)}

/* ---------- cartes de la page Projets ---------- */
.pj-art.st{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:1rem;padding:clamp(1.3rem,6cqi,2.2rem);aspect-ratio:16/10}
.pj-art.st img{max-width:none;max-height:none;transform:none!important}
.st-logo img{display:block;height:clamp(22px,8cqi,34px);width:auto;max-width:min(78%,15rem);object-fit:contain;object-position:left center}
.st-center{justify-content:center!important;align-items:center!important}
.st-center .st-logo img{height:clamp(30px,11cqi,52px);max-width:min(80%,19rem);object-position:center}
.st-center .pj-initial{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:clamp(1.6rem,10cqi,2.6rem);color:#fff}
.st-fig{display:grid;gap:.35rem;line-height:1;max-width:100%}
.st-fig b{font-family:var(--display);font-stretch:125%;font-weight:850;font-size:clamp(2.1rem,15cqi,4.4rem);letter-spacing:-.01em;white-space:nowrap;color:#fff}
.st-fig small{font-size:clamp(.85rem,3.6cqi,1rem);font-weight:600;line-height:1.35;color:rgba(255,255,255,.86)}
.st-was{font-family:var(--display);font-stretch:112%;font-weight:700;font-size:clamp(1rem,5.2cqi,1.4rem);color:rgba(255,255,255,.72)}
.st-was i{font-style:normal;margin:0 .35em;opacity:.8}
.pj-card:hover .st-glow,.pj-card:focus-visible .st-glow{transform:translate(-10%,8%) scale(1.1)}
/* capture du site dans une fenêtre de navigateur */
.st-shot{position:absolute;z-index:0;right:-7%;bottom:-16%;width:74%;aspect-ratio:16/10.6;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 34px 60px -22px rgba(7,5,26,.6),0 0 0 1px rgba(255,255,255,.3);transform:rotate(-4deg);transition:transform 1s var(--ease)}
.st-shot::before{content:"";position:absolute;inset:0 0 auto;height:7%;background:#efedf7;border-bottom:1px solid #dcd8ea}
.st-shot::after{content:"";position:absolute;top:2.4%;left:3%;width:2.2%;aspect-ratio:1;border-radius:50%;background:#ff6b6b;box-shadow:160% 0 0 #f6c35b,320% 0 0 #49c98a}
.st-shot i{position:absolute;inset:7% 0 0;background-size:cover;background-position:top center}
.pj-card:hover .st-shot,.pj-card:focus-visible .st-shot{transform:rotate(-2deg) translateY(-5%)}
.st-has-shot .st-fig{position:relative;z-index:1}

/* ---------- bandeau « Des résultats mesurés » ---------- */
.pj-results{margin:clamp(2.6rem,5vw,4rem) 0 clamp(3.2rem,6vw,5rem)}
.pj-results .kpis{grid-template-columns:repeat(auto-fit,minmax(min(100%,14.5rem),1fr));gap:clamp(2rem,3.4vw,2.8rem) clamp(1.4rem,3vw,2.4rem);margin:clamp(1.4rem,3vw,2rem) 0 1.6rem}
.pj-results .kpi{position:relative;background:none;border:0;border-radius:0;padding:1.15rem 0 0;gap:.7rem}
.pj-results .kpi::before{content:"";position:absolute;inset:0 0 auto;height:3px;border-radius:3px;background:var(--grad);transform-origin:left;transform:scaleX(.18);transition:transform 1.3s var(--ease)}
.pj-results .kpi.is-in::before{transform:scaleX(1)}
.pj-results .kpi strong{font-size:clamp(2.1rem,19cqi,3.8rem);white-space:nowrap;overflow-wrap:normal}
.pj-results .kpi span{font-size:var(--t-small);line-height:1.55}

/* ---------- grand visuel des études de cas ---------- */
.case-visual.st{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:clamp(1.6rem,5cqi,3rem)}
.case-visual.st .st-logo img{height:clamp(30px,6cqi,48px)}
.case-visual.st .st-fig b{font-size:clamp(2.8rem,12cqi,6.4rem)}
.case-visual.st .st-fig small{font-size:clamp(.95rem,2.4cqi,1.15rem)}

/* ---------- section « Avant / après » ---------- */
.ba{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16.5rem),1fr));gap:clamp(1rem,2.4vw,1.5rem);margin:1.5rem 0 1.1rem}
.ba-item{margin:0;border-radius:var(--r-md);padding:clamp(1.3rem,6cqi,1.9rem);display:grid;gap:1.05rem;align-content:start}
.ba-cap{margin:0;font-weight:700;font-size:1rem;line-height:1.4;color:#fff}
.ba-row{display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:.8rem;row-gap:.5rem}
.ba-k{font-size:.85rem;font-weight:600;color:rgba(255,255,255,.8)}
.ba-row b{font-family:var(--display);font-stretch:125%;font-weight:850;line-height:1;white-space:nowrap}
.ba-before b{font-size:clamp(1.25rem,9cqi,1.9rem);color:rgba(255,255,255,.72)}
.ba-after b{font-size:clamp(1.9rem,15cqi,3.3rem);color:#fff}
.ba-bar{grid-column:1/-1;display:block;height:8px;border-radius:8px;background:rgba(255,255,255,.16);position:relative;overflow:hidden}
.ba-bar::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--v) * 100%);min-width:6px;border-radius:inherit;background:rgba(255,255,255,.5);transform-origin:left;transform:scaleX(0);transition:transform 1.5s var(--ease) .15s}
.ba-after .ba-bar::after{background:#fff;transition-delay:.45s}
.ba-item.is-in .ba-bar::after{transform:scaleX(1)}
.ba-note{margin:0;font-size:.9rem;line-height:1.5;color:rgba(255,255,255,.86)}
.ba-chart{margin:0;border-radius:var(--r-md);padding:clamp(1.3rem,4cqi,2rem);grid-column:1/-1}
.ba-chart svg{display:block;width:100%;height:auto;overflow:visible}
.ba-chart .bar{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform 1.3s var(--ease)}
.ba-chart .bar.y26{transition-delay:.35s}
.ba-chart.is-in .bar{transform:scaleY(1)}
.ba-chart text{font-family:var(--body);fill:#fff}
.ba-legend{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin:0 0 1rem;font-size:.9rem;color:rgba(255,255,255,.9)}
.ba-legend i{display:inline-block;width:.8rem;height:.8rem;border-radius:3px;margin-right:.45rem;vertical-align:-.05rem}
@media (prefers-reduced-motion:reduce){
  .ba-bar::after,.ba-chart .bar,.pj-results .kpi::before{transform:none!important;transition:none!important}
  .st-shot,.st-glow{transition:none}
}
.ba-txt .ba-row b{white-space:normal;text-align:right;font-size:clamp(1.15rem,7.4cqi,1.75rem);line-height:1.15}
.ba-txt .ba-before b{font-size:clamp(1rem,5.8cqi,1.3rem)}
/* v231b : logos plus lisibles, bulles proportionnelles, fusion de sites */
.st-logo img{height:clamp(26px,9cqi,40px)}
.case-visual.st img{max-width:min(60%,18rem);max-height:none}
.case-visual.st .st-logo img{height:clamp(32px,6.5cqi,54px)}
.st-bub{position:absolute;z-index:0;right:clamp(1.4rem,6cqi,4rem);bottom:12%;display:flex;align-items:flex-end;gap:clamp(.6rem,2cqi,1.4rem)}
.st-bub .bb{--d:min(34cqi,15rem);position:relative;display:grid;place-items:end center;width:calc(var(--d) * var(--r,1));aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95),rgba(255,255,255,.55) 55%,rgba(255,255,255,.3));box-shadow:0 18px 40px -16px rgba(7,5,26,.45);transform:scale(.2);opacity:0;transition:transform 1.4s var(--ease),opacity .6s}
.st-bub .b1{background:rgba(255,255,255,.28);box-shadow:none;border:1px solid rgba(255,255,255,.55)}
.st-bub .b2{transition-delay:.35s}
.st-bub .bb em{position:absolute;top:calc(100% + .5rem);font-style:normal;font-size:.85rem;font-weight:700;color:rgba(255,255,255,.9);white-space:nowrap}
.case-visual.in .st-bub .bb,.case-visual.is-in .st-bub .bb{transform:none;opacity:1}
.st-merge{position:absolute;z-index:0;right:clamp(1.4rem,6cqi,4rem);top:50%;translate:0 -50%;display:grid;grid-template-columns:repeat(3,auto);gap:.7rem;align-items:center}
.st-merge i{width:clamp(14px,3.4cqi,26px);aspect-ratio:1;border-radius:6px;background:rgba(255,255,255,.35);transition:transform 1.2s var(--ease),opacity 1.2s}
.st-merge b{grid-column:1/-1;justify-self:center;width:clamp(54px,11cqi,96px);aspect-ratio:1;border-radius:16px;background:#fff;margin-top:.6rem;box-shadow:0 18px 40px -16px rgba(7,5,26,.45)}
.case-visual:not(.in) .st-merge i{transform:translateY(-8px);opacity:.2}
.ba{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
@media (max-width:640px){.st-bub,.st-merge{display:none}}
@media (prefers-reduced-motion:reduce){.st-bub .bb{transform:none;opacity:1;transition:none}}
/* ---------- curseur avant / après (refontes de sites) ---------- */
.ba-slide{position:relative;margin:1.5rem 0 1.2rem;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/10;background:#0c0923;box-shadow:0 30px 60px -30px rgba(7,5,26,.45);--pos:50%;isolation:isolate}
.ba-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.ba-slide .ba-old{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-slide .ba-line{position:absolute;z-index:2;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(7,5,26,.15);pointer-events:none}
.ba-slide input{position:absolute;z-index:4;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba-slide .ba-knob{position:absolute;z-index:3;top:50%;left:var(--pos);width:3.2rem;height:3.2rem;margin:-1.6rem 0 0 -1.6rem;border-radius:50%;background:#fff;color:#07051a;display:grid;place-items:center;box-shadow:0 10px 26px -8px rgba(7,5,26,.5);pointer-events:none}
.ba-slide .ba-knob svg{width:1.5rem;height:1.5rem}
.ba-slide input:focus-visible~.ba-knob{outline:3px solid #6d5ff0;outline-offset:3px}
.ba-tag{position:absolute;z-index:2;top:1rem;padding:.4rem .85rem;border-radius:999px;font-size:.85rem;font-weight:700;background:rgba(7,5,26,.74);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ba-tag.b{left:1rem}.ba-tag.a{right:1rem}
/* téléphone posé devant la fenêtre du site */
.st-phone{position:absolute;z-index:1;right:5%;bottom:-6%;width:15%;aspect-ratio:390/844;border-radius:22px;background:#0c0923;padding:4px;box-shadow:0 30px 60px -20px rgba(7,5,26,.65);transform:rotate(4deg);transition:transform 1s var(--ease)}
.st-phone i{display:block;width:100%;height:100%;border-radius:18px;background-size:cover;background-position:top center}
.case-visual.st .st-shot{width:54%;right:-2%;bottom:-20%}
.pj-card:hover .st-phone{transform:rotate(2deg) translateY(-6%)}
@media (max-width:640px){.case-visual.st .st-shot{width:62%;bottom:-24%}.st-phone{display:none}}
.st-logo img[src*="cheffe-megh"]{height:clamp(56px,11cqi,92px)}
.ba:has(> .ba-txt){grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr))}
.pj-art.st-has-shot .st-shot{width:60%;right:-9%;bottom:-18%}
.pj-art.st-has-shot .st-fig{max-width:40%}
.pj-art.st-has-shot .st-fig b{font-size:clamp(2rem,13cqi,3.6rem)}
/* v231c : logos nettement plus grands */
.pj-art.st .st-logo img{height:clamp(48px,16cqi,84px);max-width:82%}
.st-center .st-logo img{height:clamp(58px,20cqi,104px);max-width:84%}
.case-visual.st .st-logo img{height:clamp(60px,10.5cqi,116px);max-width:58%}
.st-logo img[src*="cheffe-megh"]{height:clamp(88px,18cqi,148px)}
.pj-art.st-has-shot .st-logo img{max-width:42%}
/* chiffres en couleur, plus de noir sur fond clair */
.pj-results .kpi strong,.content-grid .kpis .kpi strong{background-image:var(--kg,linear-gradient(95deg,#e8577a,#a94fc4));-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent!important}
.pj-results .kpi:nth-child(6n+1),.kpis .kpi:nth-child(6n+1){--kg:linear-gradient(95deg,#ef5f7b 0%,#b04bbf 100%)}
.pj-results .kpi:nth-child(6n+2),.kpis .kpi:nth-child(6n+2){--kg:linear-gradient(95deg,#a94fc4 0%,#5a4de6 100%)}
.pj-results .kpi:nth-child(6n+3),.kpis .kpi:nth-child(6n+3){--kg:linear-gradient(95deg,#5a4de6 0%,#2b86c6 100%)}
.pj-results .kpi:nth-child(6n+4),.kpis .kpi:nth-child(6n+4){--kg:linear-gradient(95deg,#e2683f 0%,#d64877 100%)}
.pj-results .kpi:nth-child(6n+5),.kpis .kpi:nth-child(6n+5){--kg:linear-gradient(95deg,#7d3cae 0%,#e8577a 100%)}
.pj-results .kpi:nth-child(6n+6),.kpis .kpi:nth-child(6n+6){--kg:linear-gradient(95deg,#2f2596 0%,#6d5ff0 100%)}
.pj-results .kpi::before{height:4px}
/* ---------- planètes avant / après : la petite devient grande ---------- */
.pl-ba{position:absolute;z-index:0;right:clamp(1.2rem,5cqi,3.6rem);bottom:14%;display:flex;align-items:flex-end;gap:clamp(.8rem,3cqi,2rem);--D:min(36cqi,16rem);pointer-events:none}
.pl-ba.mini{--D:min(30cqi,9.5rem);right:clamp(.9rem,4cqi,1.6rem);bottom:16%}
.pl{position:relative;display:grid;justify-items:center}
.pl i{display:block;width:calc(var(--D) * var(--r,1));aspect-ratio:1;border-radius:50%;position:relative;
  background:radial-gradient(circle at 31% 27%,rgba(255,255,255,.95) 0,rgba(255,255,255,.35) 9%,rgba(255,255,255,0) 32%),
    radial-gradient(circle at 74% 78%,rgba(7,5,26,.62),rgba(7,5,26,0) 58%),
    repeating-linear-gradient(-18deg,rgba(255,255,255,.07) 0 7%,rgba(255,255,255,0) 7% 15%),
    linear-gradient(140deg,#f6c35b 0%,#e8577a 34%,#a94fc4 64%,#6d5ff0 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.18),0 0 calc(var(--D) * .35) rgba(255,255,255,.18),inset -8px -12px 26px rgba(7,5,26,.35)}
.pl-after i::after{content:"";position:absolute;inset:38% -26%;border-radius:50%;border:2px solid rgba(255,255,255,.55);transform:rotate(-16deg);box-shadow:0 0 18px rgba(255,255,255,.25);clip-path:polygon(0 0,100% 0,100% 46%,0 46%,0 100%,100% 100%,100% 54%,0 54%)}
.pl-before i{background:radial-gradient(circle at 31% 27%,rgba(255,255,255,.85) 0,rgba(255,255,255,.3) 10%,rgba(255,255,255,0) 34%),radial-gradient(circle at 74% 78%,rgba(7,5,26,.55),rgba(7,5,26,0) 58%),linear-gradient(140deg,#cfd8ff,#8f9cff 55%,#5a4de6);opacity:.9}
.pl em{margin-top:.55rem;font-style:normal;font-size:.82rem;font-weight:700;line-height:1.25;color:rgba(255,255,255,.92);text-align:center;white-space:nowrap}
.pl em b{display:block;font-family:var(--display);font-stretch:118%;font-size:clamp(.95rem,4cqi,1.25rem);font-weight:800}
.mini .pl em{font-size:.72rem}.mini .pl em b{font-size:.92rem}
.pl-after i{transform:scale(var(--r0,.3));transition:transform 1.9s cubic-bezier(.16,.84,.22,1) .35s}
.pl-before i{transform:scale(.4);opacity:0;transition:transform .9s var(--ease),opacity .6s}
.pl-ba.is-in .pl-after i{transform:scale(1)}
.pl-ba.is-in .pl-before i{transform:scale(1);opacity:.9}
.pl-ba.is-in .pl-after{animation:pl-float 7s ease-in-out 2.4s infinite}
@keyframes pl-float{50%{transform:translateY(-6px)}}
@media (max-width:640px){.case-visual .pl-ba{--D:min(30cqi,8rem);bottom:10%}}
/* ---------- position Google : le point remonte l'échelle ---------- */
.rk{position:relative;height:12.5rem;margin:.2rem 0 .4rem 3.2rem;border-left:2px solid rgba(255,255,255,.35)}
.rk-tick{position:absolute;left:-3.1rem;width:2.6rem;text-align:right;font-size:.75rem;font-weight:600;color:rgba(255,255,255,.7);transform:translateY(-50%)}
.rk-tick::after{content:"";position:absolute;right:-.62rem;top:50%;width:.4rem;height:2px;background:rgba(255,255,255,.35)}
.rk-dot,.rk-ghost{position:absolute;left:-.62rem;width:1.1rem;height:1.1rem;border-radius:50%;transform:translateY(-50%)}
.rk-ghost{top:calc((var(--from) - 1) / 19 * 100%);border:2px solid rgba(255,255,255,.7)}
.rk-dot{top:calc((var(--from) - 1) / 19 * 100%);background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.18),0 0 24px rgba(255,255,255,.6);transition:top 1.8s cubic-bezier(.16,.84,.22,1) .3s}
.ba-rank.is-in .rk-dot{top:calc((var(--to) - 1) / 19 * 100%)}
.rk-lab{position:absolute;left:1.4rem;transform:translateY(-50%);font-size:.85rem;font-weight:700;white-space:nowrap}
.rk-lab b{font-family:var(--display);font-stretch:118%;font-size:1.25rem;margin-left:.35rem}
.rk-lab.b{top:calc((var(--from) - 1) / 19 * 100%);color:rgba(255,255,255,.75)}
.rk-lab.a{top:calc((var(--to) - 1) / 19 * 100%);color:#fff;opacity:0;transition:opacity .6s 1.7s}
.ba-rank.is-in .rk-lab.a{opacity:1}
/* ---------- demandes de devis : un mois en cases ---------- */
.cal-row{display:grid;gap:.5rem}
.cal{display:grid;grid-template-columns:repeat(15,1fr);gap:4px}
.cal i{aspect-ratio:1;border-radius:4px;background:rgba(255,255,255,.14)}
.cal i.on{background:rgba(255,255,255,.14);transition:background .35s,transform .35s;transition-delay:calc(var(--k) * 70ms + .3s)}
.ba-cal.is-in .cal i.on{background:#fff;transform:scale(1.06)}
.cal-row .ba-k b{font-family:var(--display);font-stretch:118%;font-size:1.05rem;margin-left:.35rem;color:#fff}
@media (prefers-reduced-motion:reduce){.pl-after i,.pl-before i{transform:none;opacity:1;transition:none}.pl-ba.is-in .pl-after{animation:none}.rk-dot,.cal i.on{transition:none}}
/* v231d : les planètes prennent leur place dans la grille du visuel, sans chevaucher le chiffre */
.case-visual.st:has(> .pl-ba){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;grid-template-areas:"logo pl" "fig pl";align-items:start;gap:1.4rem clamp(1.2rem,3.5vw,2.8rem);overflow:clip}
.case-visual.st:has(> .pl-ba) > .st-logo{grid-area:logo}
.case-visual.st:has(> .pl-ba) > .st-fig{grid-area:fig;align-self:end}
.case-visual.st:has(> .pl-ba) .st-fig b{font-size:clamp(2.3rem,9cqi,5rem)}
.case-visual.st:has(> .pl-ba) > .pl-ba{grid-area:pl;position:relative;inset:auto;align-self:end;justify-self:end;--D:min(25cqi,12.5rem);gap:clamp(.9rem,3cqi,1.8rem)}
.case-visual.st:has(> .pl-ba) .st-logo img{max-width:min(46cqi,20rem)}
@media (max-width:760px){
  .case-visual.st:has(> .pl-ba){grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"logo" "pl" "fig";aspect-ratio:auto;row-gap:1.6rem}
  .case-visual.st:has(> .pl-ba) > .pl-ba{justify-self:center;align-self:center;--D:min(36cqi,10rem);bottom:auto}
  .case-visual.st:has(> .pl-ba) .st-fig b{font-size:clamp(2.2rem,14cqi,3.6rem)}
  .case-visual.st:has(> .pl-ba) .st-logo img{max-width:70cqi}
}
.pl em b{white-space:nowrap}
/* cartes : logo et planètes en haut, chiffre en bas sur toute la largeur, légendes masquées */
.pj-art.st:has(> .pl-ba){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;grid-template-areas:"logo pl" "fig fig";align-items:start;column-gap:3%}
.pj-art.st:has(> .pl-ba) > .st-logo{grid-area:logo}
.pj-art.st:has(> .pl-ba) > .st-logo img{max-width:46cqi}
.pj-art.st:has(> .pl-ba) > .st-fig{grid-area:fig;align-self:end}
.pj-art.st:has(> .pl-ba) .st-fig b{font-size:clamp(2rem,13cqi,3.8rem)}
.pj-art.st:has(> .pl-ba) > .pl-ba{grid-area:pl;position:relative;inset:auto;align-items:center;gap:0;--D:21cqi}
.pl-ba.mini .pl em{display:none}
.pl-ba.mini .pl-before{margin-right:calc(var(--D) * -.1);z-index:0}
.pl-ba.mini .pl-after{z-index:1}
.pl-ba.mini .pl-after i::after{inset:40% -20%}
.case-visual.st:has(> .pl-ba),.pj-art.st:has(> .pl-ba){justify-items:start}
/* logos presque carrés (icône au-dessus du nom) : plus hauts pour peser autant que les logos horizontaux */
.pj-art.st .st-logo img[src*="walbeez"]{height:clamp(66px,25cqi,128px)}
.case-visual.st .st-logo img[src*="walbeez"]{height:clamp(84px,16cqi,170px)}
.st-center .st-logo img[src*="printpunk"],.st-center .st-logo img[src*="la-plantation"]{height:clamp(76px,28cqi,140px)}
/* v232 : scène 3D de nuit en plein cadre dans la carte (le client repère son métier d'un coup d'œil) */
.pj-art.st-has-scene{background:#07051a!important}
.pj-art.st-has-scene .st-scene{position:absolute;inset:0;z-index:-2;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:62% 50%;transform:scale(1.06);opacity:0;transition:transform 1.6s var(--ease),opacity 1s}
.pj-art.st-has-scene .st-scene.is-in{transform:scale(1);opacity:1}
.pj-card:hover .st-scene.is-in,.pj-card:focus-visible .st-scene.is-in{transform:scale(1.04)}
.pj-art.st-has-scene .st-voile{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,5,26,.86) 0%,rgba(7,5,26,.62) 34%,rgba(7,5,26,.12) 62%,rgba(7,5,26,0) 78%),linear-gradient(0deg,rgba(7,5,26,.55) 0%,rgba(7,5,26,0) 38%)}
.pj-art.st-has-scene .st-fig{position:relative;z-index:1;max-width:58%}
.pj-art.st-has-scene .st-fig b{font-size:clamp(1.9rem,12cqi,3.5rem);text-shadow:0 2px 18px rgba(7,5,26,.5)}
.pj-art.st-has-scene .st-logo{position:relative;z-index:1}
.pj-art.st-has-scene .st-logo img{max-width:50cqi;filter:drop-shadow(0 2px 10px rgba(7,5,26,.45))}
@media (prefers-reduced-motion:reduce){.pj-art.st-has-scene .st-scene{transform:none;opacity:1;transition:none}}
.pj-art.st-has-scene{overflow:clip}
.pj-art.st-has-scene.st-has-shot .st-fig{max-width:40%}
.pj-art.st-has-scene.st-has-shot .st-fig b{font-size:clamp(2rem,13cqi,3.6rem)}
@media (max-width:900px){.pj-art.st-has-scene .st-fig small{font-size:clamp(.78rem,3.3cqi,.95rem)}}
/* cartes sans étude de cas : logo en haut à gauche, la scène reste visible */
.pj-art.st-has-scene.st-center{justify-content:flex-start!important;align-items:flex-start!important}
.pj-art.st-has-scene.st-center .st-logo img{height:clamp(44px,14cqi,76px);max-width:50cqi;object-position:left center}
.pj-art.st-has-scene.st-center .st-logo img[src*="printpunk"],.pj-art.st-has-scene.st-center .st-logo img[src*="la-plantation"]{height:clamp(62px,21cqi,108px)}
.pj-art.st-has-scene.st-center .pj-initial{display:block;text-align:left;font-size:clamp(1.5rem,9cqi,2.4rem);text-shadow:0 2px 14px rgba(7,5,26,.5)}
/* v232 : grand visuel des nouvelles études de cas = scène de nuit + logo + chiffre clé */
.case-visual.st-has-scene{aspect-ratio:16/9;background:#07051a!important;overflow:clip;justify-content:space-between}
.case-visual.st-has-scene .st-scene{position:absolute;inset:0;z-index:-2;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:62% 50%;transform:scale(1.04);transition:transform 1.8s var(--ease)}
.case-visual.st-has-scene .st-scene.is-in{transform:scale(1)}
.case-visual.st-has-scene .st-voile{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,5,26,.84) 0%,rgba(7,5,26,.55) 32%,rgba(7,5,26,.08) 60%,rgba(7,5,26,0) 76%),linear-gradient(0deg,rgba(7,5,26,.5) 0%,rgba(7,5,26,0) 40%)}
.case-visual.st-has-scene .st-logo,.case-visual.st-has-scene .st-fig{position:relative;z-index:1}
.case-visual.st-has-scene .st-fig{max-width:56%}
.case-visual.st-has-scene .st-fig b{text-shadow:0 2px 22px rgba(7,5,26,.5)}
.case-visual.st-has-scene .st-logo img{max-width:min(46cqi,20rem);filter:drop-shadow(0 2px 12px rgba(7,5,26,.45))}
@media (max-width:640px){.case-visual.st-has-scene{aspect-ratio:4/3}.case-visual.st-has-scene .st-fig{max-width:70%}}
.nw{white-space:nowrap}
/* nom en toutes lettres quand le client n'a pas de logo fourni */
.st-mot{display:block;font-family:var(--display);font-stretch:125%;font-weight:850;font-size:clamp(1.25rem,7.5cqi,2.3rem);line-height:1;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 14px rgba(7,5,26,.45)}
@media (prefers-reduced-motion:reduce){.case-visual.st-has-scene .st-scene{transform:none;transition:none}}
/* v232 : captures du site client dans une étude de cas : fenêtre de navigateur et téléphone */
.pj-ecrans,.pj-capture{margin:2.2rem 0 2.4rem}
.pj-ecr{position:relative;padding:0 11% 10% 0}
.pj-nav{position:relative;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 34px 64px -30px rgba(7,5,26,.55),0 0 0 1px rgba(7,5,26,.08)}
.pj-nav::before{content:"";display:block;height:28px;background:#efedf7;border-bottom:1px solid #dcd8ea}
.pj-nav::after{content:"";position:absolute;top:10px;left:14px;width:9px;height:9px;border-radius:50%;background:#ff6b6b;box-shadow:15px 0 0 #f6c35b,30px 0 0 #49c98a}
.pj-nav img{display:block;width:100%;height:auto;margin:0;border-radius:0;box-shadow:none}
.pj-tel{position:absolute;right:0;bottom:0;width:22%;border-radius:24px;background:#0c0923;padding:5px;box-shadow:0 30px 60px -20px rgba(7,5,26,.65)}
.pj-tel img{display:block;width:100%;height:auto;margin:0;border-radius:19px}
.pj-ecrans figcaption,.pj-capture figcaption{margin-top:.8rem;font-size:var(--t-small,.9rem);color:var(--muted)}
@media (max-width:640px){.pj-ecr{padding:0 8% 12% 0}.pj-tel{width:26%;border-radius:16px;padding:3px}.pj-tel img{border-radius:13px}.pj-nav::before{height:20px}.pj-nav::after{top:7px;left:10px;width:7px;height:7px;box-shadow:11px 0 0 #f6c35b,22px 0 0 #49c98a}}
/* v234 : mosaïque de livrables (carrousels LinkedIn, visuels produits) */
.pj-mosaique{margin:2.2rem 0 2.4rem}
.pj-mos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.55rem,1.4vw,.9rem)}
.pj-mosaique.q4 .pj-mos{grid-template-columns:repeat(4,minmax(0,1fr))}
.pj-mos img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;margin:0;border-radius:12px;box-shadow:0 24px 44px -26px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.08)}
.pj-mosaique figcaption,.pj-campagne figcaption{margin-top:.8rem;font-size:var(--t-small,.9rem);color:var(--muted)}
@media (max-width:640px){.pj-mos,.pj-mosaique.q4 .pj-mos{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* v234 : extrait d'une structure Google Ads : un groupe d'annonces par marché, mots-clés, exclusions */
.pj-campagne{position:relative;margin:2.2rem 0 2.4rem;padding:clamp(1rem,2.4vw,1.5rem);border-radius:22px;color:#fff;box-shadow:0 34px 64px -30px rgba(7,5,26,.6);
  background:radial-gradient(1.2px 1.2px at 12% 18%,rgba(255,255,255,.75),transparent 60%),radial-gradient(1px 1px at 38% 8%,rgba(255,255,255,.6),transparent 60%),radial-gradient(1.2px 1.2px at 71% 14%,rgba(255,255,255,.7),transparent 60%),radial-gradient(1px 1px at 88% 46%,rgba(255,255,255,.55),transparent 60%),radial-gradient(1px 1px at 54% 92%,rgba(255,255,255,.5),transparent 60%),
  radial-gradient(70% 90% at 0 0,rgba(95,211,238,.2),transparent 62%),radial-gradient(70% 90% at 100% 100%,rgba(232,87,122,.22),transparent 62%),radial-gradient(50% 70% at 100% 0,rgba(246,195,91,.13),transparent 62%),#0c0923}
.pj-groupes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.6rem,1.6vw,.9rem)}
.pj-groupe,.pj-exclus{padding:1rem 1.1rem 1.1rem;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.055)}
.pj-exclus{margin-top:clamp(.6rem,1.6vw,.9rem)}
.prose .pj-campagne p.pj-g-t{margin:0;max-width:none;font-family:var(--display);font-stretch:115%;font-weight:800;font-size:1rem;line-height:1.3;color:#fff}
.prose .pj-campagne p.pj-g-s{margin:.3rem 0 .8rem;max-width:none;font-size:.86rem;line-height:1.45;color:rgba(255,255,255,.7)}
.prose .pj-exclus p.pj-g-t{margin-bottom:.75rem}
.prose .pj-campagne ul.case-chips{margin:0;padding:0;max-width:none;gap:.4rem}
.prose .pj-campagne ul.case-chips li{margin:0;padding:.3rem .72rem;font-size:.8rem;line-height:1.3;color:#fff;border:1px solid rgba(95,211,238,.6);background:rgba(95,211,238,.15)}
.prose .pj-campagne .pj-groupe + .pj-groupe ul.case-chips li{border-color:rgba(246,195,91,.65);background:rgba(246,195,91,.15)}
.prose .pj-campagne .pj-exclus ul.case-chips li{color:rgba(255,255,255,.8);border-color:rgba(232,87,122,.65);background:rgba(232,87,122,.15);text-decoration:line-through;text-decoration-color:#ff7c9a;text-decoration-thickness:2px}
.prose .pj-campagne figcaption{margin-top:1rem;color:rgba(255,255,255,.66)}
@media (max-width:640px){.pj-groupes{grid-template-columns:1fr}}