/* Mijoh Studio — réalisations (gabarit commun aux trois projets) */

/* ---------- 1. Héros ---------- */
.cs-hero { padding-top: calc(var(--header-h) + clamp(40px, 4.4vw, 68px)); padding-bottom: clamp(24px, 3vw, 44px); }
.cs-hero__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.cs-crumb { display: inline-flex; align-items: center; gap: 10px; }
.cs-crumb > span[aria-hidden] { opacity: .35; }
/* Le titre de la page (h1) : la petite ligne d'étiquette, à droite du fil d'Ariane */
.cs-hero__kicker { text-align: right; text-wrap: balance; }
.cs-hero__title {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: clamp(18px, 2vw, 28px) var(--gap); margin-top: clamp(14px, 2vw, 30px);
}
/* Le nom remplit la largeur utile (--fit = 98 / largeur du mot en em), plafonné par la hauteur d'écran */
.cs-hero__name.display { font-size: min(calc((100vw - 2 * var(--pad)) * var(--fit, 20) / 100), 36vh); flex: none; margin-left: -.02em; line-height: .84; }
/* Les masques par mot coupaient la jambe du A final : marge de sécurité à droite */
.cs-hero__name .word, .cs-next__ink .word { padding-right: .06em; margin-right: -.06em; }
.cs-hero__aside { flex: 1 1 320px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-bottom: .3vw; }
.cs-hero__down { display: inline-flex; align-items: center; gap: 10px; }
.cs-hero__down-ico {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1.5px currentColor; transition: background-color .4s var(--ease), color .4s var(--ease);
}
.cs-hero__down-ico .arrow { width: 13px; height: 13px; }
@media (hover: hover) { .cs-hero__down:hover .cs-hero__down-ico { background: var(--ink); color: var(--paper); } }

.cs-meta { margin-top: clamp(28px, 3.6vw, 56px); }
.cs-meta__rule { height: 3px; background: var(--ink); transform-origin: left center; }
.cs-meta__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs-meta__cell { padding: 16px var(--gap) 4px; border-left: 1px solid var(--line); min-width: 0; }
.cs-meta__cell:first-child { border-left: 0; padding-left: 0; }
.cs-meta__cell dt { margin-bottom: 8px; }
.cs-meta__cell dd { font-size: 17px; font-weight: 580; line-height: 1.3; }
.cs-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-tags li { font-size: 13px; font-weight: 620; line-height: 1; padding: 7px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1.25px var(--ink); }
@media (max-width: 760px) {
  .cs-hero__top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cs-hero__kicker { text-align: left; }
  .cs-meta__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-meta__cell:nth-child(3) { border-left: 0; padding-left: 0; }
  .cs-meta__cell:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 12px; }
}

/* ---------- 2. Vitrine : le site en mouvement ---------- */
.cs-show { position: relative; padding-top: clamp(16px, 2.4vw, 40px); }
.cs-show__frame {
  position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden;
  background: var(--ink-3); transform-origin: 50% 0%;
  box-shadow: 0 50px 90px -40px rgba(13, 13, 14, .5);
}
.cs-show__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.motion .cs-show__frame { transform: scale(.8) rotate(-2deg); }
@media (max-width: 899px) { html.motion .cs-show__frame { transform: scale(.9) rotate(-2deg); } }
.cs-show__cap {
  position: absolute; left: clamp(14px, 2vw, 28px); top: clamp(14px, 2vw, 28px); z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
  background: var(--paper); color: var(--ink);
}
.cs-show__cap i { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }
.cs-show__live { position: absolute; right: clamp(14px, 2.4vw, 36px); bottom: clamp(14px, 2.4vw, 36px); z-index: 2; box-shadow: 0 20px 40px -18px rgba(13, 13, 14, .6); }
@media (max-width: 600px) { .cs-show__live { --h: 40px; padding: 0 16px; font-size: 13px; } .cs-show__cap { padding: 7px 11px; font-size: 12px; } }

