.tp-page{max-width:880px}
.tp-demo-note{background:#fff7da;border:1px solid #e0c46a;border-radius:10px;padding:8px 12px;color:#4a3a10}
.tp-progression{height:8px;border-radius:99px;background:var(--color-border,#ddd);overflow:hidden;margin:12px 0 4px}
.tp-progression span{display:block;height:100%;width:0;background:var(--accent,#3f4d8c);transition:width .3s}
.tp-compteur{font-size:.85rem;opacity:.75;margin:0 0 10px}
.tp-etape h2{margin-top:0}
.tp-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.tp-duo{grid-template-columns:1fr}}
.tp-bloc{border:1px solid var(--color-border,#ddd);border-radius:12px;padding:12px 14px;background:var(--color-card,#fff)}
.tp-bloc h3{margin:.2rem 0}
.tp-ico{font-size:2.2rem}
.tp-astuce{background:var(--accent-doux,#eef);border-radius:10px;padding:8px 12px}
.tp-maquette{border:2px dashed var(--color-border,#ccc);border-radius:14px;padding:14px;margin:12px 0;background:var(--color-card,#fff)}
.tp-champ{display:flex;flex-direction:column;gap:2px;margin-bottom:10px;flex:1;min-width:150px}
.tp-champ>span{font-size:.82rem;opacity:.75}
.tp-champ>b,.tp-champ>input{border:1px solid var(--color-border,#ccc);border-radius:8px;padding:7px 10px;font:inherit;font-weight:600;background:var(--color-bg,#fff);color:inherit;min-height:1.4em}
.tp-ligne-champs{display:flex;gap:12px;flex-wrap:wrap}
.tp-bouton-faux{display:inline-block;background:var(--accent,#3f4d8c);color:#fff;border-radius:999px;padding:4px 14px;font-weight:700}
.tp-grand{font-size:1.05rem;padding:.55rem 1.4rem}
.tp-note{font-size:.88rem;opacity:.8}
.tp-menu-faux{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border-radius:12px;background:var(--color-card,#f3f3f3);border:1px solid var(--color-border,#ddd)}
.tp-menu-faux span{padding:4px 10px;border-radius:8px}
.tp-surlignage{background:#ffe9a3;color:#2b2118;font-weight:700;box-shadow:0 0 0 2px #e0a800;animation:tp-pulse 1.4s ease-in-out infinite}
@keyframes tp-pulse{50%{box-shadow:0 0 0 5px #e0a80066}}
.tp-avatars i{font-style:normal;font-size:1.5rem;padding:2px 6px;border-radius:10px}
.tp-avatars i.sel{background:#ffe9a3;color:#2b2118;box-shadow:0 0 0 2px #e0a800}
.tp-resultat{margin-top:12px}
.tp-tuile-enfant{display:flex;align-items:center;gap:12px;border:1px solid var(--color-border,#ccc);border-radius:12px;padding:10px 12px;background:var(--accent-doux,#eef);animation:tp-pop .4s}
@keyframes tp-pop{from{transform:scale(.9);opacity:0}}
.tp-av{font-size:2rem}
.tp-pastille{margin-left:auto;background:#2e6b4f;color:#fff;border-radius:99px;padding:2px 10px;font-size:.78rem;white-space:nowrap}
.tp-grille-plage{overflow-x:auto;font-size:.68rem}
.tp-plage-ligne{display:flex;align-items:center;white-space:nowrap}
.tp-plage-ligne span{width:2.4rem}
.tp-plage-ligne i{display:inline-block;width:.85rem;height:.85rem;margin:1px;border-radius:2px;flex:none}
.tp-plage-ligne i.ok{background:#16a34a}.tp-plage-ligne i.ko{background:#dc2626}
.tp-cases{display:flex;flex-wrap:wrap;gap:6px 18px}
.tp-etiquette{display:inline-block;background:#7a2b2b;color:#fff;border-radius:99px;padding:1px 10px;font-size:.85rem}
.tp-tirelire{border:1px solid var(--color-border,#ccc);border-radius:12px;padding:10px 12px;margin-top:8px}
.tp-table{width:100%;border-collapse:collapse;margin:10px 0}
.tp-table th,.tp-table td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--color-border,#ddd)}
.tp-liste li{margin:6px 0}
.tp-nav{display:flex;justify-content:space-between;gap:10px;margin:14px 0 30px}
.tp-nav [hidden]{display:none!important}