/* Culture page only. Linked from refonte/culture/index.html, never from other pages.
   The rules below are staging's regles.css (the charter that caps display titles at 72px).
   Loaded here so /culture matches staging without restyling the rest of the site. */
/* Charte Han Pixel, 11 oct. 2026. Chargée en dernier : elle prime sur le CSS v2.1.
   Graisse 300 seulement à partir de 24 px. Espacements plafonnés.
   Rail dès 820 px. Titres d'affichage plafonnés à 72 px.
   Clément, 21 h 57, repris par Han au §7 : le héros glisse de 12 px avec le fondu (500 ms).
   Partout ailleurs, fondu seulement. prefers-reduced-motion : aucun mouvement. */
:root{
  --nk-marin:#010C30; --nk-creme:#FEF9F3; --nk-ink:#010C30; --nk-cr-1:#FEF9F3;
  --nk-milieu-a:linear-gradient(120deg,#3713D0 0%,#3713D0 20%,#86267A 55%,#B0304F 82%,#D43829 100%);
  --nk-voile:linear-gradient(0deg,rgba(1,12,48,.72),rgba(1,12,48,.45));
  --nk-voile-fort:rgba(1,12,48,.62);
  --nk-font:Inter,Arial,sans-serif;
  --nk-w-display:300;
  --nk-w-regular:400;
  --nk-w-medium:500;
  --fs-body:1.125rem;
  --lh-body:1.6;
  --measure:68ch;
  --fs-small:.875rem;
  --fs-lead:clamp(1.25rem,1.6vw,1.5rem);
  --lh-lead:1.4;
  --fs-h1x:clamp(40px,5vw,72px);
  --fs-h2xl:clamp(30px,3.4vw,56px);
  --fs-h2:clamp(28px,3vw,48px);
  --fs-h3:clamp(22px,2vw,28px);
  --fs-stat:clamp(48px,5vw,72px);
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:80px;
  --sec:clamp(48px,6vw,80px);
  --sec-clair:clamp(40px,5vw,64px);
  --m:clamp(20px,5vw,72px);
  --container:1440px;
  --gutter:var(--s-5);
  --nk-r-pill:999px;
  --nk-r-card:20px;
  --nk-r-field:14px;
  --nk-r-img:16px;
  --nk-r-tag:999px;
  --fade-dur:500ms;
  --fade-ease:cubic-bezier(.2,.7,.2,1);
}
@media (max-width:599px){
  :root{--sec:clamp(32px,8vw,48px);--sec-clair:clamp(32px,8vw,48px)}
}

body{font-family:var(--nk-font);font-weight:400;font-size:var(--fs-body);line-height:var(--lh-body)}

/* Sous 24 px : graisse 400. 300 réservé aux titres qui font au moins 24 px. */
:is(p,li,dd,dt,figcaption,small,label,button,.lab,.num,.ec-kick,.ec-h-sub,.ec-sub,.lead,.lead2,.p,.ec-prose,.ec-prose p,.nk-chapeau,.btn,.scr){
  font-weight:400!important
}
:is(h1,h2,.h1s,.ec-h1,.nk-h1,.nk-h2,.ec-giga,.ec-tera,.giga,.tera){
  font-weight:300!important;
  overflow-wrap:break-word
}
:is(h1,.h1s,.ec-h1,.nk-h1){font-size:clamp(40px,5vw,72px)!important}
:is(h2,.nk-h2,.nk-real .nk-hd h2,.nk-stb .st-t){font-size:clamp(28px,3vw,48px)!important}
:is(.ec-giga,.ec-tera,.giga,.tera,.ft .big,.fig b,.ec-big,.spec,.band .big8,.ct-big,.cs-hm b,.cs-hcm b,.cs-rmg b,.cs-rc b,.ag-f b,.cu-one b,.story .yr,.kx-hero .ec-big,.feat2 .n,.cta2 h2,.nx2 .t,.ec-next-t){
  font-size:clamp(40px,5vw,72px)!important
}
.nk-h1--long,:is(h1,h2,.ec-h1).nk-h1--long{font-size:var(--fs-h2xl)!important;max-width:20ch}
h3,.nk-h3{font-weight:500;font-size:var(--fs-h3);line-height:1.2}

.nk-chapeau,.ec-prose>p.nk-chapeau{
  font-size:clamp(20px,1.6vw,24px)!important;
  line-height:1.4!important;
  font-weight:400!important;
  max-width:46ch
}
.ec-prose p,.nk-prose p{font-size:1.125rem;line-height:1.6;font-weight:400}
.ec-prose,.nk-prose{max-width:var(--measure)}
@media (max-width:899px){
  .ec-prose,.ec-prose p,.nk-prose,.nk-chapeau{max-width:none;width:100%}
}

/* Plafond d'espacement. Les sections claires sans visuel restent sous le plafond. */
:is(.sx,.qx,.kx,.cta2,.ec-sx,.nk-sec,.nk-real,.nk-stb){padding-block:var(--sec)!important}
main>section.sx:not(.dk):not(:has(img,video)),
main>section.qx:not(.dk):not(:has(img,video)){padding-block:var(--sec-clair)!important}
.ec-livre{padding-block:var(--sec-clair)!important}
.ec-livre::before{background:var(--nk-voile)!important}
.nk-sur-media{position:relative;isolation:isolate;color:var(--nk-cr-1)}
.nk-sur-media::before{content:"";position:absolute;inset:0;background:var(--nk-voile);z-index:-1}
.nk-sur-media :where(p,li,small,.lab){font-weight:400!important}

/* Rail : dès deux cartes, sous 820 px, jamais empilées. */
@media (max-width:820px){
  :is(.nk-rail,.rel,.ec-ix,.ec-rel,.nk-b1-g,.nk-st-grid,.nk-st-work,.ed-g,.bll,.tm-g,.tg,.br-g,.mod,.csg):has(> :not([hidden]) ~ :not([hidden])){
    display:flex!important;
    flex-flow:row nowrap!important;
    gap:16px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--m);
    scrollbar-width:none;
    margin-inline:calc(-1 * var(--m));
    padding-inline:var(--m);
    grid-template-columns:none!important
  }
  :is(.nk-rail,.rel,.ec-ix,.ec-rel,.nk-b1-g,.nk-st-grid,.nk-st-work,.ed-g,.bll,.tm-g,.tg,.br-g,.mod,.csg):has(> :not([hidden]) ~ :not([hidden])) > :not([hidden]){
    flex:0 0 78%!important;
    width:78%!important;
    max-width:78%!important;
    min-width:0!important;
    scroll-snap-align:start;
    grid-column:auto!important
  }
}