/* ---------- 3. Le projet ---------- */
.cs-story__cols { margin-top: clamp(44px, 6vw, 96px); row-gap: 56px; }
.cs-story__col:nth-child(1) { grid-column: 1 / span 5; }
.cs-story__col:nth-child(2) { grid-column: 7 / span 6; padding-left: var(--gap); border-left: 1px solid var(--line); }
.cs-story__col h3 { margin: 12px 0 20px; }
.cs-story__p { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; max-width: 44ch; }
.cs-story__more { margin-top: 1.1em; color: var(--mute); }
.cs-story__p a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; transition: text-decoration-color .3s var(--ease); }
@media (hover: hover) { .cs-story__p a:hover { text-decoration-color: transparent; } }
@media (max-width: 899px) {
  .cs-story__col:nth-child(1), .cs-story__col:nth-child(2) { grid-column: 1 / -1; }
  .cs-story__col:nth-child(2) { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 28px; }
}

/* ---------- 4. Ce que le site sait faire ---------- */
.cs-feat__list { position: relative; margin-top: clamp(36px, 5vw, 72px); }
.cs-feat__row {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  align-items: center; padding: clamp(22px, 2.6vw, 40px) 0; border-top: 1px solid var(--line);
}
.cs-feat__row:last-child { border-bottom: 1px solid var(--line); }
.cs-feat__n { grid-column: 1 / span 1; align-self: start; padding-top: .7em; transition: color .5s var(--ease); }
.cs-feat__body { grid-column: 2 / span 7; }
.cs-feat__t { position: relative; font-size: var(--d-l); line-height: .9; }
.cs-feat__ink { display: block; color: var(--soft); }
.cs-feat__grad {
  position: absolute; inset: 0; display: block;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  clip-path: inset(-10% 100% -10% 0); transition: clip-path .85s var(--ease-io);
}
.cs-feat__row.is-active .cs-feat__grad { clip-path: inset(-10% 0% -10% 0); }
/* Une fois le balayage fini, la couche encre s'efface : plus de liseré sous le dégradé */
.cs-feat__ink { transition: color .2s; }
.cs-feat__row.is-active .cs-feat__ink { color: transparent; transition: color .2s .8s; }
.cs-feat__row.is-active .cs-feat__n { color: var(--a2); }
.cs-feat__d { margin-top: 14px; max-width: 46ch; color: var(--mute); font-size: 16px; transition: color .5s var(--ease); }
.cs-feat__row.is-active .cs-feat__d { color: var(--ink); }
.cs-feat__thumb {
  grid-column: 9 / -1; position: relative; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden;
  background: var(--paper-3); transform: rotate(var(--rot, 0deg)) scale(.92);
  box-shadow: 0 30px 60px -25px rgba(13, 13, 14, .35);
}
.cs-feat__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Bureau animé : la carte flottante remplace les vignettes en ligne */
.cs-feat.has-card .cs-feat__thumb { display: none; }
.cs-feat.has-card .cs-feat__body { grid-column: 2 / span 6; }
.cs-feat__card { position: absolute; left: 0; top: 0; z-index: 3; width: clamp(280px, 30vw, 470px); pointer-events: none; visibility: hidden; }
.cs-feat__card-in {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; background: var(--ink-3);
  box-shadow: 0 30px 60px -25px rgba(13, 13, 14, .4), 0 12px 24px -16px rgba(13, 13, 14, .25);
}
.cs-feat__card-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) {
  .cs-feat__row { align-items: start; }
  .cs-feat__n { grid-column: 1 / -1; padding: 0 0 10px; }
  .cs-feat__body, .cs-feat.has-card .cs-feat__body { grid-column: 1 / -1; }
  .cs-feat__thumb { grid-column: 1 / span 10; margin-top: 22px; transform: rotate(calc(var(--rot, 0deg) * .5)); }
  .cs-feat__row:nth-child(even) .cs-feat__thumb { grid-column: 3 / -1; }
}

