/* La feuille « Popotam, en vraie appli » et le bandeau du retour (popotam-appli-ui.js), d'après
   Refontes/design_handoff_appli_android. Tout est préfixé ap- et ses couleurs vivent sur
   .ap-racine / .ap-retour : rien ne fuit dans le reste de l'appli. Seuls .scrim et .sheet de la
   maquette sont repris (le cadre de téléphone et la colonne de notes n'en font pas partie) ;
   la feuille est ici fixée au bas de l'écran. */
.ap-racine,.ap-retour{--ap-cream:#FFF8EA;--ap-cream2:#FCEFD9;--ap-ink:#2A211B;--ap-ink2:#6A5C4C;--ap-muted:#9C8B79;--ap-line2:#EEDFC2;
  --ap-orange:#F0682F;--ap-orange-d:#DA541E;--ap-green:#33A15B;--ap-green-d:#2C8B4E;--ap-sun:#FFC53D;
  --ap-fd:"Bricolage Grotesque",system-ui,sans-serif;--ap-fb:"Hanken Grotesk",system-ui,sans-serif;--ap-fh:"Caveat",cursive;
  --ap-spring:cubic-bezier(.3,1.5,.4,1)}
.ap-racine{position:fixed;inset:0;z-index:1200;font-family:var(--ap-fb);color:var(--ap-ink);line-height:1.5;-webkit-tap-highlight-color:transparent}
.ap-racine *,.ap-racine *::before,.ap-racine *::after,.ap-retour *{box-sizing:border-box}
.ap-scrim{position:absolute;inset:0;background:rgba(42,30,18,.5);opacity:0;transition:opacity .35s}
.ap-open .ap-scrim{opacity:1}

/* ---------- la feuille ---------- */
.ap-sheet{position:absolute;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;background:var(--ap-cream);border-radius:30px 30px 0 0;
  padding:10px 20px calc(22px + env(safe-area-inset-bottom,0px));max-height:calc(100% - 70px);overflow:visible;
  transform:translateY(105%);transition:transform .5s cubic-bezier(.25,1.2,.4,1);box-shadow:0 -12px 40px -10px rgba(40,25,10,.45)}
.ap-open .ap-sheet{transform:none}
.ap-grab{width:42px;height:5px;border-radius:3px;background:var(--ap-line2);margin:0 auto 12px}
.ap-pop{position:absolute;right:14px;top:-62px;width:92px;height:92px;pointer-events:none;transform:translateY(30px) scale(.6);opacity:0;
  transition:transform .55s var(--ap-spring) .25s,opacity .2s .25s}
.ap-open .ap-pop{transform:none;opacity:1}
.ap-pop svg{width:100%;height:100%;display:block}

/* la vitrine : un bout d'écran d'accueil, ce que la personne aura */
.ap-shelf{position:relative;height:178px;border-radius:22px;overflow:hidden;background:linear-gradient(160deg,#2F6147,#1F4433);margin-bottom:18px}
.ap-shelf::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 18%,rgba(255,197,61,.22),transparent 45%)}
.ap-notif{position:absolute;left:12px;right:12px;top:12px;z-index:2;display:flex;gap:10px;align-items:center;background:rgba(255,253,244,.96);border-radius:16px;padding:9px 12px;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.45);transform:translateY(-130%);opacity:0}
.ap-go .ap-notif{animation:ap-notif .6s var(--ap-spring) 1.05s forwards}
@keyframes ap-notif{to{transform:none;opacity:1}}
.ap-ni{flex:none;width:30px;height:30px;border-radius:9px;background:var(--ap-sun);display:grid;place-items:center;overflow:hidden}
.ap-ni svg{width:34px;height:34px;margin-top:6px}
.ap-nt{min-width:0;flex:1}
.ap-nt b{display:block;font:800 13.5px var(--ap-fd);line-height:1.2}
.ap-nt span{display:block;font-size:12.5px;color:var(--ap-ink2);line-height:1.3}
.ap-nh{flex:none;align-self:flex-start;font-size:11px;color:var(--ap-muted);font-weight:600}
.ap-icons{position:absolute;left:0;right:0;bottom:16px;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);justify-items:center}
.ap-app{display:flex;flex-direction:column;align-items:center;gap:5px}
.ap-app i{display:block;width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.14)}
.ap-app span{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.55);height:15px}
.ap-me i{background:var(--ap-sun);display:grid;place-items:center;overflow:hidden;transform:scale(0);box-shadow:0 8px 16px -6px rgba(0,0,0,.5)}
.ap-me i svg{width:60px;height:60px;margin-top:10px}
.ap-me span{color:#fff;font-weight:700;opacity:0}
.ap-go .ap-me i{animation:ap-pin .6s var(--ap-spring) .55s forwards}
.ap-go .ap-me span{animation:ap-fin .3s ease .85s forwards}
@keyframes ap-pin{0%{transform:scale(0) rotate(-20deg)}100%{transform:scale(1) rotate(0)}}
@keyframes ap-fin{to{opacity:1}}
.ap-tapme{position:absolute;z-index:1;width:64px;height:64px;border-radius:50%;border:2.5px solid var(--ap-sun);opacity:0;pointer-events:none}
.ap-go .ap-tapme{animation:ap-tap 1.6s ease-out 1.9s 2}
@keyframes ap-tap{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.5);opacity:0}}

