/* Sections ajoutées depuis le CMS : compositions fixes, sans contrôle de grille. */
.cms-text-section{padding:90px 8vw;max-width:1200px;margin:auto}.cms-text-section h2{font-size:32px;font-weight:400;margin-bottom:28px}.cms-text-section p{font-size:20px;line-height:1.5;white-space:pre-line;max-width:800px}.cms-image-section img,.cms-image-section video{width:100%;display:block}.cms-pair-section{display:grid;grid-template-columns:1fr 1fr;gap:0}.cms-pair-section img{width:100%;height:100%;object-fit:cover}.cms-caption{padding:16px 3vw;font-size:14px;white-space:pre-line}@media(max-width:700px){.cms-text-section{padding:50px 6vw}.cms-text-section h2{font-size:25px}.cms-text-section p{font-size:17px}.cms-pair-section{grid-template-columns:1fr}}

@media(min-width:701px){.home .collage .collage-art :is(img,video).cms-position-desktop{left:var(--desktop-x)!important;top:var(--desktop-y)!important;width:var(--desktop-width)!important;height:auto!important;transform:rotate(var(--desktop-rotation)) scale(var(--desktop-flip-x,1),var(--desktop-flip-y,1))!important;z-index:var(--desktop-z)!important;display:var(--desktop-display)!important;}}

@media(max-width:700px){.home .collage .collage-art :is(img,video).cms-position-mobile{left:var(--mobile-x)!important;top:var(--mobile-y)!important;width:var(--mobile-width)!important;height:auto!important;transform:rotate(var(--mobile-rotation)) scale(var(--mobile-flip-x,1),var(--mobile-flip-y,1))!important;z-index:var(--mobile-z)!important;display:var(--mobile-display)!important;}}

@media(min-width:701px){.home .collage.cms-frame-desktop{width:var(--frame-desktop-width)!important;height:var(--frame-desktop-height)!important;max-width:100%;}}

@media(max-width:700px){.home .collage.cms-frame-mobile{width:var(--frame-mobile-width)!important;height:var(--frame-mobile-height)!important;max-width:100%;}}

/* Intrinsic dimensions reserve the natural aspect ratio while CSS sets the width. */
.home .collage-art img[width][height],.cms-about-portrait-art img[width][height]{height:auto}

/* Home order controls placement, independent from each collage's image styling. */
.home .archive.cms-home-flow{display:flex;flex-direction:column;align-items:flex-start;height:auto;min-height:0;padding:18.365vw 6vw var(--home-bottom-space-desktop,8vw);gap:5vw}
.home .cms-home-flow .archive-title{position:relative;left:auto;top:auto;align-self:center;width:30.77vw;margin:0 0 3vw}
.home .cms-home-flow .collage{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;margin:0!important;height:auto!important;max-width:100%;width:var(--frame-desktop-width,var(--home-width,46vw))!important}
.home .cms-home-flow .collage-art{position:relative;display:block;inset:auto;width:100%;height:var(--frame-desktop-height,var(--home-height,36vw))}
.home .cms-home-flow .collage-acause{--home-width:48vw;--home-height:31vw}
.home .cms-home-flow .collage-ssm{--home-width:41.5vw;--home-height:36.5vw}
.home .cms-home-flow .collage-encore{--home-width:46vw;--home-height:32.5vw}
.home .cms-home-flow .collage-club{--home-width:46.1vw;--home-height:34.5vw}
.home .cms-home-flow .collage-shirts{--home-width:46vw;--home-height:36vw}
.home .cms-home-flow .collage.cms-side-left{align-self:flex-start}
.home .cms-home-flow .collage.cms-side-right{align-self:flex-end}
.home .cms-home-flow .collage .collage-caption{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;margin-top:32px;white-space:normal}
.home .cms-home-flow .cms-side-left .collage-caption{text-align:left}
.home .cms-home-flow .cms-side-right .collage-caption{text-align:right}
@media(max-width:700px){
 .home .archive.cms-home-flow{padding:219px 6vw var(--home-bottom-space-mobile,70px);gap:120px}
 .home .cms-home-flow .archive-title{width:88vw;margin-bottom:50px}
 .home .cms-home-flow .collage{width:var(--frame-mobile-width,88vw)!important}
 .home .cms-home-flow .collage-art{height:var(--frame-mobile-height,var(--home-mobile-height,85vw))}
 .home .cms-home-flow .collage-acause{--home-mobile-height:59vw}
 .home .cms-home-flow .collage-ssm{--home-mobile-height:95.6vw}
 .home .cms-home-flow .collage-encore{--home-mobile-height:105vw}
 .home .cms-home-flow .collage-club{--home-mobile-height:90vw}
 .home .cms-home-flow .collage-shirts{--home-mobile-height:111.64vw}
}

