/* La feuille « On passe sur l'appli iPhone ? » en trois temps (ouvrirStore, popotam-appli-ui.js), d'après
   Refontes/design_handoff_passer_appli (pa.css), 09/11/2026. Écrite à la main, classes `sa-`, couleurs posées sur
   .sa-racine : rien ne fuit dans le reste de l'appli. Même étage que la feuille d'Android (.ap-racine, 1200).
   Feuille du bas sur téléphone, fenêtre centrée de 440 px sur un grand écran (iPad).
   Écarts voulus à la maquette : les deux traits de séparation de la question d'iPhone et le pointillé qui relie les
   étapes sont dessinés par une ombre et par un dégradé (pas de bordure sur un seul côté), et le contenu défile
   dans la feuille quand l'écran est trop court. */
.sa-racine{--sa-paper:#FFFDF4;--sa-cream:#FFF8EA;--sa-ink:#2A211B;--sa-ink2:#6A5C4C;--sa-mut:#806B50;--sa-line:#EEDFC2;--sa-line2:#E6D3AE;
  --sa-orange:#F0682F;--sa-orange-dd:#B8410F;--sa-orange-bg:#FCE3D8;--sa-green:#33A15B;--sa-green-dd:#2F6147;--sa-green-bg:#E6F3E9;
  --sa-sun-bg:#FFF1D2;--sa-sun-d:#8A5A00;--sa-blue:#2F7A93;--sa-blue-bg:#E3EEF2;
  --sa-fd:"Bricolage Grotesque",system-ui,sans-serif;--sa-fb:"Hanken Grotesk",system-ui,sans-serif;--sa-fh:"Caveat",cursive;
  --sa-spring:cubic-bezier(.3,1.35,.45,1);--sa-soft:cubic-bezier(.2,.8,.2,1);
  position:fixed;inset:0;z-index:1200;color:var(--sa-ink);font:400 16px/1.5 var(--sa-fb);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
.sa-racine *,.sa-racine *::before,.sa-racine *::after{box-sizing:border-box}
.sa-racine h2,.sa-racine p,.sa-racine ol,.sa-racine ul{margin:0}
:where(.sa-racine) button{font:inherit;color:inherit}
.sa-racine [hidden]{display:none!important}
.sa-racine :focus-visible{outline:3px solid var(--sa-orange);outline-offset:2px}
.sa-racine h2:focus{outline:none}
.sa-ico{display:inline-grid;place-items:center;flex:none}.sa-ico svg{display:block}

.sa-dim{position:absolute;inset:0;background:rgba(42,33,27,.38);opacity:0;transition:opacity .35s}
.sa-open .sa-dim{opacity:1}

/* ---------- la feuille ---------- */
.sa-sheet{position:absolute;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;max-height:calc(100% - 100px);display:flex;flex-direction:column;
  background:var(--sa-paper);border-radius:30px 30px 0 0;box-shadow:0 -20px 50px -20px rgba(42,33,27,.35);padding-bottom:env(safe-area-inset-bottom,0px);
  transform:translateY(105%);transition:transform .55s var(--sa-spring)}
.sa-open .sa-sheet{transform:none}
.sa-grip{flex:none;width:46px;height:5px;border-radius:9px;background:var(--sa-line2);margin:10px auto 0}
.sa-mas{position:absolute;right:26px;top:-84px;width:86px;z-index:2;pointer-events:none}
.sa-mas svg{width:100%;height:auto;display:block}
.sa-mas.sa-hop{animation:sa-hop .6s var(--sa-spring)}
@keyframes sa-hop{35%{transform:translateY(-16px) rotate(-6deg)}}
.sa-dots{flex:none;display:flex;gap:6px;justify-content:center;margin-top:10px}
.sa-dots i{width:8px;height:8px;border-radius:9px;background:var(--sa-line2);transition:width .4s var(--sa-spring),background-color .3s}
.sa-dots i.sa-on{width:26px;background:var(--sa-orange)}
.sa-dots i.sa-ok{background:var(--sa-green)}
.sa-vp{position:relative;flex:0 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;transition:height .5s var(--sa-spring)}

/* le passage d'un temps à l'autre : le nouveau entre, l'ancien sort du côté opposé, chaque bloc monte en cascade */
.sa-pane{padding:14px 22px 26px;display:grid;gap:16px}
.sa-pane.sa-in{animation:sa-pin .5s var(--sa-spring) both}
.sa-pane.sa-inb{animation:sa-pinb .5s var(--sa-spring) both}
.sa-pane.sa-out{position:absolute;left:0;right:0;top:0;pointer-events:none;animation:sa-pout .32s var(--sa-soft) both}
.sa-pane.sa-outb{position:absolute;left:0;right:0;top:0;pointer-events:none;animation:sa-poutb .32s var(--sa-soft) both}
@keyframes sa-pin{from{opacity:0;transform:translateX(46px)}}
@keyframes sa-pinb{from{opacity:0;transform:translateX(-46px)}}
@keyframes sa-pout{to{opacity:0;transform:translateX(-46px)}}
@keyframes sa-poutb{to{opacity:0;transform:translateX(46px)}}
.sa-pane>*{animation:sa-rise .5s var(--sa-spring) both;animation-delay:calc(var(--d,0) * 55ms + 80ms)}
@keyframes sa-rise{from{opacity:0;transform:translateY(10px)}}

.sa-ttl h2{font:800 27px/1.08 var(--sa-fd);letter-spacing:-.02em;padding-right:70px;text-wrap:balance}
.sa-ttl em{display:block;margin-top:6px;font:700 21px/1 var(--sa-fh);color:var(--sa-orange-dd);font-style:normal;rotate:-1.5deg;transform-origin:left}
.sa-lead{font:500 15.5px/1.5 var(--sa-fb);color:var(--sa-ink2)}
.sa-lead b{color:var(--sa-ink)}
.sa-centre{text-align:center}
.sa-ttl.sa-centre h2{padding:0}
.sa-ttl.sa-centre em{transform-origin:center}

/* la vitrine : un écran d'accueil vert foncé, la notification descend, reste, remonte */
.sa-vit{position:relative;height:178px;border-radius:24px;overflow:hidden;background:linear-gradient(160deg,#3F7B5E,#2C5A45 60%,#24493A)}
.sa-vit::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,226,122,.25),transparent 45%)}
.sa-ntf{position:absolute;left:12px;right:12px;top:12px;z-index:2;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:16px;
  background:rgba(255,253,244,.94);box-shadow:0 8px 18px -8px rgba(0,0,0,.4);animation:sa-ntf 3.6s var(--sa-spring) infinite}
