/* Boîte de confirmation, toast, barre du bas du téléphone, zones tactiles. */
/* ---------- boîte de confirmation ---------- */
.dialogue{border:1px solid transparent;border-radius:var(--r-lg);background:var(--fond);color:var(--text);box-shadow:var(--relief),0 24px 60px color-mix(in oklch,var(--sombre) 70%,transparent);padding:22px;width:min(380px,calc(100vw - 32px))}
.dialogue::backdrop{background:color-mix(in oklch,var(--sombre) 55%,transparent);backdrop-filter:blur(3px)}
.dialogue p{margin:0 0 20px;line-height:1.5;white-space:pre-line;font-size:15px}
.dlg-btns{display:flex;gap:12px;justify-content:flex-end}
.dlg-btns .btn{min-width:110px}
.btn.danger{background:var(--danger);color:var(--on-accent)}
.btn.danger:hover{background:color-mix(in oklch,var(--danger) 88%,white)}
/* ---------- toast ---------- */
.toast{position:fixed;bottom:calc(var(--barre) + var(--pouce-h, 130px) + 18px);left:50%;transform:translateX(-50%) translateY(12px);background:var(--fond);color:var(--text);box-shadow:var(--relief),0 14px 30px color-mix(in oklch,var(--sombre) 55%,transparent);padding:11px 18px;border-radius:var(--r-md);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:60;font-size:14px;font-weight:500;max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- barre du bas (téléphone) ---------- */
.barre-mobile{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--fond);box-shadow:0 -6px 16px color-mix(in oklch,var(--sombre) 70%,transparent);padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
.barre-mobile button{background:transparent;border:1px solid transparent;border-radius:var(--r-md);display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;color:var(--text-3);font-size:11.5px;font-weight:500}
.barre-mobile .ico{width:22px;height:22px}
.barre-mobile b{color:var(--accent-texte);font-weight:600}
.barre-mobile button[aria-pressed="true"]{color:var(--text);box-shadow:var(--creux-sm)}
.barre-mobile button[aria-pressed="true"] .ico{color:var(--accent-texte)}

/* Pendant une saisie, le clavier prend la place : on range la zone du pouce et la barre. */
body:has(input:focus,select:focus) .pouce,body:has(input:focus,select:focus) .barre-mobile{display:none}
/* Zones tactiles d'au moins 38 px */
.tchip,.mini,.vchip,.seg button,.fchip .rm,.pchip button{min-height:38px}
.fchip .rm,.pchip button,.seg button{min-width:38px}
.aide-clavier{display:none}

/* ---------- visite guidée ---------- */
.visite{position:fixed;inset:0;z-index:100}
.visite[hidden]{display:none}
/* Le voile est l'ombre du trou : tout s'assombrit sauf l'élément présenté. */
.visite-trou{position:fixed;border-radius:var(--r-md);box-shadow:0 0 0 200vmax color-mix(in oklch,var(--sombre) 72%,transparent),0 0 0 2px var(--accent);
  transition:left .3s,top .3s,width .3s,height .3s,opacity .2s;pointer-events:none}
.visite-bulle{position:fixed;width:min(360px,calc(100vw - 16px));background:var(--fond);color:var(--text);border-radius:var(--r-lg);padding:18px 18px 14px;
  box-shadow:var(--relief),0 20px 50px color-mix(in oklch,var(--sombre) 70%,transparent);transition:left .3s,top .3s;border:1px solid transparent;max-height:calc(100dvh - 16px);overflow-y:auto}
.visite-etape{margin:0 0 4px;font-size:12.5px;color:var(--text-2);font-variant-numeric:tabular-nums}
.visite-bulle h2{margin:0 0 8px;font-size:17px;color:var(--text);text-transform:none;letter-spacing:0;display:block;padding:0;background:none}
.visite-bulle p{margin:0;font-size:14px;line-height:1.5;color:var(--text-2)}
.visite-demo{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;min-height:64px;margin:14px 0 12px;padding:10px;border-radius:var(--r-md);box-shadow:var(--creux-sm)}
.visite-demo:empty{display:none}
.visite-btns{display:flex;gap:10px;align-items:center}
.visite-btns [hidden]{display:none}
.visite-btns #visitePasser{margin-right:auto;margin-left:0}
.visite-btns .btn{min-width:110px}

/* Exemples animés : noms qui défilent, bouton pressé, étoile qui s'allume, rang qui se remplit… */
.demo-noms{position:relative;display:inline-grid;min-width:150px;height:38px;font-family:var(--inscription,var(--sans));font-weight:700;font-size:24px;color:var(--text)}
.demo-noms>span{grid-area:1/1;text-align:center;opacity:0;animation:demo-defile calc(var(--nb) * 1.6s) infinite;animation-delay:calc(var(--i) * 1.6s)}
@keyframes demo-defile{0%{opacity:0;transform:translateY(10px)}6%,22%{opacity:1;transform:none}28%,100%{opacity:0;transform:translateY(-10px)}}
.demo-bouton{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--r-md);background:var(--accent);color:var(--on-accent);font-weight:600;font-size:14px;box-shadow:var(--relief-sm);animation:demo-appui 1.6s infinite}
.demo-bouton .ico{width:16px;height:16px}
@keyframes demo-appui{0%,70%,100%{transform:none;box-shadow:var(--relief-sm)}78%{transform:scale(.95);box-shadow:var(--creux-sm)}}
.demo-epingle{animation:demo-lueur 2s infinite}
@keyframes demo-lueur{50%{box-shadow:var(--creux-sm),0 0 0 2px var(--accent-soft)}}
.demo-actions{display:flex;gap:10px}
.demo-actions .btn-rond{width:44px;height:40px;display:inline-flex;align-items:center;justify-content:center}
.demo-etoile .ico{animation:demo-etoile 2s infinite}
@keyframes demo-etoile{0%,40%{fill:none;color:var(--text-2)}50%,100%{fill:var(--accent);color:var(--accent);transform:scale(1.15)}}
.demo-case{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:32px;border-radius:var(--r-sm);font-family:var(--mono);font-size:13px;box-shadow:var(--relief-sm);color:var(--text-2);
  animation:demo-choix 4s infinite;animation-delay:calc(var(--i) * 1s)}
