/* Tutoriel d'installation (install.js) : s'appuie sur les variables de styles.css (thèmes clair/sombre, RTL/LTR). */
body.yi-lock{ overflow:hidden; }
.yi-overlay{ position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:24px;
  overflow-y:auto; background:color-mix(in srgb,var(--bg) 62%,transparent); backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2); animation:yi-fade .35s var(--ease) both; }
.yi-sheet{ position:relative; width:min(560px,100%); margin:auto; padding:34px 30px 22px; border-radius:30px; background:var(--glass-strong);
  border:1px solid var(--glass-brd); box-shadow:var(--shadow-lg); color:var(--text); outline:none; animation:yi-rise .5s var(--ease) both; }
.yi-sheet.yi-m-desktop{ width:min(760px,100%); }
.yi-close{ position:absolute; top:14px; inset-inline-end:14px; width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
  color:var(--muted); background:var(--soft); transition:background .2s, color .2s; }
.yi-close:hover{ background:var(--soft-2); color:var(--text); }
.yi-close svg{ width:18px; height:18px; }

.yi-hero{ text-align:center; margin-bottom:20px; }
.yi-appicon{ display:inline-block; width:72px; height:72px; border-radius:20px; margin-bottom:14px; box-shadow:0 18px 34px -16px var(--accent-glow);
  animation:yi-float 5s ease-in-out infinite; }
.yi-appicon img{ width:100%; height:100%; display:block; border-radius:20px; }
.yi-hero h2, .yi-welcome h2{ font-family:var(--serif); font-weight:500; font-size:clamp(1.6rem,4.6vw,2.05rem); line-height:1.2; color:var(--heading); margin:0 0 10px; }
.yi-lead{ color:var(--muted); font-size:1.03rem; line-height:1.65; max-width:46ch; margin:0 auto; }

.yi-perks{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 20px; padding:0; }
.yi-perks li{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:12px 8px; border-radius:16px;
  background:var(--soft); color:var(--soft-text); font-size:.84rem; font-weight:600; line-height:1.35; }
.yi-perks svg{ width:22px; height:22px; color:var(--gold); }
.yi-big{ padding:16px 28px; font-size:1.06rem; }

.yi-steps{ list-style:none; margin:0 0 18px; padding:0; display:grid; gap:10px; }
.yi-steps li{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:18px; background:var(--tile-bg); border:1px solid var(--line);
  line-height:1.5; font-size:.98rem; animation:yi-rise .5s var(--ease) both; }
.yi-steps li:nth-child(2){ animation-delay:.08s; } .yi-steps li:nth-child(3){ animation-delay:.16s; }
.yi-num{ flex:none; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; font-weight:800; font-size:.9rem;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--accent-ink); }
.yi-step-text{ flex:1; }
.yi-step-text b{ color:var(--heading); font-weight:700; }
.yi-step-ic{ flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:var(--soft); color:var(--accent); }
.yi-step-ic svg{ width:22px; height:22px; }
.yi-more{ margin-top:14px; }
.yi-more summary{ cursor:pointer; color:var(--muted); font-weight:600; font-size:.92rem; text-align:center; list-style:none; padding:6px; }
.yi-more summary::-webkit-details-marker{ display:none; }
.yi-more[open] summary{ margin-bottom:10px; }
.yi-kicker{ font-weight:700; color:var(--gold-text); font-size:.92rem; margin:0 0 10px; }
.yi-note{ color:var(--muted); font-size:.9rem; line-height:1.55; text-align:center; margin:14px 0 10px; }
.yi-note b{ color:var(--text); }
.yi-msg{ display:flex; align-items:flex-start; gap:10px; padding:14px 16px; border-radius:16px; background:var(--ok-bg); color:var(--ok-text); font-weight:600; line-height:1.5; }
.yi-msg svg{ width:20px; height:20px; flex:none; margin-top:2px; }

