/* Pages « Case » : même univers que le site (beige, bordeaux/orange, Hanken Grotesk) */
.case-page{background:var(--bg)}
.ch{position:relative;min-height:100vh;padding:150px var(--pad) 90px;display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;overflow:hidden}
.ch-bg{position:absolute;inset:-10%;background-size:cover;background-position:center;filter:blur(90px) saturate(1.3);opacity:.38;transform:scale(1.2);z-index:0}
.ch-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.5),var(--bg))}
.ch-copy,.ch-card{position:relative;z-index:1}
.ch-back{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--ink2);margin-bottom:42px;transition:color .2s}
.ch-back i{font-style:normal;transition:transform .3s}
.ch-back:hover{color:var(--ink)}.ch-back:hover i{transform:translateX(-5px)}
.ch h1{font-size:clamp(54px,9vw,148px);letter-spacing:-.055em;line-height:.92;margin-bottom:28px;font-weight:500}
.ch-project{font-size:clamp(18px,1.7vw,26px);color:var(--ink2);max-width:640px;letter-spacing:-.01em;line-height:1.35}
.ch-chips{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 44px}
.ch-chips span{border:1px solid rgba(21,20,19,.22);border-radius:99px;padding:9px 18px;font-size:14px;background:rgba(255,255,255,.4);backdrop-filter:blur(6px)}
.ch-chips span:first-child{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.ch-card{justify-self:center;width:min(100%,430px);aspect-ratio:9/16;border-radius:30px;overflow:hidden;background:#0a0b0d;box-shadow:0 60px 90px -40px rgba(40,20,10,.55);transform:rotate(2deg);transition:transform .8s cubic-bezier(.2,.9,.3,1)}
.ch-card:hover{transform:rotate(0) translateY(-8px)}
.ch-card .img{position:absolute;inset:0;background-size:cover;background-position:center}
.ch-card::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 70% at 50% 44%,transparent 40%,rgba(0,0,0,.45) 100%);pointer-events:none}

