.tp-transforme, .tp-transforme-demo { --tm-taille-main: 53px; }
.tp-transforme {
    --tm-encre: #293b43;
    --tm-principal: #23598a;
    --tm-vert: #245d42;
    --tm-contour: #d4d9d3;
    box-sizing: border-box;
    container: tp-transforme / inline-size;
    width: calc(100% - 16px);
    max-width: 1040px;
    margin: 10px auto;
    padding: clamp(12px, 2vw, 22px);
    border: 1px solid var(--tm-contour);
    border-radius: 16px;
    background: #fffdf7;
    color: var(--tm-encre);
    text-align: left;
    font: 1rem/1.4 Arial, sans-serif;
}
.tp-transforme *, .tp-transforme *::before, .tp-transforme *::after { box-sizing: border-box; }
.tp-transforme [hidden] { display: none !important; }
.tp-transforme h2, .tp-transforme h3, .tp-transforme p { margin: 0; color: inherit; text-align: left; }
.tp-transforme h2 { font: bold clamp(1.3rem, 3vw, 1.75rem)/1.15 Arial, sans-serif; }
.tp-transforme .tp-transforme-entete, .tp-transforme .tp-transforme-outils,
.tp-transforme .tp-transforme-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tp-transforme .tp-transforme-entete {
    justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--tm-contour);
}
.tp-transforme button, .tp-transforme [data-tm=choisir] {
    font: 600 .95rem/1.2 Arial, sans-serif; text-transform: none;
    border: 1px solid #9baeb2; border-radius: 9px; padding: 9px 13px;
    background: #fff; color: var(--tm-encre); min-height: 44px; cursor: pointer;
}
.tp-transforme button:focus-visible, .tp-transforme a:focus-visible, .tp-transforme [tabindex="-1"]:focus-visible {
    outline: 3px solid #174b80; outline-offset: 2px;
}
.tp-transforme .tp-transforme-outils button {
    display: inline-flex; align-items: center; gap: 6px;
    background: #f3f4ee; border-color: #c5cec5; font-size: .875rem;
}
.tp-transforme .tp-transforme-picto-son { width: 21px; height: 21px; flex: none; }
.tp-transforme [data-tm=sons][aria-pressed=true] .tp-transforme-barre,
.tp-transforme [data-tm=sons][aria-pressed=false] .tp-transforme-ondes { display: none; }
.tp-transforme .tp-transforme-plateau {
    display: grid; grid-template-areas: "consigne" "indices" "proposition";
    grid-template-columns: minmax(0, 1fr); gap: 11px; margin-top: 12px;
}
.tp-transforme .tp-transforme-instructions { grid-area: consigne; align-self: end; }
.tp-transforme .tp-transforme-etape { margin: 0 0 4px; font-weight: bold; color: #365d60; }
.tp-transforme .tp-transforme-progression { margin-bottom: 4px; }
.tp-transforme .tp-transforme-progression .tp-transforme-etape { margin: 0; }
.tp-transforme .tp-transforme-consigne { font-size: 1rem; line-height: 1.4; max-width: 60ch; }
.tp-transforme .tp-transforme-indices {
    grid-area: indices; display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; justify-items: center; gap: 8px; padding: 8px;
    border: 1px solid #d0dcd7; border-radius: 12px; background: #fff;
}
.tp-transforme .tp-transforme-image {
    display: grid; place-items: center; width: 100%; min-width: 0; height: clamp(88px, 26vw, 132px);
}
.tp-transforme .tp-transforme-image img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.tp-transforme .tp-transforme-ecoute {
    display: flex; flex-direction: column; align-items: stretch; gap: 6px;
}
.tp-transforme button[data-tm=ecouter] { color: #18545c; background: #def0ed; border-color: #9abeb7; }
.tp-transforme button[data-tm=indice], .tp-transforme button[data-tm=geste] {
    color: #514477; background: #ebe7f6; border-color: #b6aacd;
}
.tp-transforme [data-tm=aide]:empty, .tp-transforme [data-tm=incident]:empty { display: none; }
.tp-transforme [data-tm=aide], .tp-transforme [data-tm=incident] { color: #44575b; font-size: .92rem; }
.tp-transforme [data-tm=incident] { grid-column: 1 / -1; }
.tp-transforme .tp-transforme-proposition { position: relative; grid-area: proposition; align-self: start; min-width: 0; }
.tp-transforme .tp-transforme-rangee { display: flex; position: relative; justify-content: center; gap: clamp(3px, .8vw, 8px); margin: 0; }
.tp-transforme .tp-transforme-rangee button {
    touch-action: none; user-select: none; flex: 0 1 58px; min-width: 0;
    height: clamp(46px, 8vw, 60px); min-height: 44px; padding: 0;
    border: 2px solid #94a5a9; border-bottom-width: 4px; border-radius: 9px;
    color: #273e49; background: white; font: bold clamp(1.3rem, 4vw, 1.8rem)/1 Arial, sans-serif;
}
.tp-transforme .tp-transforme-rangee button[aria-pressed=true],
.tp-transforme .tp-transforme-rangee .tp-transforme-exemple-lettre,
.tp-transforme .tp-transforme-rangee .tp-construction-proto-glisse { background: #ffed9b; border-color: #866118; }
.tp-transforme .tp-transforme-rangee .tp-construction-proto-cible { outline: 3px dashed #6c5219; outline-offset: -4px; }
.tp-transforme .tp-transforme-rangee[data-statut=correct] button {
    color: #16492f; background: #d6efd7; border-color: #669474;
}
.tp-transforme .tp-transforme-rangee button:disabled { opacity: 1; cursor: default; }
.tp-transforme .tp-transforme-principal {
    background: var(--tm-principal); border-color: #194976; color: #fff; padding-inline: 19px;
}
.tp-transforme button:disabled { cursor: default; opacity: .7; }
.tp-transforme [data-tm=retour] { margin: 0; }
.tp-transforme .tp-transforme-precision-lecteur {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}
.tp-transforme [data-tm=bilan]:not([hidden]) {
    display: grid;
    flex: 1 0 auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    justify-items: center;
    gap: clamp(16px, 2.5cqi, 24px);
    padding-block: clamp(18px, 3.5cqi, 32px) clamp(8px, 1.6cqi, 16px);
}
.tp-transforme [data-tm=bilan] [data-tm=fin] {
    color: var(--tm-vert);
    font: bold clamp(1.45rem, 4.4cqi, 2.4rem)/1.15 Arial, sans-serif;
    text-align: center;
    text-wrap: balance;
}
.tp-transforme [data-tm=bilan] [data-tm=couples] {
    display: grid;
    grid-auto-rows: 1fr;
    align-items: center;
    gap: clamp(8px, 1.3cqi, 14px);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style-position: inside;
}
.tp-transforme [data-tm=bilan] li {
    font: bold clamp(1.125rem, 4.3cqi, 2.2rem)/1.2 Consolas, "Courier New", monospace;
    text-align: center;
    white-space: nowrap;
    word-spacing: clamp(2px, 2.6cqi, 24px);
}
.tp-transforme [data-tm=bilan] li::marker { content: '✓ '; color: var(--tm-vert); }
.tp-transforme [data-tm=bilan] [data-tm=rejouer] {
    min-width: clamp(8rem, 24cqi, 12rem);
    min-height: 48px;
    font-size: clamp(1rem, 2.5cqi, 1.2rem);
}
.tp-transforme .tp-transforme-fin-actions {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 10px;
}
.tp-transforme [data-tm=bilan] [data-tm=choisir] {
    display: inline-flex; justify-content: center; align-items: center;
    min-height: 48px; margin: 0; border-color: #74958a; color: #244b3c;
    font-size: clamp(1rem, 2.5cqi, 1.2rem); text-decoration: none;
}
@container tp-transforme (max-width: 470px) {
    .tp-transforme .tp-transforme-fin-actions { flex-direction: column; align-items: stretch; }
}
@container tp-transforme (min-width: 590px) {
    .tp-transforme .tp-transforme-plateau {
        grid-template-areas: "indices consigne" "indices proposition";
        grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
        column-gap: clamp(20px, 3vw, 42px); row-gap: 16px;
    }
    .tp-transforme .tp-transforme-indices { grid-template-columns: minmax(0, 1fr); align-content: center; padding: 12px; }
    .tp-transforme .tp-transforme-image { width: 100%; height: clamp(122px, 15vw, 165px); }
    .tp-transforme .tp-transforme-ecoute { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }
    .tp-transforme [data-tm=aide] { flex-basis: 100%; text-align: center; }
}
@container tp-transforme (max-width: 360px) {
    .tp-transforme .tp-transforme-entete, .tp-transforme .tp-transforme-outils { gap: 5px; }
    .tp-transforme .tp-transforme-outils button { padding: 6px 8px; min-height: 40px; }
    .tp-transforme .tp-transforme-outils [data-tm=sons] { min-width: 44px; min-height: 44px; justify-content: center; }
    .tp-transforme [data-tm=etat-son] { display: none; }
    .tp-transforme .tp-transforme-ecoute { max-width: 140px; }
    .tp-transforme .tp-transforme-ecoute button { padding: 7px 9px; }
}
@media (orientation: landscape) and (max-height: 480px) {
    .tp-transforme { margin-block: 4px; padding-block: 8px; }
    .tp-transforme .tp-transforme-plateau { margin-top: 7px; row-gap: 8px; }
    .tp-transforme .tp-transforme-image { height: 96px; }
    .tp-transforme .tp-transforme-indices { padding: 6px; }
    .tp-transforme .tp-transforme-rangee button { height: 46px; font-size: 1.5rem; }
}
@media (hover: hover) {
    .tp-transforme button:not(:disabled):hover, .tp-transforme [data-tm=choisir]:hover { filter: brightness(.96); }
}

/* La pastille chevauche le bord supérieur. La lettre et les tuiles voisines restent dégagées. */
.tp-transforme .tp-transforme-rangee button {
    position: relative;
    padding-top: 8px;
    -webkit-tap-highlight-color: transparent;
}
.tp-transforme .tp-transforme-rangee .tp-retour-validation-invalide {
    animation: tp-transforme-contour-erreur var(--tm-cycle-erreur) ease-in-out 2;
}
/* La bande existe même main éteinte. Rangée, main et commandes ont le même axe. */
.tp-transforme .tp-transforme-bande-main {
    display: grid; place-items: center; height: calc(var(--tm-taille-main) + 20px);
    pointer-events: none;
}
.tp-transforme .tp-transforme-actions { flex-direction: column; align-items: center; }
.tp-transforme .tp-transforme-main-erreur {
    animation: tp-transforme-balayer var(--tm-cycle-erreur) ease-in-out 2;
}
@keyframes tp-transforme-balayer {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(11px); }
    75% { transform: translateX(-11px); }
}
@keyframes tp-transforme-contour-erreur {
    0%, 100% { border-color: #94a5a9; }
    40%, 60% { border-color: #a43128; }
}
@media (prefers-reduced-motion: reduce) {
    .tp-transforme .tp-transforme-main-erreur { animation: none; }
    .tp-transforme .tp-transforme-rangee .tp-retour-validation-invalide {
        animation: none;
        border-color: #a43128;
    }
}
.tp-transforme [data-tm-repere=juste]::after, .tp-transforme-demo [data-tm-repere=juste]::after {
    content: '✓';
    position: absolute;
    top: -5px; right: 0;
    width: 15px; height: 15px;
    display: grid; place-items: center;
    background: #285e38; color: white; border-radius: 50%;
    font: bold 11px/1 Arial, sans-serif;
    pointer-events: none;
}
@container tp-transforme (max-width: 360px) {
    .tp-transforme [data-tm-repere=juste]::after { width: 12px; height: 12px; font-size: 9px; }
}
@media (min-height: 690px) {
    @container tp-transforme (min-width: 590px) {
        .tp-transforme .tp-transforme-plateau { margin-top: 18px; row-gap: 20px; }
        .tp-transforme .tp-transforme-indices { padding-block: 16px; gap: 12px; }
    }
}

/* Même scène dans la page d'accueil et au sein du module. */
.tp-transforme-demo {
    box-sizing: border-box;
    container: tm-exemple / inline-size;
    max-width: 600px; margin: 0 auto; padding: 12px;
    border: 1px solid #b9cfc4; border-radius: 12px;
    background: #f6faf5; color: #293b43;
    font: 1rem/1.4 Arial, sans-serif; text-align: left;
}
.tp-transforme-demo *, .tp-transforme-demo *::before, .tp-transforme-demo *::after { box-sizing: border-box; }
.tp-transforme-demo [hidden], [data-tm-demo-repli][hidden] { display: none !important; }
.tp-transforme-demo-plan {
    display: grid; grid-template-columns: minmax(48px, .55fr) minmax(0, 1fr);
    align-items: center; column-gap: 10px;
}
.tp-transforme-demo-dessin { display: block; width: 100%; max-height: 116px; object-fit: contain; border-radius: 8px; }
.tp-transforme-demo-gestes { position: relative; min-width: 0; padding: 6px 0 22px; }
.tp-transforme-demo-lettres { display: flex; gap: 5px; position: relative; }
.tp-transforme-demo-tuile {
    position: relative; display: grid; place-items: center;
    flex: 0 1 48px; min-width: 0; height: 48px; padding-top: 4px;
    border: 2px solid #94a5a9; border-bottom-width: 4px; border-radius: 8px;
    background: white; color: #273e49; font: bold 25px/1 Arial, sans-serif;
}
.tp-transforme-demo-selection { background: #ffed9b; border-color: #866118; }
.tp-transforme-demo-tuile[data-tm-repere=juste] { background: #d6efd7; color: #16492f; border-color: #669474; }
.tp-transforme-demo-verification {
    display: inline-block; margin-top: 12px; padding: 9px 12px; border-radius: 8px;
    background: #23598a; color: white; font: bold .94rem/1.2 Arial, sans-serif;
}
.tp-transforme-main-erreur, .tp-transforme-demo-main {
    width: var(--tm-taille-main); height: var(--tm-taille-main); pointer-events: none; user-select: none;
}
.tp-transforme-demo-main {
    position: absolute; left: 0; top: 0; z-index: 2; transition: transform .6s ease;
}
.tp-transforme-main-erreur svg, .tp-transforme-demo-main svg { width: 100%; height: 100%; display: block; transform-origin: 43.75% 8%; filter: drop-shadow(0 2px 1px #0003); }
.tp-transforme-demo-appui::before {
    content: ''; position: absolute; left: 43.75%; top: 8%;
    width: 30px; height: 30px; transform: translate(-50%, -50%);
    border: 3px solid #f5c34c; border-radius: 50%; background: #ffdb783d;
    box-shadow: 0 0 0 1.5px #805319;
    animation: tp-transforme-halo .44s ease-out;
}
.tp-transforme-demo-appui svg { animation: tp-transforme-appui .36s ease-out; }
@keyframes tp-transforme-appui { 50% { transform: scale(.86); } }
@keyframes tp-transforme-halo {
    from { transform: translate(-50%,-50%) scale(.5); }
    to { transform: translate(-50%,-50%) scale(1); }
}
.tp-transforme-demo .tp-transforme-demo-legende {
    margin: 4px 0 9px; color: #293b43; font: 600 1rem/1.4 Arial, sans-serif; text-align: left;
}
.tp-transforme-demo[data-phase=reussite] .tp-transforme-demo-legende { color: #245d42; }
.tp-transforme-demo-commandes { display: flex; gap: 6px; flex-wrap: wrap; }
.tp-transforme-demo-commandes button {
    display: inline-flex; align-items: center; padding: 8px 11px; min-height: 42px; cursor: pointer;
    border: 1px solid #a5b6ad; border-radius: 8px; background: white; color: #293b43;
    font: 600 .93rem/1.2 Arial, sans-serif;
}
.tp-transforme-demo-commandes .tp-transforme-demo-voix { color: #18545c; background: #def0ed; border-color: #9abeb7; }
.tp-transforme-demo-commandes button:focus-visible { outline: 3px solid #174b80; outline-offset: 2px; }
.tp-transforme-demo .tp-transforme-demo-incident:empty { display: none; }
.tp-transforme [data-tm=exemple] { margin-top: 12px; }
.tp-transforme [data-tm=quitter-demo] { display: block; margin: 8px auto 0; }
@container tm-exemple (max-width: 250px) {
    .tp-transforme-demo-plan { grid-template-columns: 1fr; }
    .tp-transforme-demo-dessin { max-height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
    .tp-transforme-demo-main { transition: none; }
    .tp-transforme-demo-appui svg, .tp-transforme-demo-appui::before { animation: none; }
}