/* End of a case study: contact title (hover reveals the contact lines), note, back link, next project.
   Proportioned in vw like the info block. Site fonts only. */
.case-end{--ce-sans:'Inter Tight','Helvetica Neue',Arial,sans-serif;--ce-grey:#8A8E96;--ce-line:#CFCFCF;
  box-sizing:border-box;height:22.2vw;min-height:330px;display:flex;flex-direction:column;justify-content:space-between;
  padding:.85vw 1vw 1vw;font-family:var(--ce-sans);color:#0B0C0E;background:#fff;border-top:1px solid var(--ce-line);margin-top:1vw}
.case-end a{color:inherit;text-decoration:none}
.case-end a:focus-visible,.case-end .ce-title:focus-visible{outline:1px solid currentColor;outline-offset:4px}

.case-end .ce-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;align-items:start}
.case-end .ce-contact{grid-column:1/span 7;position:relative;padding-bottom:3vw}
.case-end .ce-title{margin:0;font-weight:400;font-size:max(30px,3.05vw);line-height:1;letter-spacing:-.01em;text-transform:uppercase;cursor:default;width:fit-content}
.case-end .ce-list{list-style:none;margin:0;padding:0;width:min(17.5vw,100%);position:absolute;left:0;top:100%;margin-top:-2.65vw;
  opacity:0;transform:translateY(-10px);visibility:hidden;
  transition:opacity .35s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1),visibility 0s linear .45s}
