/* ══ MOLTO BENE — CASE DETAIL PAGE ══
   Styles partagés entre toutes les pages case/<slug>.html
   Reprend les tokens et composants de l'index, allégé du superflu. */

:root{
  --paper:#F0EDE5;--paper-alt:#E8E4DB;--ink:#0D0C0B;--ink2:#1A1714;
  --muted:#6B6560;
  --mustard:#D4AA20;
  --f-display:'Fraunces',Georgia,serif;
  --f-mono:'Courier Prime','Courier New',monospace;
  --f-body:'Barlow',sans-serif;
  --max:1180px;
  --max-wide:1440px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);overflow-x:clip;width:100%;-webkit-font-smoothing:antialiased;}
img,video{max-width:100%;display:block;}

/* GRAIN */
#grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:9000;opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain-a .35s steps(1) infinite;mix-blend-mode:overlay;}
@keyframes grain-a{
  0%{transform:translate(0,0)}10%{transform:translate(-5%,-10%)}20%{transform:translate(-15%,5%)}
  30%{transform:translate(7%,-25%)}40%{transform:translate(-5%,25%)}50%{transform:translate(-15%,10%)}
  60%{transform:translate(15%,0%)}70%{transform:translate(0%,15%)}80%{transform:translate(3%,35%)}
  90%{transform:translate(-10%,10%)}
}
@media(prefers-reduced-motion:reduce){
  #grain{animation:none;}
  html{scroll-behavior:auto;}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}

/* NAV */
#nav{position:fixed;top:0;left:0;right:0;z-index:8000;padding:14px 32px;display:flex;align-items:center;justify-content:space-between;background:rgba(13,12,11,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06);}
.nav-brand{display:flex;align-items:center;height:24px;text-decoration:none;}
.nav-brand img{height:24px;width:auto;}
.nav-cta{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:0 22px;height:44px;display:inline-flex;align-items:center;border-radius:999px;text-decoration:none;background:var(--mustard);color:var(--ink);border:1px solid var(--mustard);transition:background .2s,color .2s;white-space:nowrap;}
.nav-cta:hover{background:transparent;color:var(--mustard);}

.reveal{opacity:0;transform:translateY(44px);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);}
.reveal.in{opacity:1;transform:none;}

/* CASE PAGE */
.case-page{padding-top:78px;} /* offset nav */

.case-back-wrap{
  background:var(--paper);
  padding:32px 32px 0;
}
.case-back-inner{max-width:var(--max-wide);margin:0 auto;}
.case-back{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(13,12,11,.6);
  text-decoration:none;
  padding:8px 0;
  transition:color .2s,gap .2s;
}
.case-back::before{content:"←";display:inline-block;font-size:14px;line-height:1;}
.case-back:hover{color:var(--mustard);gap:14px;}

/* ED-S — éditorial use case (repris de l'index) */
.ed-s{background:var(--paper);padding:60px 32px 120px;position:relative;overflow:hidden;}
.ed-s.alt{background:var(--paper-alt);}
.ed-s::before{content:'';position:absolute;top:8%;right:-60px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(212,170,32,.12) 0%,transparent 70%);pointer-events:none;}
.ed-inner{max-width:var(--max-wide);margin:0 auto;position:relative;z-index:1;}
.ed-header{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-bottom:56px;padding-bottom:28px;border-bottom:1px solid rgba(13,12,11,.12);}
.ed-tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--mustard);margin-bottom:14px;display:block;}
.ed-title{font-family:var(--f-display);font-weight:700;font-size:clamp(36px,6.5vw,96px);line-height:.94;letter-spacing:-.03em;color:var(--ink);}
.ed-title em{font-style:italic;font-weight:600;color:var(--mustard);}
.ed-meta{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(13,12,11,.5);text-align:right;line-height:1.8;}
.ed-meta b{display:block;color:var(--ink);font-weight:700;font-family:var(--f-body);letter-spacing:.08em;margin-top:2px;}
.ed-board{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;}
.ed-item{aspect-ratio:9/16;overflow:hidden;position:relative;border-radius:1px;display:block;background:var(--paper-alt);width:100%;height:auto;min-height:0;}
.ed-item img,.ed-item video{position:absolute;inset:0;width:100% !important;height:100% !important;object-fit:cover;object-position:center center;display:block;cursor:pointer;transition:transform .35s ease;}
.ed-item:hover img,.ed-item:hover video{transform:scale(1.02);}