@keyframes sa-ntf{0%,8%{transform:translateY(-130%);opacity:0}18%,78%{transform:none;opacity:1}90%,100%{transform:translateY(-130%);opacity:0}}
.sa-ap{width:34px;height:34px;border-radius:10px;background:var(--sa-orange);display:grid;place-items:center;overflow:hidden;flex:none}
.sa-ap svg{width:32px;height:32px;margin-top:3px}
.sa-ntf b{display:block;font:800 13.5px/1.25 var(--sa-fd)}
.sa-ntf small{font:500 12px/1.3 var(--sa-fb);color:var(--sa-ink2)}
.sa-ntf .sa-t{margin-left:auto;align-self:flex-start;font:600 11px var(--sa-fb);color:var(--sa-mut);white-space:nowrap}
.sa-grid4{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:22px}
.sa-grid4 i{width:54px;height:54px;border-radius:15px;background:rgba(255,255,255,.14)}
.sa-me{position:relative;width:54px;height:54px;border-radius:15px;background:var(--sa-orange);display:grid;place-items:center;overflow:visible;
  box-shadow:0 8px 16px -6px rgba(0,0,0,.4);animation:sa-bob 3.6s var(--sa-spring) infinite}
.sa-me svg{width:50px;height:50px;margin-top:4px;clip-path:inset(0 0 4px 0 round 0 0 13px 13px)}
.sa-me span{position:absolute;top:58px;left:50%;translate:-50% 0;font:700 11px var(--sa-fb);color:#fff;white-space:nowrap}
@keyframes sa-bob{0%,12%,100%{transform:none}16%{transform:translateY(-6px) scale(1.06)}22%{transform:none}}

/* les trois atouts, sur des tuiles inclinées */
.sa-atts{list-style:none;padding:0;display:grid;gap:10px}
.sa-atts li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:center}
.sa-ti{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--b);color:var(--c);border:2px solid var(--sa-ink);box-shadow:0 3px 0 var(--sa-ink);rotate:-4deg}
.sa-atts b{display:block;font:800 15.5px/1.25 var(--sa-fd)}
.sa-atts li>span+span>span{font:500 14px/1.35 var(--sa-fb);color:var(--sa-ink2)}

