/* ============================================================
   Reproduction fidèle du portfolio "Mon Univers" (Readymag)
   Canevas natif : 1024 x 5374 px, étiré à la largeur du viewport
   (comme Readymag). Typographie : Inter. Couleurs : noir / blanc.
   ============================================================ */

:root{
  --black:#000;
  --white:#fff;
  --canvas-w:1024;
  --canvas-h:5374;
}

*{box-sizing:border-box;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
html,body{margin:0;padding:0;background:#fff;}
body{font-family:'Inter',-apple-system,Helvetica,Arial,sans-serif;color:#000;}
a{color:inherit;text-decoration:none;}
img{display:block;width:100%;height:100%;object-fit:cover;}

/* --- Scène : la scène occupe 100% de la largeur, le canevas 1024px est
   mis à l'échelle (scale) par main.js pour remplir cette largeur. --- */
#stage{position:relative;width:100%;overflow:hidden;background:#fff;}
#canvas{position:absolute;top:0;left:0;width:1024px;height:5374px;transform-origin:top left;background:#fff;}

/* La maquette mobile est masquée par défaut ; elle remplace le canevas
   sous 768px (voir media query en bas de fichier). */
#mobile{display:none;}

.w{position:absolute;}
.line{position:absolute;}

/* -------- HERO VIDEO -------- */
.hero-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero-tint{position:absolute;inset:0;background:rgba(0,0,0,.28);}

/* -------- NAV -------- */
.nav-link{
  font-weight:400;font-size:10px;line-height:14px;letter-spacing:.6px;
  color:#fff;text-transform:uppercase;white-space:nowrap;
}
.nav-link:hover{opacity:.65;}

/* -------- HERO TEXT -------- */
.hero-h1{
  font-weight:400;font-size:60px;line-height:65px;letter-spacing:1px;
  color:#fff;text-align:center;text-transform:uppercase;
}
.hero-sub{
  font-weight:400;font-size:16px;line-height:28px;letter-spacing:-.4px;
  color:#fff;text-align:center;
}
.hero-cta{display:flex;align-items:center;justify-content:center;}

/* -------- PROJECT BANDS -------- */
.band-img img{transition:transform 1.2s ease;}
.band-img:hover img{transform:scale(1.04);}
.band-tint{position:absolute;inset:0;background:rgba(0,0,0,.18);}
.band-year{font-weight:400;font-size:12px;line-height:12px;letter-spacing:1px;color:#fff;text-align:center;}
.band-title{font-weight:400;font-size:27px;line-height:30px;letter-spacing:1px;color:#fff;text-align:center;text-transform:uppercase;}
.band-sub{font-weight:400;font-size:18px;line-height:22px;letter-spacing:1px;color:#fff;text-align:center;text-transform:uppercase;}
.voirplus{
  display:flex;align-items:center;justify-content:center;width:100%;height:33px;
  border:1px solid rgba(255,255,255,.85);color:#fff;
  font-weight:400;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  transition:background .3s,color .3s;
}
.voirplus:hover{background:#fff;color:#000;}

/* -------- SECTION LABELS -------- */
.label{font-weight:400;font-size:10px;line-height:14px;letter-spacing:1.5px;text-transform:uppercase;}
.label.dark{color:#000;}

/* -------- ABOUT -------- */
.about-text{
  font-weight:400;font-size:10px;line-height:16px;letter-spacing:.1px;color:#000;text-align:left;
}

/* -------- GALLERY -------- */
.gal-img img,.thumb img,.feat-img img,.about-img img{transition:transform 1s ease;}
.gal-img:hover img,.thumb:hover img,.feat-img:hover img,.about-img:hover img{transform:scale(1.05);}
.caption{font-weight:400;font-size:10px;line-height:14px;letter-spacing:1px;color:#fff;text-transform:uppercase;}

/* -------- CONTACT -------- */
.contact-h1{font-weight:400;font-size:48px;line-height:48px;letter-spacing:.4px;color:#000;text-align:center;}
.contact-sub{font-weight:400;font-size:16px;line-height:24px;letter-spacing:-.4px;color:#000;text-align:center;}
.follow{font-weight:400;font-size:18px;line-height:28px;letter-spacing:-.4px;color:#000;text-align:center;}
.contact-btn{
  display:flex;align-items:center;justify-content:center;width:100%;height:33px;
  background:#000;color:#fff;font-weight:400;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  transition:opacity .3s;
}
.contact-btn:hover{opacity:.8;}

/* -------- SOCIAL -------- */
.social a{display:flex;align-items:center;justify-content:center;width:39px;height:39px;border-radius:50%;background:#000;transition:transform .3s;}
.social a:hover{transform:translateY(-3px);}
.social .ic{display:block;width:18px;height:18px;}
.social svg{width:18px;height:18px;display:block;}

/* ============================================================
   MAQUETTE MOBILE  —  active sous 768px
   Colonne unique, images pleine largeur, textes agrandis lisibles.
   Le desktop ci-dessus reste strictement identique à l'original.
   ============================================================ */
@media (max-width:768px){
  #stage{display:none !important;}
  #mobile{display:block;background:#fff;}
}

#mobile section{position:relative;}

/* --- NAV mobile --- */
.m-nav{
  position:absolute;top:0;left:0;right:0;z-index:40;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 20px;
}
.m-nav a{
  font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#fff;font-weight:400;
}

/* --- HERO mobile --- */
.m-hero{height:88vh;min-height:520px;overflow:hidden;background:#000;display:flex;align-items:center;}
.m-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.m-hero-tint{position:absolute;inset:0;background:rgba(0,0,0,.34);}
.m-hero-in{position:relative;z-index:5;width:100%;padding:0 22px;text-align:center;color:#fff;}
.m-hero-in h1{
  margin:0 0 18px;font-weight:400;font-size:clamp(22px,6vw,30px);line-height:1.18;letter-spacing:.2px;text-transform:uppercase;overflow-wrap:break-word;
}
.m-hero-in p{
  margin:0 auto 26px;max-width:340px;font-size:14px;line-height:1.6;letter-spacing:-.2px;color:rgba(255,255,255,.92);
}
.m-line-btn{
  display:inline-block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#fff;
  padding:12px 0;position:relative;
}
.m-line-btn::before,.m-line-btn::after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:26px;height:1px;background:#fff;}
.m-line-btn::before{top:0;} .m-line-btn::after{bottom:0;}

/* --- BANDES PROJETS mobile --- */
.m-projects{background:#000;}
.m-band{display:block;position:relative;height:240px;overflow:hidden;}
.m-band+ .m-band{margin-top:3px;}
.m-band img{width:100%;height:100%;object-fit:cover;transition:transform 1s ease;}
.m-band:active img{transform:scale(1.04);}
.m-band-tint{position:absolute;inset:0;background:rgba(0,0,0,.28);}
.m-band-in{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;padding:0 20px;}
.m-band-in .y{font-size:12px;letter-spacing:1px;margin-bottom:8px;}
.m-band-in h3{margin:0 0 6px;font-weight:400;font-size:24px;letter-spacing:1px;text-transform:uppercase;}
.m-band-in .s{font-size:14px;letter-spacing:1px;text-transform:uppercase;margin-bottom:18px;}
.m-band-in .vp{display:inline-block;border:1px solid rgba(255,255,255,.85);padding:9px 20px;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;}

/* --- libellé de section --- */
.m-label{display:flex;align-items:center;justify-content:center;gap:14px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#fff;}
.m-label.dark{color:#000;}
.m-label span{width:26px;height:1px;background:currentColor;display:inline-block;}

/* --- À PROPOS mobile --- */
.m-about{background:#fff;padding:70px 22px 50px;}
.m-about .m-label{color:#000;margin-bottom:34px;}
.m-portraits{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:30px;}
.m-portraits img{width:100%;height:300px;object-fit:cover;}
.m-about-txt{font-size:14px;line-height:1.75;letter-spacing:.1px;color:#111;margin:0;}

/* --- GALERIE VOYAGE mobile (2 colonnes) --- */
.m-gallery{background:#fff;padding:6px 6px 30px;display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.m-shot{position:relative;margin:0;overflow:hidden;height:260px;}
.m-shot img{width:100%;height:100%;object-fit:cover;}
.m-shot figcaption{position:absolute;left:10px;bottom:10px;color:#fff;font-size:10px;letter-spacing:1px;text-transform:uppercase;text-shadow:0 1px 3px rgba(0,0,0,.5);}

/* --- ZOOM PROJET mobile --- */
.m-zoom{background:#fff;padding:40px 0 30px;}
.m-zoom .m-label{color:#000;margin-bottom:28px;}
.m-feat{width:100%;height:auto;display:block;margin-bottom:6px;}
.m-posters{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 6px;}
.m-posters img{width:100%;height:auto;display:block;}

/* --- BANDE MINIATURES bijoux (défilement horizontal) --- */
.m-strip{display:flex;gap:6px;overflow-x:auto;padding:20px 6px 30px;-webkit-overflow-scrolling:touch;background:#fff;}
.m-strip img{flex:0 0 auto;width:120px;height:170px;object-fit:cover;}

/* --- CONTACT mobile --- */
.m-contact{background:#fff;padding:30px 22px 70px;text-align:center;}
.m-contact .m-label{margin-bottom:34px;}
.m-contact h2{margin:0 0 22px;font-weight:400;font-size:30px;line-height:1.2;letter-spacing:.4px;color:#000;}
.m-csub{font-size:15px;line-height:1.5;color:#222;margin:0 0 26px;}
.m-cbtn{display:inline-block;background:#000;color:#fff;padding:13px 26px;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;}
.m-follow{font-size:16px;color:#000;margin:48px 0 22px;}
.m-social{display:flex;justify-content:center;gap:16px;}
.m-social a{width:42px;height:42px;border-radius:50%;background:#000;display:flex;align-items:center;justify-content:center;}
.m-social svg{width:19px;height:19px;}

/* ============================================================
   PAGES PROJET (cas d'étude)
   Pages fluides reprenant le langage visuel du portfolio :
   noir / blanc, Inter, libellés capitales espacés, fines lignes,
   bandes d'images plein écran. Préfixe .case-*
   ============================================================ */
.case{
  font-family:'Inter',-apple-system,Helvetica,Arial,sans-serif;
  color:#000;background:#fff;
  --gap:clamp(64px,9vw,150px);
  --pad:clamp(22px,6vw,90px);
}
.case *{box-sizing:border-box;}
.case img{display:block;width:100%;height:100%;object-fit:cover;}

/* --- barre de navigation haut de page --- */
.case-topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:20px clamp(20px,5vw,48px);
  mix-blend-mode:difference;color:#fff;pointer-events:none;
}
.case-topbar a{pointer-events:auto;}
.case-topbar a,.case-topbar span{
  font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#fff;font-weight:400;
}
.case-topbar a:hover{opacity:.6;}

/* --- HERO --- */
.case-hero{
  position:relative;height:92vh;min-height:560px;overflow:hidden;
  background:#000;display:flex;align-items:flex-end;
}
.case-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.case-hero__tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.15) 40%,rgba(0,0,0,.62) 100%);}
.case-hero__in{position:relative;z-index:3;width:100%;padding:0 var(--pad) clamp(48px,7vw,90px);text-align:center;color:#fff;}
.case-hero__cat{
  display:inline-flex;align-items:center;gap:16px;margin-bottom:26px;
  font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.92);
}
.case-hero__cat::before,.case-hero__cat::after{content:"";width:30px;height:1px;background:rgba(255,255,255,.7);}
.case-hero__title{
  margin:0;font-weight:400;font-size:clamp(40px,9vw,108px);line-height:1.02;
  letter-spacing:1px;text-transform:uppercase;color:#fff;
}
.case-hero__title em{font-style:italic;}

/* --- BARRE META --- */
.case-meta{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid #e6e6e6;
}
.case-meta__item{
  padding:clamp(26px,4vw,46px) var(--pad);
  border-right:1px solid #e6e6e6;
}
.case-meta__item:last-child{border-right:none;}
.case-meta__label{display:block;font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:#999;margin-bottom:12px;}
.case-meta__value{display:block;font-size:13px;letter-spacing:.3px;line-height:1.5;color:#000;}

/* --- SECTIONS --- */
.case-section{padding:var(--gap) var(--pad);}
.case-section--grey{background:#f5f4f2;}
.case-section--dark{background:#000;color:#fff;}
.case-section--flush{padding:0;}

/* libellé de section avec lignes */
.case-eyebrow{
  display:flex;align-items:center;justify-content:center;gap:14px;
  font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:#000;
  text-align:center;margin-bottom:clamp(36px,5vw,64px);
}
.case-eyebrow::before,.case-eyebrow::after{content:"";width:27px;height:1px;background:currentColor;}
.case-section--dark .case-eyebrow{color:#fff;}

/* bloc texte (titre + corps) */
.case-text{
  display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start;
  max-width:1280px;margin:0 auto;
}
.case-text__heading{
  margin:0;font-weight:400;font-size:clamp(28px,4.6vw,60px);line-height:1.08;letter-spacing:.4px;
}
.case-text__heading em{font-style:italic;}
.case-text__body{font-size:15px;line-height:1.85;letter-spacing:.1px;color:#333;}
.case-section--dark .case-text__body{color:rgba(255,255,255,.78);}
.case-text__body p{margin:0 0 18px;}
.case-text__body p:last-child{margin-bottom:0;}
.case-text__body strong{color:inherit;font-weight:600;}
.case-text--center{display:block;max-width:840px;text-align:center;}
.case-text--center .case-text__heading{margin-bottom:0;}

/* grille overview 4 cellules */
.case-overview{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#e6e6e6;
  max-width:1280px;margin:clamp(48px,6vw,80px) auto 0;border:1px solid #e6e6e6;
}
.case-overview__cell{background:#fff;padding:clamp(24px,3vw,38px);}
.case-section--dark .case-overview{background:#222;border-color:#222;}
.case-section--dark .case-overview__cell{background:#000;}
.case-overview__label{display:block;font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:#999;margin-bottom:14px;}
.case-overview__text{margin:0;font-size:13px;line-height:1.7;color:#333;}
.case-section--dark .case-overview__text{color:rgba(255,255,255,.72);}

/* stats */
.case-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#222;}
.case-stats__item{background:#000;color:#fff;padding:clamp(40px,6vw,80px) 22px;text-align:center;}
.case-stats__num{display:block;font-size:clamp(34px,5vw,64px);font-weight:300;line-height:1;letter-spacing:.5px;margin-bottom:16px;}
.case-stats__label{display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.62);line-height:1.5;}

/* grilles d'images */
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.case-grid--3{grid-template-columns:repeat(3,1fr);}
.case-grid__item{overflow:hidden;aspect-ratio:4/3;background:#eee;}
.case-grid__item--tall{aspect-ratio:3/4;}
.case-grid__item img{transition:transform 1.1s cubic-bezier(.16,1,.3,1);}
.case-grid__item:hover img{transform:scale(1.05);}

/* image plein écran */
.case-fullbleed{width:100%;overflow:hidden;background:#eee;}
.case-fullbleed img{width:100%;height:auto;display:block;}

/* palette */
.case-palette{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-width:1280px;margin:0 auto;}
.case-swatch{aspect-ratio:3/4;border-radius:2px;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;color:#fff;}
.case-swatch[data-light="true"]{color:#000;}
.case-swatch__hex{font-size:11px;letter-spacing:.5px;font-weight:500;}
.case-swatch__name{font-size:10px;letter-spacing:1px;text-transform:uppercase;opacity:.8;margin-top:4px;}

/* logo */
.case-logo{padding:var(--gap) var(--pad);text-align:center;background:#f5f4f2;}
.case-logo__media{width:min(620px,86%);margin:0 auto;}
.case-logo__media img{width:100%;height:auto;display:block;}
.case-logo__placeholder{
  width:min(620px,86%);margin:0 auto;aspect-ratio:3/1;background:#fff;border:1px solid #e2e2e2;
  display:flex;align-items:center;justify-content:center;color:#aaa;
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
}
.case-logo__caption{margin:26px 0 0;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#888;}

/* typographies */
.case-type{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-width:1280px;margin:clamp(40px,5vw,64px) auto 0;}
.case-type__cell{border:1px solid #e6e6e6;padding:clamp(28px,4vw,50px);}
.case-type__name{font-size:clamp(28px,4vw,46px);font-weight:400;margin-bottom:10px;}
.case-type__meta{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#999;margin-bottom:24px;}
.case-type__glyphs{font-size:18px;letter-spacing:1px;color:#444;}

/* étapes processus */
.case-steps{max-width:1100px;margin:clamp(40px,5vw,64px) auto 0;}
.case-step{display:grid;grid-template-columns:64px 1fr;gap:clamp(20px,3vw,44px);padding:clamp(28px,3.5vw,44px) 0;border-top:1px solid #e6e6e6;}
.case-step:last-child{border-bottom:1px solid #e6e6e6;}
.case-step__num{font-size:14px;letter-spacing:1px;color:#999;padding-top:6px;}
.case-step__title{margin:0 0 12px;font-size:clamp(18px,2.4vw,26px);font-weight:500;letter-spacing:.3px;}
.case-step__body{margin:0;font-size:14px;line-height:1.8;color:#444;}
.case-step__body ul{margin:0;padding-left:18px;}
.case-step__body li{margin-bottom:8px;}

/* déploiement / features */
.case-features{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-width:1100px;margin:clamp(40px,5vw,64px) auto 0;}
.case-feature{border:1px solid #2a2a2a;padding:clamp(28px,3.5vw,44px);}
.case-feature__title{margin:0 0 20px;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:#fff;}
.case-feature ul{margin:0;padding-left:18px;color:rgba(255,255,255,.74);font-size:14px;line-height:1.8;}
.case-feature li{margin-bottom:10px;}

/* livrables */
.case-deliverables{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#e6e6e6;border:1px solid #e6e6e6;max-width:1280px;margin:clamp(40px,5vw,64px) auto 0;}
.case-deliverable{background:#fff;padding:clamp(28px,3.2vw,44px);}
.case-deliverable__num{display:block;font-size:11px;letter-spacing:1px;color:#bbb;margin-bottom:24px;}
.case-deliverable__title{margin:0 0 8px;font-size:clamp(16px,2vw,21px);font-weight:500;}
.case-deliverable__desc{margin:0;font-size:13px;line-height:1.6;color:#777;}

/* bilan */
.case-takeaways{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);max-width:1180px;margin:clamp(44px,5vw,70px) auto 0;}
.case-takeaways h3{margin:0 0 22px;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:#000;}
.case-takeaways ul{margin:0;padding-left:18px;font-size:14px;line-height:1.85;color:#444;}
.case-takeaways li{margin-bottom:10px;}
.case-takeaways__next{margin-top:32px;padding-top:26px;border-top:1px solid #e0e0e0;}
.case-takeaways__next-label{display:block;font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:#999;margin-bottom:12px;}
.case-takeaways__next p{margin:0;font-size:14px;line-height:1.8;color:#444;}

/* note pédagogique */
.case-note{text-align:center;padding:30px var(--pad);font-size:11px;letter-spacing:1px;color:#aaa;border-top:1px solid #eee;}

/* projet suivant */
.case-next{position:relative;display:block;height:340px;overflow:hidden;background:#000;}
.case-next img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:transform 1.2s cubic-bezier(.16,1,.3,1),opacity .6s;}
.case-next:hover img{transform:scale(1.06);opacity:.7;}
.case-next__in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;gap:14px;}
.case-next__label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.75);}
.case-next__title{font-size:clamp(30px,6vw,68px);font-weight:400;text-transform:uppercase;letter-spacing:1px;}

/* CTA contact */
.case-cta{background:#fff;text-align:center;padding:var(--gap) var(--pad);}
.case-cta h2{margin:0 0 22px;font-weight:400;font-size:clamp(30px,5vw,54px);line-height:1.1;letter-spacing:.4px;}
.case-cta p{margin:0 auto 34px;max-width:460px;font-size:15px;line-height:1.6;color:#444;}
.case-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 34px;border:1px solid #000;background:#000;color:#fff;
  font-size:10px;letter-spacing:1.5px;text-transform:uppercase;transition:background .3s,color .3s;
}
.case-btn:hover{background:#fff;color:#000;}
.case-btn--ghost{background:transparent;color:#000;}
.case-btn--ghost:hover{background:#000;color:#fff;}

/* pied de page */
.case-footer{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  padding:30px var(--pad);border-top:1px solid #eee;
  font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#999;
}
.case-footer a:hover{color:#000;}

/* révélation au défilement */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1);}
.reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* responsive cas d'étude */
@media (max-width:880px){
  .case-text{grid-template-columns:1fr;gap:24px;}
  .case-meta{grid-template-columns:repeat(2,1fr);}
  .case-meta__item:nth-child(2){border-right:none;}
  .case-meta__item:nth-child(1),.case-meta__item:nth-child(2){border-bottom:1px solid #e6e6e6;}
  .case-overview{grid-template-columns:1fr 1fr;}
  .case-stats{grid-template-columns:1fr 1fr;}
  .case-deliverables{grid-template-columns:1fr 1fr;}
  .case-takeaways{grid-template-columns:1fr;}
  .case-type,.case-features{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .case-grid,.case-grid--3{grid-template-columns:1fr;}
  .case-meta{grid-template-columns:1fr;}
  .case-meta__item{border-right:none;border-bottom:1px solid #e6e6e6;}
  .case-overview,.case-stats,.case-deliverables{grid-template-columns:1fr;}
  .case-palette{grid-template-columns:repeat(2,1fr);}
  .case-step{grid-template-columns:40px 1fr;gap:14px;}
}

/* ============================================================
   MODALE FORMULAIRE DE CONTACT  (préfixe .cf-)
   Superposée au site, hors du canevas mis à l'échelle.
   Même langage visuel : noir / blanc, Inter, capitales espacées.
   ============================================================ */
.cf-overlay{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;padding:22px;
  background:rgba(0,0,0,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease;
}
.cf-overlay.is-open{opacity:1;visibility:visible;}
body.cf-locked{overflow:hidden;}

.cf-box{
  position:relative;width:100%;max-width:480px;max-height:92vh;overflow-y:auto;
  background:#fff;color:#000;padding:clamp(30px,5vw,52px);
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  transform:translateY(18px) scale(.98);transition:transform .35s cubic-bezier(.16,1,.3,1);
  font-family:'Inter',-apple-system,Helvetica,Arial,sans-serif;
}
.cf-overlay.is-open .cf-box{transform:none;}

.cf-close{
  position:absolute;top:16px;right:18px;width:34px;height:34px;
  background:none;border:none;cursor:pointer;color:#000;
  font-size:26px;line-height:1;opacity:.5;transition:opacity .25s,transform .25s;
}
.cf-close:hover{opacity:1;transform:rotate(90deg);}

.cf-eyebrow{
  display:flex;align-items:center;justify-content:center;gap:14px;
  font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:#000;margin-bottom:22px;
}
.cf-eyebrow span{width:26px;height:1px;background:currentColor;display:inline-block;}
.cf-title{margin:0 0 12px;font-weight:400;font-size:clamp(24px,4vw,32px);line-height:1.15;letter-spacing:.4px;text-align:center;}
.cf-intro{margin:0 0 30px;font-size:14px;line-height:1.6;color:#555;text-align:center;}

.cf-form{display:flex;flex-direction:column;gap:18px;}

/* champ piège anti-spam : totalement masqué */
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.cf-field{display:flex;flex-direction:column;gap:8px;}
.cf-label{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#999;}
.cf-field input,.cf-field textarea{
  font-family:inherit;font-size:15px;color:#000;
  background:#fff;border:1px solid #ddd;border-radius:0;
  padding:13px 14px;outline:none;transition:border-color .25s;resize:vertical;
}
.cf-field input::placeholder,.cf-field textarea::placeholder{color:#bbb;}
.cf-field input:focus,.cf-field textarea:focus{border-color:#000;}

.cf-submit{
  margin-top:6px;width:100%;padding:15px;cursor:pointer;
  background:#000;color:#fff;border:1px solid #000;
  font-family:inherit;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  transition:background .3s,color .3s,opacity .3s;
}
.cf-submit:hover{background:#fff;color:#000;}
.cf-submit:disabled{opacity:.5;cursor:default;background:#000;color:#fff;}

.cf-status{margin:4px 0 0;font-size:13px;line-height:1.5;text-align:center;min-height:1px;}
.cf-status.is-error{color:#8a1f1f;}
.cf-status.is-success{color:#1a7a3a;}