/* ===== MD EXPÉRIENCE — accueil marreiros.digital, préfixe mde- (v10, feuille hébergée) =====
   Sans JS (ou mouvement réduit) : la scène est un bloc normal, les calques d'animation sont masqués. */
@property --mde-fa{syntax:'<color>';inherits:true;initial-value:rgba(27,140,166,0)}
@property --mde-fb{syntax:'<color>';inherits:true;initial-value:rgba(8,23,42,0)}
:root{--mde-gut:clamp(16px,4.2vw,64px);--mde-sec:125svh;--mde-edge:max(calc(var(--mde-gut) + 34px),calc((100vw - 1240px) / 2 + 32px))}
html{overflow-x:hidden}
.mde-stage{position:relative;background:#08172A;color:#F8F8F6;overflow:hidden}
.mde-cam{position:relative;height:70svh;overflow:hidden;background:#08172A}
.mde-phs{position:absolute;inset:0}
.mde-ph{position:absolute;inset:0;opacity:0}
.mde-ph-0{opacity:1}
.mde-ph img,.mde-img{width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.mde-scrim{position:absolute;inset:0;pointer-events:none;display:none;background:linear-gradient(180deg,rgba(8,23,42,.72) 0%,rgba(8,23,42,.15) 30%,rgba(8,23,42,.2) 60%,rgba(8,23,42,.85) 100%),linear-gradient(90deg,rgba(8,23,42,.75) 0%,rgba(8,23,42,0) 55%)}
.mde-scrim.mde-right{background:linear-gradient(180deg,rgba(8,23,42,.72) 0%,rgba(8,23,42,.15) 30%,rgba(8,23,42,.2) 60%,rgba(8,23,42,.85) 100%),linear-gradient(270deg,rgba(8,23,42,.75) 0%,rgba(8,23,42,0) 55%)}
.mde-flood{position:absolute;inset:0;pointer-events:none;opacity:0;display:none;mix-blend-mode:soft-light;background:radial-gradient(120% 90% at 60% 105%,var(--mde-fa) 5%,var(--mde-fb) 55%,rgba(8,23,42,0) 95%);transition:opacity .4s,--mde-fa .6s ease-in-out,--mde-fb .6s ease-in-out}
.mde-flood.is-on{opacity:1}
.mde-night{position:absolute;inset:0;background:#000;pointer-events:none;opacity:0;display:none}
.mde-flash,.mde-snow{display:none}
.mde-fx .mde-flash,.mde-fx .mde-snow{display:block;position:absolute;inset:0;pointer-events:none}
.mde-flash{z-index:4;background:#DFE8F4;opacity:0}
.mde-snow{z-index:5;opacity:0;width:100%;height:100%}
.mde-fx .mde-scrim,.mde-fx .mde-flood,.mde-fx .mde-night{z-index:3}

/* ---------- Texte des scènes ---------- */
.mde-scene{position:relative;padding:72px var(--mde-gut)}
.mde-in{position:relative}
.mde-eyebrow{font-family:Geist,sans-serif;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#8FB4EC;margin:0}
.mde-h-hero{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:min(clamp(3rem,8.4vw,8.2rem),13svh);line-height:.92;letter-spacing:-.025em;margin:1.4rem 0 0;max-width:12ch;color:#F8F8F6}
.mde-h-hero em,.mde-h-scene em,.mde-big em,.mde-big .mdx-acc{font-style:italic;color:#8FB4EC}
.mde-h-scene{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:min(clamp(2.6rem,6vw,5.6rem),11svh);line-height:.98;letter-spacing:-.022em;margin:1.3rem 0 0;max-width:13ch;color:#F8F8F6}
.mde-p-scene{font-family:Geist,sans-serif;font-size:clamp(16px,1.3vw,19px);line-height:1.65;color:rgba(248,248,246,.86);max-width:46ch;margin:1.4rem 0 0}
.mde-eyebrow,.mde-h-hero,.mde-h-scene,.mde-p-scene,.mde-big{text-shadow:0 1px 2px rgba(8,23,42,.5),0 4px 28px rgba(8,23,42,.6)}
.mde-step{margin:0 0 3rem}
.mde-tag{display:inline-flex;align-items:center;gap:8px;font-family:Geist,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin:0}
.mde-tag-x{display:grid;place-items:center;width:20px;height:20px;background:#2E6ABF;color:#fff;font-size:12px;margin:0}
.mde-tag-s{position:relative;background:rgba(248,248,246,.92);color:#08172A;padding:4px 8px;margin:0}
.mde-tag-s::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#2E6ABF;transform:scaleX(var(--mde-line,1));transform-origin:left}
.mde-big{font-family:'Instrument Serif',Georgia,serif;font-weight:400;text-align:center;font-size:min(clamp(3.2rem,12vw,11.5rem),22svh);line-height:.9;letter-spacing:-.03em;margin:0 auto;max-width:7ch;color:#F8F8F6}
.mde-w,.mde-c{display:inline-block}
.mde-hero-cta{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(18px,3vh,30px);padding:12px 0;font-family:Geist,sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#F8F8F6;text-decoration:none;border-bottom:1px solid rgba(248,248,246,.45);transition:border-color .3s,color .3s}
.mde-hero-cta::after{content:"\2192";display:inline-block;transition:transform .3s}
.mde-hero-cta:hover{border-color:#8FB4EC;color:#8FB4EC}
.mde-hero-cta:hover::after{transform:translateX(5px)}
.mde-hero-cta:focus-visible,.mde-end-cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.mde-end-cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;margin-top:clamp(22px,4vh,40px);padding:16px 30px;font-family:Geist,sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#08172A;background:#F8F8F6;border:1px solid #F8F8F6;text-decoration:none;transition:background-color .3s,border-color .3s,transform .3s}
.mde-end-cta:hover{background:#8FB4EC;border-color:#8FB4EC;transform:translateY(-2px)}
.mde-line{padding-bottom:.08em;margin-bottom:-.08em}

/* ---------- Scène fixe (JS actif) ---------- */
.mde-spacers,.mde-loader,.mde-hud,.mde-steps-nav,.mde-mist{display:none}
.mde-fx .mde-stage{position:fixed;inset:0;height:100vh;height:100svh;z-index:1}
.mde-fx .mde-cam{position:absolute;inset:0;height:auto}
.mde-fx .mde-scrim,.mde-fx .mde-flood,.mde-fx .mde-night{display:block}
.mde-fx .mde-scene{position:absolute;inset:0;padding:0;visibility:hidden;z-index:10}
/* le texte s'aligne sur le conteneur de 1240 px de la navigation dès que l'écran est plus large (grands écrans) */
.mde-fx .mde-scene .mde-in{position:absolute;left:var(--mde-edge);right:var(--mde-edge);bottom:clamp(90px,16vh,170px)}
.mde-fx .mde-scene-0 .mde-in{bottom:clamp(100px,19vh,220px)}
.mde-fx .mde-scene-3 .mde-in{top:50%;bottom:auto;transform:translateY(-50%);left:max(calc(var(--mde-gut) + 3vw),calc((100vw - 1240px) / 2 + 32px));right:max(calc(var(--mde-gut) + 3vw),calc((100vw - 1240px) / 2 + 32px))}
.mde-fx .mde-step{position:absolute;inset:0 auto auto 0;width:min(440px,100%);margin:0}
.mde-fx .mde-step.mde-right{left:auto;right:110px}
.mde-fx .mde-scene-6 .mde-in{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;left:0;right:0;bottom:0}
.mde-fx .mde-big{max-width:none;padding:0 var(--mde-gut)}
.mde-fx .mde-spacers{display:block;position:relative;z-index:2;pointer-events:none}
.mde-fx .mde-spacer{height:var(--mde-sec)}
.mde-fx .mde-mist{display:block;position:absolute;left:0;right:0;bottom:0;height:80svh;pointer-events:none;background:linear-gradient(to top,#F8F8F6 0%,rgba(248,248,246,.92) 22%,rgba(248,248,246,.55) 52%,rgba(248,248,246,.18) 78%,rgba(248,248,246,0) 100%)}
.mde-fx .mde-hud{display:block;position:absolute;inset:0;pointer-events:none;z-index:20}
.mde-hud-l,.mde-hud-r{position:absolute;top:110px;bottom:56px;width:14px}
.mde-hud-l{left:calc(var(--mde-edge) - 42px)}.mde-hud-r{right:calc(var(--mde-edge) - 42px)}
.mde-hud-l::before,.mde-hud-l::after,.mde-hud-r::before,.mde-hud-r::after{content:"";position:absolute;width:10px;height:10px;border:1px solid rgba(248,248,246,.5)}
.mde-hud-l::before{top:0;left:0;border-right:0;border-bottom:0}.mde-hud-l::after{bottom:0;left:0;border-right:0;border-top:0}
.mde-hud-r::before{top:0;right:0;border-left:0;border-bottom:0}.mde-hud-r::after{bottom:0;right:0;border-left:0;border-top:0}
.mde-hud-coord{position:absolute;left:-2px;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;font-family:Geist,sans-serif;font-size:10px;letter-spacing:.32em;color:rgba(248,248,246,.5)}
.mde-hud-count{position:absolute;right:-2px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font-family:Geist,sans-serif;font-size:10px;letter-spacing:.32em;color:rgba(248,248,246,.5)}
.mde-hud-count b{color:#fff;font-weight:500}
.mde-progress{position:absolute;left:calc(var(--mde-edge) - 34px);right:calc(var(--mde-edge) - 34px);top:10px;height:1px;background:rgba(248,248,246,.14)}
.mde-progress i{position:absolute;left:0;top:-1px;height:3px;width:calc(var(--mde-p,0)*100%);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55) 70%,#fff);box-shadow:0 0 10px rgba(255,255,255,.9),0 0 26px rgba(143,180,236,.7);border-radius:2px}
.mde-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 18px;min-height:44px;border:0;background:transparent;color:rgba(248,248,246,.85);font-family:Geist,sans-serif;font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;cursor:pointer;pointer-events:auto;text-shadow:0 1px 10px rgba(8,23,42,.8)}
.mde-cue:focus-visible{outline:2px solid #fff;outline-offset:3px}
.mde-chev{display:block;width:12px;height:12px;border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(45deg);animation:mde-chev 1.6s ease-in-out infinite}
@keyframes mde-chev{0%,100%{transform:translateY(0) rotate(45deg);opacity:.5}50%{transform:translateY(8px) rotate(45deg);opacity:1}}
.mde-fx .mde-steps-nav{display:flex;flex-direction:column;gap:16px;position:absolute;right:calc(var(--mde-edge) + 10px);top:50%;transform:translateY(-50%);z-index:25}
.mde-steps-nav button{width:50px;height:50px;border-radius:50%;border:1px solid rgba(248,248,246,.28);background:rgba(8,23,42,.4);color:rgba(248,248,246,.65);font:600 11px/1 Geist,sans-serif;letter-spacing:.06em;cursor:pointer;transition:border-color .3s,color .3s,background-color .3s,box-shadow .3s}
.mde-steps-nav button.is-active{border-color:#8FB4EC;color:#fff;background:rgba(46,106,191,.5);box-shadow:0 0 24px rgba(143,180,236,.6)}
.mde-steps-nav button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.mde-fx .mde-loader{display:grid;place-items:center;position:fixed;inset:0;z-index:100;background:#08172A}
.mde-loader svg{width:min(260px,52vw);color:rgba(143,180,236,.25)}
.mde-loader svg path{fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.mde-loader svg .mde-fill{color:#8FB4EC;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 8px rgba(143,180,236,.7))}
.mde-loader .mde-pct{position:absolute;left:50%;bottom:22vh;transform:translateX(-50%);font-family:Geist,sans-serif;font-size:11px;letter-spacing:.4em;color:rgba(248,248,246,.7);margin:0}
.mde-roll{position:relative;display:inline-block;overflow:hidden;line-height:1.25;vertical-align:bottom}
.mde-roll>span{display:block;white-space:pre}
.mde-roll>span+span{position:absolute;inset:0}
.mde-ch{display:inline-block}

/* ---------- Navigation sur la scène ---------- */
.md-nav{transition:background-color .4s,border-color .4s,box-shadow .4s}
.md-nav.mde-dark{background-color:transparent!important;border-bottom-color:transparent!important;box-shadow:none!important}
.md-nav.mde-dark .md-nav-inner>.md-brand{color:#F8F8F6}
.md-nav.mde-dark .md-nav-inner>.md-brand .md-brand-dot,.md-nav.mde-dark .md-nav-inner>.md-brand .mdx-peak{color:#8FB4EC}
.md-nav.mde-dark .mdx-bar{background:#F8F8F6}

/* ---------- Grand écran ---------- */
@media(min-width:768px){
  .mde-ph{will-change:transform,opacity}
  .md-nav.mde-dark .md-nav-link{color:rgba(248,248,246,.78)}
  .md-nav.mde-dark .md-nav-link:hover{color:#fff}
  .md-nav.mde-dark .md-nav-link.md-nav-cta-link{color:#fff;border-color:rgba(255,255,255,.6)}
  .md-nav.mde-dark .md-nav-link.md-nav-cta-link:hover{background-color:#F8F8F6;color:#08172A;border-color:#F8F8F6}
  .md-nav.mde-dark .md-nav-link:not(.md-nav-cta-link)::after{background:#8FB4EC}
}

/* ---------- Mobile ---------- */
@media(max-width:767px){
  .mde-fx .mde-steps-nav{right:auto;left:var(--mde-gut);top:auto;bottom:clamp(36px,6vh,60px);transform:none;flex-direction:row;gap:10px}
  .mde-steps-nav button{width:44px;height:44px}
  .mde-fx .mde-scene-3 .mde-in{top:auto;bottom:clamp(110px,16vh,160px);transform:none;left:calc(var(--mde-gut) + 34px);right:var(--mde-gut);max-width:none}
  .mde-fx .mde-step,.mde-fx .mde-step.mde-right{inset:auto auto 0 0;width:100%}
  .mde-hud-l,.mde-hud-r{top:96px;bottom:40px}
  .mde-scrim,.mde-scrim.mde-right{background:linear-gradient(180deg,rgba(8,23,42,.78) 0%,rgba(8,23,42,.2) 28%,rgba(8,23,42,.66) 56%,rgba(8,23,42,.95) 100%)}
  .mde-flood{mix-blend-mode:normal;transition:opacity .4s}
  .mde-flood.is-on{opacity:.3}
  .mde-ph-3 img{object-position:66% 50%}
  .mde-ph-0 img{object-position:50% 50%}
  .mde-ph-4 img{object-position:30% 50%}
  .mde-ph-5 img{object-position:50% 50%}
  .mde-ph-6 img{object-position:50% 50%}
  .mde-fx .mde-ph-6{transform-origin:50% 85%!important}
  .mde-fx .mde-ph-3{transform-origin:50% 70%!important}
}
/* ---------- Téléphone en paysage / fenêtre très basse : le texte reste sous la nav et au-dessus du bord ---------- */
@media(max-height:500px){
  .mde-fx .mde-scene-0 .mde-eyebrow{display:none}
  .mde-fx .mde-scene-0 .mde-in{bottom:52px}
  .mde-fx .mde-scene .mde-in{bottom:52px}
  .mde-fx .mde-scene-3 .mde-in{top:auto;bottom:28px;transform:none}
  .mde-fx .mde-step{position:absolute;inset:auto auto 0 0}
  .mde-fx .mde-step.mde-right{left:auto;right:110px}
  .mde-h-hero{font-size:min(clamp(3rem,8.4vw,8.2rem),12svh)}
  .mde-h-scene{font-size:min(clamp(2.6rem,6vw,5.6rem),10svh);margin-top:.6rem}
  .mde-p-scene{margin-top:.7rem;font-size:15px;line-height:1.5}
  .mde-hero-cta{margin-top:12px;padding:8px 0}
  .mde-end-cta{margin-top:16px;min-height:44px;padding:12px 24px}
  .mde-cue{left:auto;right:var(--mde-edge);bottom:10px;transform:none;flex-direction:row;gap:10px;padding:8px 0}
  .mde-hud-coord,.mde-hud-count{display:none}
}
@media(prefers-reduced-motion:reduce){.mde-chev{animation:none}}