/* Le chiffre du héros fond encore, seulement quand le script pose html.js.
   Sans JS il est déjà blanc, comme à la fin du fondu. Le h1, lui, est lisible
   à la première image : 12 px, 200 ms, sans opacité 0 et sans masque mot par mot. */
@keyframes nk-fade{from{opacity:0}to{opacity:1}}
@keyframes nk-hero-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes nk-h1-in{from{transform:translateY(12px)}to{transform:none}}
:is(.hero h1,.chero h1,.ar-h h1,.ct2 h1,section.ec-ixh h1){
  animation:nk-hero-in var(--fade-dur) var(--fade-ease) both!important
}
html.js .ec-h .ec-h-k{
  animation:nk-hero-in var(--fade-dur) var(--fade-ease) both!important
}
html:not(.js) :is(.ec-h .ec-h-k,.ec-h .ec-h-kv,[data-count]){
  opacity:1!important;
  animation:none!important;
  transform:none!important
}
:is(.ec-h h1,.ec-h .ec-h1){
  opacity:1!important;
  overflow:visible!important;
  clip-path:none!important;
  animation:nk-h1-in 200ms var(--fade-ease) both!important
}
:is(.ec-h h1,.ec-h .ec-h1) :is(.split,.ec-w,.ec-w>span){
  display:inline!important;
  overflow:visible!important;
  opacity:1!important;
  transform:none!important;
  animation:none!important;
  clip-path:none!important
}
/* Hors fiche, le chrome reste un fondu. Les études v2.1 retrouvent le dévoilement,
   le mot à mot, le trait et la parallaxe (v2.js / v2.css). */
