/*
  V15 RESPONSIVE SYSTEM
  ---------------------
  The layout responds to available content width, not device brands.
  Base page CSS remains the large-desktop design.
  Breakpoints are chosen where the compositions actually need to reflow.
*/

/* ---------- Universal guardrails ---------- */
html,body{max-width:100%;overflow-x:hidden}
main,section,article,figure,div{min-width:0}
img,video{max-width:100%}
.case-media,
.support-media,
.production-frame,
.story-main-video,
.story-short-video,
.game-preview,
.bts-card,
.build-editorial__media{max-width:100%;min-width:0;overflow:hidden}
.case-media>video,
.support-media>video,
.production-frame>video,
.story-main-video>video,
.story-short-video>video,
.game-preview>img,
.bts-card>video,
.build-editorial__media>video{
  max-width:100%;
}

/* Header collapses according to actual navigation room. */
@media (max-width:1100px){
  .desktop-nav{display:none}
  .menu-toggle{display:block}
}

/* ---------- Laptop / resized desktop: <=1279 ---------- */
@media (max-width:1279px){
  :root{--gutter:clamp(28px,4.4vw,54px)}

  .page-hero{
    min-height:62svh;
    padding:130px var(--gutter) 78px;
  }
  .page-hero h1{font-size:clamp(62px,8vw,112px)}

  .case-study,
  .supporting-section,
  .photo-gallery,
  .photo-process,
  .photo-field,
  .world-projects,
  .about-page-grid,
  .experience-list{
    padding-left:var(--gutter);
    padding-right:var(--gutter);
  }

  .support-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .support-card--wide{grid-column:span 2}

  /* Home hero: real laptop composition, not a squeezed desktop. */
  .hero{
    min-height:max(760px,100svh);
    height:100svh;
  }
  .hero-copy{
    left:var(--gutter);
    top:50%;
    width:min(44vw,500px);
  }
  .hero h1{font-size:clamp(68px,7.5vw,104px)}
  .hero-role{margin-top:24px}
  .hero-lead{
    margin-top:16px;
    max-width:460px;
    font-size:clamp(16px,1.55vw,20px);
  }
  .hero-offer{margin-top:14px}
  .hero-offer__items{gap:5px}
  .hero-offer__items span{min-height:25px;padding:5px 8px;font-size:8px}
  .hero-secondary{margin-top:9px}
  .hero-sub{font-size:11px;line-height:1.45}
  .hero-copy .text-link{margin-top:18px}

  .hero-portrait{
    left:72%;
    top:3%;
    bottom:auto;
    width:min(52vw,590px);
    height:97%;
  }

  .hero-fragment--mosaique-a{
    left:47%;
    top:17%;
    width:clamp(145px,17vw,205px);
  }
  .hero-fragment--green{
    right:4%;
    top:10%;
    width:clamp(125px,14vw,175px);
  }
  .hero-fragment--backstage-a{
    --backstage-a-w:clamp(125px,12vw,175px);
    display:block;
    left:calc(72% - min(26vw,295px) - var(--backstage-a-w) + 14px);
    bottom:7%;
    width:var(--backstage-a-w);
    z-index:17;
  }
  .hero-fragment--backstage-b,
  .hero-fragment--mosaique-b{display:none}
  .hero-meta{
    left:var(--gutter);
    bottom:20px;
    max-width:80vw;
    flex-wrap:wrap;
  }

  /* Project pages: stop media/text columns becoming too narrow. */
  .case-header{grid-template-columns:52px minmax(0,1fr)}
  .case-header h2{font-size:clamp(44px,5.7vw,76px)}
  .case-context-grid{gap:14px}
  .case-media-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .case-split{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* Worldbuilding: copy first, media gets a full row. */
  .world-projects>article{
    grid-template-columns:44px minmax(0,1fr);
    align-items:start;
    gap:20px 24px;
  }
  .world-projects>article>.case-number{grid-column:1;grid-row:1}
  .world-projects>article>.world-card-copy{grid-column:2;grid-row:1}
  .world-projects>article>:last-child{
    grid-column:2;
    grid-row:2;
    width:100%;
    min-width:0;
  }
  .world-card-copy h2{font-size:clamp(42px,5vw,68px)}
  .game-preview,
  .game-version .game-preview{
    width:100%;
    min-height:0;
    height:auto;
    aspect-ratio:16/9;
  }
  .exploration-pair--games{
    width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }

  /* Photo / Forum: stable fluid widths. */
  .photo-gallery>header{align-items:start}
  .photo-magazine--v14{columns:3}
  .photo-process{grid-template-columns:minmax(220px,.55fr) minmax(0,1.45fr);gap:36px}
  .photo-field{grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr);gap:36px}
  .forum-magazine{columns:2}

  /* About */
  .about-hero{
    min-height:76svh;
    gap:clamp(30px,4vw,60px);
  }
  .about-hero__copy h1{font-size:clamp(60px,7vw,96px)}
}

