/* L'arrivée dans l'appli iPhone et le tunnel « Je récupère mon planning » (popotam-import-ios.js, 09/11/2026), d'après
   Refontes/design_handoff_passer_appli (pa.css, « le filet de secours »). Écrite à la main, classes `ii-`, couleurs
   posées sur .ii. Plein écran, z-index 412 : au-dessus de la création (405), SOUS les fenêtres de l'appli (.fb-overlay
   à 420 : le scanner de QR s'ouvre par-dessus) et sous les messages (500). Chaque écran défile seul (.ii-scr), pour
   que l'ancien et le nouveau puissent glisser l'un à côté de l'autre. */
html.ii-ouvert, html.ii-ouvert body { overflow: hidden; }
.ii {
  --ii-paper: #FFFDF4; --ii-cream: #FFF8EA; --ii-ink: #2A211B; --ii-ink2: #6A5C4C; --ii-mut: #806B50; --ii-line: #EEDFC2; --ii-line2: #E6D3AE;
  --ii-orange: #F0682F; --ii-orange-dd: #B8410F; --ii-orange-bg: #FCE3D8; --ii-green-dd: #2F6147; --ii-green-bg: #E6F3E9;
  --ii-sun-bg: #FFF1D2; --ii-sun-d: #8A5A00; --ii-hl: #FFE27A;
  --ii-fd: "Bricolage Grotesque", system-ui, sans-serif; --ii-fb: "Hanken Grotesk", system-ui, sans-serif; --ii-fh: "Caveat", cursive;
  --ii-spring: cubic-bezier(.3, 1.35, .45, 1); --ii-soft: cubic-bezier(.2, .8, .2, 1);
  position: fixed; inset: 0; z-index: 412; overflow: hidden; background: var(--ii-cream); color: var(--ii-ink);
  font: 400 16px/1.5 var(--ii-fb); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  opacity: 0; transition: opacity .25s ease;
}
.ii.ii-on { opacity: 1; }
.ii *, .ii *::before, .ii *::after { box-sizing: border-box; }
.ii h1, .ii p, .ii ol { margin: 0; }
:where(.ii) button, :where(.ii) input { font: inherit; color: inherit; }
.ii [hidden] { display: none !important; }
.ii button:focus-visible, .ii input:focus-visible { outline: 3px solid var(--ii-orange); outline-offset: 2px; }
.ii h1:focus { outline: none; }
.ii-ico { display: inline-grid; place-items: center; flex: none; }
.ii-ico svg { display: block; }

