.tp-choix-apercu{font-family:Arial,sans-serif;color:#20464c;container-type:inline-size}
.tp-choix-apercu *{box-sizing:border-box}
.tp-choix-apercu [hidden]{display:none!important}
.tp-choix-apercu-question{display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px 0 0}
.tp-choix-apercu-illustration{--tp-ecoute-espace:16px;position:relative;max-width:100%}
.tp-choix-apercu-image{width:230px;height:200px;max-width:calc(100cqi - 96px - 2 * var(--tp-ecoute-espace));position:relative;border:1px solid #d1ddca;border-radius:14px;background:#fff;padding:8px}
.tp-choix-apercu-image>img{display:block;width:100%;height:100%;object-fit:contain}
.tp-choix-apercu-ecouter{position:absolute;left:calc(100% + var(--tp-ecoute-espace));top:calc(50% - 24px);width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;border:2px solid #809b77;border-radius:50%;background:#eef6e8;color:#245f48;cursor:pointer;padding:8px}
.tp-choix-apercu-panne{position:absolute;inset:0;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-radius:14px;font-size:16px;text-align:center}
.tp-choix-apercu-phrase{margin:4px 0 0;display:flex;align-items:center;justify-content:center;gap:.3em;max-width:100%;font:bold 36px/1.25 Arial,sans-serif;background:#fff2c7;border:2px solid #cf951f;border-radius:14px;padding:6px 12px}
.tp-choix-apercu-prefixe{display:inline-block;flex-shrink:0;text-align:center;min-height:1.25em;border:2px solid transparent;border-radius:6px;padding:0 4px}
.tp-choix-apercu-phrase--selection .tp-choix-apercu-prefixe{background:#dbeafe;border-color:#2d66ac;color:#245795}
.tp-choix-apercu-phrase--corrigee{border-color:#4d8b59;background:#e9f5e5;color:#245b37}
.tp-choix-apercu-choix{display:flex;justify-content:center;gap:26px;max-width:100%}
.tp-choix-apercu-reponse{position:relative;min-width:140px;min-height:66px;padding:8px 16px;border:2px solid #7c9ec9;border-bottom-width:5px;border-radius:12px;font:bold 32px/1.15 Arial,sans-serif;background:#e4efff;color:#245795;cursor:pointer}
.tp-choix-apercu-reponse[aria-pressed=true]{background:#2b60a2;color:#fff;outline:3px solid #adc4e0}
.tp-choix-apercu-reponse.tp-choix-apercu-correcte{border-color:#327546;background:#e2f2dd;color:#245b37;outline:none}
.tp-choix-apercu-reponse.tp-choix-apercu-incorrecte{border-color:#b64640;background:#fbe6df;color:#8e302b;outline:none}
.tp-choix-apercu-signe{position:absolute;right:4px;top:1px;font-size:22px}
.tp-choix-apercu-verifier,.tp-choix-apercu-action{font:bold 18px/1.2 Arial,sans-serif;min-height:48px;border:2px solid #245f48;border-radius:9px;padding:10px 22px;background:#245f48;color:#fff;cursor:pointer}
.tp-choix-apercu-verifier{position:relative;min-width:178px}
.tp-choix-apercu-verifier:disabled{background:#e0e4d9;border-color:#bbc2b4;color:#637267;cursor:default}
.tp-choix-apercu-retour{margin:0;min-height:23px;font:bold 17px/1.3 Arial,sans-serif;text-align:center}
.tp-choix-apercu button:focus-visible{outline:3px solid #d19119;outline-offset:3px}
.tp-choix-apercu-reponse:disabled{cursor:default}
@container(max-width:600px){.tp-choix-apercu-question{gap:16px;padding-top:26px}.tp-choix-apercu-image{width:195px;height:190px}.tp-choix-apercu-illustration{--tp-ecoute-espace:8px}.tp-choix-apercu-phrase{font-size:28px;padding:7px 8px;gap:.2em}.tp-choix-apercu-choix{gap:18px;width:100%}.tp-choix-apercu-reponse{min-width:0;width:40%;max-width:145px;font-size:30px;min-height:64px}.tp-choix-apercu-verifier{min-height:50px}.tp-choix-apercu-retour{font-size:16px}}
@container(max-width:300px){.tp-choix-apercu-phrase{font-size:25px}.tp-choix-apercu-image{width:175px;height:180px}.tp-choix-apercu-illustration{--tp-ecoute-espace:4px}}
@media(hover:hover) and (pointer:fine){.tp-choix-apercu button:not(:disabled){transition:transform .15s,box-shadow .15s}.tp-choix-apercu button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 3px 7px #234c3826}}
@media(prefers-reduced-motion:reduce){.tp-choix-apercu button:not(:disabled){transition:none}.tp-choix-apercu button:not(:disabled):hover{transform:none}}

.tp-choix-apercu-demo{position:relative;text-align:center;font-family:Arial,sans-serif}.tp-choix-apercu-demo .tp-choix-apercu-question{gap:6px;padding-top:0}
.tp-choix-apercu-demo .tp-choix-apercu-image{width:145px;height:124px}.tp-choix-apercu-demo .tp-choix-apercu-ecouter{display:none}
.tp-choix-apercu-demo .tp-choix-apercu-phrase{font-size:26px;padding:3px 6px;margin-top:0}
.tp-choix-apercu-demo .tp-choix-apercu-reponse{min-height:45px;font-size:24px;min-width:90px;max-width:115px;padding:3px 12px}
.tp-choix-apercu-demo .tp-choix-apercu-choix{gap:24px}.tp-choix-apercu-demo .tp-choix-apercu-verifier{min-height:44px;padding:8px 12px;min-width:150px;font-size:16px}
.tp-choix-apercu-demo-scene{position:relative}
.tp-choix-apercu-main-zone{height:28px;flex:0 0 28px;width:100%;pointer-events:none}
.tp-choix-apercu-main{display:block;width:64px!important;height:64px!important;max-width:none!important;position:absolute;top:5px;left:calc(100% - 34px);pointer-events:none;z-index:2}
.tp-choix-apercu-appui{position:absolute;top:3px;left:calc(100% - 13px);width:14px;height:14px;border:2px solid #b9770b;border-radius:50%;pointer-events:none;z-index:3}
.tp-choix-apercu-demo:where([data-etape="1"],[data-etape="3"]) .tp-choix-apercu-main{animation:tp-choix-apercu-arrivee .2s ease-out}
@keyframes tp-choix-apercu-arrivee{from{opacity:.25}to{opacity:1}}
.tp-choix-apercu-demo .tp-choix-apercu-retour{display:none}.tp-choix-apercu-demo-legende{min-height:22px;margin:3px 0 8px;font:15px/1.3 Arial,sans-serif}
.tp-choix-apercu-demo-revoir{min-height:44px;padding:8px 16px;border:2px solid #779b69;border-radius:9px;background:#eef6e8;color:#20464c;font:bold 17px/1.2 Arial,sans-serif;cursor:pointer}

@media(prefers-reduced-motion:reduce){.tp-choix-apercu-demo .tp-choix-apercu-main{animation:none}}

.tp-choix-apercu-demo .tp-choix-apercu-choix{width:100%;max-width:260px;gap:32px}.tp-choix-apercu-demo .tp-choix-apercu-reponse{min-width:0;width:calc((100% - 32px) / 2)}.tp-choix-apercu-demo[data-etape="2"] .tp-choix-apercu-verifier,.tp-choix-apercu-demo[data-etape="3"] .tp-choix-apercu-verifier{background:#245f48;border-color:#245f48;color:#fff}
