/* Kaleido Lab — styles (direction « Mosaïque ») */

/* Polices auto-hébergées (variables, sous-ensemble latin, licence SIL OFL) */
@font-face {
  font-family: "Unbounded"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url("../fonts/unbounded-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --cream: #FBF7F4;
  --ink: #1F1A16;
  --ink-2: #3A302A;
  --muted: #4A403A;
  --muted-2: #6A5D54;
  --coral: #C15230;
  --peach: #FBCFB4;
  --peach-deep: #F5A88A;
  --sky: #BAE0F5;
  --sky-deep: #8FCDEE;
  --lilac: #D9C7F0;
  --lilac-deep: #C4B5FD;
  --mint: #BEEBD3;
  --mint-deep: #9FDDBD;
  --line: rgba(31, 26, 22, 0.15);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --radius: 6px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; line-height: 1.5;
}
a { color: var(--ink); }
a:hover { color: var(--coral); }
h1, h2, h3, p { margin: 0; }
img, video, svg { display: block; }
[hidden] { display: none !important; }
.disp { font-family: "Unbounded", "Arial Black", sans-serif; letter-spacing: -0.02em; }
/* Pleine largeur : seules les marges latérales (fluides) encadrent le contenu. */
.wrap { --gutter: clamp(20px, 4.5vw, 96px); width: 100%; padding: 0 var(--gutter); }

/* Nav */
.nav { position: sticky; top: 0; z-index: 20; background: var(--cream); border-bottom: 1px solid rgba(31,26,22,0.1); }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links a { text-decoration: none; font-weight: 500; font-size: 15px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-txt { font-size: 17px; font-weight: 600; }
.logo svg { transition: transform .8s var(--ease); }
.logo:hover svg { transform: rotate(120deg); }
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: var(--radius);
  background: var(--ink); color: var(--cream); text-decoration: none; font-weight: 600; font-size: 15px; border: 0;
  transition: background .3s ease, transform .3s ease;
}
.btn:hover { background: var(--coral); color: var(--cream); transform: translateY(-2px); }
.btn svg { transition: transform .3s ease; }
.btn:hover svg { transform: translateX(4px); }
.lnk { font-weight: 600; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
/* Sélecteur de langue FR/EN : reste visible sur mobile. */
.nav-links a.lang { display: inline-flex; align-items: center; min-height: 34px; padding: 0 10px; border: 1.5px solid var(--ink); border-radius: var(--radius); font-size: 13px; font-weight: 700; letter-spacing: .06em; transition: background .3s ease; }
.nav-links a.lang:hover { background: var(--ink); color: var(--cream); }
@media (max-width: 820px) { .nav-links a:not(.btn):not(.lang) { display: none; } .nav-links { gap: 12px; } }
@media (max-width: 420px) { .nav-links { gap: 8px; } .nav-links a.lang { padding: 0 8px; } }

/* Hero */
.hero {
  display: grid; grid-template-columns: 7fr 5fr; gap: clamp(48px, 6vw, 140px); align-items: center;
  min-height: calc(100svh - 77px); padding-top: clamp(48px, 6vh, 96px); padding-bottom: clamp(64px, 9vh, 120px);
}
@media (max-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 40px; padding-bottom: 96px; gap: 64px; } }
.hero-txt { display: flex; flex-direction: column; gap: clamp(24px, 2.4vw, 40px); }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.h1 { font-size: clamp(38px, 4.9vw, 112px); font-weight: 600; line-height: 1.04; }
.h1 .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.h1 .ln i { display: block; font-style: normal; text-wrap: balance; transform: translateY(110%); animation: rise 1.1s var(--ease) forwards; }
.h1 .ln:nth-child(2) i { animation-delay: .14s; }
.h1 .ln.soft i { color: var(--coral); }
.lead { font-size: clamp(17px, 1.25vw, 23px); color: var(--muted); max-width: 34em; }
.actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.up { opacity: 0; transform: translateY(16px); animation: rise .9s var(--ease) forwards; }
.up.d1 { animation-delay: .35s; }
.up.d2 { animation-delay: .5s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* Hero media (video) */
.media-wrap { position: relative; width: 100%; max-width: min(640px, 58svh); justify-self: center; }
.media-wrap::before {
  content: ""; position: absolute; right: -24px; bottom: -24px; width: 62%; height: 56%;
  background: var(--peach); border-radius: var(--radius); transform: scaleX(0); transform-origin: right;
  animation: wipe 1.1s cubic-bezier(.7,0,.2,1) .15s forwards;
}
.media-wrap::after {
  content: ""; position: absolute; left: -24px; top: -24px; width: 34%; height: 28%;
  background: var(--sky); border-radius: var(--radius); transform: scaleY(0); transform-origin: top;
  animation: wipe 1.1s cubic-bezier(.7,0,.2,1) .3s forwards;
}
@keyframes wipe { to { transform: none; } }
.media {
  position: relative; z-index: 1; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden;
  background: #EFE9E1 url("../media/kaleido-prismes-v2-poster.jpg") center / cover no-repeat;
  opacity: 0; transform: translateY(24px); animation: rise 1.2s var(--ease) .4s forwards;
}
.media video { width: 100%; height: 100%; object-fit: cover; }
@supports (animation-timeline: scroll()) {
  .media video { animation: zoom linear both; animation-timeline: scroll(root); animation-range: 0px 900px; }
}
@keyframes zoom { from { transform: scale(1); } to { transform: scale(1.14); } }
@media (max-width: 900px) { .media-wrap { max-width: 360px; } }
@media (max-width: 600px) {
  .media-wrap { max-width: calc(100% - 24px); }
  .media-wrap::before { right: -12px; bottom: -12px; }
  .media-wrap::after { left: -12px; top: -12px; }
}
main { overflow-x: clip; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Sections */
.sec { padding: clamp(80px, 8vw, 160px) 0; }
.sec-first { padding-top: 40px; }
.sec-tight { padding-top: 20px; }
.sec-white { background: #FFFFFF; }
@media (max-width: 600px) { .sec { padding: 80px 0; } }
.sec-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 44px; flex-wrap: wrap; }
.h2 { font-size: clamp(28px, 3.4vw, 68px); font-weight: 600; line-height: 1.1; }
.kicker { font-size: clamp(15px, 1vw, 18px); color: var(--muted-2); max-width: 28em; }

/* Expertise stripes */
.stripes { display: flex; gap: 10px; height: clamp(420px, 56vh, 640px); }
.stripe {
  position: relative; flex: 1; border: 0; border-radius: var(--radius); padding: clamp(24px, 2vw, 40px); text-align: left; cursor: pointer;
  overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-width: 0;
  font: inherit; color: var(--ink); background: var(--c); container-type: inline-size;
  transition: flex .75s var(--ease);
}
.stripe.is-open { flex: 2.6; }
.stripe:nth-child(1) { --c: var(--peach); }
.stripe:nth-child(2) { --c: var(--sky); }
.stripe:nth-child(3) { --c: var(--lilac); }
.stripe:nth-child(4) { --c: var(--mint); }
.stripe:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.stripe .num { font-family: "Unbounded", sans-serif; font-weight: 600; font-size: 15px; }
.stripe-body { display: block; }
.nw { white-space: nowrap; }
.stripe .nm { display: block; font-family: "Unbounded", sans-serif; font-weight: 600; font-size: clamp(16px, 13cqi, 34px); line-height: 1.15; letter-spacing: -0.01em; }
.stripe .dt {
  display: block; margin-top: 14px; max-width: 30em; opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease .15s, transform .5s ease .15s;
}
.stripe.is-open .dt { opacity: 1; transform: none; }
.stripe .dt-p { display: block; font-size: clamp(16px, 1.05vw, 19px); color: var(--ink-2); }
.stripe .tags { display: block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
@media (max-width: 860px) {
  .stripes { flex-direction: column; height: auto; }
  .stripe, .stripe.is-open { flex: none; min-height: 190px; }
  .stripe .dt { opacity: 1; transform: none; }
}

/* Liens vers les pages d'expertise */
.xlinks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.xlinks-k { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); margin-right: 6px; }
.xlinks a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 14px; font-weight: 600; text-decoration: none; color: var(--ink); transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.xlinks a::after { content: "→"; margin-left: 8px; }
.xlinks a:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* Approche */
.appr { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 140px); align-items: start; }
@media (max-width: 900px) { .appr { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
.quote { font-size: clamp(24px, 2.7vw, 52px); font-weight: 500; line-height: 1.2; }
.quote mark { background: var(--peach); color: inherit; padding: 0 .12em; }
.prin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
@media (max-width: 600px) { .prin { grid-template-columns: minmax(0, 1fr); } }
.prin > div { padding: clamp(22px, 2vw, 36px) clamp(22px, 2vw, 36px) clamp(22px, 2vw, 36px) 0; border-bottom: 1px solid var(--line); }
.prin h3 { font-family: "Unbounded", sans-serif; font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.prin p { color: var(--muted); font-size: clamp(16px, 1vw, 18px); }
.sq { display: inline-block; width: 12px; height: 12px; margin-right: 10px; vertical-align: 1px; background: var(--c); }
.c-peach { --c: var(--peach-deep); }
.c-sky { --c: var(--sky-deep); }
.c-lilac { --c: var(--lilac-deep); }
.c-mint { --c: var(--mint-deep); }

/* Travaux */
.pfilters { display: flex; flex-wrap: wrap; gap: 8px; margin: -16px 0 28px; }
.pfilter {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line); background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2);
  cursor: pointer; transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.pfilter i { width: 8px; height: 8px; display: inline-block; }
.pfilter .pcount { font-size: 12px; color: var(--muted-2); }
.pfilter:hover { border-color: var(--ink); }
.pfilter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.pfilter[aria-pressed="true"] .pcount { color: #D9D0C8; }
.pfilter:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.work { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 3.5vw, 80px); align-items: stretch; }
@media (max-width: 900px) { .work { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
.plist { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.pitem {
  position: relative; display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: center; width: 100%;
  padding: 17px 6px 17px 18px; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer;
  text-align: left; font: inherit; color: #7D6F65; transition: color .35s ease, padding .45s var(--ease);
}
.pitem:hover { padding-left: 26px; }
.pitem.is-active { color: var(--ink); }
.pitem:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.pbar {
  position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; background: var(--bar, var(--ink));
  transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease);
}
.pitem.is-active .pbar { transform: scaleY(1); }
/* Mobile : les projets défilent horizontalement, la fiche reste dessous. */
@media (max-width: 900px) {
  .plist {
    flex-direction: row; gap: 10px; border-top: 0; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gutter); margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 10px; scrollbar-width: none;
  }
  .plist::-webkit-scrollbar { display: none; }
  .pitem {
    flex: 0 0 auto; width: auto; grid-template-columns: auto auto; grid-template-rows: auto auto; gap: 4px 10px;
    padding: 14px 18px 14px 20px; border: 1px solid var(--line); border-radius: var(--radius); scroll-snap-align: start;
  }
  .pitem:hover { padding-left: 20px; }
  .pitem .pname { grid-column: 1 / -1; grid-row: 2; font-size: 17px; white-space: nowrap; }
  .pbar { top: 10px; bottom: 10px; }
}
.pidx { font-family: "Unbounded", sans-serif; font-size: 13px; font-weight: 600; }
.pname { font-family: "Unbounded", sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.pcat { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.pcat i { width: 10px; height: 10px; display: inline-block; }
.panel {
  border-radius: var(--radius); padding: clamp(28px, 3vw, 64px); display: grid; grid-template-columns: 1fr clamp(200px, 15vw, 300px);
  gap: 30px; align-items: start; background: #FCE3D5; transition: background-color .6s ease; min-height: clamp(400px, 52vh, 600px);
}
@media (max-width: 640px) { .panel { grid-template-columns: minmax(0, 1fr); padding: 28px; } }
.panel .facet polygon { transition: fill .6s ease; }
.panel .facet { width: 100%; height: auto; aspect-ratio: 1; animation: spin 60s linear infinite; }
.ptitle { font-family: "Unbounded", sans-serif; font-size: clamp(26px, 2.2vw, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin-top: 14px; }
.plabel { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin-top: 26px; }
.pfunc { font-size: clamp(17px, 1.2vw, 21px); color: #2A2420; margin-top: 8px; max-width: 34em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chips span { font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 4px; background: rgba(251,247,244,0.75); }
.note { font-size: 13px; color: var(--muted-2); margin-top: 18px; }
.plink { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 15px; font-weight: 600; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.plink svg { transition: transform .3s ease; }
.plink:hover svg { transform: translate(2px, -2px); }

/* Accroche vers le hub /games */
.gteaser {
  display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin: -12px 0 32px; padding: clamp(18px, 1.6vw, 28px) clamp(20px, 2vw, 36px);
  border-radius: var(--radius); background: var(--lilac); color: var(--ink); text-decoration: none; transition: background-color .3s ease;
}
.gteaser:hover { background: var(--lilac-deep); color: var(--ink); }
.gteaser:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.gteaser-k { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.gteaser-t { flex: 1; min-width: 14em; font-size: clamp(16px, 1.2vw, 22px); font-weight: 600; line-height: 1.25; }
.gteaser-go { font-size: 24px; font-weight: 600; transition: transform .3s ease; }
.gteaser:hover .gteaser-go { transform: translateX(6px); }
.gteaser + .pfilters { margin-top: 0; }

/* Méthode */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 64px); position: relative; padding-top: 34px; }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.track { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: rgba(31,26,22,0.08); }
.fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--peach-deep), var(--sky-deep), var(--lilac-deep), var(--mint-deep)); transform-origin: left; }
.step .n { color: var(--c); font-size: clamp(40px, 3.2vw, 64px); font-weight: 600; line-height: 1; }
.step h3 { font-family: "Unbounded", sans-serif; font-size: 19px; font-weight: 600; margin: 16px 0 8px; }
.step p { color: var(--muted); font-size: clamp(16px, 1vw, 18px); max-width: 26em; }

/* FAQ */
.faq { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(40px, 6vw, 140px); align-items: start; }
@media (max-width: 900px) { .faq { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.faq-k { margin-top: 20px; }
.qas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 3vw, 64px); border-top: 1px solid var(--line); }
@media (max-width: 640px) { .qas { grid-template-columns: minmax(0, 1fr); } }
.qa { padding: clamp(22px, 2vw, 36px) 0; border-bottom: 1px solid var(--line); }
.qa h3 { font-family: "Unbounded", sans-serif; font-size: clamp(16px, 1.1vw, 20px); font-weight: 600; line-height: 1.3; margin-bottom: 10px; }
.qa p { color: var(--muted); font-size: clamp(16px, 1vw, 18px); }

/* Contact */
.contact-sec { padding-bottom: 40px; }
.contact {
  background: var(--ink); color: var(--cream); border-radius: var(--radius); padding: clamp(80px, 7vw, 150px) clamp(48px, 6vw, 140px); display: grid;
  grid-template-columns: 1fr auto; gap: 40px; align-items: center; overflow: hidden;
}
@media (max-width: 860px) { .contact { grid-template-columns: minmax(0, 1fr); padding: 56px 28px; } }
.contact .h2 { color: var(--cream); }
.contact p { color: #D9D0C8; font-size: clamp(17px, 1.2vw, 21px); margin-top: 18px; max-width: 32em; }
.contact-actions { display: flex; align-items: center; gap: 24px; margin-top: 34px; flex-wrap: wrap; }
.contact .mail { color: #D9D0C8; font-size: 15px; text-underline-offset: 4px; }
.contact .mail:hover { color: var(--cream); }
.btn-peach { background: var(--peach); color: var(--ink); }
.btn-peach:hover { background: var(--cream); color: var(--ink); }
.contact .mini { width: clamp(140px, 13vw, 260px); height: auto; animation: spin 50s linear infinite; }
footer { padding: 36px 0 48px; }
.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 14px; color: var(--muted-2); }
.foot-brand { font-weight: 600; color: var(--ink); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot a { color: var(--muted-2); text-underline-offset: 4px; }
.foot a:hover { color: var(--coral); }

/* 404 */
.nf { min-height: 100vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 24px; }
.nf-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* Scroll reveals (progressive enhancement) */
/* Film de l'atelier : lien d'accroche, carte dans « Travaux », lecteur en <dialog> */
.film-open { display: inline-flex; align-items: center; gap: 8px; }
.film-open svg { flex: none; }
.film-dur { font-weight: 500; color: var(--muted-2); }
.fteaser {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 64px); align-items: center;
  margin-top: clamp(48px, 5vw, 96px); padding: clamp(12px, 1.2vw, 20px); border-radius: var(--radius);
  background: var(--sky); color: var(--ink); text-decoration: none; transition: background-color .3s ease;
}
.fteaser:hover { background: var(--sky-deep); color: var(--ink); }
.fteaser:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.fteaser-img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: var(--cream); }
.fteaser-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.fteaser:hover .fteaser-img img { transform: scale(1.025); }
.fplay {
  position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: clamp(56px, 5vw, 88px); aspect-ratio: 1;
  border-radius: 50%; background: var(--ink); color: var(--cream); transform: translate(-50%, -50%); transition: background-color .3s ease, transform .3s ease;
}
.fplay svg { margin-left: 3px; }
.fteaser:hover .fplay { background: var(--coral); transform: translate(-50%, -50%) scale(1.06); }
.fteaser-txt { display: flex; flex-direction: column; gap: 14px; padding: 0 clamp(4px, 1.6vw, 28px) 0 0; }
.fteaser-t { font-size: clamp(22px, 2vw, 38px); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.fteaser-d { max-width: 32em; font-size: clamp(15px, 1vw, 17px); color: var(--ink-2); }
@media (max-width: 820px) { .fteaser { grid-template-columns: minmax(0, 1fr); } .fteaser-txt { padding: 4px 8px 8px; } }

html:has(.film[open]) { overflow: hidden; }
.film {
  /* largeur calée sur la hauteur disponible : la vidéo 16:9 remplit le cadre, sans bandes */
  width: min(1480px, calc(100vw - 32px), calc((100svh - 190px) * 16 / 9 + 36px)); max-width: none; max-height: calc(100svh - 32px); margin: auto; padding: 0; border: 0;
  border-radius: var(--radius); background: var(--cream); color: var(--ink); overflow: auto;
}
.film::backdrop { background: rgba(31, 26, 22, .88); }
.film[open] { animation: film-in .45s var(--ease) both; }
@keyframes film-in { from { opacity: 0; transform: translateY(18px); } }
.film-in { display: flex; flex-direction: column; gap: 12px; padding: clamp(10px, 1.2vw, 18px); }
.film-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-left: 6px; }
.film-title { font-size: clamp(16px, 1.3vw, 22px); font-weight: 600; letter-spacing: -.01em; }
.film-x {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: var(--radius);
  background: var(--ink); color: var(--cream); cursor: pointer; transition: background-color .3s ease;
}
.film-x:hover { background: var(--coral); }
.film-x:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.film video { display: block; width: 100%; height: auto; max-height: calc(100svh - 190px); aspect-ratio: 16 / 9; border-radius: 4px; background: var(--ink); }
.film-desc { max-width: 60em; padding: 0 6px 4px; font-size: 15px; color: var(--ink-2); }

@supports (animation-timeline: view()) {
  .rv { opacity: 0; transform: translateY(34px); animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  .fill { transform: scaleX(0); animation: grow linear both; animation-timeline: view(); animation-range: entry 30% cover 55%; }
}
@keyframes grow { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .h1 .ln i, .up, .rv, .media { opacity: 1 !important; transform: none !important; }
  .media-wrap::before, .media-wrap::after, .fill { transform: none !important; }
  .media video { display: none; }
  html { scroll-behavior: auto; }
}