.ivy-hero--grille-sticky{--ivy-sticky-grid-spread-y:40;min-height:var(--ivy-hero-min-height,100vh);background: transparent;color:var(--ivy-section-color,rgb(0 0 0))}
.ivy-hero--grille-sticky .ivy-hero__intro{position:relative;z-index:1;display:grid;place-items:center;align-content:center;min-height:var(--ivy-hero-min-height,100vh);margin:0;padding:clamp(88px,12vw,160px) 20px;overflow:hidden;background:rgb(22 22 20);isolation:isolate}
.ivy-hero--grille-sticky .ivy-hero__intro-media{position:absolute;inset:0;margin:0;z-index:-2}
.ivy-hero--grille-sticky .ivy-hero__intro-media::after{position:absolute;inset:0;content:"";background:rgb(0 0 0 / 28%);z-index:1}
.ivy-hero--grille-sticky .ivy-hero__intro-image{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--ivy-hero-focus,50% 50%)}

/* LE POINT FOCAL du prelude uniquement — la grille garde ses trois recadrages
   :nth-child d'origine, ils n'ecoutent pas cette variable. Meme convention
   que hero/croise : center n'a aucune regle. */
.ivy-hero--grille-sticky.ivy-hero--focus-top-left{--ivy-hero-focus:0% 0%}
.ivy-hero--grille-sticky.ivy-hero--focus-top{--ivy-hero-focus:50% 0%}
.ivy-hero--grille-sticky.ivy-hero--focus-top-right{--ivy-hero-focus:100% 0%}
.ivy-hero--grille-sticky.ivy-hero--focus-left{--ivy-hero-focus:0% 50%}
.ivy-hero--grille-sticky.ivy-hero--focus-right{--ivy-hero-focus:100% 50%}
.ivy-hero--grille-sticky.ivy-hero--focus-bottom-left{--ivy-hero-focus:0% 100%}
.ivy-hero--grille-sticky.ivy-hero--focus-bottom{--ivy-hero-focus:50% 100%}
.ivy-hero--grille-sticky.ivy-hero--focus-bottom-right{--ivy-hero-focus:100% 100%}
.ivy-hero--grille-sticky .ivy-hero__intro-title{margin:0;color:var(--ivy-eyebrow-color,rgb(255 255 255));font-size:var( --ivy-font-h2 );font-weight:500;line-height:.9;letter-spacing:-.055em;text-align:center;text-shadow:0 2px 24px rgb(0 0 0 / 25%)}
/* Le titre fait 100 % du cadre par defaut (a l'editeur d'ajuster la largeur), et
   il est centre SUR LA HAUTEUR. La regle socle `.ivy-root :is(h1,…__title,…)`
   pose `align-self:stretch` a egale specificite et gagne par l'ordre du
   cascade — elle etirait le titre en haut du bloc. Le combinateur enfant
   (3 classes) reprend la main : plein cadre en largeur, centre en hauteur. */
.ivy-hero--grille-sticky .ivy-hero__intro > .ivy-hero__intro-title{align-self:center;justify-self:stretch;width:100%;max-width:100%}
/* Le slogan se lit sous le nom, dans le meme bloc centre : `align-content:center`
   sur le prelude garde les deux lignes groupees au lieu de partager la hauteur. */