/* les trois étapes, reliées par des pointillés */
.sa-stp{list-style:none;padding:0;display:grid;gap:10px}
.sa-stp li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;padding:10px 12px 10px 10px;border-radius:18px;background:#fff;border:1.5px solid var(--sa-line)}
.sa-n{position:relative;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--b);color:var(--c)}
.sa-n i{position:absolute;right:-6px;top:-6px;width:20px;height:20px;border-radius:50%;background:var(--sa-ink);color:#fff;font:800 11px/20px var(--sa-fd);text-align:center;font-style:normal}
.sa-stp li p{font:500 15px/1.35 var(--sa-fb)}
.sa-stp li b{font-weight:800}
.sa-stp li+li::before{content:"";position:absolute;left:31px;top:-11px;width:2px;height:10px;background:repeating-linear-gradient(to bottom,var(--sa-line2) 0 3px,transparent 3px 6px)}

/* l'aperçu de la question d'iPhone, le bouton « Ouvrir » entouré d'un anneau qui pulse */
.sa-ios{position:relative;margin:0 auto;width:246px;border-radius:16px;background:rgba(242,242,247,.96);box-shadow:0 14px 30px -14px rgba(42,33,27,.5);overflow:hidden;text-align:center;font-family:-apple-system,system-ui,sans-serif}
.sa-ios p{padding:14px 16px 12px;font:600 14px/1.3 -apple-system,system-ui,sans-serif;color:#111}
.sa-ios div{display:grid;grid-template-columns:1fr 1fr;box-shadow:inset 0 1px 0 #D1D1D6}
.sa-ios span{padding:10px;font:500 15px -apple-system,system-ui,sans-serif;color:#0A84FF}
.sa-ios span+span{box-shadow:inset 1px 0 0 #D1D1D6;font-weight:700;position:relative}
.sa-ios span+span::after{content:"";position:absolute;inset:4px;border-radius:10px;border:2.5px solid var(--sa-orange);animation:sa-pls 1.6s ease-in-out infinite}
@keyframes sa-pls{50%{transform:scale(1.06);opacity:.4}}
.sa-ios-l{display:block;margin-top:6px;text-align:center;font:700 18px/1 var(--sa-fh);color:var(--sa-orange-dd)}
.sa-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:var(--sa-sun-bg);font:600 14px/1.4 var(--sa-fb);color:#5A4410}
.sa-note .sa-ico{color:var(--sa-sun-d);margin-top:1px}

/* les boutons : un seul orange par temps, un vrai bouton neutre, « Plus tard » discret */
.sa-acts{display:grid;gap:10px}
.sa-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;padding:0 22px;border-radius:999px;border:0;background:var(--sa-orange);color:#fff;
  font:800 17.5px/1.15 var(--sa-fd);cursor:pointer;box-shadow:0 0 0 2px var(--sa-ink),0 5px 0 2px var(--sa-ink);transition:transform .2s var(--sa-spring),box-shadow .2s}
.sa-btn svg{flex:none}
.sa-btn:hover{transform:translateY(-2px);box-shadow:0 0 0 2px var(--sa-ink),0 7px 0 2px var(--sa-ink)}
.sa-btn:active{transform:translateY(3px);box-shadow:0 0 0 2px var(--sa-ink),0 2px 0 2px var(--sa-ink)}
.sa-btn.sa-neu{background:#fff;color:var(--sa-ink);font-size:16px;min-height:52px;box-shadow:inset 0 0 0 1.5px var(--sa-line2)}
.sa-btn.sa-neu:hover{box-shadow:inset 0 0 0 1.5px var(--sa-ink2),0 6px 14px -8px rgba(90,50,20,.4)}
.sa-btn.sa-neu:active{transform:translateY(1px)}
.sa-btn.sa-ghost{background:none;box-shadow:none;color:var(--sa-mut);font:700 15px var(--sa-fb);min-height:44px}
.sa-btn.sa-ghost:hover{color:var(--sa-ink);transform:none;box-shadow:none}
.sa-btn[aria-busy="true"]{pointer-events:none}
.sa-spin{flex:none;width:20px;height:20px;border-radius:50%;border:3px solid rgba(255,255,255,.45);border-top-color:#fff;animation:sa-sp .8s linear infinite}
@keyframes sa-sp{to{transform:rotate(360deg)}}
.sa-cap{text-align:center;font:600 13px var(--sa-fb);color:var(--sa-mut);margin-top:-4px}
.sa-btn.sa-shake{animation:sa-shk .45s}
.sa-btn.sa-shake svg{animation:sa-sp .6s var(--sa-soft) 1}
@keyframes sa-shk{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* c'est envoyé : une feuille tombe dans l'icône Popotam */
.sa-sent{display:grid;justify-items:center;gap:8px;text-align:center;padding:10px 0}
.sa-bx{position:relative;width:96px;height:96px;border-radius:26px;background:var(--sa-orange);display:grid;place-items:center;overflow:hidden;box-shadow:0 0 0 2px var(--sa-ink),0 6px 0 2px var(--sa-ink)}
.sa-bx svg{width:90px;height:90px;margin-top:8px}
.sa-paper{position:absolute;left:50%;top:-10px;width:40px;height:30px;margin-left:-20px;border-radius:6px;background:#fff;box-shadow:0 0 0 1.5px var(--sa-ink);animation:sa-drop 1.1s var(--sa-spring) .25s both}
@keyframes sa-drop{from{transform:translateY(-80px) rotate(-12deg);opacity:0}60%{opacity:1}to{transform:translateY(40px) scale(.3);opacity:0}}

/* ---------- sur un grand écran : une fenêtre centrée de 440 px ---------- */
@media (min-width:700px) and (min-height:600px){
  .sa-sheet{left:50%;right:auto;bottom:auto;top:calc(50% + 30px);width:440px;max-width:calc(100% - 32px);max-height:calc(100% - 140px);margin:0;padding-bottom:0;border-radius:30px;
    transform:translate(-50%,-44%) scale(.94);opacity:0;transition:transform .5s var(--sa-spring),opacity .3s}
  .sa-open .sa-sheet{transform:translate(-50%,-50%);opacity:1}
  .sa-grip{display:none}
  .sa-mas{top:-74px;right:34px}
  .sa-dots{margin-top:18px}
}

/* ---------- animations coupées : la notification de la vitrine reste posée ---------- */
@media (prefers-reduced-motion:reduce){
  .sa-racine *,.sa-racine *::before,.sa-racine *::after,.sa-dim,.sa-sheet{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important}
}