:is(.hero h1 .w>span,.mq,.marquee,.marquee span,.xpt){
  transform:none!important;
  animation:none!important;
  transition-property:opacity!important;
  transition-duration:var(--fade-dur)!important;
  transition-timing-function:var(--fade-ease)!important
}
:is(h2,h3,h4,a,button,li,cite,p,.ar,.mo,.svc-i,.gi,.cs-nxt,.card,.ec-card,.pm img,.pm .vp,.pro-r .st):is(:hover,:focus-visible),
:is(.pm:hover,.pm:focus-visible) img,
:is(.pm .vp,.pro-r .st,.gi b,.gi i){transform:none!important}
:is(.docs2 .doc,.ec-docs2 .doc):is(:hover,:focus-visible){transform:rotateY(-14deg) translateZ(0)!important}
:is(.dom-p [role=tabpanel],.qa .ans,dialog.dlg[open],.vx .player.mini,.ec-vx .player.ec-mini){
  animation-name:nk-fade!important;
  animation-duration:var(--fade-dur)!important
}
.ec-track{transform:none!important;overflow-x:auto;scroll-snap-type:x mandatory}
[data-fade]{opacity:1}
html.xm [data-fade],html.nk-js [data-fade]{opacity:0;transition:opacity var(--fade-dur) var(--fade-ease)}
html.xm [data-fade].is-in,html.nk-js [data-fade].is-in{opacity:1}
@media (prefers-reduced-motion:reduce){
  :is(.ec-h .ec-h-t,.ec-h h1,.ec-h .ec-h1,.ec-h .ec-h-k,.hero h1,.chero h1,.ar-h h1,.ct2 h1,section.ec-ixh h1),
  :is([data-rv],[data-rvx],[data-fade],.rv,.ec-split .ec-w>span,.split .ec-w>span,.hero h1 .w>span){
    opacity:1!important;transform:none!important;transition:none!important;animation:none!important
  }
  .qx blockquote .hl{background-size:100% .08em!important;transition:none!important}
  .hx-sig b,.hstrip .track,[data-px],[data-scrollshot] img{animation:none!important;transition:none!important;transform:none!important}
}
html.xr :is(.ec-h .ec-h-t,.ec-h h1,.ec-h .ec-h1,.ec-h .ec-h-k,.hero h1,.chero h1,.ar-h h1,.ct2 h1,section.ec-ixh h1),
html.ec-xr :is(.ec-h .ec-h-t,.ec-h h1,.ec-h .ec-h1,.ec-h .ec-h-k,.hero h1,.chero h1,.ar-h h1,.ct2 h1,section.ec-ixh h1){
  opacity:1!important;transform:none!important;transition:none!important;animation:none!important
}
html.xr .qx blockquote .hl,html.ec-xr .qx blockquote .hl{background-size:100% .08em!important;transition:none!important}
html.xr :is(.hx-sig b,.hstrip .track,[data-px],[data-scrollshot] img),
html.ec-xr :is(.hx-sig b,.hstrip .track,[data-px],[data-scrollshot] img){animation:none!important;transition:none!important;transform:none!important}
h1,.ec-h1,.h1s,.hero h1,.chero h1{font-weight:300!important}
.ec-h-sub{display:block!important;font-weight:400!important;max-width:46ch}
.ec-h.dk .ec-h-sub{color:var(--nk-creme)!important}
:is(.ec-h.lt,.ec-vignoble-h,.ec-mandat-06b-hero) .ec-h-sub{color:var(--nk-text-2)!important}
.tags{display:flex!important;flex-wrap:wrap!important;gap:8px;min-width:0}
.tags span{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;max-width:100%}
.hd.on-dk{background:var(--nk-marin)!important;color:var(--nk-creme)!important}
.hd.on-dk :is(a,.ln,.lng,.lng a,.lng span,button):not(.btn){color:var(--nk-creme)!important;opacity:1!important}
.hd.on-dk:not(.sc):not(.open) .btn{background:#FEF9F3!important;color:var(--nk-marin)!important;border-color:#FEF9F3!important;opacity:1!important}
/* Héros Marin : le bandeau est lisible sans script (logo blanc, nav, langue, Parlons-en).
   html.js, posé dans le head, garde le départ sombre pour que le fondu de .on-dk reste l'entrée. */
body:has(main > section.dk:first-of-type) .hd:not(.sc):not(.open){
  background:var(--nk-marin)!important;
  color:var(--nk-creme)!important
}
body:has(main > section.dk:first-of-type) .hd:not(.sc):not(.open) :is(a,.ln,.lng,.lng a,.lng span,button):not(.btn){
  color:var(--nk-creme)!important;
  opacity:1!important
}
body:has(main > section.dk:first-of-type) .hd:not(.sc):not(.open) .lg{display:none!important}
body:has(main > section.dk:first-of-type) .hd:not(.sc):not(.open) .lg.lg-w{display:block!important}
body:has(main > section.dk:first-of-type) .hd:not(.sc):not(.open) .btn{
  background:#FEF9F3!important;
  color:var(--nk-marin)!important;
  border-color:#FEF9F3!important;
  opacity:1!important
}
html.js body:has(main > section.dk:first-of-type) .hd:not(.on-dk):not(.sc):not(.open){
  background:transparent!important;
  color:var(--nk-marin)!important
}
html.js body:has(main > section.dk:first-of-type) .hd:not(.on-dk):not(.sc):not(.open) :is(a,.ln,.lng,.lng a,.lng span,button):not(.btn){
  color:var(--nk-marin)!important
}
html.js body:has(main > section.dk:first-of-type) .hd:not(.on-dk):not(.sc):not(.open) .lg{display:block!important}
html.js body:has(main > section.dk:first-of-type) .hd:not(.on-dk):not(.sc):not(.open) .lg.lg-w{display:none!important}
html.js body:has(main > section.dk:first-of-type) .hd:not(.on-dk):not(.sc):not(.open) .btn{
  background:transparent!important;
  color:var(--nk-marin)!important;
  border-color:currentColor!important
}
.dk :is(a.ln,.ec-crumbs,.ec-crumbs a){color:var(--nk-creme)!important;opacity:1!important}
.ec-livre.nk-sur-media{background:var(--nk-milieu-a)!important;color:var(--nk-creme)!important}
.nk-sur-media::before{background:var(--nk-voile)!important}
.ec-livre.nk-sur-media::before{background:rgba(1,12,48,.72)!important;z-index:0!important}
.ec-livre .wrap{position:relative;z-index:1}
.ec-livre :is(.lab,.nk-chapeau,.ec-prose,.ec-prose p,.ec-prose li,.ec-suite-btn){color:var(--nk-creme)!important}
/* 24 px entre le libellé et le texte : le titre ne flotte pas dans un vide. */
.chap{margin-bottom:24px!important}
h1,h2,.ec-h1,.chap h2{overflow:visible!important}
/* Deux sections claires d'une fiche : le filet remplace le padding doublé. */
main>section:is(.sx,.qx,.ec-livre):not(.dk):has(+section:not(.dk):not(.bleed)){padding-bottom:var(--avant-filet)!important}
main>section:is(.sx,.qx,.ec-livre):not(.dk)+section:not(.dk):not(.bleed){padding-top:0!important}
/* Le chapeau est coupé côté serveur, en fin de phrase : aucun « … » en pleine phrase. */
.ec-prose>p.nk-chapeau{
  display:block!important;
  -webkit-line-clamp:unset!important;
  line-clamp:unset!important;
  -webkit-box-orient:unset!important;
  overflow:visible!important;
}
.ec-prose ol{margin:0 0 16px;padding-left:1.25em}
.ec-prose li{font-size:1.125rem;line-height:1.6;font-weight:400}
/* Cas suivant : voile plein à 78 %, photo floue pour que le texte du visuel ne traverse pas le titre. */
.nx2::before{content:none!important;background:none!important}
.nx2 .wrap{background:none!important}
.pied-z__media{position:absolute;inset:0;z-index:0;display:block;overflow:hidden}
.pied-z__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(2px) saturate(.6);transform:none!important;opacity:1!important}
.pied-z__media::after{content:""!important;position:absolute;inset:0;z-index:1;background:rgb(1 12 48/.78)}
.nx2 .wrap,.nx2 .bar2{z-index:2!important}
.nx2 :is(.t,.lab,.go){color:var(--nk-creme)!important}
.hstrip .track figure:first-child img{object-fit:cover}
/* L'aplat jaune occupe la gauche du visuel. 70 % le laisse dans la carte et coupe
   « Change de tempo ». Le sujet tient dans un cadre 6/5 calé à 88,6 %. */
