/* Présentations produit — base commune : appareils réels, typographie, révélations au défilement. */
@font-face{font-family:"Outfit";src:url("fonts/outfit.woff2") format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("fonts/jakarta.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Fraunces";src:url("fonts/fraunces.woff2") format("woff2");font-weight:100 900;font-display:swap}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:400 17px/1.5 "Plus Jakarta Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.dev{position:relative;margin:0;user-select:none}
.dev .scr{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;background:#0b0b0c}
.dev iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.dev .frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}

/* Barre du haut (sans pied de page, page de présentation) */
.top{position:fixed;inset:0 0 auto;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:12px clamp(16px,3vw,36px);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px)}
.top .name{font:700 18px/1 "Outfit",sans-serif;letter-spacing:-.02em;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.top nav{display:flex;gap:4px}
.top nav a{min-height:36px;padding:0 14px;border-radius:999px;display:inline-flex;align-items:center;font:500 13.5px/1 "Outfit",sans-serif;text-decoration:none;opacity:.75}
.top nav a[aria-current="page"]{opacity:1}

.sec{position:relative}
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.eyebrow{font:600 clamp(15px,1.4vw,19px)/1.2 "Outfit",sans-serif;margin:0 0 12px}
.mega{font:700 clamp(46px,8.4vw,128px)/.95 "Outfit",sans-serif;letter-spacing:-.045em;margin:0}
.h2{font:700 clamp(38px,5.6vw,80px)/1 "Outfit",sans-serif;letter-spacing:-.04em;margin:0}
.lead{font:500 clamp(19px,1.9vw,26px)/1.35 "Outfit",sans-serif;letter-spacing:-.01em;margin:0}

/* Phrase qui s'allume mot à mot */
.reveal{max-width:1100px;margin:0 auto;padding:22vh clamp(20px,5vw,60px);font:700 clamp(32px,4.6vw,64px)/1.12 "Outfit",sans-serif;letter-spacing:-.035em}
.reveal span{transition:color .2s}

/* Grille bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;max-width:1180px;margin:0 auto;padding:0 clamp(16px,3vw,30px)}
.tile{border-radius:30px;padding:clamp(22px,2.6vw,34px);overflow:hidden;position:relative;min-height:240px;display:flex;flex-direction:column;justify-content:space-between}
.tile .k{font:600 15px/1.3 "Outfit",sans-serif;margin:0}
.tile .num{font:700 clamp(54px,6.4vw,96px)/.9 "Outfit",sans-serif;letter-spacing:-.05em;margin:12px 0 0}
.tile .num small{font-size:.38em;letter-spacing:-.02em;font-weight:600}
.tile p{margin:10px 0 0;font-size:15.5px}
.w2{grid-column:span 2}.w3{grid-column:span 3}.w4{grid-column:span 4}.w6{grid-column:span 6}

.cta{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 26px;border-radius:999px;font:600 17px/1 "Outfit",sans-serif;text-decoration:none;transition:transform .3s,filter .3s}
.cta:hover{transform:scale(1.04);filter:brightness(1.08)}

.up{opacity:0;transform:translateY(40px)}

@media (max-width:860px){
  .bento{grid-template-columns:1fr 1fr}
  .w2,.w3{grid-column:span 1}.w4,.w6{grid-column:span 2}
  .tile{min-height:200px;border-radius:24px}
}
@media (max-width:520px){.bento{grid-template-columns:1fr}.w2,.w3,.w4,.w6{grid-column:span 1}}
@media (prefers-reduced-motion:reduce){.up{opacity:1;transform:none}}