.ch-facts{display:grid;grid-template-columns:repeat(4,1fr);margin:0 var(--pad);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ch-facts div{padding:30px 24px 30px 0;border-right:1px solid var(--line)}
.ch-facts div+div{padding-left:24px}.ch-facts div:last-child{border-right:0}
.ch-facts small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.ch-facts b{font-weight:500;font-size:clamp(20px,2vw,30px);letter-spacing:-.03em}

.ch-obj,.ch-gal,.ch-more{padding:130px var(--pad) 0}
.ch-obj ol{counter-reset:o}
.ch-obj li{counter-increment:o;display:grid;grid-template-columns:70px 1fr;gap:20px;align-items:baseline;padding:30px 0;border-top:1px solid var(--line);position:relative;transition:padding .45s}
.ch-obj li:last-child{border-bottom:1px solid var(--line)}
.ch-obj li::before{content:counter(o,decimal-leading-zero);font-family:var(--mono);font-size:13px;color:var(--accent)}
.ch-obj li span{font-size:clamp(28px,4.6vw,68px);letter-spacing:-.045em;line-height:1.02;font-weight:500}
.ch-obj li:hover{padding-left:20px}

.gal{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.gal figure{position:relative;overflow:hidden;border-radius:22px;background:var(--card);cursor:zoom-in;margin:0;min-height:260px}
.gal figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.gal figure:hover img{transform:scale(1.05)}
.gal figure:nth-child(1){grid-column:span 4;aspect-ratio:16/10}
.gal figure:nth-child(2){grid-column:span 2}
.gal figure:nth-child(3){grid-column:span 3;aspect-ratio:4/3}
.gal figure:nth-child(4){grid-column:span 3;aspect-ratio:4/3}
.gal figure:nth-child(5){grid-column:span 6;aspect-ratio:21/9}
.gal.n4 figure:nth-child(4){grid-column:span 3}
.gal.n3 figure:nth-child(3){grid-column:span 6;aspect-ratio:21/9}
.rv{opacity:0;transform:translateY(40px);transition:opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

.ch-more-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px}
.ch-more-head .eyebrow{margin:0}
.more-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mc{position:relative;aspect-ratio:9/14;border-radius:22px;overflow:hidden;background:#0a0b0d;display:block}
.mc i{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.mc:hover i{transform:scale(1.06)}
.mc::after{content:attr(data-name);position:absolute;left:16px;right:16px;bottom:14px;color:#ffffff;font-weight:600;font-size:15px;letter-spacing:-.01em;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.mc::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.75));z-index:1}

.ch-end{margin:150px var(--pad) 120px;text-align:center;padding:100px 20px;border-radius:34px;background:radial-gradient(60% 80% at 50% 0,rgba(99,91,255,.28),transparent 70%),var(--dk);color:var(--paper)}
.ch-end h2{font-size:clamp(40px,6vw,100px);margin-bottom:46px}
.ch-end em{font-style:normal;color:var(--amber)}
.ch-end .btn{background:var(--paper);color:var(--ink)}.ch-end .btn::before{background:var(--kaki)}

.lightbox{position:fixed;inset:0;z-index:300;background:rgba(14,12,11,.92);display:grid;place-items:center;backdrop-filter:blur(8px)}
.lightbox[hidden]{display:none}
.lightbox img{max-width:90vw;max-height:88vh;border-radius:14px;box-shadow:0 40px 80px rgba(0,0,0,.6)}
.lightbox button{position:absolute;top:22px;right:28px;background:none;border:0;color:#fff;font-size:44px;line-height:1;cursor:pointer}

@media(max-width:900px){
  .ch{grid-template-columns:1fr;padding-top:110px;gap:40px}
  .ch-card{width:min(78vw,320px);justify-self:start}
  .ch-facts{grid-template-columns:1fr 1fr}.ch-facts div:nth-child(2){border-right:0}.ch-facts div:nth-child(n+3){border-top:1px solid var(--line)}.ch-facts div:nth-child(3){padding-left:0}
  .gal{grid-template-columns:1fr 1fr}.gal figure{grid-column:span 2!important;aspect-ratio:4/3}
  .more-row{grid-template-columns:repeat(2,1fr)}
  .ch-obj li{grid-template-columns:44px 1fr}
}

/* aperçu interactif : tablette portrait + vraie application en iframe */
.ch-pv{padding:130px var(--pad) 0}
.pv-in{display:grid;grid-template-columns:1fr auto;gap:80px;align-items:center;background:linear-gradient(160deg,#ffffff,#e1e4ea);border-radius:34px;padding:70px 70px 70px 80px;overflow:hidden}
.pv-copy h2{font-size:clamp(38px,5vw,78px);margin-bottom:22px}
.pv-copy .lead{margin-bottom:30px}
.pv-copy em{font-style:normal;color:var(--accent)}
.pv-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.pv-tabs button{border:1px solid rgba(21,20,19,.28);background:transparent;border-radius:99px;padding:9px 18px;font-size:14px;cursor:pointer;transition:.25s}
.pv-tabs button:hover{border-color:var(--ink)}
.pv-tabs button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pv-tablet{width:min(400px,86vw);padding:9px;border-radius:20px;background:linear-gradient(160deg,#ffffff,#e1e4ea);box-shadow:0 0 0 1px rgba(21,20,19,.12),0 50px 80px -30px rgba(60,40,20,.55);transform:rotate(1.5deg);transition:transform .8s cubic-bezier(.2,.9,.3,1)}
.pv-tablet:hover{transform:none}
.pv-screen{position:relative;aspect-ratio:370/658;border-radius:10px;overflow:hidden;background:#000;box-shadow:0 0 0 2.5px #0a0b0d}
.pv-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.pv-load{position:absolute;inset:0;display:grid;place-items:center;background:#121010;color:#9aa0ac;font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;transition:opacity .5s;pointer-events:none}
.pv-load.off{opacity:0}
@media(max-width:900px){.pv-in{grid-template-columns:1fr;padding:40px 24px;gap:40px}.pv-tablet{justify-self:center;transform:none}}

.ch h1{overflow-wrap:anywhere;hyphens:auto;line-height:1.02}

/* « Autres références » : même sombritude que le carrousel, sans légende (le nom est dans l'image) */
.mc::after{display:none}
.mc::before{display:none}
.mc{aspect-ratio:9/16}
.mc.dim i{filter:brightness(.84) saturate(.92)}
.mc.dim::before{display:block;content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 20%,rgba(0,0,0,.18) 46%,rgba(0,0,0,.9) 100%),
  radial-gradient(ellipse 76% 68% at 50% 42%,rgba(0,0,0,0) 30%,rgba(0,0,0,.86) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 17%,#000 30%);mask-image:linear-gradient(180deg,transparent 0,transparent 17%,#000 30%)}

.ch-desc{margin-top:18px;max-width:600px;font-size:17px;color:var(--ink2);line-height:1.6}
/* grille galerie : les colonnes ne s'élargissent plus à cause du contenu (débordement horizontal sur mobile) */
.gal{grid-template-columns:repeat(6,minmax(0,1fr))}
.gal figure{min-width:0}
@media(max-width:900px){.gal{grid-template-columns:minmax(0,1fr)}.gal figure{grid-column:auto!important;min-height:0;aspect-ratio:4/3!important}}
.more-row{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.more-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Titre remplacé par le logo noir de la marque */
#chName.is-logo{font-size:0;line-height:0;margin:0 0 6px}
#chName.is-logo img{display:block;height:auto;width:auto;max-width:min(520px,80%);max-height:clamp(70px,11vw,150px);object-fit:contain}

/* chargement de l'aperçu : capture de l'app à la place du cadre noir */
.pv-load{background:#121010 center/cover no-repeat;font-size:0}
/* boutons de l'en-tête : « Essayer l'expérience » (si un aperçu existe) + « Un projet similaire ? » */
.ch-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ch-cta .btn[hidden]{display:none}
@media(max-width:900px){.ch-cta{flex-direction:column;align-items:stretch}.ch-cta .btn{justify-content:center;width:100%}}

/* chargement de l'aperçu : capture de l'app en fond, voile clair, logo Treeosk et roue animée */
.pv-load{transition:opacity .7s ease}
.pv-load::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.62);backdrop-filter:blur(3px)}
.pv-load .ld{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px}
.pv-load .ld img{width:120px;height:auto;animation:ldpulse 1.8s ease-in-out infinite}
.pv-load .ld i{width:30px;height:30px;border-radius:50%;border:2.5px solid rgba(17,18,22,.14);border-top-color:#111216;animation:ldspin .9s linear infinite}
@keyframes ldspin{to{transform:rotate(360deg)}}
@keyframes ldpulse{0%,100%{opacity:.55}50%{opacity:1}}

/* après 10 s : l'indicateur devient une petite pastille en bas (l'app reste visible et utilisable), jusqu'au premier toucher */
.pv-load.mini{background-image:none!important;background-color:transparent}
.pv-load.mini::before{opacity:0;backdrop-filter:none;transition:opacity .6s}
.pv-load.mini .ld{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);flex-direction:row;gap:10px;padding:8px 14px;border-radius:99px;background:rgba(255,255,255,.9);box-shadow:0 6px 24px -8px rgba(17,18,22,.35)}
.pv-load.mini .ld img{width:64px}
.pv-load.mini .ld i{width:16px;height:16px;border-width:2px}

/* logos très larges ou très massifs : plafond de hauteur plus bas */
#chName.is-logo img[alt="Diesel"],#chName.is-logo img[alt="Inasti"]{max-height:clamp(34px,5vw,64px)}

/* avant le clic : capture nette + bouton lecture, rien n'est chargé */
.pv-load.idle{pointer-events:auto;cursor:pointer;transition:none}
.pv-load.idle::before{background:rgba(0,0,0,.22);backdrop-filter:none}
.pv-load.idle .ld{display:none}
.pv-load .pp{display:none}
.pv-load.idle .pp{display:grid;place-items:center;position:relative;width:76px;height:76px;border-radius:50%;border:0;cursor:pointer;color:#111216;font-size:22px;background:rgba(255,255,255,.92);box-shadow:0 10px 34px -8px rgba(0,0,0,.55);transition:transform .25s}
.pv-load.idle:hover .pp{transform:scale(1.08)}
.pv-load .pp i{font-style:normal;padding-left:4px}