.case-end .ce-list li{border-bottom:1px solid var(--ce-line)}
.case-end .ce-list a{display:block;padding:.5vw .1vw;font-size:max(13px,.7vw);line-height:1.2;color:#8A8E96;transition:color .25s ease}
.case-end .ce-list a:hover,.case-end .ce-list a:focus-visible{color:#0B0C0E}
.case-end .ce-contact:hover .ce-list,.case-end .ce-contact:focus-within .ce-list{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.case-end .ce-note{grid-column:10/-1;padding-top:.15vw}
.case-end .ce-q{margin:0;font-size:max(15px,.85vw);line-height:1.25;color:#0B0C0E}
.case-end .ce-note p:not(.ce-q){margin:.35vw 0 0;font-size:max(13px,.62vw);line-height:1.15;color:var(--ce-grey)}

.case-end .ce-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.case-end .ce-back{display:inline-flex;align-items:center;gap:1vw;font-size:max(12px,.6vw);line-height:1;letter-spacing:.01em;text-transform:uppercase;padding:.4vw 0 .2vw}
.case-end .ce-dots{display:grid;grid-template-columns:repeat(3,4px);grid-auto-rows:4px;gap:3px;margin-left:.4vw}
.case-end .ce-dots i{display:block;width:4px;height:4px;background:currentColor;border-radius:1px;transition:transform .5s cubic-bezier(.65,0,.35,1),background-color .5s ease}
.case-end .ce-lbl{display:inline-block;transition:transform .5s cubic-bezier(.65,0,.35,1)}
/* hover: bottom-left square and top-right square swap places, the label slides back a little */
.case-end .ce-back:hover .ce-dots i:nth-child(4),.case-end .ce-back:focus-visible .ce-dots i:nth-child(4){transform:translate(14px,-7px);background:#B3B7BF}
.case-end .ce-back:hover .ce-dots i:nth-child(3),.case-end .ce-back:focus-visible .ce-dots i:nth-child(3){transform:translate(-14px,7px)}
.case-end .ce-back:hover .ce-lbl,.case-end .ce-back:focus-visible .ce-lbl{transform:translateX(-4px)}
.case-end .ce-next{display:inline-flex;align-items:center;gap:.6vw;font-size:max(30px,3.05vw);line-height:1;letter-spacing:-.01em;text-transform:uppercase}
.case-end .ce-next svg{width:.9em;height:.9em;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .45s cubic-bezier(.65,0,.35,1)}
.case-end .ce-next:hover svg,.case-end .ce-next:focus-visible svg{transform:translateY(.12em)}

@media (max-width:900px){
  .case-end{height:auto;min-height:0;padding:16px 16px 24px;margin-top:64px;gap:48px;justify-content:flex-start}
  .case-end .ce-top{row-gap:28px}
  .case-end .ce-contact,.case-end .ce-note{grid-column:1/-1}
  .case-end .ce-title{font-size:clamp(34px,10vw,52px)}
  .case-end .ce-list{position:static;opacity:1;transform:none;visibility:visible;margin-top:20px;width:100%}
  .case-end .ce-list a{font-size:18px;padding:14px 0}
  .case-end .ce-contact{padding-bottom:0}
  .case-end .ce-q{font-size:17px}
  .case-end .ce-note p:not(.ce-q){font-size:14px;margin-top:6px}
  .case-end .ce-bottom{flex-direction:column-reverse;align-items:flex-start;gap:32px}
  .case-end .ce-back{font-size:12px;gap:14px}
  .case-end .ce-next{font-size:clamp(34px,10vw,52px);gap:12px}
}
@media (prefers-reduced-motion:reduce){.case-end *{transition:none!important}}

/* Next project picture: grey until hovered, then full colour with a round "Projet suivant" button that follows the pointer */
.case-next{position:relative;display:block;overflow:hidden;margin:0;height:100vh;height:100svh;min-height:480px;background:#E1E4EB;cursor:none;
  clip-path:inset(0 1vw 1vw 1vw round .3vw);transition:clip-path 1.15s cubic-bezier(.65,0,.35,1)}
.case-next.is-full{clip-path:inset(0 0 0 0 round 0)}
.case-next img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transform:scale(1);transition:filter .7s cubic-bezier(.22,1,.36,1),transform 1.15s cubic-bezier(.65,0,.35,1)}
.case-next:hover img,.case-next:focus-visible img{filter:grayscale(0)}
/* at the very bottom the picture goes full-bleed and slightly zoomed; the first scroll up zooms it out, the second moves the page */
.case-next.is-full img{transform:scale(1.12)}
.case-next:focus-visible{outline:2px solid #0B0C0E;outline-offset:4px}
.case-next .cn-btn{position:absolute;left:0;top:0;width:clamp(96px,6.4vw,132px);aspect-ratio:1;margin:calc(clamp(96px,6.4vw,132px) / -2) 0 0 calc(clamp(96px,6.4vw,132px) / -2);
  border-radius:50%;background:#fff;color:#8A8E96;display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:max(11px,.6vw);line-height:1.15;letter-spacing:.02em;text-transform:uppercase;
  opacity:0;scale:.6;transition:opacity .35s ease,scale .45s cubic-bezier(.22,1,.36,1);pointer-events:none;will-change:transform}
.case-next.is-on .cn-btn{opacity:1;scale:1}
html.cn-hover .cursor-dot,html.cn-hover .cursor-disc{visibility:hidden!important}
@media (hover:none),(pointer:coarse){
  .case-next{cursor:auto}
  .case-next img{filter:none}
  .case-next .cn-btn{left:auto;top:auto;right:16px;bottom:72px;margin:0;width:auto;aspect-ratio:auto;border-radius:999px;padding:10px 14px;font-size:11px;opacity:1;scale:1;transform:none!important}
}
@media (max-width:900px){.case-next{min-height:360px;clip-path:inset(0 16px 16px 16px round 6px)}.case-next.is-full{clip-path:inset(0 0 0 0 round 0)}}
@media (prefers-reduced-motion:reduce){.case-next,.case-next img,.case-next .cn-btn{transition:none}}

/* Phone: question first, big "Parlons-en", contact rows with a left arrow, then big "Projet suivant ↓" above the picture */
@media (max-width:900px){
  .case-end{padding:24px 16px 0;margin-top:56px;gap:0}
  .case-end .ce-top{display:flex;flex-direction:column;align-items:stretch;row-gap:0}
  .case-end .ce-note{order:-1}
  .case-end .ce-q{font-size:19px;line-height:1.25}
  .case-end .ce-note p:not(.ce-q){font-size:17px;line-height:1.3;margin-top:4px;max-width:34ch}
  .case-end .ce-contact{margin-top:56px}
  .case-end .ce-title{font-size:clamp(40px,12.6vw,56px);white-space:nowrap}
  .case-end .ce-list{margin-top:36px}
  .case-end .ce-list a{display:flex;align-items:center;gap:16px;padding:18px 0;font-size:17px;line-height:1.2;color:#0B0C0E}
  .case-end .ce-list a::before{content:"";flex:none;width:26px;height:13px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14' fill='none' stroke='%230B0C0E' stroke-width='1.4'%3E%3Cpath d='M0 7h26M20 1l6 6-6 6'/%3E%3C/svg%3E") no-repeat center/contain}
  .case-end .ce-bottom{margin-top:88px;padding-bottom:16px}
  .case-end .ce-back{display:none}
  .case-end .ce-next{display:block;font-size:clamp(40px,12.6vw,56px);line-height:1.02}
  .case-end .ce-next svg{display:inline-block;vertical-align:-.04em;margin-left:.18em}
}