.ap-titre{font-family:var(--ap-fd);font-weight:800;font-size:25px;letter-spacing:-.02em;line-height:1.1;margin:0;padding-right:84px;text-wrap:balance;color:var(--ap-ink)}
.ap-hand{font-family:var(--ap-fh);font-weight:700;font-size:21px;color:var(--ap-orange-d);transform:rotate(-2deg);display:inline-block;margin:2px 0 14px}

.ap-perks{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:10px}
.ap-perks li{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--ap-ink2);line-height:1.3}
.ap-perks li b{display:block;color:var(--ap-ink);font:700 15px var(--ap-fd)}
.ap-tile{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;transform:rotate(-4deg);box-shadow:0 5px 10px -6px rgba(70,45,20,.5)}
.ap-perks li:nth-child(2) .ap-tile{transform:rotate(3deg)}
.ap-t-sun{background:var(--ap-sun);color:#7a4a08}.ap-t-green{background:#5FA877;color:#10402a}.ap-t-tang{background:var(--ap-orange);color:#fff}

.ap-cta{width:100%;min-height:56px;border:0;border-radius:999px;background:var(--ap-orange);color:#fff;font:800 17px var(--ap-fd);display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;
  box-shadow:0 5px 0 var(--ap-orange-d);transition:transform .15s,box-shadow .15s,background .25s}
.ap-cta:hover{background:#F4733B}
.ap-cta:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ap-orange-d)}
.ap-cta.ap-done{background:var(--ap-green);box-shadow:0 5px 0 var(--ap-green-d)}
.ap-cta svg{flex:none}
.ap-reas{text-align:center;font-size:13px;color:var(--ap-muted);margin:10px 0 2px}
.ap-later{display:block;width:100%;min-height:44px;border:0;background:none;font:700 15px var(--ap-fb);color:var(--ap-ink2);cursor:pointer;border-radius:14px}
.ap-later:hover{background:var(--ap-cream2);color:var(--ap-ink)}

/* ---------- le bandeau du retour, après le passage par Google Play ---------- */
.ap-retour{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:1150;max-width:480px;margin:0 auto;
  display:flex;align-items:center;gap:10px;padding:10px 10px 10px 12px;border-radius:20px;background:#1F4433;color:#fff;font-family:var(--ap-fb);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.55);transform:translateY(140%);opacity:0;transition:transform .45s var(--ap-spring),opacity .25s}
.ap-retour.ap-on{transform:none;opacity:1}
.ap-retour-ic{flex:none;width:40px;height:40px;border-radius:12px;background:var(--ap-sun);display:grid;place-items:center;overflow:hidden}
.ap-retour-ic svg{width:46px;height:46px;margin-top:8px}
.ap-retour-tx{flex:1;min-width:0;font-size:13.5px;line-height:1.3;color:#DCE9DF}
.ap-retour-tx b{display:block;font:800 15px var(--ap-fd);color:#fff}
.ap-retour-go{flex:none;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--ap-orange);color:#fff;font:800 15px var(--ap-fd);display:flex;align-items:center;gap:6px;cursor:pointer}
.ap-retour-x{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:none;color:#CFE0D4;display:grid;place-items:center;cursor:pointer}

@media (prefers-reduced-motion:reduce){
  .ap-sheet,.ap-pop,.ap-scrim,.ap-retour{transition-duration:.01ms}
  .ap-go .ap-notif,.ap-go .ap-me i,.ap-go .ap-me span{animation-duration:.01ms;animation-delay:0s}
  .ap-go .ap-tapme{animation:none}
}

/* ---------- la version iPhone (03/10/2026) : les trois appuis, à la place des atouts ---------- */
.ap-pas{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:12px}
.ap-pas li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--ap-ink2);line-height:1.4}
.ap-pas li b{color:var(--ap-ink)}
.ap-n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--ap-orange);color:#fff;display:grid;place-items:center;font:800 15px var(--ap-fd);box-shadow:0 3px 0 var(--ap-orange-d)}
.ap-glyphe{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#fff;border:1px solid var(--ap-line2);color:#0A7AFF;vertical-align:middle;margin:0 2px}
.ap-astuce{display:flex;gap:8px;align-items:flex-start;margin:0 0 16px;padding:10px 12px;border-radius:14px;background:var(--ap-cream2);font-size:13.5px;color:var(--ap-ink2);line-height:1.4}
.ap-astuce svg{flex:none;margin-top:2px;color:var(--ap-orange-d)}
.ap-astuce b{color:var(--ap-ink)}
.ap-geste .ap-shelf{display:none}
.ap-geste .ap-titre{margin-top:6px}