/* ---------- Content breakpoint: complex Home compositions stack ---------- */
@media (max-width:1180px){
  .home-section{
    grid-template-columns:1fr;
    gap:46px;
    padding:82px var(--gutter);
  }
  .section-intro{
    max-width:720px;
  }
  .section-intro h2,
  html[lang="fr"] .production-first .section-intro h2,
  html[lang="fr"] .stories-teaser .section-intro h2{
    font-size:clamp(54px,7vw,78px);
  }

  .production-editorial,
  .featured-story,
  .frame-editorial,
  .build-editorial{
    width:100%;
    max-width:100%;
  }

  .build-editorial{
    grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);
    min-height:520px;
  }
  .build-editorial__media{min-height:520px}
  .build-editorial__title{
    white-space:normal;
    font-size:clamp(48px,5.5vw,70px)!important;
  }

  /* Case context text also gets room before it becomes cramped. */
  .case-context-grid{grid-template-columns:1fr}
}

/* ---------- Tablet / narrow laptop: <=980 ---------- */
@media (max-width:980px){
  :root{--gutter:clamp(24px,5vw,44px)}

  /* At this width, use the already-approved immersive Hero composition. */
  .hero{
    min-height:100svh;
    height:100svh;
  }
  .hero-grid{right:-8%;top:12%;width:68vw;height:55vh;opacity:.08}
  .hero-glow--warm{left:-4%;top:28%;width:68vw;height:52vh}
  .hero-glow--cool{right:-15%;top:16%;width:66vw;height:54vh}

  .hero-copy{
    z-index:32;
    left:var(--gutter);
    right:var(--gutter);
    top:auto;
    bottom:11svh;
    width:auto;
    transform:none;
    pointer-events:none;
  }
  .hero-copy>*{display:none}
  .hero-copy h1{
    display:block;
    font-size:clamp(68px,13vw,108px);
    line-height:.78;
    color:#fff;
    text-shadow:0 3px 22px rgba(0,0,0,.65);
  }

  .hero-portrait{
    z-index:14;
    left:59%;
    top:4%;
    bottom:auto;
    width:min(88vw,650px);
    height:96%;
    transform:translateX(-50%);
  }

  .hero-fragment{z-index:5}
  .hero-fragment--backstage-a,
  .hero-fragment--backstage-b{display:none}
  .hero-fragment--mosaique-a{
    display:block;
    left:3%;
    top:15%;
    width:clamp(120px,24vw,190px);
  }
  .hero-fragment--green{
    display:block;
    right:3%;
    top:10%;
    width:clamp(105px,20vw,160px);
  }
  .hero-fragment--mosaique-b{display:none}
  .hero-meta{display:none}
  .hero-scroll-cue{
    display:flex;
    position:absolute;
    z-index:34;
    left:var(--gutter);
    bottom:4svh;
    align-items:center;
    gap:12px;
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:.16em;
    color:rgba(255,255,255,.55);
  }
  .hero-scroll-cue i{display:block;width:42px;height:1px;background:rgba(255,255,255,.4)}

  .mobile-hero-intro{
    display:block;
    background:var(--paper);
    color:var(--ink);
    padding:72px var(--gutter);
  }
  .mobile-hero-intro h2{
    margin-top:12px;
    font-family:var(--serif);
    font-size:clamp(58px,11vw,88px);
    font-weight:400;
    line-height:.86;
    letter-spacing:-.06em;
  }
  .mobile-hero-role{margin-top:24px;font-size:10px;text-transform:uppercase;letter-spacing:.14em;opacity:.55}
  .mobile-hero-lead{margin-top:24px;max-width:680px;font-family:var(--serif);font-size:23px;line-height:1.3}
  .mobile-hero-sub{margin-top:14px;max-width:680px;font-size:13px;line-height:1.55;opacity:.7}
  .hero-offer--mobile .hero-offer__items{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .hero-offer--mobile .hero-offer__items span{justify-content:flex-start;min-width:0}

  /* Main structural layouts become single-column before they break. */
  .manifesto{grid-template-columns:1fr 1fr;gap:32px}
  .manifesto-mark{display:none}

  .production-editorial{grid-template-columns:1fr 1fr}
  .production-editorial__card--large .production-frame{
    height:auto;
    aspect-ratio:4/5;
  }
  .production-editorial__card--stack .production-frame{
    height:auto;
    aspect-ratio:4/3;
  }

  .featured-story{grid-template-columns:1fr}
  .story-art{min-height:380px}
  .story-copy{padding:34px}
  .story-copy h3{font-size:clamp(42px,7vw,64px)}

  .frame-editorial{
    grid-template-columns:1.15fr .85fr;
    min-height:0;
  }
  .frame-result{min-height:540px}
  .frame-process{min-height:330px}

  .build-editorial{
    grid-template-columns:1fr;
    min-height:0;
  }
  .build-editorial__copy{
    min-height:330px;
    padding:36px;
  }
  .build-editorial__media{
    min-height:0;
    aspect-ratio:16/9;
  }

  .about-grid{grid-template-columns:1fr;gap:34px}

  /* Inner pages */
  .case-context-grid{grid-template-columns:1fr}
  .case-media-grid,
  .case-media-grid--balanced,
  .case-split,
  .case-split--compact{
    grid-template-columns:1fr;
  }
  .case-media-grid--balanced .case-media,
  .case-split--compact .case-media{
    width:100%;
    max-width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:16/9;
  }
  .support-grid{grid-template-columns:1fr 1fr}
  .support-media:not(.support-media--mee):not(.support-media--promo){
    height:auto;
    min-height:0;
    aspect-ratio:16/9;
  }
  .support-card--portrait .support-media{aspect-ratio:4/5}

  .story-feature,
  .story-feature--main{grid-template-columns:1fr}
  .story-feature--main .story-feature-logo{
    width:min(55%,360px);
    margin:0 auto 20px;
  }
  .story-short-row{grid-template-columns:1fr}
  .story-short-row .story-short-video{
    width:min(330px,100%);
    margin-left:auto;
  }

  .world-projects>article{
    grid-template-columns:38px minmax(0,1fr);
  }
  .exploration-pair--games{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* Photo becomes a proper two-column editorial wall. */
  .photo-gallery>header{display:block}
  .photo-gallery h2{margin-top:14px}
  .photo-magazine--v14{columns:2}
  .photo-process,
  .photo-field{
    grid-template-columns:1fr;
    gap:34px;
  }
  .forum-magazine{columns:2}

  .about-hero{
    min-height:0;
    grid-template-columns:1fr;
    padding:96px var(--gutter) 72px;
    gap:38px;
  }
  .about-hero__portrait{
    width:min(70vw,500px);
    justify-self:center;
    order:0;
  }
  .about-hero__copy{order:1}
  .about-page-grid{grid-template-columns:1fr;gap:38px}
  .experience-list header,
  .experience-rows>div{grid-template-columns:1fr;gap:10px}

  .work-hub-grid{grid-template-columns:1fr}
  .hub-card{min-height:38svh}
}

/* ---------- Phones / portrait tablets: <=768 ---------- */
@media (max-width:768px){
  :root{--gutter:6vw;--header-h:66px}
  .site-header{height:66px}
  .brand{font-size:13px}

  .hero-portrait{
    left:59%;
    top:5%;
    width:min(102vw,640px);
    height:95%;
  }
  .hero-fragment--mosaique-a{left:3%;top:16%;width:29vw}
  .hero-fragment--green{right:3%;top:11%;width:25vw}
  .hero-copy{bottom:12svh}
  .hero-copy h1{font-size:clamp(64px,18vw,104px)}
  .mobile-hero-intro{padding:76px var(--gutter)}

  .manifesto{grid-template-columns:1fr;padding:70px var(--gutter);gap:28px}
  .home-section{padding:74px var(--gutter);gap:42px}
  .section-intro{max-width:none}
  .section-intro h2,
  html[lang="fr"] .production-first .section-intro h2,
  html[lang="fr"] .stories-teaser .section-intro h2{
    font-size:clamp(50px,13vw,74px);
    line-height:.82;
  }

  .production-editorial{grid-template-columns:1fr;gap:38px}
  .production-editorial__card--large .production-frame{
    aspect-ratio:4/5;
  }
  .production-editorial__card--stack .production-frame{aspect-ratio:4/3}

  .frame-editorial{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    min-height:0;
  }
  .frame-result,
  .frame-process{
    grid-column:auto;
    grid-row:auto;
    min-height:0;
    aspect-ratio:4/5;
  }
  .frame-process{aspect-ratio:16/9}
  .frame-note{min-height:0}

  .build-editorial__copy{min-height:310px}
  .build-editorial__media{aspect-ratio:4/3}

  .page-hero{
    padding:120px var(--gutter) 68px;
    min-height:60svh;
  }
  .page-hero h1{font-size:clamp(56px,14vw,94px)}
  .case-study,
  .supporting-section,
  .photo-gallery,
  .photo-process,
  .photo-field,
  .world-projects,
  .about-page-grid,
  .experience-list{
    padding-top:68px;
    padding-bottom:68px;
  }
  .case-header{
    grid-template-columns:38px minmax(0,1fr);
    gap:16px;
    margin-bottom:34px;
  }
  .case-header h2{font-size:clamp(42px,11vw,68px)}
  .support-grid{grid-template-columns:1fr}
  .support-card--wide{grid-column:auto}

  .world-projects{
    gap:54px;
  }
  .world-projects>article{
    grid-template-columns:34px minmax(0,1fr);
    gap:16px;
  }
  .world-projects>article>:last-child{grid-column:2}
  .exploration-pair--games{grid-template-columns:1fr}
  .game-version .game-preview{aspect-ratio:16/9}

  .photo-magazine--v14{columns:2}
  .forum-magazine{columns:1}

  .door-return{
    align-items:flex-start;
    flex-direction:column;
  }

  .contact{
    padding:72px var(--gutter) 28px;
  }
  .contact>a{font-size:clamp(48px,13vw,82px)}
  .contact-meta{
    margin-top:64px;
    flex-direction:column;
    gap:10px;
  }

  .contact-page{
    padding:110px var(--gutter) max(42px,env(safe-area-inset-bottom));
  }
}

/* ---------- Small phones ---------- */
@media (max-width:560px){
  :root{--gutter:5.5vw}

  .hero-portrait{
    left:62%;
    top:7%;
    width:118vw;
    height:93%;
  }
  .hero-fragment--mosaique-a{left:2%;top:17%;width:35vw}
  .hero-fragment--green{right:1%;top:11%;width:30vw}
  .hero-copy{bottom:14svh}
  .hero-copy h1{font-size:clamp(58px,17.5vw,78px)}

  .mobile-hero-lead{font-size:21px}
  .mobile-hero-sub{font-size:12.5px}
  .hero-offer--mobile .hero-offer__items{grid-template-columns:1fr}
  .mobile-hero-intro .hero-secondary{display:block}
  .mobile-hero-intro .hero-secondary__label,
  .mobile-hero-intro .hero-secondary__skills{display:block}
  .mobile-hero-intro .hero-secondary__skills{margin-top:6px}

  .photo-magazine--v14{columns:1}
  .forum-magazine{columns:1}

  .about-hero{padding-top:82px}
  .about-hero__portrait{width:100%;max-width:460px}
  .about-hero__copy h1{font-size:clamp(52px,14vw,74px)}
  .about-contact-cta{padding:70px var(--gutter)}

  .hub-card{
    grid-template-columns:30px minmax(0,1fr) auto;
    padding-inline:var(--gutter);
  }
  .hub-card h2{font-size:clamp(38px,11vw,48px)}

  .contact-page h1{font-size:clamp(58px,15vw,82px)}
  .contact-page>p:nth-of-type(2){font-size:20px}
  .contact-links a,.contact-links button{gap:16px}
  .contact-email-address{max-width:76vw;overflow-wrap:anywhere}
}

/* ---------- Low-height desktop / landscape ---------- */
@media (min-width:981px) and (max-height:760px){
  .hero-copy{top:50%}
  .hero h1{font-size:clamp(62px,6.8vw,92px)}
  .hero-role{margin-top:18px}
  .hero-lead{margin-top:12px}
  .hero-offer{margin-top:10px}
  .hero-secondary{margin-top:7px}
  .hero-sub{display:none}
  .hero-copy .text-link{margin-top:14px}
  .hero-portrait{top:2%;height:98%}
  .hero-meta{bottom:12px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-fragment{transition:none;transform:none}
  .hero-fragment.is-revealed{opacity:1}
  .hub-card{transition:none}
}



@media (max-width:900px){
  .about-tools__groups,.resume-choice__grid{grid-template-columns:1fr}
}

/* 2026-09-03 — Vimage Factory: préserver la vidéo entière sur ordinateur uniquement. */
@media (min-width:901px){
  .support-media--vimage{
    height:auto!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    overflow:visible!important;
  }
  .support-media--vimage video{
    display:block;
    width:100%;
    height:auto!important;
    max-height:none!important;
    object-fit:contain!important;
  }
}

/* 2026-09-07 fix3 — Creation d'univers & VFX mobile: media full width, never squeezed into the number column. */
@media (max-width:680px){
  .world-projects>article#excalibur,
  .world-projects>article#compositing{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
  .world-projects>article#excalibur>.case-number,
  .world-projects>article#compositing>.case-number,
  .world-projects>article#excalibur>.world-card-copy,
  .world-projects>article#compositing>.world-card-copy,
  .world-projects>article#excalibur>.world-media-triptych,
  .world-projects>article#compositing>.world-media-triptych{
    grid-column:1!important;
    grid-row:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .world-media-triptych{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
    width:100%!important;
    max-width:100%!important;
  }
  .world-media-triptych figure,
  .world-media-triptych>a,
  .world-media-triptych__center{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  .world-media-triptych video,
  .world-media-triptych img,
  .game-preview.world-media-triptych__center img{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
  }
  .game-preview.world-media-triptych__center{
    min-height:0!important;
    height:auto!important;
    aspect-ratio:auto!important;
    overflow:visible!important;
    background:transparent!important;
  }
}