/* MORE CASES — strip horizontal des autres use cases (sous le ed-board, avant la CTA) */
.more-cases{
  background:var(--paper-alt);
  padding:80px 32px 100px;
  position:relative;
  overflow:hidden;
}
.more-cases::before{
  content:'';position:absolute;
  bottom:-80px;left:-60px;
  width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,170,32,.10) 0%,transparent 70%);
  pointer-events:none;
}
.more-cases-inner{max-width:var(--max-wide);margin:0 auto;position:relative;z-index:1;}
.more-cases-header{
  display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:16px;
  margin-bottom:36px;padding-bottom:22px;
  border-bottom:1px solid rgba(13,12,11,.12);
}
.more-cases-label{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--mustard);
  display:inline-block;
}
.more-cases-title{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(24px,3.6vw,40px);
  line-height:1;letter-spacing:-.02em;color:var(--ink);
}
.more-cases-title em{font-style:italic;font-weight:600;color:var(--mustard);}
.more-cases-link{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(13,12,11,.55);
  text-decoration:none;transition:color .2s,gap .2s;
  display:inline-flex;align-items:center;gap:8px;
}
.more-cases-link:hover{color:var(--mustard);gap:12px;}
.more-cases-link::after{content:"→";display:inline-block;}

.more-cases-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}
.more-thumb{
  position:relative;
  display:block;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--paper-alt);
  text-decoration:none;
  color:var(--paper);
  border-radius:1px;
  cursor:pointer;
}
.more-thumb img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center center;
  transition:transform .6s cubic-bezier(.22,.61,.36,1),filter .35s;
}
.more-thumb-veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,12,11,0) 35%,rgba(13,12,11,.55) 70%,rgba(13,12,11,.9) 100%);
  opacity:0;
  transition:opacity .35s ease;
  z-index:1;
}
.more-thumb-meta{
  position:absolute;
  left:18px;right:18px;bottom:18px;
  z-index:2;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .35s ease,transform .35s ease;
}
.more-thumb-tag{
  font-family:var(--f-mono);font-size:9px;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--mustard);
  display:block;margin-bottom:6px;
}
.more-thumb-name{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(15px,1.5vw,20px);
  line-height:1.05;letter-spacing:-.01em;
  color:var(--paper);
  display:block;
}
.more-thumb-name em{font-style:italic;font-weight:600;color:var(--mustard);}
.more-thumb:hover img{transform:scale(1.06);filter:brightness(.8);}
.more-thumb:hover .more-thumb-veil{opacity:1;}
.more-thumb:hover .more-thumb-meta{opacity:1;transform:none;}
.more-thumb:focus-visible{outline:2px solid var(--mustard);outline-offset:3px;}

/* CASE FOOTER CTA */
.case-cta-wrap{
  background:var(--ink);
  padding:80px 32px;
  text-align:center;
  position:relative;
}
.case-cta-inner{max-width:760px;margin:0 auto;}
.case-cta-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--mustard);display:block;margin-bottom:18px;}
.case-cta-title{font-family:var(--f-display);font-weight:700;font-size:clamp(28px,4.5vw,52px);line-height:1.05;letter-spacing:-.02em;color:var(--paper);}
.case-cta-title em{font-style:italic;font-weight:600;color:var(--mustard);}
.case-cta-group{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:40px;}
.case-cta-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;padding:0 32px;height:46px;border-radius:999px;text-decoration:none;background:var(--mustard);color:var(--ink);border:1px solid var(--mustard);transition:background .25s,color .25s,transform .25s,border-color .25s;}
.case-cta-btn:hover{background:transparent;color:var(--paper);border-color:var(--paper);transform:translateY(-2px);}
.case-cta-btn.outline{background:transparent;color:var(--paper);border-color:var(--paper);}
.case-cta-btn.outline:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);}