@keyframes demo-choix{0%,24%{box-shadow:var(--creux-sm);color:var(--accent-texte);font-weight:700}25%,100%{box-shadow:var(--relief-sm)}}
.demo-themes .tchip{animation:demo-coche 4s infinite;animation-delay:calc(var(--i) * .8s);pointer-events:none}
@keyframes demo-coche{0%,40%{box-shadow:var(--relief-sm)}50%,90%{box-shadow:var(--creux-sm)}}
.demo-tiers{display:flex;flex-direction:column;gap:6px;width:100%;max-width:260px}
.demo-rang{display:flex;align-items:center;gap:10px;min-height:40px;padding:4px 8px;border-radius:var(--r-sm);box-shadow:var(--creux-sm);font-weight:700;
  color:oklch(var(--cat-l) var(--cat-c) var(--h,250))}
.demo-rang.pool{color:var(--text-3)}
.demo-rang .vchip{min-height:30px;padding:3px 10px}
.demo-monte{animation:demo-monte 3s infinite}
@keyframes demo-monte{0%,20%{transform:translateY(92px);opacity:.5}55%,100%{transform:none;opacity:1}}
.demo-tableau{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));gap:4px;width:100%;font-family:var(--mono);font-size:11.5px}
.demo-tableau>span{display:flex;align-items:center;justify-content:center;min-height:26px;padding:2px 4px;border-radius:6px;overflow:hidden;white-space:nowrap;transition:background .25s,color .25s,box-shadow .25s}
.dt-tete{color:var(--text-3);font-weight:600}
.dt-ligne{justify-content:flex-end}
.dt-case{color:var(--text-3);box-shadow:var(--relief-sm)}
.demo-tableau .dt-croix{background:var(--accent-soft);color:var(--text)}
.demo-tableau .dt-tete.dt-croix{color:var(--accent-texte)}
.demo-tableau .dt-choisi{background:var(--accent);color:var(--on-accent);box-shadow:var(--creux-sm);font-weight:700}
.dt-nom{display:block;width:100%;text-align:center;margin-top:8px;font-family:var(--inscription,var(--sans));font-weight:700;font-size:20px;color:var(--text);min-height:28px}
.demo-palettes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
.demo-palettes .pal-choix{padding:8px 2px 6px;font-size:11.5px}
/* Mouvements réduits : pas d'animation, on montre le premier exemple, fixe. */
@media (prefers-reduced-motion:reduce){
  .demo-noms>span:first-child{opacity:1}
  /* État final, parlant sans mouvement : étoile pleine, nom déjà classé, une case choisie. */
  .demo-etoile .ico{fill:var(--accent);color:var(--accent)}
  .demo-case:nth-child(3),.demo-themes .tchip:first-child{box-shadow:var(--creux-sm)!important;color:var(--accent-texte)}
}