.hstrip .track figure:has(img.ec-rail-mid) .frame{aspect-ratio:6/5}
.hstrip .track img.ec-rail-mid{object-fit:cover;object-position:88.6% 50%}
.hstrip .track figure.ec-phone .frame{aspect-ratio:9/19.5}
.hstrip .track figure.ec-phone img{object-fit:cover;object-position:center top}
/* Sous le titre du cas suivant : le bas du visuel se ferme vers le Marin. */
.pied-z__media::before{content:""!important;position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(transparent, rgb(1 12 48/.9) 55%)}
/* Quatre livrables : à 375 la 4e reste pleine largeur. En large, grille 2×2,
   portraits calés en haut pour que Lez'Arts et le 4e cadre restent lisibles. */
.mos2:not(:has(.frame:nth-child(5))) .frame:nth-child(4){grid-column:1 / -1!important}
@media (max-width:900px){
  .mos2:not(:has(.frame:nth-child(5))) .frame:nth-child(4){aspect-ratio:3/4!important}
}
@media (min-width:901px){
  .mos2:not(:has(.frame:nth-child(5))){grid-template-columns:1fr 1fr!important}
  .mos2:not(:has(.frame:nth-child(5))) .frame:nth-child(n){grid-column:auto!important;grid-row:auto!important;aspect-ratio:4/5!important}
  .mos2:not(:has(.frame:nth-child(5))) .frame:nth-child(1),
  .mos2:not(:has(.frame:nth-child(5))) .frame:nth-child(2){aspect-ratio:4/3!important}
  .mos2:not(:has(.frame:nth-child(5))) .frame:nth-child(3) img,
  .mos2:not(:has(.frame:nth-child(5))) .frame:nth-child(4) img{object-position:center top!important}
}
.hero{padding-bottom:64px!important}
.marquee{overflow:hidden;white-space:nowrap}
.hero>.marquee{position:absolute!important;left:0;right:0;bottom:0;z-index:3}
.marquee__track{display:flex;flex-wrap:nowrap}
@media (max-width:599px){
  /* 40 + 40 : l'écart entre deux sections reste d'au plus 80 px. */
  :is(.stm,.fig,.spl,.qt,.pro,.grp,.ed,.svc,.br,.tm,.cta){padding-top:40px!important;padding-bottom:40px!important}
  :is(.fig,#equipe.tm){padding-bottom:0!important}
  .mx{padding-top:16px!important;padding-bottom:16px!important}
  .ft{padding-top:40px!important}
}
button.ec-suite-btn,
button.ec-more-btn:not([hidden]){
  display:inline-flex!important;align-items:center;gap:10px;
  min-height:48px;width:auto;height:auto;padding:0 22px 0 24px!important;
  border-radius:999px;border:1px solid rgba(1,12,48,.2);background:transparent;
  color:var(--marin);font:400 15px/1 Inter,system-ui,sans-serif;letter-spacing:.01em;
  margin-top:16px;cursor:pointer;transition:background .2s,color .2s,border-color .2s;
  text-decoration:none;text-underline-offset:0;box-sizing:border-box;
}
button.ec-suite-btn svg,button.ec-more-btn svg{width:18px;height:18px;transition:transform .25s}
button.ec-suite-btn:hover,button.ec-more-btn:hover{background:var(--marin);color:var(--creme);border-color:var(--marin)}
button.ec-more-btn:hover svg{transform:translateX(3px)}
button.ec-suite-btn:focus-visible,button.ec-more-btn:focus-visible{outline:2px solid var(--electrique)!important;outline-offset:3px!important}
button.ec-suite-btn .when-open,button.ec-more-btn .when-open{display:none}
button.ec-suite-btn[aria-expanded="true"] .when-closed,button.ec-more-btn[aria-expanded="true"] .when-closed{display:none}
button.ec-suite-btn[aria-expanded="true"] .when-open,button.ec-more-btn[aria-expanded="true"] .when-open{display:inline-flex;align-items:center;gap:10px}
.ec-livre :is(.ec-suite-btn,.ec-more-btn){border-color:rgba(253,246,238,.35);color:var(--creme)!important}
.ec-livre :is(.ec-suite-btn,.ec-more-btn):hover{background:var(--creme);color:var(--marin)!important;border-color:var(--creme)}
.ec-livre :is(.ec-suite-btn,.ec-more-btn):focus-visible{outline:2px solid var(--aqua)!important;outline-offset:3px!important}
.ec-suite:focus,.ec-suite:focus-visible{outline:none}
.ec-suite:not([hidden]){animation:ecIn .3s ease both}
@keyframes ecIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.ec-suite{animation:none}}
.nk-round{width:48px;height:48px;border-radius:50%;border:1px solid rgba(1,12,48,.2);background:transparent;color:var(--marin);display:inline-grid;place-items:center;padding:0;cursor:pointer;transition:background .2s,color .2s}
.nk-round svg{width:20px;height:20px}
.nk-round:hover{background:var(--marin);color:var(--creme);border-color:var(--marin)}
.nk-round:focus-visible{outline:2px solid var(--electrique)!important;outline-offset:3px!important}
.ec-livre .nk-round:focus-visible{outline:2px solid var(--aqua)!important;outline-offset:3px!important}
.nk-round:disabled{opacity:.35;cursor:default}
.ec-livre .nk-round{border-color:rgba(253,246,238,.35);color:var(--creme)}
.ec-livre .nk-round:hover{background:var(--creme);color:var(--marin)}
.ec-gal-ctrls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px}
.ec-gal-counter{font-size:14px;color:rgba(1,12,48,.6);margin-left:8px;font-variant-numeric:tabular-nums}
.ec-livre .ec-gal-counter{color:rgba(253,246,238,.7)}
.ec-gal-ui{margin-top:8px}
.ec-ba .ba{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ec-ba figure{margin:0}
.ec-ba .panel{aspect-ratio:4/3;border-radius:16px;display:grid;place-items:center;padding:12%}
.ec-ba .p1{background:#fff}.ec-ba .p2{background:#FEF9F3}
.ec-ba .p1 img{width:62%;height:auto;transform:translateY(-2%)}
.ec-ba .p2 img{width:74%;height:auto;transform:translateY(-2%)}
.ec-ba figcaption{margin-top:16px;font-size:15px}.ec-ba figcaption b{font-weight:500}.ec-ba figcaption span{color:rgba(1,12,48,.55)}
@media (max-width:700px){.ec-ba .ba{grid-template-columns:1fr}.ec-ba .panel{padding:14%}}
@media (min-width:1024px){
  body[data-page="projet-image-de-marque"] .ec-h .ec-h-v{overflow:visible}
  body[data-page="projet-image-de-marque"] .ec-h .ec-h-v figcaption{overflow:visible;text-overflow:clip;white-space:normal;display:block;max-width:100%}
}
/* « Ce que nous avons livré » : le libellé et l'énoncé restent entiers, sans « Lire plus ». */
.ec-band .lab,
.ec-livre>.wrap>.lab,
.ec-band .ec-band-t,
.ec-band .ec-more .ec-band-t,
.ec-band .ec-more:not(.is-open) .ec-more-b>p{
  display:block!important;
  -webkit-line-clamp:unset!important;
  line-clamp:unset!important;
  -webkit-box-orient:unset!important;
  overflow:visible!important;
  max-height:none!important;
}
.ec-band .ec-more-btn{display:none!important}
/* Pubs 4:5 ou carrées : le cadre épouse le canvas, le texte n'est pas rogné. */
.hstrip .track figure.ec-ad .frame{aspect-ratio:4/5!important}
.hstrip .track figure.ec-ad.ec-ad-sq .frame{aspect-ratio:1/1!important}
.hstrip .track figure.ec-ad img,
.hstrip .track figure.ec-ad:first-child img{
  width:100%;
  height:100%;
  object-fit:contain!important;
  object-position:center!important;
}
@media (max-width:900px){
  /* Le héros ne réserve plus un écran vide : le contenu commence sous la nav. */
  body main>section.ec-h{
    height:auto!important;
    min-height:0!important;
    margin-top:0!important;
    padding-top:12px!important;
    justify-content:flex-start!important;
  }
  body main>section.ec-h .ec-h-g{
    height:auto!important;
    min-height:0!important;
    padding-top:0!important;
    justify-content:flex-start!important;
  }
  body main>section.ec-h .ec-h-v{
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    height:auto!important;
    width:100%!important;
  }
  /* Captures de site : le ratio du fichier, jamais un étirement. */
  :is(.browser,.phone,.ec-phone,.ec-page,.ec-frame-desk,.ec-frame-phone,.devrow) img,
  .scrollshot img,
  .ec-h-v .browser img{
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center top!important;
  }
  :is(.browser,.phone,.ec-phone,.ec-page,.ec-frame-desk,.ec-frame-phone),
  .ec-h-v .browser,
  .ec-h-v .ec-hv,
  .ec-h-v>.frame,
  .ec-phone .scrollshot{
    height:auto!important;
    aspect-ratio:auto!important;
    max-height:none!important;
  }
  /* La fenêtre du héros reste plus courte que la page, pour que le défilement existe. */
  .ec-h .scrollshot,
  .browser .scrollshot{
    height:min(52vh,460px)!important;
    aspect-ratio:auto!important;
    overflow:hidden!important;
    max-height:none!important;
  }
  /* Bandeau : la pub 4:5 active tient entière, gouttières comprises. La suivante peut dépasser. */
  .hstrip{
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--m);
    scrollbar-width:none;
  }
  .hstrip .track{transform:none!important;padding-right:var(--m)}
  .hstrip .track figure{scroll-snap-align:start}
  .hstrip .track figure.ec-ad{
    align-self:flex-start;
    flex:0 0 calc(100vw - (2 * var(--m)));
    width:calc(100vw - (2 * var(--m)));
    max-width:calc(100vw - (2 * var(--m)));
    height:auto;
  }
  .hstrip .track figure.ec-ad .frame{
    width:100%;
    height:auto;
    max-height:none;
    aspect-ratio:4/5!important;
  }
  .hstrip .track figure.ec-ad.ec-ad-sq .frame{aspect-ratio:1/1!important}
}

/* Column, gutter, and header from staging nk.css. Scoped so they cannot apply
   if this file is ever linked beside another page. */
body[data-page="culture"]{
  --nk-gutter:clamp(22px,5vw,160px);
  --nk-max:1760px;
}
body[data-page="culture"] .wrap{
  max-width:calc(var(--nk-max) + 2 * var(--nk-gutter));
  padding-left:var(--nk-gutter);
  padding-right:var(--nk-gutter);
}
body[data-page="culture"] .hd{
  z-index:60;
  background:var(--creme);
  border-bottom:1px solid var(--ln);
  box-shadow:0 1px 0 rgba(1,12,48,.04);
}
@media (min-width:1760px){
  body[data-page="culture"] .chero .circ{
    right:calc(max(var(--nk-gutter),(100% - var(--nk-max)) / 2) - min(64vw,1100px) / 2 - 40px);
    top:50%;
    transform:translateY(-50%);
    width:min(64vw,1100px);
    left:auto;
  }
}
/* Staging sizes a rail card at 78% of the column (regles.css). The culture
   rule in nk.css uses 78vw and is more specific, so it has to be matched here. */
@media (max-width:820px){
  body[data-page="culture"] .nk-museum .nk-rail:has(> :not([hidden]) ~ :not([hidden])) > :not([hidden]){
    flex-basis:78%!important;
    width:78%!important;
    max-width:78%!important;
  }
}