/* Keep the about canvas in the same viewport coordinate system as its objects. */

@media(min-width:701px){.about .bag-items{width:var(--frame-desktop-width,100%);height:var(--frame-desktop-height,31cqw)}.about .bag-item.cms-position-desktop{left:var(--desktop-x)!important;top:var(--desktop-y)!important;width:var(--desktop-width)!important;transform:rotate(var(--desktop-rotation)) scale(var(--desktop-flip-x,1),var(--desktop-flip-y,1))!important;z-index:var(--desktop-z)!important;display:var(--desktop-display)!important}}
@media(max-width:700px){.about .bag-items{width:var(--frame-mobile-width,100%);height:var(--frame-mobile-height,127vw)}.about .bag-item.cms-position-mobile{left:var(--mobile-x)!important;top:var(--mobile-y)!important;width:var(--mobile-width)!important;transform:rotate(var(--mobile-rotation)) scale(var(--mobile-flip-x,1),var(--mobile-flip-y,1))!important;z-index:var(--mobile-z)!important;display:var(--mobile-display)!important}}
@media(max-width:700px){.about .about-bag{height:auto}.about .about-work br,.about .about-stories br{display:initial}}

/* Native pointer in previews, including animation overlays and pseudo-elements. */
html[data-cms-preview] body *::before,html[data-cms-preview] body *::after{cursor:inherit!important}
html[data-cms-preview] body .scene-piece,html[data-cms-preview] body .scene-piece *,html[data-cms-preview] body .bag-item,html[data-cms-preview] body .bag-item *,html[data-cms-preview] body video{cursor:default!important}

@media(min-width:701px){.home .cms-home-flow .collage .collage-caption{transform:translateX(var(--caption-x-desktop,0px))}}
@media(max-width:700px){.home .cms-home-flow .collage .collage-caption{transform:translateX(var(--caption-x-mobile,0px))}}

/* Keep added copy within the existing About columns. */
.about .about-text,.about .about-lede,.about .about-bag h2{overflow-wrap:anywhere;white-space:normal}
@media(min-width:701px){.about .about-lede{width:40%}}

.project .intro-services,.project .intro-description{min-width:0;overflow-wrap:anywhere}
@media(min-width:701px){.project .project-intro{column-gap:15px}.project .intro-services dd{white-space:normal}}
.project .gallery img.cms-media-half,.project .gallery video.cms-media-half{width:calc(50% - 7.5px)!important;max-width:calc(50% - 7.5px)!important;justify-self:start}
.project .gallery img.cms-media-full,.project .gallery video.cms-media-full{width:100%!important;max-width:100%!important;grid-column:1/-1}
.project .gallery .acause-brand-static{display:block;width:100%}.project .gallery .acause-brand-static img{display:block;width:100%!important;height:auto!important;aspect-ratio:auto!important;object-fit:contain!important}

.cms-cropped-media{display:contents}

.project .gallery .cms-media-row{display:flex!important;flex-wrap:wrap;gap:15px;align-items:flex-start}
.project .gallery .cms-media-row>img:not(.cms-media-full),.project .gallery .cms-media-row>picture:not(.cms-media-full){width:calc(50% - 7.5px)!important;max-width:calc(50% - 7.5px)!important;flex:none}
.project .gallery picture.cms-media-half{display:block;width:calc(50% - 7.5px)!important;max-width:calc(50% - 7.5px)!important}
.project .gallery picture.cms-media-full{display:block;width:100%!important;max-width:100%!important}
.project .gallery picture.cms-media-half img,.project .gallery picture.cms-media-full img{width:100%!important;max-width:100%!important}

@media(max-width:700px){.project .gallery img.cms-media-half,.project .gallery video.cms-media-half,.project .gallery picture.cms-media-half,.project .gallery .cms-media-row>img,.project .gallery .cms-media-row>picture{width:100%!important;max-width:100%!important}}

.cms-responsive-media,.cms-media-desktop{display:contents}.cms-media-mobile{display:none}.project .gallery .cms-project-hero{width:100%;grid-column:1/-1}.project .gallery .cms-project-hero img,.project .gallery .cms-project-hero video,.project .gallery .cms-responsive-video{display:block;width:100%!important;height:auto!important;aspect-ratio:auto!important;object-fit:contain!important}
@media(max-width:700px){.cms-media-desktop{display:none}.cms-media-mobile{display:contents}}

