/* OnceKeep — feuille de style commune — v0.10 */
@font-face{font-family:"Bricolage Grotesque";font-weight:500;font-display:swap;src:url(../fonts/bricolage-grotesque-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:800;font-display:swap;src:url(../fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:400;font-display:swap;src:url(../fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:500;font-display:swap;src:url(../fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:700;font-display:swap;src:url(../fonts/hanken-grotesk-latin-700-normal.woff2) format("woff2")}
:root{
  --ground:#E9EEF0;
  --paper:#FFFFFF;
  --ink:#0E3B43;
  --ink-soft:#4E676D;
  --sticker:#FFCE3A;
  --sticker-deep:#E9A800;
  --line:#CFD9DC;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:17px;line-height:1.6}
a{color:var(--ink)}
a:focus-visible,button:focus-visible,select:focus-visible{outline:3px solid var(--sticker-deep);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:"Bricolage Grotesque",sans-serif;margin:0;line-height:1.05}

/* En-tête */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:24px;letter-spacing:-.5px}
.top nav{display:flex;align-items:center;gap:26px;flex-wrap:wrap;font-weight:500}
.top nav a{text-decoration:none}
.top nav a:hover{text-decoration:underline;text-underline-offset:5px}
.lang{font:inherit;font-size:15px;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:8px;padding:7px 10px}

/* Bandeau principal */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:56px 0 90px}
.hero h1{font-size:clamp(46px,7vw,92px);font-weight:800;letter-spacing:-2.5px}
.hero p{max-width:30em;color:var(--ink-soft);font-size:19px;margin:26px 0 34px}
.btn{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-weight:700;padding:16px 30px;border-radius:10px;border:0;font:inherit;font-weight:700;cursor:pointer}
.btn:hover{background:#0A2D33}

/* La boîte du logiciel */
.stage{position:relative;height:440px;perspective:1100px;display:flex;justify-content:center;align-items:center}
.box{position:relative;width:230px;height:310px;transform-style:preserve-3d;transform:rotateY(var(--ry,-28deg)) rotateX(var(--rx,4deg));animation:arrive 1.1s cubic-bezier(.2,.8,.2,1) both}
.face{position:absolute;inset:0;border-radius:6px}
.front{background:linear-gradient(155deg,#16545E 0%,#0E3B43 62%,#0A2D33 100%);color:#fff;padding:26px 22px;display:flex;flex-direction:column;justify-content:space-between;transform:translateZ(36px);overflow:hidden;
  -webkit-box-reflect:below 14px linear-gradient(transparent 62%,rgba(255,255,255,.28))}
.front::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,0) 38%);pointer-events:none}
.front .name{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:38px;letter-spacing:-1px}
.front .tag{font-size:14px;opacity:.85;line-height:1.4}
.side{width:72px;left:auto;right:-36px;background:linear-gradient(90deg,#0A2D33,#072227);transform:rotateY(90deg)}
.side span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(90deg);white-space:nowrap;color:#9CC3C9;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:18px}
.sticker{position:absolute;top:-30px;right:-58px;width:118px;height:118px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE58A,var(--sticker) 55%,var(--sticker-deep));transform:translateZ(60px) rotate(12deg);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ink);box-shadow:0 10px 20px rgba(14,59,67,.25)}
.sticker b{font-family:"Bricolage Grotesque",sans-serif;font-size:40px;line-height:1}
.sticker small{font-size:13px;font-weight:700}
.shadow{position:absolute;bottom:22px;width:300px;height:26px;background:radial-gradient(ellipse,rgba(14,59,67,.28),transparent 70%)}
@keyframes arrive{from{opacity:0;transform:rotateY(-70deg) rotateX(4deg) translateY(30px)}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.box{animation:none}}

/* Ce que vous n'aurez jamais */
.never{background:var(--paper);padding:90px 0}
.never h2{font-size:clamp(32px,4vw,48px);letter-spacing:-1px;max-width:14em}
.never ul{list-style:none;margin:40px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:14px 40px}
.never li{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(30px,4.6vw,58px);letter-spacing:-1px;color:#A9BABE;text-decoration:line-through;text-decoration-color:var(--sticker-deep);text-decoration-thickness:6px}
.never p{margin:40px 0 0;max-width:34em;color:var(--ink-soft)}

/* Applis */
.apps{padding:90px 0}
.apps h2{font-size:clamp(32px,4vw,48px);letter-spacing:-1px;margin-bottom:36px}
.app{display:grid;grid-template-columns:1fr 1fr;background:var(--paper);border-radius:4px 28px 4px 28px;overflow:hidden;border:1.5px solid var(--line)}
.shot{background:#DCE4E6;display:flex;align-items:center;justify-content:center;min-height:320px;padding:30px 36px 24px;color:var(--ink-soft);text-align:center}
.shot img{display:block;width:100%;max-width:520px;height:auto;border-radius:8px;box-shadow:0 18px 40px rgba(14,59,67,.22)}
.info{padding:40px}
.info h3{font-size:42px;letter-spacing:-1px}
.os{margin:10px 0 18px;color:var(--ink-soft);font-size:15px}
.info ul{margin:0 0 28px;padding-left:20px}
.info li{margin:6px 0}
.buy{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.price{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:44px;background:var(--sticker);padding:2px 16px;border-radius:8px;transform:rotate(-2deg)}

/* Étapes */
.steps{background:var(--ink);color:#fff;padding:90px 0}
.steps h2{font-size:clamp(32px,4vw,48px);letter-spacing:-1px;margin-bottom:44px}
.steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:36px;counter-reset:s}
.steps li{counter-increment:s;border-top:2px solid rgba(255,255,255,.25);padding-top:20px}
.steps li::before{content:counter(s);display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:56px;color:var(--sticker);line-height:1;margin-bottom:12px}
.steps h3{font-size:24px;margin-bottom:8px}
.steps p{margin:0;color:#B7CDD1}

/* Pied de page */
footer{padding:40px 0 50px;font-size:15px;color:var(--ink-soft)}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer nav{display:flex;gap:22px;flex-wrap:wrap}
footer a{color:var(--ink-soft)}

@media (max-width:820px){
  .hero,.app{grid-template-columns:1fr}
  .stage{height:380px}
  .steps ol{grid-template-columns:1fr}
}

/* Pages d'information (contact, mentions, CGV, confidentialité) */
.doc{background:var(--paper);border-radius:4px 28px 4px 28px;border:1.5px solid var(--line);padding:48px clamp(22px,5vw,64px);margin:20px auto 70px;max-width:820px}
.doc h1{font-size:clamp(34px,5vw,52px);font-weight:800;letter-spacing:-1px;margin-bottom:10px}
.doc .maj{color:var(--ink-soft);font-size:15px;margin:0 0 30px}
.doc h2{font-size:24px;margin:36px 0 10px}
.doc p,.doc li{max-width:42em}
.doc .todo{background:#FFF1BF;border-radius:4px;padding:0 5px;font-weight:700}
.back{display:inline-block;margin-top:10px;font-weight:500}
.mail{display:inline-block;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(22px,4vw,34px);background:var(--sticker);padding:6px 18px;border-radius:8px;text-decoration:none;margin:10px 0 20px}

/* Page produit — v0.6 */
.prod-hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:40px 0 70px}
.prod-hero h1{font-size:clamp(46px,7vw,84px);font-weight:800;letter-spacing:-2px}
.prod-hero .lead{font-size:20px;color:var(--ink-soft);margin:16px 0 28px;max-width:28em}
.prod-hero img{width:100%;height:auto;border-radius:8px;box-shadow:0 18px 40px rgba(14,59,67,.22)}
.feat{background:var(--paper);padding:80px 0}
.feat h2,.req h2,.faq h2{font-size:clamp(30px,4vw,44px);letter-spacing:-1px;margin-bottom:36px}
.groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:44px 56px}
.groups h3{font-size:24px;margin-bottom:10px;display:flex;align-items:center;gap:12px}
.groups ul{margin:0;padding-left:20px;color:var(--ink-soft)}
.groups li{margin:6px 0}
.req{padding:80px 0}
.req dl{display:grid;grid-template-columns:max-content 1fr;gap:14px 30px;margin:0;max-width:760px}
.req dt{font-weight:700}
.req dd{margin:0;color:var(--ink-soft)}
.faq{background:var(--paper);padding:80px 0}
.faq details{border-top:1.5px solid var(--line);padding:18px 0;max-width:820px}
.faq details:last-of-type{border-bottom:1.5px solid var(--line)}
.faq summary{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:21px;cursor:pointer}
.faq details p{margin:12px 0 0;color:var(--ink-soft);max-width:42em}
.cta{background:var(--ink);color:#fff;padding:70px 0;text-align:center}
.cta h2{font-size:clamp(30px,4vw,44px);margin-bottom:24px}
.cta .btn{background:var(--sticker);color:var(--ink)}
.cta .btn:hover{background:#FFD95F}
@media (max-width:820px){.prod-hero{grid-template-columns:1fr}.req dl{grid-template-columns:1fr;gap:4px}.req dd{margin-bottom:14px}}

/* Carrousel de captures — v0.7 */
.carousel{position:relative;width:100%;max-width:620px}
.viewport{overflow:hidden;border-radius:10px;box-shadow:0 18px 40px rgba(14,59,67,.22);background:#DCE4E6}
.slides{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.slide{flex:0 0 100%;margin:0;aspect-ratio:1/1;display:flex;flex-direction:column}
.slide img{flex:1;min-height:0;width:100%;object-fit:contain;object-position:top;background:#DCE4E6}
.slide figcaption{background:var(--paper);padding:12px 18px;font-weight:700;font-size:15px}
.slide .ph{flex:1;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);text-align:center;padding:30px;border:2px dashed #9FB1B5;margin:20px;border-radius:8px}
.carousel .prev,.carousel .next{position:absolute;top:calc(50% - 46px);width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.92);box-shadow:0 4px 12px rgba(14,59,67,.2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.carousel .prev{left:-18px}.carousel .next{right:-18px}
.carousel .prev:hover,.carousel .next:hover{background:#fff}
.dots{display:flex;justify-content:center;gap:10px;margin-top:16px}
.dots button{width:12px;height:12px;border-radius:50%;border:0;padding:0;background:#B6C5C9;cursor:pointer}
.dots button[aria-current="true"]{background:var(--ink);width:30px;border-radius:6px}
@media (prefers-reduced-motion:reduce){.slides{transition:none}}
@media (max-width:820px){.carousel .prev{left:6px}.carousel .next{right:6px}}

/* OnceKeep PDF — v0.9 */
.carousel.wide .slide{aspect-ratio:3/2}
.app + .app{margin-top:32px}
.soon{display:inline-block;background:var(--ink);color:#fff;font-size:13px;font-weight:700;padding:5px 12px;border-radius:99px}
.price small{font-family:"Hanken Grotesk",sans-serif;font-size:15px;font-weight:700;margin-left:6px}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);padding:14px 26px}
.btn.ghost:hover{background:var(--ink);color:#fff}
.local{background:var(--ink);color:#fff;padding:70px 0}
.local h2{font-size:clamp(30px,4vw,44px);letter-spacing:-1px;margin-bottom:18px;max-width:16em}
.local p{color:#B7CDD1;max-width:38em;margin:0}

/* Plateformes + effets — v0.10 */
.platforms{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 30px;padding:0;list-style:none}
.plat{display:flex;align-items:center;gap:10px;background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:9px 14px 9px 10px;font-weight:700;font-size:15px}
.plat small{display:block;font-weight:500;font-size:12px;color:var(--ink-soft);line-height:1.2}
.plat .ico{position:relative;width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--ink);color:#fff}
.plat .ico svg{width:22px;height:22px}
.plat.on .ico::after{content:"";position:absolute;inset:-4px;border-radius:13px;border:2.5px solid var(--sticker-deep);animation:ping 2.2s ease-out infinite}
.plat.on:nth-child(2) .ico::after{animation-delay:1.1s}
.plat.off{opacity:.62}
.plat.off .ico{background:#9FB1B5;animation:blink 3.2s ease-in-out infinite}
@keyframes ping{0%{transform:scale(.9);opacity:1}70%,100%{transform:scale(1.35);opacity:0}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 20px}
.tag-os{display:inline-flex;align-items:center;gap:7px;background:#E3F1EC;color:#0E3B43;border-radius:99px;padding:5px 12px 5px 8px;font-size:14px;font-weight:700}
.tag-os svg{width:18px;height:18px}
.tag-os .dot{width:8px;height:8px;border-radius:50%;background:#1F9D6B;animation:blink 1.6s ease-in-out infinite}
/* effets */
.app{transition:transform .35s ease,box-shadow .35s ease}
.app:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(14,59,67,.14)}
.box{transition:transform .25s ease-out}
.sticker{animation:wobble 4s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:translateZ(60px) rotate(12deg) scale(1)}50%{transform:translateZ(60px) rotate(6deg) scale(1.06)}}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.seen{opacity:1;transform:none}
.never li{transition:color .3s}
.never li.seen{animation:strike .8s ease both}
@keyframes strike{from{text-decoration-color:transparent}to{text-decoration-color:var(--sticker-deep)}}
@media (prefers-reduced-motion:reduce){.plat .ico::after,.plat.off .ico,.tag-os .dot,.sticker{animation:none}.reveal{opacity:1;transform:none}.app:hover{transform:none}}