/* Ogrelo · exercice « Prononciation » (prononc.js) : un écran par étape, mots en couleur (vert / orange / rouge), sons d'un mot. */
.pn-tete{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.pn-son{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.9rem;padding:5px 11px;border-radius:999px;background:var(--t-info-bg);color:var(--t-info)}
.pn-accent{display:inline-flex;border-radius:999px;background:var(--t-mute-bg);padding:2px}
.pn-accent button{border:0;background:none;font:inherit;font-size:.82rem;padding:5px 10px;border-radius:999px;color:var(--t-mute)}
.pn-accent button[aria-pressed="true"]{background:var(--sheet);color:var(--navink);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.pn-bulle{background:color-mix(in srgb,var(--ogre) 14%,var(--sheet));border-radius:16px;padding:12px 14px;margin:0 0 16px;line-height:1.4}
.pn-texte{font-family:var(--display);font-size:1.6rem;line-height:1.35;text-align:center;margin:8px 0 18px;overflow-wrap:anywhere}
.pn-texte.phrase,.pn-texte.virelangue,.pn-texte.intonation{font-size:1.3rem}
.pn-fl{vertical-align:-.1em;color:var(--t-info)}.pn-fl.bas{transform:scaleY(-1)}.pn-fl.plat{transform:rotate(45deg)}
.pn-paire{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 18px}
.pn-carte{display:flex;flex-direction:column;align-items:center;gap:4px;border:2px solid var(--t-mute-bg);background:var(--sheet);border-radius:16px;padding:14px 8px;font:inherit;color:var(--navink);min-width:0}
.pn-carte b{font-family:var(--display);font-size:1.35rem;overflow-wrap:anywhere}.pn-carte small{font-size:.75rem;color:var(--t-mute)}
.pn-carte.cible{border-color:var(--t-info);background:var(--t-info-bg)}
.pn-ecoute{display:flex;gap:10px;margin:0 0 14px}.pn-ecoute .btn{flex:1;margin:0;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.pn-astuce{margin:0 0 16px;border-radius:14px;background:var(--t-warn-bg);padding:10px 14px}.pn-astuce summary{cursor:pointer;font-weight:700;color:var(--t-warn)}
.pn-astuce p{margin:8px 0 2px;line-height:1.45}
.pn-atoi{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:1.05rem}
.pn-micro{margin:18px auto 10px}.pn-retour{display:block;margin:8px auto 0}
.pn-msg{font-weight:700;font-size:1.05rem;margin:0 0 12px;line-height:1.4}
.pn-simple{font-size:.85rem;color:var(--t-mute);background:var(--t-mute-bg);border-radius:10px;padding:7px 10px;margin:0 0 12px}
.pn-mots{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:6px 0 12px}
.pn-mot{font:inherit;font-family:var(--display);font-size:1.3rem;border:0;border-radius:12px;padding:6px 10px;border-bottom:3px solid transparent}
.pn-mot.vert{background:var(--t-good-bg);color:var(--t-good)}.pn-mot.orange{background:var(--t-warn-bg);color:var(--t-warn)}.pn-mot.rouge{background:var(--t-crit-bg);color:var(--t-crit)}
.pn-mot.sel{border-bottom-color:currentColor;transform:translateY(-1px)}
.pn-detail{border-radius:16px;padding:12px 14px;margin:0 0 14px;background:var(--sheet);border:2px solid var(--t-mute-bg)}
.pn-detail.rouge{border-color:var(--t-crit-bg)}.pn-detail.orange{border-color:var(--t-warn-bg)}.pn-detail.vert{border-color:var(--t-good-bg)}
.pn-detail>b{font-family:var(--display);font-size:1.2rem}.pn-detail p{margin:10px 0 0;line-height:1.45}
.pn-phs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pn-ph{display:flex;flex-direction:column;align-items:center;min-width:44px;padding:5px 8px;border-radius:10px;font-size:.95rem}
.pn-ph small{font-size:.72rem;opacity:.85}.pn-ph em{font-size:.7rem;font-style:normal}
.pn-ph.vert{background:var(--t-good-bg);color:var(--t-good)}.pn-ph.orange{background:var(--t-warn-bg);color:var(--t-warn)}.pn-ph.rouge{background:var(--t-crit-bg);color:var(--t-crit)}
.pn-int{display:flex;align-items:center;gap:8px;border-radius:12px;padding:8px 12px;margin:0 0 12px}.pn-int.ok{background:var(--t-good-bg)}.pn-int.ko{background:var(--t-warn-bg)}
.pn-progres{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;margin:4px 0 14px;font-size:.9rem}
.pn-progres .ex-barre{grid-column:1/-1;margin:0}.pn-progres .ex-barre i{background:var(--t-good)}
.pn-badge{display:flex;align-items:center;gap:10px;border-radius:14px;padding:10px 14px;margin:0 0 14px;background:var(--t-good-bg);color:var(--t-good)}
.pn-compare{display:flex;gap:10px;margin:4px 0 12px}.pn-compare .btn{flex:1;margin:0;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.an-sons{border-radius:16px;padding:12px 14px;margin:14px 0 4px;background:var(--t-info-bg)}
.an-sons b{display:block;color:var(--t-info)}.an-sons small{display:block;margin:2px 0 8px;color:var(--t-mute)}
.an-sons ul{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px}.an-sons li{background:var(--sheet);border-radius:999px;padding:4px 10px;font-size:.88rem}
.pn-ecoute .btn,.pn-compare .btn,.pn-acts .btn{min-height:0;padding:12px 8px;font-size:.95rem;white-space:nowrap}