/* ---------- 5. Écrans : galerie horizontale ---------- */
.cs-screens { position: relative; overflow: hidden; padding: clamp(80px, 9vw, 140px) 0 clamp(56px, 7vw, 110px); }
.cs-screens.is-pinned { padding: calc(var(--header-h) + 22px) 0 clamp(24px, 3.4vh, 40px); height: 100vh; height: 100svh; }
.cs-prog { position: relative; background: var(--line-d); overflow: hidden; }
.cs-prog i { position: absolute; inset: 0; background: var(--grad); transform: scaleX(0); transform-origin: left center; }
.cs-screens:not(.is-pinned) .cs-prog i { transform: none; }
.cs-count { display: none; font-variant-numeric: tabular-nums; }
.cs-screens.is-pinned .cs-count { display: inline; }
.cs-screens.is-pinned .cs-count-alt { display: none; }
.cs-screens__hint { display: none; align-items: center; gap: 8px; }
.cs-screens.is-pinned .cs-screens__hint { display: inline-flex; }
.cs-screens__vp {
  margin-top: clamp(24px, 4vh, 48px); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--ink-3) transparent;
}
.cs-screens.is-pinned .cs-screens__vp { overflow: visible; scroll-snap-type: none; margin-top: clamp(20px, 3.6vh, 44px); }
.cs-screens__track { display: flex; gap: clamp(24px, 3.4vw, 64px); width: max-content; padding: 6px var(--pad) 20px; }
.cs-screen { flex: none; width: min(62vw, calc((100vh - 410px) * 1.6)); scroll-snap-align: center; }
.cs-screen__card {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; background: var(--ink-3);
  box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .8), 0 0 0 1px var(--line-d);
}
.cs-screen__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-screen figcaption { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin-top: 16px; align-items: baseline; }
.cs-screen__t { font-weight: 650; font-size: 17px; }
.cs-screen__d { grid-column: 2; font-size: 15px; }
@media (max-width: 899px) {
  .cs-screens__vp { overflow: visible; scroll-snap-type: none; }
  .cs-screens__track { flex-direction: column; width: auto; gap: 44px; }
  .cs-screen { width: 100%; }
}
@media (min-width: 900px) and (max-height: 640px) { .cs-screen { width: min(62vw, 360px); } }

/* ---------- 6. Mobile ---------- */
.cs-phones { position: relative; overflow: hidden; padding-bottom: clamp(80px, 11vw, 180px); }
.cs-band { padding-block: clamp(28px, 4vw, 60px); border-block: 1px solid var(--line-d); }
.cs-band .marquee__item {
  font-weight: 880; font-stretch: 62%; text-transform: uppercase; line-height: .9; font-size: var(--d-xl);
  gap: .32em; padding-right: .32em;
}
.cs-band__dot { width: .2em; height: .2em; border-radius: 50%; background: var(--grad); flex: none; }
.cs-phones__head { margin-top: clamp(64px, 8vw, 120px); }
.cs-phones__stage {
  display: flex; justify-content: center; align-items: flex-start; gap: clamp(12px, 4vw, 72px);
  margin-top: clamp(56px, 8vw, 120px);
}
.cs-phone { flex: none; width: clamp(96px, 19vw, 290px); transform: rotate(var(--rot, 0deg)); }
.cs-phone:nth-child(2) { margin-top: clamp(-80px, -5vw, -24px); }
.cs-phone:nth-child(1), .cs-phone:nth-child(3) { margin-top: clamp(20px, 4vw, 70px); }
.cs-phone__screen {
  position: relative; aspect-ratio: 585 / 1266; border-radius: clamp(14px, 2.3vw, 38px); overflow: hidden; background: #000;
  box-shadow: 0 0 0 clamp(3px, .45vw, 7px) #2A2A2E, 0 0 0 clamp(4px, .55vw, 8px) rgba(241, 239, 234, .12), 0 50px 90px -30px rgba(0, 0, 0, .85);
}
.cs-phone__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-phone figcaption { margin-top: clamp(16px, 2vw, 26px); text-align: center; }
.cs-phones__note { margin-top: clamp(48px, 6vw, 96px); display: flex; justify-content: center; text-align: center; }
.cs-phones__note .lead { max-width: 40ch; color: var(--mute-d); }
@media (max-width: 600px) {
  .cs-phones__stage { gap: 10px; }
  .cs-phone { width: calc((100vw - 2 * var(--pad) - 20px) / 3); }
  .cs-phone figcaption { font-size: 11px; }
}

