/* Photo continue · les photos originales restent opaques, les extensions au-dessus. */
html[data-hero-page] { --mx-safe-top:env(safe-area-inset-top,0px); --mx-photo-tint:#e5dfd8; --mx-browser-tint:var(--mx-photo-tint); background-color:var(--mx-browser-tint); }
html[data-hero-page="about"] { --mx-photo-tint:#37312d; }
html[data-hero-page="resources"] { --mx-photo-tint:#eeece9; }
html[data-hero-page].mx-browser-paper { --mx-browser-tint:#fff; }
/* Safari uses the page background and fixed edge color to extend its browser chrome. */
html[data-hero-page] body { background-color:var(--mx-browser-tint); background-image:linear-gradient(var(--paper),var(--paper)); }
.mx-browser-edge { display:none; }
@media(max-width:1023px) {
 /* WebKit samples the topmost fixed element 4px from the edge. A real box
    above the transparent nav, over 10px tall, exposes an opaque color. */
 html[data-hero-page] .mx-browser-edge { display:block; position:fixed; z-index:510; inset:0 0 auto; height:max(12px,var(--mx-safe-top)); background-color:var(--mx-browser-tint); pointer-events:none; }
 html[data-hero-page] .mx-hero::after { content:""; position:absolute; z-index:-1; inset:0 0 auto; height:calc(36px + var(--mx-safe-top)); background:linear-gradient(var(--mx-photo-tint) calc(12px + var(--mx-safe-top)),transparent); pointer-events:none; }
}
.mx-seamless-page .hero { padding: 0; }
.mx-hero { --mx-hero-paper:#fff; --mx-hero-ink:#242424; position:relative; isolation:isolate; display:flex; width:100%; max-width:none; min-height:840px; height:100svh; max-height:980px; margin:0; padding:0; border-radius:20px; overflow:hidden; background:var(--mx-hero-paper); color:var(--mx-hero-ink); }
.mx-hero-photo { position:absolute; inset:0; z-index:-3; margin:0; border-radius:inherit; overflow:hidden; }
.mx-hero-photo picture { display:block; width:100%; height:100%; }
.mx-hero-photo img { width:100%; height:100%; object-fit:cover; object-position:70% top; }
.mx-hero-veil { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(255,255,255,.93),rgba(255,255,255,.8) 33%,rgba(255,255,255,.3) 51%,transparent 72%); }
.mx-hero-content { width:100%; max-width:1440px; min-height:inherit; height:100%; margin:auto; padding:164px clamp(32px,6vw,88px) 100px; display:flex; align-items:center; }
.mx-hero-copy { position:relative; width:51%; max-width:610px; }
.mx-hero-copy h1 { font-size:clamp(48px,4.35vw,68px); line-height:1.035; font-weight:600; letter-spacing:-.022em; white-space:normal; text-wrap:initial; margin:0; }
.mx-hero-copy h1 .line,.mx-hero-copy h1 .beat { display:block; }
.mx-hero-copy h1 .beat { color:#585858; }
.mx-hero-copy :is(.eyebrow,.kicker) { display:flex; gap:8px; align-items:center; font-size:13px; font-weight:500; line-height:1.4; margin:0 0 24px; color:inherit; }
.mx-hero-copy :is(.hook) { font-size:16px; line-height:1.55; font-weight:500; max-width:410px; margin:24px 0 0; }
.mx-hero-copy :is(.lead,.hero-copy>p:first-child) { font-size:16px; line-height:1.65; font-weight:400; max-width:438px; margin:24px 0 0; color:inherit; text-wrap:initial; }
.mx-hero-copy .hook+.lead { margin-top:16px; }
.mx-hero-copy .hero-copy,.mx-hero-copy .hero-bottom { margin:0; max-width:none; display:block; }
.mx-hero-copy .actions { display:flex; align-items:center; flex-wrap:wrap; flex-direction:row; gap:8px 20px; margin:32px 0 0; width:auto; }
.mx-hero-copy .pill { width:auto; min-height:48px; font:500 14px/1.4 "Instrument Sans",sans-serif; padding:12px 20px; border-radius:999px; gap:12px; }
.mx-hero-copy .pill-ink { background:#242424; color:#fff; border:1px solid #242424; }
.mx-hero-copy .pill-line { display:inline-flex; min-height:44px; padding:0; background:transparent; border:0; color:inherit; font-size:13px; text-decoration:underline; text-underline-offset:5px; }
.mx-hero-copy .pill:hover { transform:none; }
.mx-hero-copy :is(.reassure,.reassurance) { font-size:12px; line-height:1.6; max-width:410px; margin:16px 0 0; color:#595959; }
.mx-hero-copy .hero-signature { margin-top:24px; font-size:13px; }
.mx-hero-copy .inscription { max-width:460px; margin-top:32px; }
.mx-hero-copy .inscription-lab { color:inherit; }
.mx-hero-copy .inscription-champ { color:#242424; background:rgba(255,255,255,.96); border-color:#aaa; min-height:52px; }
.mx-hero-copy .benefices { margin:24px 0 0; }
.mx-hero-copy .benefices li { color:inherit; font-size:15px; }
.mx-hero[data-photo="resources"] .mx-hero-veil { background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,.88) 32%,rgba(255,255,255,.14) 62%,transparent 75%); }
.mx-hero[data-photo="about"] { --mx-hero-paper:#242424; --mx-hero-ink:#fff; }
.mx-hero[data-photo="about"] .mx-hero-photo img { object-position:68% top; }
.mx-hero[data-photo="about"] .mx-hero-veil { background:linear-gradient(90deg,rgba(18,18,18,.84),rgba(18,18,18,.62) 36%,rgba(18,18,18,.12) 71%),linear-gradient(0deg,rgba(18,18,18,.6),transparent 38%); }
.mx-hero[data-photo="about"] .mx-hero-content { align-items:flex-end; padding-top:180px; padding-bottom:124px; }
.mx-hero[data-photo="about"] h1 { font-size:clamp(52px,5.2vw,78px); }
.mx-hero[data-photo="about"] h1 .beat { color:#d1d1d1; }
.mx-hero[data-photo="about"] .pill-ink { background:#fff; color:#242424; border-color:#fff; }
.mx-hero[data-photo="quiz"] h1 { font-size:clamp(68px,7vw,104px); }
.mx-seamless-page .test:not(.commence),.mx-seamless-page .test:not(.commence) .test-shell { padding:0; width:100%; max-width:none; }
.mx-seamless-page .test.commence { padding-top:120px; }
/* Explicit original dimensions and uniform scaling preserve the source image's proportions. */
.mx-hero-photo.extended-photo { overflow:hidden; }
.photo-scene { position:absolute; left:0; top:0; transform-origin:0 0; }
.photo-extension { position:absolute; left:0; top:0; overflow:hidden; }
.mx-hero-photo .photo-scene img { position:absolute; left:0; max-width:none; object-fit:fill; mask-image:none; transform-origin:0 0; filter:none; }
.photo-extension img { top:0; }
.photo-seam { position:absolute; left:0; right:0; bottom:0; height:36px; overflow:hidden; mask-image:linear-gradient(transparent,#000); }
.mx-hero-photo .photo-seam img { top:36px; transform:scaleY(-3.6); }
@media(min-width:1024px) and (max-width:1180px) { .mx-hero-content { padding-inline:48px; } .mx-hero-copy { width:53%; } .mx-hero-copy h1 { font-size:49px; } .mx-hero-copy .actions { gap:8px 12px; } .mx-hero-copy .pill { font-size:13px; } }
@media(max-width:1023px) {
 .mx-hero { height:auto; min-height:0; max-height:none; }
 .mx-hero-photo { top:0; bottom:auto; height:734px; }
 .mx-hero-veil { background:linear-gradient(0deg,#fff 0,#fff calc(100% - 720px),rgba(255,255,255,.94) calc(100% - 530px),rgba(255,255,255,.18) calc(100% - 400px),transparent calc(100% - 300px)); }
 .mx-hero-content,.mx-hero[data-photo="about"] .mx-hero-content { padding:510px 32px 104px; min-height:0; }
 .mx-hero-copy { width:100%; max-width:570px; } .mx-hero-copy h1 { font-size:48px; }
 .mx-hero-copy .actions { margin-top:24px; }
 .mx-hero[data-photo="resources"] .mx-hero-veil { background:linear-gradient(0deg,#fff 0,#fff calc(100% - 700px),rgba(255,255,255,.96) calc(100% - 510px),rgba(255,255,255,.12) calc(100% - 360px),transparent calc(100% - 270px)); }
 .mx-hero[data-photo="about"] .mx-hero-photo { height:700px; }
 .mx-hero[data-photo="about"] .mx-hero-veil { background:linear-gradient(0deg,#242424 0,#242424 calc(100% - 740px),rgba(36,36,36,.95) calc(100% - 530px),rgba(36,36,36,.25) calc(100% - 340px),transparent calc(100% - 180px)); }
 .mx-hero[data-photo="about"] h1 { font-size:52px; }
 .mx-hero[data-photo="quiz"] h1 { font-size:76px; }
}
@media(max-width:767px) {
 .mx-hero { --mx-photo-height:clamp(540px,76svh,664px); border-radius:16px; }
 .mx-hero-photo { height:var(--mx-photo-height); }
 .mx-hero-content,.mx-hero[data-photo="about"] .mx-hero-content { padding:calc(var(--mx-photo-height) - 204px) 24px 96px; }
 .mx-hero-copy h1,.mx-hero[data-photo="about"] h1 { font-size:40px; }
 .mx-hero-veil { background:linear-gradient(to bottom,transparent calc(var(--mx-photo-height) - 424px),rgba(255,255,255,.25) calc(var(--mx-photo-height) - 324px),rgba(255,255,255,.96) calc(var(--mx-photo-height) - 214px),#fff calc(var(--mx-photo-height) - 14px)); }
 .mx-hero[data-photo="resources"] .mx-hero-veil { background:linear-gradient(to bottom,transparent calc(var(--mx-photo-height) - 484px),rgba(255,255,255,.1) calc(var(--mx-photo-height) - 354px),rgba(255,255,255,.96) calc(var(--mx-photo-height) - 224px),#fff calc(var(--mx-photo-height) - 4px)); }
 .mx-hero[data-photo="about"] .mx-hero-photo { height:calc(var(--mx-photo-height) - 24px); }
 .mx-hero[data-photo="about"] .mx-hero-photo img { object-position:73% top; }
 .mx-hero[data-photo="about"] .mx-hero-veil { background:linear-gradient(to bottom,transparent calc(var(--mx-photo-height) - 504px),rgba(36,36,36,.15) calc(var(--mx-photo-height) - 374px),rgba(36,36,36,.96) calc(var(--mx-photo-height) - 204px),#242424 calc(var(--mx-photo-height) + 36px)); }
 .mx-hero-copy :is(.lead,.hero-copy>p:first-child) { margin-top:20px; }
 .mx-hero-copy .hook { font-size:15px; }
 .mx-hero-copy .actions { gap:8px 16px; }
 .mx-hero-copy .inscription-ligne { flex-direction:column; gap:10px; }
 .mx-hero-copy .inscription-champ { width:100%; flex:0 0 auto; height:52px; }
 .mx-hero-copy .inscription button { align-self:flex-start; flex:0 0 auto; }
}

/* Raccord Ressources : uniquement le décor au-dessus des personnages. */
.page-resources .photo-seam { display:none; }
.page-resources .mx-hero-photo .photo-original { -webkit-mask-image:linear-gradient(to bottom,transparent,#000 32px); mask-image:linear-gradient(to bottom,transparent,#000 32px); }

/* Full-bleed scenery with controls and copy inside the iOS safe area. */
@media(max-width:1023px) {
 html[data-hero-page] .mx-hero-photo,html[data-hero-page] .mx-hero-veil { top:var(--mx-safe-top); }
 html[data-hero-page] .mx-hero-content { padding-top:calc(510px + var(--mx-safe-top)); padding-left:max(32px,env(safe-area-inset-left)); padding-right:max(32px,env(safe-area-inset-right)); }
}
@media(max-width:767px) {
 html[data-hero-page="home"],html[data-hero-page="quiz"] { --mx-photo-tint:#b9a995; }
 html[data-hero-page="sprint"] { --mx-photo-tint:#b9a78f; }
 html[data-hero-page="enterprise"] { --mx-photo-tint:#b6a38a; }
 html[data-hero-page="about"] { --mx-photo-tint:#4b423a; }
 html[data-hero-page] .mx-hero .mx-hero-content { padding-top:calc(var(--mx-photo-height) - 204px + var(--mx-safe-top)); padding-left:max(24px,env(safe-area-inset-left)); padding-right:max(24px,env(safe-area-inset-right)); }
}