.project .gallery.cms-ordered-gallery{display:flex;flex-wrap:wrap;gap:15px}.cms-ordered-gallery .cms-gallery-item{width:100%;min-width:0}.cms-ordered-gallery .cms-gallery-half{width:calc(50% - 7.5px)}.project .cms-ordered-gallery .cms-gallery-item img,.project .cms-ordered-gallery .cms-gallery-item video{display:block;width:100%!important;height:auto!important;max-width:100%;margin:0}
@media(max-width:700px){.cms-ordered-gallery .cms-gallery-half{width:100%}.cms-ordered-gallery .cms-gallery-item:not(:has(.cms-media-mobile img)):not(:has(.cms-media-mobile video)){display:none}}

.cms-about-portrait-art{position:relative}
.cms-about-portrait-art>img{position:absolute;height:auto;max-width:none}
@media(min-width:701px){.portrait:has(.cms-about-portrait-art){width:var(--portrait-desktop-width,22cqw)}.cms-about-portrait-art{height:var(--portrait-desktop-height)}.cms-about-portrait-art>.cms-position-desktop{left:var(--desktop-x);top:var(--desktop-y);width:var(--desktop-width);transform:rotate(var(--desktop-rotation)) scale(var(--desktop-flip-x,1),var(--desktop-flip-y,1));display:var(--desktop-display);z-index:var(--desktop-z)}}
@media(max-width:700px){.cms-about-portrait-art{height:auto;aspect-ratio:var(--portrait-mobile-ratio)}.cms-about-portrait-art>.cms-position-mobile{left:var(--mobile-x);top:var(--mobile-y);width:var(--mobile-width);transform:rotate(var(--mobile-rotation)) scale(var(--mobile-flip-x,1),var(--mobile-flip-y,1));display:var(--mobile-display);z-index:var(--mobile-z)}}

.collage-art video{position:absolute;height:auto;max-width:none}.bag-item video{width:100%;height:auto}


@media(min-width:701px){.about .about-services{left:67.3%;top:45.3cqw;width:var(--about-grid-column)}}
@media(max-width:700px){.about .about-services{order:7;width:100%;margin:34px 0 0;text-align:left}}

.menu-language{text-transform:lowercase}

@media(max-width:700px){
 .site-header{grid-template-columns:max-content max-content max-content max-content 40px;column-gap:4px;justify-content:space-between}
 .site-header .brand,.site-header .menu a{font-size:4vw;letter-spacing:-.2vw}
 .site-header .menu .menu-language{position:static;grid-column:4;grid-row:1;padding:0;background:transparent;font-size:4vw;line-height:1}
 .site-header .menu-toggle{grid-column:5}
}
@media(max-width:700px){
 .site-header .brand{height:auto;align-self:center}
}

@media(max-width:700px){
 .about .about-text,.about .about-lede,.about .about-bag h2{width:100%;max-width:none;overflow-wrap:normal;word-break:normal}
 .about .about-lede span{max-width:none;padding-left:0}
 .about .about-text br,.about .about-bag h2 br{display:initial}
}

.project-studio-sauve-morissette .ssm-browser-image{border:1px solid #303030;border-radius:12px}
@media(max-width:700px){.project-studio-sauve-morissette .ssm-browser-image{border-radius:7px}}
@media(max-width:700px){
 .home .collage .collage-caption{left:0!important;right:auto!important;text-align:left!important}
}
@media(max-width:700px){
 .about .about-services:empty{display:none}
 .about .about-contact{margin-top:-28px}
}
@media(max-width:700px){
 .project-encore-encore-encore .gallery .merch-mobile-photo[data-cms-mobile-format="square"]>img{
  position:static!important;inset:auto!important;width:100%!important;height:100%!important;
  aspect-ratio:1!important;max-width:none!important;margin:0!important;transform:none!important;
  object-fit:cover!important;object-position:right center!important;
 }
 .project-encore-encore-encore .merch-mobile-photo+.merch-drum{margin-top:3px}
 .project-encore-encore-encore .drum-toggle[data-cms-mobile-format="square"] .drum-photo{
  width:100%!important;height:100%!important;aspect-ratio:1!important;object-fit:cover!important;
  margin:0!important;transform:none!important;
 }
}

/* Afficher le lien d’accueil lorsque le menu mobile est ouvert. */
@media(max-width:700px){
 .home .site-header:has(.menu:not([hidden])) .brand{visibility:visible}
}

/* Renforcer la hiérarchie des informations des projets sur ordinateur. */
@media(min-width:701px){
 .project .intro-services dt,
 .project .intro-description h2{
  font-weight:500;
  color:var(--ink);
  margin-bottom:12px;
 }
}