/* ---------- 7. Photographies ---------- */
.cs-photos { overflow: hidden; }
.cs-photos__grid {
  padding-inline: calc(var(--pad) + 1.4vw);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3.4vw, 64px);
  margin-top: clamp(56px, 7vw, 110px); align-items: start;
}
.cs-photos__col { display: flex; flex-direction: column; gap: clamp(36px, 5.4vw, 96px); }
.cs-photos__col:nth-child(2) { padding-top: clamp(48px, 10vw, 180px); }
.cs-photos__col:nth-child(3) { padding-top: clamp(16px, 4vw, 72px); }
.cs-photo__tilt { transform: rotate(var(--rot, 0deg)); transition: transform .9s var(--ease); }
.cs-photo__img {
  border-radius: var(--r); overflow: hidden; background: var(--paper-3);
  box-shadow: 0 30px 60px -25px rgba(13, 13, 14, .35);
}
.cs-photo__img img { width: 100%; transition: transform 1.1s var(--ease); }
.cs-photo figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; }
@media (hover: hover) {
  .cs-photo:hover .cs-photo__tilt { transform: rotate(0deg) scale(1.02); }
  .cs-photo:hover .cs-photo__img img { transform: scale(1.04); }
}
@media (max-width: 760px) {
  .cs-photos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-photos__col { display: contents; }
  .cs-photo:nth-child(odd) { margin-top: 0; }
  .cs-photos__grid > .cs-photos__col:nth-child(2) > .cs-photo:first-child { margin-top: 0; }
}

/* ---------- 8. Projet suivant ---------- */
.cs-next { position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.cs-next__link { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding-top: clamp(64px, 9vw, 120px); }
.cs-next__top { display: flex; justify-content: space-between; align-items: center; }
.cs-next__name {
  position: relative; display: block; align-self: flex-start; margin-inline: var(--pad);
  font-size: min(calc((100vw - 2 * var(--pad)) * var(--fit, 20) / 100), 52vh); line-height: .84; white-space: nowrap;
}
.cs-next__ink { display: block; color: rgba(241, 239, 234, .26); }
.cs-next__grad {
  position: absolute; inset: 0; display: block;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  clip-path: inset(-10% 100% -10% 0); transition: clip-path 1s var(--ease-io);
}
.cs-next.is-on .cs-next__grad { clip-path: inset(-10% 0% -10% 0); }
@media (hover: hover) { .cs-next__link:hover .cs-next__grad { clip-path: inset(-10% 0% -10% 0); } }
.cs-next__ink { transition: color .2s; }
.cs-next.is-on .cs-next__ink { color: transparent; transition: color .2s .95s; }
@media (hover: hover) { .cs-next__link:hover .cs-next__ink { color: transparent; transition: color .2s .95s; } }
.cs-next__meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.cs-next__go { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; background: var(--paper); color: var(--ink); transition: transform .5s var(--ease); }
.cs-next__go .arrow { transition: transform .5s var(--ease); }
@media (hover: hover) { .cs-next__link:hover .cs-next__go .arrow { transform: translateX(4px); } }
.cs-next__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap;
  margin-top: 28px; padding-block: 22px 28px; border-top: 1px solid var(--line-d);
}
.cs-next__foot a { display: inline-flex; align-items: center; gap: 8px; }
.cs-next__thumb { position: absolute; left: 0; top: 0; z-index: 3; width: clamp(170px, 15vw, 250px); pointer-events: none; visibility: hidden; opacity: 0; }
.cs-next__thumb-in { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .7); }
.cs-next__thumb-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }