/* L'Atelier — feuille commune aux quatre pages */
@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/archivo-latin-ext-wght-normal.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/archivo-latin-wght-normal.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#141414; --muted:#55554E; --bg:#F7F7F2; --card:#FFFFFF; --line:#E3E1DA;
  --accent:#FFFF62; --accent-ink:#141414; --accent-2:#3142FF; --shadow:#141414;
  --hero-bg:var(--bg); --hero-ink:var(--ink);
  --radius:22px; --wrap:1180px;
  --baa:#FFFF62; --otaf:#9B866A; --otaf-dark:#39332A; --menthe:#1DFF97; --violet:#DB8FFE;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Archivo',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- barre du haut ---------- */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}
.nav .wrap{display:flex;align-items:center;gap:22px;height:58px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:19px;letter-spacing:-.02em;margin-right:auto}
.brand .dots{display:flex;gap:4px}
.brand .dots i{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--ink)}
.nav nav{display:flex;gap:20px;font-size:14px;font-weight:600}
.nav nav a{text-decoration:none;opacity:.72}
.nav nav a:hover,.nav nav a[aria-current="page"]{opacity:1}
.nav nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.nav .open{font-size:14px;font-weight:800;text-decoration:none;padding:9px 16px;border-radius:999px;background:var(--ink);color:var(--bg)}
@media (max-width:720px){.nav nav{display:none}.nav .wrap{gap:12px}}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:17px;padding:15px 24px;border:2px solid var(--ink);border-radius:14px;background:var(--accent);color:var(--accent-ink);box-shadow:4px 4px 0 var(--shadow);transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--shadow)}
.btn.ghost{background:transparent;color:inherit;box-shadow:none;border-color:currentColor}
.btn.ghost:hover{box-shadow:none;transform:none;background:color-mix(in srgb,currentColor 8%,transparent)}
.btn:focus-visible,.nav a:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px}
.ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ---------- héros des pages appli ---------- */
.hero{background:var(--hero-bg);color:var(--hero-ink);text-align:center;padding:84px 0 0;overflow-x:clip}
.hero .logo{width:92px;height:92px;margin:0 auto 26px;border-radius:24px}
.eyebrow{font-size:14px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.75;margin:0 0 14px}
.hero h1{margin:0;font-size:clamp(56px,11vw,148px);line-height:.88;font-weight:800;letter-spacing:-.05em}
.hero .lead{max-width:760px;margin:26px auto 34px;font-size:clamp(20px,2.4vw,27px);line-height:1.3;font-weight:600}
.stage{height:190vh;position:relative}
.stage .sticky{position:sticky;top:70px;height:calc(100vh - 70px);display:flex;align-items:center;justify-content:center;perspective:1600px;padding:0 24px}
.stage .device{width:min(1180px,94vw);transform-origin:50% 100%;
  transform:translateY(calc((1 - var(--p,0)) * 40px)) rotateX(calc((1 - var(--p,0)) * 24deg)) scale(calc(.8 + var(--p,0) * .2));
  will-change:transform}

/* cadre navigateur */
.browser{background:#fff;border:2px solid var(--ink);border-radius:16px;overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.45),10px 10px 0 var(--shadow)}
.browser .bar{display:flex;align-items:center;gap:7px;height:30px;padding:0 12px;background:#EDECE6;border-bottom:2px solid var(--ink)}
.browser .bar i{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--ink);background:#fff}
.browser .bar i:nth-child(1){background:#FF6F5B}.browser .bar i:nth-child(2){background:#FFD23F}.browser .bar i:nth-child(3){background:#3DD68C}
.browser .bar span{margin-left:12px;font-size:12px;font-weight:600;color:#55554E}
.browser img{width:100%;height:auto;aspect-ratio:1389/868;object-fit:cover;object-position:top}

/* cadre téléphone */
.phone{width:min(300px,70vw);aspect-ratio:500/1050;border:3px solid var(--ink);border-radius:46px;background:var(--ink);padding:10px;box-shadow:0 30px 70px -30px rgba(0,0,0,.5)}
.phone .screen{width:100%;height:100%;border-radius:36px;overflow:hidden;background:#fff;position:relative}
.phone .screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.phone .screen::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:28%;height:22px;border-radius:999px;background:var(--ink);z-index:2}

/* ---------- grande phrase qui s'allume ---------- */
.statement{padding:150px 0 120px}
.statement p{margin:0 auto;max-width:1020px;font-size:clamp(34px,5.6vw,70px);line-height:1.08;font-weight:800;letter-spacing:-.035em;text-align:center}
.statement .w{opacity:.14;transition:opacity .25s linear}
.statement .w.on{opacity:1}
.statement mark{background:none;color:inherit;box-shadow:inset 0 -.12em 0 0 var(--accent)}

/* ---------- section titrée ---------- */
.sec{padding:110px 0}
.sec.tint{background:color-mix(in srgb,var(--accent) 18%,var(--bg))}
.sec.dark{background:var(--ink);color:#F7F7F2}
.sec-head{text-align:center;max-width:820px;margin:0 auto 64px}
.sec-head h2{margin:0;font-size:clamp(38px,5.4vw,66px);line-height:1;font-weight:800;letter-spacing:-.04em}
.sec-head p{margin:20px auto 0;font-size:clamp(18px,2vw,22px);line-height:1.45;color:var(--muted);max-width:680px}
.sec.dark .sec-head p{color:#C9C8C0}

/* ---------- récit collant : texte à gauche, écran qui change à droite ---------- */
.story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.steps{padding:12vh 0 30vh}
.step{min-height:72vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .4s ease}
.step.on{opacity:1}
.step .num{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:2px solid var(--ink);background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:17px;margin-bottom:20px}
.step h3{margin:0 0 14px;font-size:clamp(28px,3.2vw,40px);line-height:1.05;font-weight:800;letter-spacing:-.03em}
.step p{margin:0 0 14px;font-size:18px;line-height:1.55;color:var(--muted)}
.step ul{margin:6px 0 0;padding:0;list-style:none;font-size:16px;line-height:1.5}
.step li{padding:7px 0 7px 30px;position:relative;border-top:1px solid var(--line)}
.step li::before{content:"";position:absolute;left:2px;top:12px;width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid var(--ink)}
.step .inline-shot{display:none}
.story-device{position:sticky;top:calc(50vh - min(26vw,300px));}
.story-device .browser{position:relative}
.story-device .frames{position:relative;aspect-ratio:1389/868;background:#fff}
.story-device .frames img{position:absolute;inset:0;opacity:0;transform:scale(1.025);transition:opacity .6s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.story-device .frames img.on{opacity:1;transform:none}
/* variante téléphone du récit collant */
.story.tall{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.story.tall .story-device{top:calc(50vh - min(310px,40vh))}
.story.tall .phone{width:min(300px,100%);height:min(620px,80vh);aspect-ratio:auto;margin:0 auto}
.story.tall .phone .frames{aspect-ratio:auto;position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#fff}
.story.tall .phone .frames img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.step .inline-shot.phone{width:min(280px,72vw);margin-left:auto;margin-right:auto}
@media (max-width:900px){
  .story{grid-template-columns:1fr;gap:0}
  .story.tall{grid-template-columns:1fr}
  .story-device{display:none}
  .steps{padding:0}
  .step{min-height:0;opacity:1;padding:34px 0 56px}
  .step .inline-shot{display:block;margin-top:24px}
}

/* ---------- grille de cartes ---------- */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.card{background:var(--card);border:2px solid var(--ink);border-radius:var(--radius);padding:30px;box-shadow:6px 6px 0 var(--shadow);display:flex;flex-direction:column;gap:12px;overflow:hidden;position:relative}
.card.w2{grid-column:span 2}.card.w3{grid-column:span 3}.card.w4{grid-column:span 4}.card.w6{grid-column:span 6}
.card.fill{background:var(--accent);color:var(--accent-ink)}
.card.inkfill{background:var(--ink);color:#F7F7F2}
.card .ic{width:46px;height:46px;border-radius:13px;border:2px solid currentColor;display:flex;align-items:center;justify-content:center}
.card .ic svg{width:24px;height:24px}
.card h3{margin:4px 0 0;font-size:24px;line-height:1.1;font-weight:800;letter-spacing:-.02em}
.card p{margin:0;font-size:16px;line-height:1.5;opacity:.82}
.card .big{font-size:clamp(54px,7vw,88px);line-height:.9;font-weight:800;letter-spacing:-.05em}
.card .shot{margin:10px -30px -30px;border-top:2px solid var(--ink)}
.card .shot img{width:100%;aspect-ratio:1389/700;object-fit:cover;object-position:top left}
@media (max-width:900px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.card.w2,.card.w3,.card.w4,.card.w6{grid-column:span 2}}

/* ---------- téléphones en parallaxe ---------- */
.phones{display:flex;justify-content:center;align-items:center;gap:clamp(20px,5vw,70px);padding:20px 0}
.phones .phone:nth-child(1){transform:translateY(calc((0.5 - var(--p,.5)) * -120px)) rotate(-3deg)}
.phones .phone:nth-child(2){transform:translateY(calc((0.5 - var(--p,.5)) * 120px)) rotate(3deg)}
@media (max-width:640px){.phones{flex-direction:column}.phones .phone:nth-child(n){transform:none}}

/* ---------- liste complète ---------- */
.all{columns:3 260px;column-gap:46px}
.all section{break-inside:avoid;margin:0 0 34px}
.all h3{margin:0 0 10px;font-size:15px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.all ul{margin:0;padding:0;list-style:none}
.all li{font-size:16px;line-height:1.45;padding:8px 0 8px 26px;position:relative;border-top:1px solid var(--line)}
.sec.dark .all li{border-color:#33332F}
.all li::before{content:"";position:absolute;left:0;top:13px;width:13px;height:8px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(-45deg)}

/* ---------- confidentialité ---------- */
.privacy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.privacy h2{margin:0 0 18px;font-size:clamp(36px,4.6vw,58px);line-height:1;font-weight:800;letter-spacing:-.04em}
.privacy p{font-size:19px;line-height:1.55;margin:0 0 14px;color:inherit;opacity:.8}
.vault{aspect-ratio:1;max-width:420px;justify-self:center;width:100%;border-radius:50%;border:2px solid currentColor;display:grid;place-items:center;position:relative}
.vault::before,.vault::after{content:"";position:absolute;inset:12%;border-radius:50%;border:2px dashed currentColor;opacity:.4;animation:spin 40s linear infinite}
.vault::after{inset:26%;animation-duration:26s;animation-direction:reverse}
.vault svg{width:28%;height:28%}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:800px){.privacy{grid-template-columns:1fr}.vault{max-width:260px}}

/* ---------- fin de page ---------- */
.final{text-align:center;padding:140px 0 150px}
.final h2{margin:0 0 18px;font-size:clamp(44px,7vw,92px);line-height:.95;font-weight:800;letter-spacing:-.045em}
.final p{margin:0 auto 34px;max-width:620px;font-size:20px;line-height:1.45;color:var(--muted)}
.others{border-top:2px solid var(--ink);padding:48px 0}
.others .wrap{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.others .links{display:flex;flex-wrap:wrap;gap:12px}
.others a.pill{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:15px;padding:10px 16px 10px 10px;border:2px solid var(--ink);border-radius:999px;background:#fff}
.others a.pill img,.others a.pill .mini{width:28px;height:28px;border-radius:8px;flex:none}
footer.foot{padding:28px 0 40px;font-size:14px;font-weight:800}

/* ---------- apparitions au défilement ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}
.zoom{transform:scale(calc(.92 + var(--p,1) * .08));transition:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .stage{height:auto}.stage .sticky{position:static;height:auto;padding:40px 24px 0}
  .stage .device,.phones .phone:nth-child(n),.zoom{transform:none!important}
  .statement .w{opacity:1}
  .step{opacity:1}
  .vault::before,.vault::after{animation:none}
  .btn{transition:none}
}