.case-footer{
  background:var(--ink);
  padding:28px 6vw 36px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;
  border-top:1px solid rgba(240,237,229,.08);
}
.case-footer .contact{
  font-family:var(--f-mono);
  font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(240,237,229,.65);
}
.case-footer .contact a{color:var(--paper);text-decoration:none;transition:color .2s;}
.case-footer .contact a:hover{color:var(--mustard);}
.case-footer .contact a.email-cta{color:var(--mustard);}

/* LIGHTBOX (identique à l'index) */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.96);display:none;align-items:center;justify-content:center;z-index:9500;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.lightbox.open{display:flex;}
.lb-wrap{position:relative;max-height:100vh;max-width:100vw;height:100vh;width:100vw;display:flex;align-items:center;justify-content:center;padding:3vh;cursor:pointer;}
.lb-img,.lb-vid{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;}
.lb-close{position:fixed;top:max(18px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.12);border:none;cursor:pointer;font-size:22px;color:#fff;display:flex;align-items:center;justify-content:center;z-index:9501;transition:background .2s;}
.lb-close:hover{background:rgba(255,255,255,.25);}
.lb-nav{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.12);border:none;cursor:pointer;font-size:20px;color:#fff;display:flex;align-items:center;justify-content:center;z-index:9501;transition:background .2s,opacity .2s;opacity:.6;}
.lb-nav:hover{background:rgba(255,255,255,.25);opacity:1;}
.lb-nav-prev{left:max(18px,env(safe-area-inset-left));}
.lb-nav-next{right:max(18px,env(safe-area-inset-right));}

/* RESPONSIVE */
@media(max-width:1024px){
  .ed-s{padding:60px 24px 100px;}
  .ed-board{grid-template-columns:repeat(3,1fr);}
  .more-cases{padding:64px 24px 80px;}
  .more-cases-grid{grid-template-columns:repeat(3,1fr);gap:6px;}
}
@media(max-width:960px){
  .ed-header{grid-template-columns:1fr;gap:16px;}
  .ed-meta{text-align:left;}
}
@media(max-width:768px){
  .lb-nav{width:40px;height:40px;font-size:17px;opacity:.45;}
  .lb-nav-prev{left:max(10px,env(safe-area-inset-left));}
  .lb-nav-next{right:max(10px,env(safe-area-inset-right));}
  .ed-board{grid-template-columns:repeat(2,1fr);gap:3px;}
  .ed-s{padding:48px 18px 80px;}
  .case-back-wrap{padding:24px 18px 0;}
  .case-back{font-size:10px;}
  #nav{padding:12px 20px;}
  .nav-cta{padding:0 18px;height:40px;font-size:10px;}
  .more-cases{padding:56px 18px 70px;}
  .more-cases-header{margin-bottom:24px;padding-bottom:16px;}
  .more-cases-grid{grid-template-columns:repeat(2,1fr);gap:6px;}
  .more-thumb{aspect-ratio:3/4;}
  .more-thumb-veil{opacity:.7;}
  .more-thumb-meta{opacity:1;transform:none;left:12px;right:12px;bottom:12px;}
  .more-thumb-name{font-size:14px;}
  .more-thumb-tag{font-size:9px;letter-spacing:.22em;margin-bottom:4px;}
  .case-cta-wrap{padding:60px 24px;}
  .case-cta-group{flex-direction:column;align-items:stretch;}
  .case-cta-btn{justify-content:center;width:100%;max-width:320px;margin:0 auto;}
  .case-footer{padding:24px 20px 32px;flex-direction:column;align-items:flex-start;}
  .case-footer .contact{font-size:10px;}
}
@media(max-width:480px){
  .ed-board{grid-template-columns:1fr;}
}