.yi-ios{ display:grid; grid-template-columns:132px 1fr; gap:18px; align-items:center; margin-bottom:16px; }
.yi-ios .yi-steps{ margin:0; }
.yi-phone{ width:100%; height:auto; display:block; filter:drop-shadow(0 18px 26px rgba(40,30,15,.18)); }
.yi-ph-body{ fill:#2b2a27; } .yi-ph-screen{ fill:var(--cream); } .yi-ph-notch{ fill:#2b2a27; }
.yi-ph-app{ fill:var(--forest-2); } .yi-ph-lotus{ fill:none; stroke:#faf6ee; stroke-width:1.6; }
.yi-ph-line{ fill:rgba(63,90,58,.16); } .yi-ph-bar{ fill:#ece5d6; }
.yi-ph-line-s{ stroke:rgba(63,90,58,.28); stroke-width:3; stroke-linecap:round; }
.yi-ph-share{ fill:none; stroke:#2f6fdb; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.yi-ph-pulse{ fill:rgba(47,111,219,.14); stroke:rgba(47,111,219,.5); stroke-width:1.5; transform-origin:66px 189px; animation:yi-pulse 1.8s ease-in-out infinite; }

.yi-copy{ display:flex; align-items:center; gap:10px; padding:8px 8px 8px 16px; border-radius:999px; background:var(--field-bg); border:1.5px solid var(--field-brd); }
[dir="rtl"] .yi-copy{ padding:8px 16px 8px 8px; }
.yi-url{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; color:var(--text); font-size:.95rem; }
.yi-copy-btn{ padding:10px 16px; font-size:.92rem; flex:none; }

.yi-desk{ display:grid; grid-template-columns:1fr 220px; gap:22px; align-items:start; }
.yi-opts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.yi-opt{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:18px; background:var(--tile-bg); border:1px solid var(--line); color:var(--text);
  font-weight:700; font-size:.98rem; text-decoration:none; text-align:start; transition:transform .2s var(--ease), border-color .2s, background .2s; }
.yi-opt:hover{ transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 40%,transparent); }
.yi-opt[disabled]{ opacity:.6; pointer-events:none; }
.yi-opt-ic{ flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:var(--soft); color:var(--accent); }
.yi-opt-ic svg{ width:21px; height:21px; }
.yi-wa .yi-opt-ic{ background:#25d366; color:#fff; }
.yi-opt.yi-done .yi-opt-ic, .yi-copy-btn.yi-done{ background:var(--ok-bg); color:var(--ok-text); }
.yi-mail-msg{ min-height:1.4em; margin:12px 2px 0; display:flex; gap:8px; align-items:flex-start; color:var(--ok-text); font-weight:600; font-size:.93rem; line-height:1.5; }
.yi-mail-msg.err{ color:var(--err-text); }
.yi-mail-msg svg{ width:18px; height:18px; flex:none; margin-top:2px; }
.yi-qr{ margin:0; padding:14px 14px 12px; border-radius:22px; background:#fff; border:1px solid rgba(63,90,58,.14); box-shadow:var(--shadow-sm); text-align:center; }
.yi-qr-code svg{ width:100%; height:auto; display:block; border-radius:10px; }
.yi-qr figcaption{ display:flex; gap:6px; align-items:center; justify-content:center; margin-top:8px; color:#5b5244; font-size:.84rem; font-weight:600; line-height:1.35; }
.yi-qr figcaption svg{ width:16px; height:16px; flex:none; color:#3f5a3a; }
.yi-pc{ display:table; margin:16px auto 0; font-size:.92rem; }
.yi-foot{ text-align:center; margin-top:18px; }
.yi-foot .link{ font-size:.95rem; color:var(--muted); }

.yi-welcome{ text-align:center; padding-top:6px; }
.yi-welcome .btn{ margin-top:10px; }
.yi-breath{ position:relative; width:132px; height:132px; margin:4px auto 18px; display:grid; place-items:center; }
.yi-breath i{ position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle,var(--accent-glow),transparent 68%); animation:yi-breathe 4.8s ease-in-out infinite; }
.yi-breath i + i{ inset:18px; animation-delay:-2.4s; opacity:.7; }
.yi-breath span{ position:relative; width:76px; height:76px; display:grid; place-items:center; border-radius:50%; color:var(--accent-ink);
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 18px 34px -14px var(--accent-glow); }
.yi-breath svg{ width:40px; height:40px; }
.yi-sign{ display:flex; align-items:center; justify-content:center; gap:10px; margin:18px 0 0; color:var(--muted); font-family:var(--serif); font-size:1.02rem; }
.yi-sign img{ width:40px; height:40px; border-radius:50%; object-fit:cover; box-shadow:var(--shadow-sm); }

.yi-banner{ display:flex; align-items:center; gap:12px; margin:0 0 18px; padding:10px 10px 10px 14px; border-radius:20px;
  background:linear-gradient(135deg,rgba(201,168,106,.18),rgba(125,149,96,.12)); border:1px solid var(--line); animation:yi-rise .5s var(--ease) both; }
.yi-banner-ic{ flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:12px; background:var(--soft); color:var(--accent); }
.yi-banner-ic svg{ width:20px; height:20px; }
.yi-banner-text{ flex:1; font-weight:600; font-size:.95rem; line-height:1.45; }
.yi-banner-btn{ padding:9px 16px; font-size:.9rem; flex:none; }
.yi-banner-x{ flex:none; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; color:var(--muted); }
.yi-banner-x svg{ width:16px; height:16px; }
.yi-acc-status{ display:flex; gap:10px; align-items:flex-start; color:var(--muted); line-height:1.55; margin:0 0 14px; }
.yi-acc-status svg{ width:20px; height:20px; flex:none; margin-top:2px; color:var(--gold); }
.yi-acc-status.on{ color:var(--ok-text); font-weight:600; } .yi-acc-status.on svg{ color:var(--ok-text); }

@media (max-width:640px){
  .yi-overlay{ align-items:flex-end; padding:0; }
  .yi-sheet, .yi-sheet.yi-m-desktop{ width:100%; margin:auto 0 0; border-radius:28px 28px 0 0; padding:30px 20px calc(18px + env(safe-area-inset-bottom)); animation-name:yi-up; }
  .yi-desk{ grid-template-columns:1fr; } .yi-qr{ max-width:220px; margin:0 auto; }
  .yi-perks li{ font-size:.78rem; padding:10px 6px; }
  .yi-ios{ grid-template-columns:78px 1fr; gap:10px; }
  .yi-steps li{ padding:10px 12px; gap:10px; font-size:.95rem; }
  .yi-step-ic{ width:34px; height:34px; }
  .yi-banner{ flex-wrap:wrap; } .yi-banner-text{ flex-basis:calc(100% - 100px); }
  .yi-banner-btn{ order:3; margin-inline-start:48px; }
}
.yi-steps li:nth-child(4){ animation-delay:.24s; }

/* Écran plein « installée » / dernière étape iOS (install-done.js). */
.yi-overlay.yi-full{ align-items:stretch; padding:0; background:var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none; }
.yi-overlay.yi-full .yi-sheet{ width:100%; min-height:100%; margin:0; border-radius:0; border:0; box-shadow:none; background:transparent;
  display:flex; flex-direction:column; justify-content:center; padding:calc(56px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom));
  animation:yi-rise .5s var(--ease) both; }
.yd-done{ width:min(460px,100%); margin:0 auto; text-align:center; }
.yd-done h2{ font-family:var(--serif); font-weight:500; font-size:clamp(1.8rem,6vw,2.3rem); line-height:1.15; color:var(--heading); margin:0 0 10px; }
.yd-done .yi-steps{ text-align:start; margin-top:4px; }
.yd-done .yi-big{ margin-top:6px; }
.yd-icon{ position:relative; display:inline-block; width:112px; height:112px; margin:0 auto 18px; border-radius:28px;
  box-shadow:0 24px 44px -18px var(--accent-glow); animation:yd-pop .7s var(--ease) both; }
.yd-icon img{ width:100%; height:100%; display:block; border-radius:28px; }
.yd-badge{ position:absolute; bottom:-8px; inset-inline-end:-8px; width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
  background:var(--ok-text); color:#fff; border:3px solid var(--bg); animation:yd-pop .6s .35s var(--ease) both; }
.yd-badge svg{ width:20px; height:20px; stroke-width:2.6; }
.yd-wait .yd-badge{ display:none; }
.yd-wait .yd-icon{ animation:yi-float 2.4s ease-in-out infinite; }
.yd-how{ font-size:1.05rem; line-height:1.6; margin:0 0 16px; color:var(--text); }
.yd-how b{ color:var(--heading); }

.yd-home{ width:min(260px,82%); margin:20px auto 16px; padding:18px 14px 14px; border-radius:30px; border:6px solid #2b2a27;
  background:linear-gradient(160deg,#e9dfcb,#cfd9c3); box-shadow:0 22px 40px -24px rgba(40,30,15,.45); }
.yd-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px 8px; }
.yd-cell{ position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; }
.yd-cell small{ display:block; width:80%; height:5px; border-radius:3px; background:rgba(43,42,39,.16); }
.yd-tile{ width:100%; aspect-ratio:1; border-radius:24%; background:rgba(255,255,255,.55); }
.yd-cell:nth-child(3n) .yd-tile{ background:rgba(63,90,58,.18); } .yd-cell:nth-child(4n+1) .yd-tile{ background:rgba(201,168,106,.3); }
.yd-me{ z-index:1; }
.yd-me small{ width:auto; height:auto; background:none; font-size:.6rem; font-weight:700; color:#2b2a27; white-space:nowrap; line-height:1.1; }
.yd-app{ position:relative; width:100%; aspect-ratio:1; border-radius:24%; }
.yd-app img{ width:100%; height:100%; display:block; border-radius:24%; position:relative; z-index:1; }
.yd-app i{ position:absolute; inset:-5px; border-radius:30%; border:2.5px solid var(--gold); animation:yd-ring 1.8s ease-out infinite; }
.yd-tap{ position:absolute; top:58%; inset-inline-start:52%; z-index:2; width:30px; height:30px; color:#2b2a27;
  filter:drop-shadow(0 2px 2px rgba(255,255,255,.8)); animation:yd-tap 1.8s ease-in-out infinite; }
.yd-tap svg{ width:100%; height:100%; fill:#fff; }
.yi-banner-rel .yi-banner-ic{ background:var(--ok-bg); color:var(--ok-text); }
@keyframes yd-pop{ from{ opacity:0; transform:scale(.6); } 70%{ transform:scale(1.06); } }
@keyframes yd-ring{ 0%{ opacity:.9; transform:scale(.92); } 100%{ opacity:0; transform:scale(1.25); } }
@keyframes yd-tap{ 0%,100%{ transform:translate(6px,6px); } 45%,60%{ transform:translate(0,0) scale(.92); } }
@media (prefers-reduced-motion:reduce){ .yd-icon, .yd-badge, .yd-app i, .yd-tap, .yi-overlay.yi-full .yi-sheet{ animation:none !important; } }

@keyframes yi-fade{ from{ opacity:0; } }
@keyframes yi-rise{ from{ opacity:0; transform:translateY(14px); } }
@keyframes yi-up{ from{ transform:translateY(100%); } }
@keyframes yi-float{ 50%{ transform:translateY(-4px); } }
@keyframes yi-pulse{ 50%{ transform:scale(1.25); opacity:.55; } }
@keyframes yi-breathe{ 0%,100%{ transform:scale(.82); opacity:.55; } 50%{ transform:scale(1.08); opacity:1; } }
@media (prefers-reduced-motion:reduce){
  .yi-overlay, .yi-sheet, .yi-steps li, .yi-banner, .yi-appicon, .yi-ph-pulse, .yi-breath i{ animation:none !important; }
}