.ivy-hero--grille-sticky .ivy-hero__intro-tagline{justify-self:stretch;margin:clamp(16px,2vw,28px) 0 0;color:var(--ivy-tagline-color,rgb(255 255 255));font-size:var( --ivy-font-h4 );line-height:1.25;text-align:center;text-shadow:0 2px 24px rgb(0 0 0 / 25%)}
.ivy-hero--grille-sticky .ivy-hero__sticky{position:relative;display:grid;place-items:center;min-height:var(--ivy-hero-min-height,100vh);padding:clamp(88px,12vw,160px) clamp(20px,1.67vw,24px);overflow:hidden;isolation:isolate}
.ivy-hero--grille-sticky .ivy-hero__grid{position:absolute;z-index:0;top:50%;left:50%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(16px,2.22vw,32px);row-gap:clamp(20px,2.78vw,40px);width:min(51.12vw,736px);transform:translate(-50%,-50%);will-change:transform}
.ivy-hero--grille-sticky .ivy-hero__grid-item{aspect-ratio:1;margin:0;overflow:hidden}
.ivy-hero--grille-sticky .ivy-hero__grid-image{display:block;width:100%;height:100%;object-fit:cover}
.ivy-hero--grille-sticky .ivy-hero__grid-item:nth-child(3n+1) .ivy-hero__grid-image{object-position:15% 50%}
.ivy-hero--grille-sticky .ivy-hero__grid-item:nth-child(3n+2) .ivy-hero__grid-image{object-position:50% 25%}
.ivy-hero--grille-sticky .ivy-hero__grid-item:nth-child(3n) .ivy-hero__grid-image{object-position:85% 65%}
.ivy-hero--grille-sticky .ivy-hero__content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:inherit;text-align:center}
.ivy-hero--grille-sticky .ivy-hero__title{align-self:center;inline-size:100%;width:100%;max-inline-size:none;margin-block:0;margin-inline:auto;color:var(--ivy-title-color,rgb(0 0 0));line-height:1.12;letter-spacing:-.045em;text-align:center}
.ivy-hero--grille-sticky .ivy-hero__details{position:static;display:flex;flex-direction:column;align-items:center;width:min(92vw,455px);margin-top:clamp(24px,3vw,40px)}
.ivy-hero--grille-sticky .ivy-hero__text{margin:0;color:var(--ivy-text-color,rgb(0 0 0));font-size:var( --ivy-font-body );line-height:1.35;text-transform:uppercase}
.ivy-hero--grille-sticky .ivy-hero__cta{display:inline-flex;align-items:center;justify-content:center;margin-top:32px;padding:0;border:0;background:transparent;color:var(--ivy-cta-color,currentColor);font-size:var( --ivy-font-label );line-height:1.35;text-decoration:none;text-transform:uppercase;transition:text-decoration-color 180ms cubic-bezier(.23,1,.32,1)}
.ivy-hero--grille-sticky .ivy-hero__cta:hover,.ivy-hero--grille-sticky .ivy-hero__cta:focus-visible{text-decoration:underline}
.ivy-hero--grille-sticky .ivy-hero__cta:focus-visible{outline:2px solid currentColor;outline-offset:4px}
/* L'epinglage tourne des que le mouvement est permis, a TOUTES les largeurs :
   le runtime buildStickyGrid ne teste aucune fenetre, seulement
   getComputedStyle(pin).position === 'sticky'. Repris du modele d'intro/couloir,
   qui garde son panneau collant sous 900 px. */
/* Le titre ouvre seul et lisible ; les vignettes partent hors champ depuis la
   timeline, seuls les details attendent leur cran. */
@media(prefers-reduced-motion:no-preference){.ivy-hero--grille-sticky .ivy-hero__sequence{height:425svh}.ivy-hero--grille-sticky .ivy-hero__sticky{position:sticky;top:0}.ivy-motion-ready .ivy-hero--grille-sticky [data-ivy-sticky-grid-details]{opacity:0;pointer-events:none}}
/* Fenetre etroite : course plus courte, cellules plus larges. */
@media(prefers-reduced-motion:no-preference) and (max-width:767px){.ivy-hero--grille-sticky{--ivy-sticky-grid-spread-y:110}.ivy-hero--grille-sticky .ivy-hero__sequence{height:340svh}.ivy-hero--grille-sticky .ivy-hero__grid{width:min(82vw,560px);column-gap:clamp(10px,3vw,20px);row-gap:clamp(12px,3.5vw,24px)}.ivy-hero--grille-sticky .ivy-hero__sticky{padding:clamp(64px,14vw,96px) 20px}}
@media(max-width:767px){.ivy-hero--grille-sticky .ivy-hero__intro{padding:96px 20px}.ivy-hero--grille-sticky .ivy-hero__intro-title{font-size:var( --ivy-font-h2 )}}
/* Repli sans mouvement : la sequence redevient une pile statique, canevas sous le contenu. */
@media(max-width:767px) and (prefers-reduced-motion:reduce){.ivy-hero--grille-sticky .ivy-hero__grid{position:relative;top:auto;left:auto;order:2;width:min(100%,560px);margin-top:40px;transform:none}.ivy-hero--grille-sticky .ivy-hero__sticky{align-content:center;padding:64px 20px}.ivy-hero--grille-sticky .ivy-hero__content{order:1;height:auto}.ivy-hero--grille-sticky .ivy-hero__details{position:static;width:auto;margin-top:28px}}
@media(prefers-reduced-motion:reduce){.ivy-hero--grille-sticky .ivy-hero__cta{transition:none}}
.ivy-hero--grille-sticky .ivy-hero__cta{align-items:center;min-height:44px;margin-top:24px}

/* L'image suit le rayon de son cadre — media-rayon.spec.ts. */
.ivy-hero--grille-sticky .ivy-hero__intro-media { border-radius: inherit; }
.ivy-hero--grille-sticky .ivy-hero__intro img { border-radius: inherit; }