/* le décor : deux taches douces */
.ii-fond { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ii-fond i { position: absolute; border-radius: 50%; }
.ii-fond i:first-child { right: -120px; top: -110px; width: 320px; height: 320px; background: #FFE9C2; opacity: .75; }
.ii-fond i:last-child { left: -110px; bottom: -90px; width: 260px; height: 260px; background: #E6F0DE; opacity: .8; }

/* un écran, et le passage de l'un à l'autre : 60 px, 450 ms, ressort */
.ii-scr { position: absolute; inset: 0; z-index: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 20px calc(env(safe-area-inset-bottom, 0px) + 22px); }
.ii-scr.ii-in { animation: ii-sin .45s var(--ii-spring) both; }
.ii-scr.ii-inb { animation: ii-sinb .45s var(--ii-spring) both; }
.ii-scr.ii-out { animation: ii-sout .3s var(--ii-soft) both; pointer-events: none; }
.ii-scr.ii-outb { animation: ii-soutb .3s var(--ii-soft) both; pointer-events: none; }
@keyframes ii-sin { from { opacity: 0; transform: translateX(60px); } }
@keyframes ii-sinb { from { opacity: 0; transform: translateX(-60px); } }
@keyframes ii-sout { to { opacity: 0; transform: translateX(-60px); } }
@keyframes ii-soutb { to { opacity: 0; transform: translateX(60px); } }
.ii-corps { position: relative; max-width: 460px; min-height: 100%; margin: 0 auto; display: flex; flex-direction: column; }

/* la tête de chaque écran : la mascotte, un petit mot en Caveat, le titre, une phrase */
.ii-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px 0 6px; margin-left: -6px;
  border: 0; border-radius: 999px; background: none; cursor: pointer; font: 700 15px var(--ii-fb); color: var(--ii-ink2); }
.ii-back:hover { background: rgba(255, 255, 255, .7); }
.ii-sh { display: grid; justify-items: center; text-align: center; gap: 4px; margin: 8px 0 22px; }
.ii-sh .ii-m { width: 84px; }
.ii-m svg { width: 100%; height: auto; display: block; }
.ii-sh em { font: 700 19px/1 var(--ii-fh); color: var(--ii-orange-dd); font-style: normal; rotate: -3deg; }
.ii-sh h1 { font: 800 27px/1.1 var(--ii-fd); letter-spacing: -.02em; max-width: 300px; text-wrap: balance; }
.ii-sh p { font: 500 15px/1.45 var(--ii-fb); color: var(--ii-ink2); max-width: 310px; text-wrap: pretty; }
.ii-sh p b, .ii-steps b, .ii-aide b { color: var(--ii-ink); font-weight: 800; }

/* les grandes cartes de choix */
.ii-chs { display: grid; gap: 10px; }
.ii-ch { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; min-height: 76px; padding: 12px 14px;
  border-radius: 22px; border: 1.5px solid var(--ii-line); background: #fff; cursor: pointer; text-align: left;
  transition: transform .3s var(--ii-spring), border-color .2s, box-shadow .3s; }
.ii-ch:hover { transform: translateY(-2px); border-color: var(--ii-line2); box-shadow: 0 12px 20px -14px rgba(120, 70, 20, .45); }
.ii-ch:active { transform: scale(.98); }
.ii-ti { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--b); color: var(--c); }
.ii-ch b { display: block; font: 800 16.5px/1.2 var(--ii-fd); }
.ii-ch small { font: 500 13.5px/1.35 var(--ii-fb); color: var(--ii-ink2); }
.ii-chev { color: var(--ii-mut); display: grid; }

/* les navigateurs, en grille 2 × 2, avec leur vrai logo */
.ii-br { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ii-br .ii-ch { grid-template-columns: 36px minmax(0, 1fr); min-height: 64px; padding: 10px 14px; }
.ii-lgo { width: 32px; height: 32px; object-fit: contain; display: block; }
.ii-autre { margin-top: 14px; text-align: center; }
.ii-lnk { min-height: 44px; padding: 0 10px; border: 0; background: none; cursor: pointer; font: 700 15px var(--ii-fb); color: var(--ii-ink2);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ii-line2); }
.ii-lnk:hover { color: var(--ii-ink); }
.ii-box { margin-top: 18px; padding: 16px; border-radius: 22px; border: 1.5px dashed var(--ii-line2); background: rgba(255, 255, 255, .55);
  display: grid; gap: 10px; text-align: center; }
.ii-box > b { font: 800 15px var(--ii-fd); }
.ii-box > p { font: 500 14px var(--ii-fb); color: var(--ii-ink2); }
.ii-foot { margin-top: auto; padding-top: 14px; text-align: center; }

/* les boutons : un seul orange par écran */
.ii-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(--ii-orange); color: #fff; font: 800 17.5px/1.15 var(--ii-fd); cursor: pointer;
  box-shadow: 0 0 0 2px var(--ii-ink), 0 5px 0 2px var(--ii-ink); transition: transform .2s var(--ii-spring), box-shadow .2s; }
.ii-btn svg { flex: none; }
.ii-btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--ii-ink), 0 7px 0 2px var(--ii-ink); }
.ii-btn:active { transform: translateY(3px); box-shadow: 0 0 0 2px var(--ii-ink), 0 2px 0 2px var(--ii-ink); }
.ii-btn:disabled { opacity: .7; pointer-events: none; }
.ii-btn.ii-neu { background: #fff; color: var(--ii-ink); font-size: 16px; min-height: 52px; box-shadow: inset 0 0 0 1.5px var(--ii-line2); }
.ii-btn.ii-neu:hover { box-shadow: inset 0 0 0 1.5px var(--ii-ink2), 0 6px 14px -8px rgba(90, 50, 20, .4); }
.ii-btn.ii-neu:active { transform: translateY(1px); }
.ii-btn.ii-ghost { background: none; box-shadow: none; color: var(--ii-mut); font: 700 15px var(--ii-fb); min-height: 44px; }
.ii-btn.ii-ghost:hover { color: var(--ii-ink); transform: none; box-shadow: none; }
.ii-acts { display: grid; gap: 10px; }
.ii-corps > .ii-btn { margin-top: 4px; }

/* le copier-coller : les étapes, « ou colle-le ici », le champ */
.ii-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.ii-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; padding: 12px 14px; border-radius: 18px;
  background: #fff; border: 1.5px solid var(--ii-line); font: 500 15px/1.35 var(--ii-fb); }
.ii-steps li i { width: 30px; height: 30px; border-radius: 50%; background: var(--ii-orange-bg); color: var(--ii-orange-dd); display: grid; place-items: center;
  font: 800 14px var(--ii-fd); font-style: normal; }
.ii-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; font: 600 13px var(--ii-fb); color: var(--ii-mut); }
.ii-or::before, .ii-or::after { content: ""; flex: 1; height: 1.5px; background: var(--ii-line); }
.ii-form { display: grid; }
.ii-fld { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--ii-line2);
  background: #fff; margin-bottom: 10px; color: var(--ii-mut); }
.ii-fld input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: var(--ii-ink); font: 600 16px var(--ii-fb); }
.ii-fld input:focus-visible { outline: none; }
.ii-fld:focus-within { border-color: var(--ii-ink); box-shadow: 0 0 0 4px var(--ii-hl); }
.ii-fld.ii-bad { border-color: #C0392B; animation: ii-shk .45s; }
@keyframes ii-shk { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.ii-err { margin: -4px 0 10px 16px; font: 700 13.5px/1.4 var(--ii-fb); color: #B0392B; }

/* les notes : jaune pour prévenir, verte quand c'est parti (jamais de bordure de côté) */
.ii-note { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px; border-radius: 16px; background: var(--ii-sun-bg);
  font: 600 14px/1.4 var(--ii-fb); color: #5A4410; }
.ii-note.ii-ok { margin: 0 0 12px; background: var(--ii-green-bg); color: #24493A; }
.ii-note.ii-ok .ii-ico { color: var(--ii-green-dd); margin-top: 1px; }
.ii-aide { margin: 0 auto 14px; max-width: 34ch; text-align: center; font: 500 14px/1.5 var(--ii-fb); color: var(--ii-ink2); }

/* le viseur, avec la ligne orange qui balaie */
.ii-qr { position: relative; width: 230px; height: 230px; margin: 0 auto 18px; border-radius: 30px; background: #2A211B; overflow: hidden; flex: none; }
.ii-qr::before { content: ""; position: absolute; inset: 26px; border-radius: 18px; border: 3px solid rgba(255, 255, 255, .85);
  clip-path: polygon(0 0, 28% 0, 28% 6%, 6% 6%, 6% 28%, 0 28%, 0 72%, 6% 72%, 6% 94%, 28% 94%, 28% 100%, 72% 100%, 72% 94%, 94% 94%, 94% 72%, 100% 72%, 100% 28%, 94% 28%, 94% 6%, 72% 6%, 72% 0, 100% 0, 100% 100%, 0 100%); }
.ii-qr i { position: absolute; left: 30px; right: 30px; top: 34px; height: 3px; background: var(--ii-orange); box-shadow: 0 0 14px var(--ii-orange); animation: ii-scan 2.2s ease-in-out infinite; }
@keyframes ii-scan { 0%, 100% { top: 34px; } 50% { top: 192px; } }

/* « Le voilà ! » */
.ii-done { flex: 1; display: grid; place-content: center; justify-items: center; text-align: center; gap: 8px; padding-bottom: 40px; }
.ii-done .ii-m { width: 110px; }
.ii-done em { font: 700 20px/1 var(--ii-fh); color: var(--ii-orange-dd); font-style: normal; rotate: -3deg; }
.ii-done h1 { font: 800 30px/1.1 var(--ii-fd); }
.ii-done p { font: 500 15.5px var(--ii-fb); color: var(--ii-ink2); }
.ii-spin { width: 28px; height: 28px; margin-top: 14px; border-radius: 50%; border: 3px solid var(--ii-line2); border-top-color: var(--ii-orange); animation: ii-tourne .8s linear infinite; }
@keyframes ii-tourne { to { transform: rotate(360deg); } }

/* le côté navigateur (popotam.fr/app?vers-appli) : « Encore un appui », un seul bouton */
.ii-va { background: var(--ii-paper); }
.ii-pg { flex: 1; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 30px 10px; text-align: center; }
.ii-pg .ii-m { width: 96px; }
.ii-pg h1 { font: 800 26px/1.1 var(--ii-fd); text-wrap: balance; }
.ii-pg > p { font: 500 15px/1.45 var(--ii-fb); color: var(--ii-ink2); max-width: 290px; }
.ii-pg .ii-btn { width: 100%; max-width: 360px; }
.ii-pg .ii-aide { margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .ii, .ii *, .ii *::before, .ii *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}