/* =====================================================================
   EduCours Primaire — activités interactives
   Fichier : modules/educours/primary/assets/css/ecp_interactif.css
   ===================================================================== */
.ecp-app {
  --ecpi-navy: #273b78;
  --ecpi-blue: #3b6fe0;
  --ecpi-sky: #eef3ff;
  --ecpi-yellow: #ffd166;
  --ecpi-green: #1f9d63;
  --ecpi-green-bg: #e7f8ef;
  --ecpi-red: #d64545;
  --ecpi-red-bg: #fdecec;
  --ecpi-line: #e5eaf2;
  --ecpi-muted: #68758c;
}

/* ---------- Barre de lecture ---------- */
.ecpi-progress { position: fixed; left: 0; top: 0; width: 100%; height: 5px; z-index: 9999; background: transparent; pointer-events: none; }
.ecpi-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffb703, #fb8500, #e63946); border-radius: 0 4px 4px 0; transition: width .12s linear; }

/* ---------- Apparition des parties ---------- */
.ecpi-js .ecp-lesson section.ecpi-reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.ecpi-js .ecp-lesson section.ecpi-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Titres de partie + écoute ---------- */
.ecp-lesson section h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.ecpi-listen { margin-left: auto; border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 800; padding: 7px 13px; border-radius: 999px; background: #fff; color: var(--ecpi-navy); box-shadow: 0 2px 0 #d9e1f2, 0 4px 12px #27387814; transition: transform .15s; }
.ecpi-listen:hover { transform: translateY(-1px); }
.ecp-box .ecpi-listen { background: #ffffffcc; }

/* ---------- Je me teste ---------- */
.ecpi-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.ecpi-masked { filter: blur(7px); user-select: none; transition: filter .3s; }
.ecpi-hint { color: var(--ecpi-muted); font-size: 14px; margin: 6px 0 0; }

/* ---------- Méthode cochable ---------- */
.ecpi-check { list-style: none; margin: 0; padding: 0; counter-reset: st; display: grid; gap: 8px; }
.ecpi-check li { counter-increment: st; display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 14px; background: #ffffffb3; transition: background .2s; }
.ecpi-check li::before { content: counter(st); flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; background: #ddd3ff; color: #4a2fb3; font-size: 14px; }
.ecpi-check-box { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px; border: 2px solid #a99be0; background: #fff; cursor: pointer; order: 3; margin-left: auto; position: relative; }
.ecpi-check li.is-done { background: #e9fbef; }
.ecpi-check li.is-done span { text-decoration: line-through; text-decoration-color: #1f9d6380; }
.ecpi-check li.is-done .ecpi-check-box { background: var(--ecpi-green); border-color: var(--ecpi-green); }
.ecpi-check li.is-done .ecpi-check-box::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 900; }
.ecpi-check-msg { font-weight: 800; margin: 10px 0 0; min-height: 1em; }

/* ---------- Cartes d'activité ---------- */
.ecpi-zone { display: grid; gap: 22px; margin: 28px 0; }
.ecpi-card { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff, #fbfcff); border: 2px solid var(--ecpi-line); border-radius: 26px; padding: 22px; box-shadow: 0 10px 28px #2538580f; }
.ecpi-head { display: flex; align-items: center; gap: 12px; }
.ecpi-head h3 { margin: 0; font-size: 22px; color: var(--ecpi-navy); }
.ecpi-ico { width: 46px; height: 46px; display: grid; place-items: center; font-size: 26px; border-radius: 15px; background: #fff3d1; flex: 0 0 auto; }
.ecpi-consigne { margin: 10px 0 0; color: var(--ecpi-muted); font-weight: 600; }
.ecpi-body { margin-top: 16px; }
.ecpi-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; }
.ecpi-btn { border: 0; cursor: pointer; font: inherit; font-weight: 900; font-size: 16px; padding: 11px 18px; border-radius: 14px; background: var(--ecpi-navy); color: #fff; box-shadow: 0 3px 0 #18265266; transition: transform .12s, box-shadow .12s; }
.ecpi-btn:hover { transform: translateY(-1px); }
.ecpi-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #18265266; }
.ecpi-btn.ecpi-ghost { background: var(--ecpi-sky); color: var(--ecpi-navy); box-shadow: 0 3px 0 #cfd9f5; }
.ecpi-btn.ecpi-small { font-size: 14px; padding: 8px 14px; }
.ecpi-btn:focus-visible, .ecpi-chip:focus-visible, .ecpi-choice:focus-visible, .ecpi-step:focus-visible, .ecpi-bin:focus-visible, .ecpi-listen:focus-visible { outline: 3px solid #ffb703; outline-offset: 2px; }
.ecpi-feedback { font-weight: 800; min-height: 1.4em; margin: 10px 0 0; }
.ecpi-eq { font-size: 20px; font-weight: 900; color: var(--ecpi-navy); margin: 12px 0; }
.ecpi-q { font-size: 19px; font-weight: 800; margin: 14px 0 6px; }
.ecpi-step-detail { margin: 12px 0 0; padding: 12px 16px; border-radius: 14px; background: var(--ecpi-sky); min-height: 1.4em; line-height: 1.6; }
.ecpi-tag { display: inline-grid; place-items: center; min-width: 44px; padding: 2px 10px; border-radius: 12px; color: #fff; }
.ecpi-tag.a { background: #e63946; } .ecpi-tag.b { background: #2a9d8f; }
.ecpi-input { width: 120px; font: inherit; font-size: 18px; font-weight: 800; padding: 9px 10px; border-radius: 12px; border: 2px solid var(--ecpi-line); text-align: center; }
.ecpi-svg { width: 100%; max-width: 680px; height: auto; display: block; margin: 8px auto; }

/* Stepper */
.ecpi-stepper { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 2px solid var(--ecpi-line); border-radius: 14px; padding: 4px 6px; }
.ecpi-stepper button { width: 34px; height: 34px; border: 0; border-radius: 10px; background: var(--ecpi-sky); color: var(--ecpi-navy); font-size: 20px; font-weight: 900; cursor: pointer; }
.ecpi-stepper-val { min-width: 34px; text-align: center; font-weight: 900; font-size: 18px; }
.ecpi-stepper-lbl { font-weight: 800; color: var(--ecpi-muted); font-size: 14px; padding: 0 4px; }

/* Animations communes */
@keyframes ecpiShake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
.ecpi-shake { animation: ecpiShake .45s; border-color: var(--ecpi-red) !important; }
@keyframes ecpiPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ecpi-pop { animation: ecpiPop .35s cubic-bezier(.2, 1.4, .5, 1) both; }
.ecpi-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ecpi-confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: ecpiFall 1.6s ease-in forwards; }
@keyframes ecpiFall { to { transform: translate(var(--dx), 520px) rotate(var(--r)); opacity: 0; } }

/* ---------- Étapes ---------- */
.ecpi-steps.is-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ecpi-steps.is-cycle { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin: 6px auto; }
.ecpi-ring { position: absolute; inset: 14%; border: 4px dashed #c9d6f5; border-radius: 50%; animation: ecpiSpin 40s linear infinite; }
@keyframes ecpiSpin { to { transform: rotate(360deg); } }
.ecpi-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 96px; max-width: 130px; padding: 10px 8px 8px; border-radius: 18px; border: 2px solid var(--ecpi-line); background: #fff; cursor: pointer; font: inherit; transition: transform .25s, border-color .25s, background .25s, box-shadow .25s; }
.ecpi-steps.is-cycle .ecpi-step { position: absolute; transform: translate(-50%, -50%); }
.ecpi-step-emo { font-size: 30px; line-height: 1.1; }
.ecpi-step-lbl { font-weight: 800; font-size: 14px; text-align: center; line-height: 1.2; }
.ecpi-step-num { position: absolute; top: -9px; left: -9px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 900; background: var(--ecpi-navy); color: #fff; }
.ecpi-step.is-past { background: #f3f7ff; }
.ecpi-step.is-on { border-color: #ffb703; background: #fff8e1; box-shadow: 0 0 0 6px #ffb70333; }
.ecpi-steps.is-line .ecpi-step.is-on { transform: translateY(-4px) scale(1.06); }
.ecpi-steps.is-cycle .ecpi-step.is-on { transform: translate(-50%, -50%) scale(1.1); }
.ecpi-arrow { font-size: 22px; color: #9fb1dd; }

/* ---------- Tri / ordre ---------- */
.ecpi-pool { display: flex; flex-wrap: wrap; gap: 10px; min-height: 48px; padding: 12px; border-radius: 18px; background: #f5f7fc; border: 2px dashed #d7def0; }
.ecpi-chip { border: 2px solid #cfd9f5; background: #fff; border-radius: 14px; padding: 9px 14px; font: inherit; font-weight: 800; cursor: pointer; transition: transform .15s, border-color .15s, background .15s; }
.ecpi-chip:hover { transform: translateY(-2px); }
.ecpi-chip.is-sel { border-color: #ffb703; background: #fff8e1; transform: scale(1.06); }
.ecpi-chip.is-ok { border-color: var(--ecpi-green); background: var(--ecpi-green-bg); cursor: default; animation: ecpiPop .3s both; }
.ecpi-bins { display: grid; gap: 12px; margin-top: 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ecpi-bin { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-height: 120px; padding: 12px; border-radius: 18px; border: 3px solid #cfd9f5; background: #fff; cursor: pointer; font: inherit; text-align: left; transition: border-color .2s, background .2s; }
.ecpi-bin:hover { border-color: var(--ecpi-blue); background: #f8faff; }
.ecpi-bin-title { font-weight: 900; color: var(--ecpi-navy); font-size: 16px; }
.ecpi-bin-items { display: flex; flex-wrap: wrap; gap: 6px; }
.ecpi-bin-items .ecpi-chip { font-size: 14px; padding: 6px 10px; }
.ecpi-order-answer { margin: 0 0 12px; padding-left: 0; list-style: none; counter-reset: o; display: grid; gap: 8px; }
.ecpi-order-answer li { counter-increment: o; display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--ecpi-green-bg); border: 2px solid #b6e7cc; font-weight: 800; }
.ecpi-order-answer li::before { content: counter(o); width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ecpi-green); color: #fff; font-size: 13px; }

/* ---------- Cartes à retourner ---------- */
.ecpi-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.ecpi-flip { border: 0; padding: 0; background: none; cursor: pointer; perspective: 800px; height: 120px; font: inherit; }
.ecpi-flip-in { position: relative; display: block; width: 100%; height: 100%; transition: transform .5s; transform-style: preserve-3d; }
.ecpi-flip.is-flipped .ecpi-flip-in { transform: rotateY(180deg); }
.ecpi-flip-front, .ecpi-flip-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; border-radius: 18px; backface-visibility: hidden; font-weight: 900; font-size: 17px; text-align: center; }
.ecpi-flip-front { background: #fff; border: 2px solid #cfd9f5; color: var(--ecpi-navy); }
.ecpi-flip-front b { font-size: 34px; }
.ecpi-flip-back { background: var(--ecpi-navy); color: #fff; transform: rotateY(180deg); }

/* ---------- Compter ---------- */
.ecpi-count-zone { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px; border-radius: 18px; background: #f5f7fc; }
.ecpi-obj { position: relative; width: 52px; height: 52px; border: 0; border-radius: 14px; background: #fff; font-size: 30px; cursor: pointer; box-shadow: 0 2px 0 #dfe6f5; }
.ecpi-obj.is-counted { background: #fff3d1; }
.ecpi-obj-n { position: absolute; right: -6px; top: -8px; min-width: 22px; height: 22px; border-radius: 11px; background: var(--ecpi-navy); color: #fff; font-size: 12px; font-weight: 900; display: grid; place-items: center; padding: 0 4px; }

/* ---------- Numération ---------- */
.ecpi-blocks { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; min-height: 60px; padding: 12px; border-radius: 16px; background: #f5f7fc; }
.ecpi-b1000 { width: 74px; height: 74px; border-radius: 8px; display: grid; place-items: center; font-weight: 900; color: #fff; background: linear-gradient(135deg, #7b2cbf, #9d4edd); box-shadow: 5px -5px 0 #5a189a; }
.ecpi-b100 { width: 60px; height: 60px; border-radius: 4px; background-color: #ffb703; background-image: linear-gradient(#fff6 1px, transparent 1px), linear-gradient(90deg, #fff6 1px, transparent 1px); background-size: 6px 6px; }
.ecpi-b10 { width: 9px; height: 60px; border-radius: 3px; background-color: #219ebc; background-image: linear-gradient(#fff8 1px, transparent 1px); background-size: 9px 6px; }
.ecpi-b1 { width: 9px; height: 9px; border-radius: 2px; background: #e63946; }
.ecpi-pv { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0; }
.ecpi-pv-col { display: flex; flex-direction: column; align-items: center; min-width: 54px; border-radius: 12px; overflow: hidden; border: 2px solid var(--ecpi-line); }
.ecpi-pv-col.alt { border-color: #f1d79c; }
.ecpi-pv-h { width: 100%; text-align: center; font-size: 11px; font-weight: 900; padding: 4px; background: var(--ecpi-sky); color: var(--ecpi-navy); }
.ecpi-pv-col.alt .ecpi-pv-h { background: #fff3d1; }
.ecpi-pv-d { font-size: 28px; font-weight: 900; padding: 4px 8px; }
.ecpi-pv-col.r2 .ecpi-pv-d { color: #b07800; } .ecpi-pv-col.r1 .ecpi-pv-d { color: #157a96; } .ecpi-pv-col.r0 .ecpi-pv-d { color: #c1272d; }
.ecpi-deco { font-weight: 800; color: var(--ecpi-navy); }
.ecpi-words { font-style: italic; color: #445; }

/* ---------- Cadre de 10 ---------- */
.ecpi-frame10 { display: grid; grid-template-columns: repeat(5, 58px); gap: 6px; padding: 10px; border-radius: 16px; background: var(--ecpi-navy); width: max-content; }
.ecpi-f10 { width: 58px; height: 58px; border: 0; border-radius: 10px; background: #fff; cursor: pointer; position: relative; }
.ecpi-f10.is-on::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a8a, #e63946); animation: ecpiPop .25s both; }

/* ---------- Droite numérique ---------- */
.ecpi-axis { stroke: var(--ecpi-navy); stroke-width: 3; }
.ecpi-tick { stroke: var(--ecpi-navy); stroke-width: 2; }
.ecpi-tick-l { font: 700 13px system-ui, sans-serif; text-anchor: middle; fill: #445; }
.ecpi-arc { fill: none; stroke: #2a9d8f; stroke-width: 3; stroke-dasharray: 4 3; }
.ecpi-arc-n { font: 800 12px system-ui, sans-serif; text-anchor: middle; fill: #2a9d8f; }
.ecpi-frog { font-size: 26px; text-anchor: middle; transition: x .4s ease; }

/* ---------- Horloge ---------- */
.ecpi-clock { width: 220px; height: 220px; display: block; margin: 8px auto; }
.ecpi-clock-face { fill: #fff; stroke: var(--ecpi-navy); stroke-width: 6; }
.ecpi-clock-m { stroke: #b8c3dd; stroke-width: 1.5; }
.ecpi-clock-h { stroke: var(--ecpi-navy); stroke-width: 3; }
.ecpi-clock-n { font: 900 18px system-ui, sans-serif; text-anchor: middle; fill: var(--ecpi-navy); }
.ecpi-hand-h { stroke: #e63946; stroke-width: 7; stroke-linecap: round; transition: transform .35s ease; }
.ecpi-hand-m { stroke: #219ebc; stroke-width: 4; stroke-linecap: round; transition: transform .35s ease; }
.ecpi-clock-c { fill: var(--ecpi-navy); }

/* ---------- Fractions ---------- */
.ecpi-frac-svg { max-width: 260px; }
.ecpi-part { fill: #fff; stroke: var(--ecpi-navy); stroke-width: 2.5; transition: fill .3s; }
.ecpi-part.on { fill: #ffb703; }
.ecpi-g100 { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; width: min(100%, 300px); aspect-ratio: 1; padding: 4px; background: var(--ecpi-navy); border-radius: 8px; }
.ecpi-g100 span { background: #fff; border-radius: 2px; transition: background .2s; }
.ecpi-g100 span.is-on { background: #2a9d8f; }

/* ---------- Multiplication / partage ---------- */
.ecpi-mult { display: grid; gap: 6px; padding: 12px; border-radius: 16px; background: #f5f7fc; width: max-content; max-width: 100%; }
.ecpi-dot { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #8ecae6, #219ebc); animation: ecpiPop .3s both; }
.ecpi-pile { display: flex; flex-wrap: wrap; gap: 2px; font-size: 22px; min-height: 30px; }
.ecpi-plates { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin-top: 10px; }
.ecpi-plate { min-height: 90px; border-radius: 50% / 40%; background: #fff; border: 3px solid #cfd9f5; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 2px; padding: 12px; font-size: 20px; }
.ecpi-plate-who { width: 100%; text-align: center; font-size: 22px; }

/* ---------- Opérations posées ---------- */
.ecpi-op { display: grid; gap: 2px; font: 900 26px/1.3 ui-monospace, "Courier New", monospace; width: max-content; padding: 14px 18px; border-radius: 16px; background: #fffef6; border: 2px solid #f0e3b4; background-image: linear-gradient(#f3ebc8 1px, transparent 1px); background-size: 100% 1.3em; }
.ecpi-op-c { position: relative; text-align: center; min-height: 1.3em; }
.ecpi-op-c.sign { color: var(--ecpi-navy); }
.ecpi-op-c.carries { min-height: .8em; font-size: 16px; }
.ecpi-op-c.res { border-top: 3px solid var(--ecpi-navy); color: #c1272d; }
.ecpi-op-c.res.sign { color: var(--ecpi-navy); }
.ecpi-op-c.line { border-bottom: 3px solid var(--ecpi-navy); }
.ecpi-op-c.part { color: #157a96; }
.ecpi-op-c.comma::after { content: ","; position: absolute; right: -.25em; color: var(--ecpi-navy); }
.ecpi-op-c.carries.comma::after, .ecpi-op-c.sign.comma::after { content: ""; }
.ecpi-carry { position: absolute; top: -.5em; left: 0; font-size: 14px; color: #e63946; animation: ecpiPop .3s both; }

/* ---------- Formes ---------- */
.ecpi-shape { width: 220px; height: 220px; display: block; margin: 6px auto; }
.ecpi-shape g { transition: transform .5s ease; transform-origin: 100px 100px; }
.ecpi-shape-f { fill: #e8f0ff; stroke: var(--ecpi-navy); stroke-width: 3; }
.ecpi-shape-side { stroke: #e63946; stroke-width: 7; stroke-linecap: round; animation: ecpiPop .3s both; }
.ecpi-shape-v { fill: #ffb703; stroke: #fff; stroke-width: 2; }

/* ---------- Solides ---------- */
.ecpi-solid-stage { display: grid; place-items: center; min-height: 220px; }
.ecpi-scene { width: 200px; height: 200px; perspective: 700px; display: grid; place-items: center; }
.ecpi-box3d { position: relative; transform-style: preserve-3d; animation: ecpiTurn 9s linear infinite; }
@keyframes ecpiTurn { from { transform: rotateX(-22deg) rotateY(0); } to { transform: rotateX(-22deg) rotateY(360deg); } }
.ecpi-face { position: absolute; border: 2px solid var(--ecpi-navy); background: #8ecae6cc; }
.ecpi-face.top, .ecpi-face.bottom { background: #ffd166cc; }
.ecpi-face.left, .ecpi-face.right { background: #219ebccc; }
.ecpi-solid-svg { width: 200px; height: 200px; }
.ecpi-sf { fill: #8ecae6; stroke: var(--ecpi-navy); stroke-width: 2.5; }
.ecpi-sf.side { fill: #219ebc; } .ecpi-sf.back { fill: #cfe8f3; }
.ecpi-hidden { stroke: var(--ecpi-navy); stroke-width: 1.5; stroke-dasharray: 5 4; }
@media (prefers-reduced-motion: reduce) { .ecpi-box3d, .ecpi-ring { animation: none; transform: rotateX(-22deg) rotateY(35deg); } }

/* ---------- Symétrie ---------- */
.ecpi-sym { display: grid; gap: 2px; width: min(100%, 420px); padding: 4px; background: #cfd9f5; border-radius: 10px; }
.ecpi-sym-c { aspect-ratio: 1; border: 0; background: #fff; border-radius: 3px; cursor: pointer; padding: 0; }
.ecpi-sym-c.axis-l { box-shadow: inset -3px 0 0 #e63946; }
.ecpi-sym-c.axis-r { box-shadow: inset 3px 0 0 #e63946; }
.ecpi-sym-c.is-model { background: var(--ecpi-navy); cursor: default; }
.ecpi-sym-c.is-user { background: #ffb703; }
.ecpi-sym-c.is-good { background: var(--ecpi-green); }
.ecpi-sym-c.is-bad { background: var(--ecpi-red); }
.ecpi-sym-c.is-miss { background: repeating-linear-gradient(45deg, #fff, #fff 3px, #ffb703 3px, #ffb703 6px); }

/* ---------- Circuit ---------- */
.ecpi-circuit { max-width: 480px; }
.ecpi-wire { stroke: #333; stroke-width: 3; fill: none; stroke-linecap: round; }
.ecpi-wire.thick { stroke-width: 5; }
.ecpi-switch { transition: all .25s; }
.ecpi-node { fill: #333; }
.ecpi-sym-t { font: 900 18px system-ui, sans-serif; fill: #333; }
.ecpi-cap { font: 700 12px system-ui, sans-serif; fill: var(--ecpi-muted); }
.ecpi-lamp { cursor: pointer; }
.ecpi-lamp .ecpi-glow { fill: transparent; transition: fill .3s; }
.ecpi-lamp .ecpi-bulb { fill: #fff; stroke: #333; stroke-width: 3; transition: fill .3s; }
.ecpi-lamp.on .ecpi-glow { fill: #ffd16688; }
.ecpi-lamp.on .ecpi-bulb { fill: #ffd166; }
.ecpi-lamp.off { opacity: .35; }
.ecpi-gap { fill: #fff8e1; stroke: #ffb703; stroke-width: 2; stroke-dasharray: 4 3; }
.ecpi-gap-t { font-size: 20px; text-anchor: middle; }

/* ---------- États de l'eau ---------- */
.ecpi-range { flex: 1 1 200px; accent-color: #e63946; }
.ecpi-water { display: flex; align-items: flex-end; justify-content: center; gap: 30px; padding: 12px; min-height: 190px; border-radius: 18px; background: linear-gradient(#eef6ff, #fff); }
.ecpi-thermo { position: relative; width: 22px; height: 170px; border-radius: 11px; background: #fff; border: 3px solid var(--ecpi-navy); display: flex; align-items: flex-end; overflow: hidden; }
.ecpi-thermo span { display: block; width: 100%; background: linear-gradient(#e63946, #ff8a8a); transition: height .2s; }
.ecpi-pot { position: relative; width: 150px; height: 120px; border: 4px solid var(--ecpi-navy); border-top: 0; border-radius: 0 0 26px 26px; background: #fff; overflow: visible; display: flex; align-items: flex-end; justify-content: center; }
.ecpi-ice { font-size: 60px; margin-bottom: 6px; }
.ecpi-liquid { position: absolute; left: 0; right: 0; bottom: 0; height: 70%; background: linear-gradient(#8ecae6, #219ebc); border-radius: 0 0 22px 22px; }
.ecpi-water.is-gaz .ecpi-liquid { height: 35%; }
.ecpi-bubble { position: absolute; bottom: 6px; width: 10px; height: 10px; border-radius: 50%; background: #ffffffcc; animation: ecpiBubble 1.2s ease-in infinite; }
@keyframes ecpiBubble { to { transform: translateY(-70px); opacity: 0; } }
.ecpi-vapor { position: absolute; bottom: 40%; width: 18px; height: 18px; border-radius: 50%; background: #dfe8f5; animation: ecpiVapor 1.8s ease-out infinite; }
@keyframes ecpiVapor { from { transform: translateY(0) scale(.6); opacity: .9; } to { transform: translateY(-120px) scale(1.8); opacity: 0; } }

/* ---------- Volume / périmètre ---------- */
.ecpi-c-top { fill: #ffd166; stroke: #8a6a00; stroke-width: 1; }
.ecpi-c-left { fill: #219ebc; stroke: #0d5368; stroke-width: 1; }
.ecpi-c-right { fill: #8ecae6; stroke: #0d5368; stroke-width: 1; }
.ecpi-gridline { stroke: #e3e9f6; stroke-width: 1; }
.ecpi-rect { fill: #e8f0ff88; stroke: var(--ecpi-navy); stroke-width: 3; }
.ecpi-trail { fill: none; stroke: #e63946; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ecpi-ant { font-size: 20px; }

/* ---------- Frise ---------- */
.ecpi-frise-wrap { overflow-x: auto; padding: 6px 2px 10px; }
.ecpi-frise { position: relative; height: 190px; }
.ecpi-frise-line { position: absolute; left: 1%; right: 1%; top: 95px; height: 6px; border-radius: 3px; background: var(--ecpi-navy); }
.ecpi-frise-line::after { content: ""; position: absolute; right: -10px; top: -7px; border: 10px solid transparent; border-left: 14px solid var(--ecpi-navy); }
.ecpi-period { position: absolute; top: 106px; height: 28px; border-radius: 8px; font-size: 12px; font-weight: 900; color: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; padding: 0 4px; }
.ecpi-period.c0 { background: #7b2cbf; } .ecpi-period.c1 { background: #2a9d8f; } .ecpi-period.c2 { background: #e76f51; } .ecpi-period.c3 { background: #219ebc; } .ecpi-period.c4 { background: #b07800; }
.ecpi-ev { position: absolute; top: 20px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; cursor: pointer; font: inherit; }
.ecpi-ev.down { top: 84px; flex-direction: column-reverse; }
.ecpi-frise.is-prop .ecpi-ev.down { top: 140px; }
.ecpi-ev-dot { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 3px solid var(--ecpi-navy); font-size: 20px; transition: transform .2s, background .2s; }
.ecpi-ev-y { font-weight: 900; font-size: 13px; color: var(--ecpi-navy); background: #fff; padding: 2px 6px; border-radius: 8px; white-space: nowrap; }
.ecpi-ev.is-on .ecpi-ev-dot { background: #ffd166; transform: scale(1.18); }
.ecpi-frise:not(.is-prop) .ecpi-ev:not(.down) { top: 12px; }
.ecpi-frise:not(.is-prop) .ecpi-ev.down { top: 108px; }
.ecpi-vol { max-width: 340px; max-height: 300px; }

/* ---------- Syllabes ---------- */
.ecpi-word { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 18px; border-radius: 18px; background: #f5f7fc; }
.ecpi-word-emo { font-size: 54px; }
.ecpi-word-txt { display: flex; gap: 6px; font-size: 38px; font-weight: 900; }
.ecpi-syl { padding: 2px 10px; border-radius: 12px; border-bottom: 5px solid #cfd9f5; transition: background .2s, transform .2s; }
.ecpi-syl:nth-child(odd) { color: #c1272d; } .ecpi-syl:nth-child(even) { color: #157a96; }
.ecpi-syl.is-on { background: #fff3d1; transform: translateY(-6px) scale(1.12); border-bottom-color: #ffb703; }

/* ---------- Conjugaison ---------- */
.ecpi-conj { display: grid; gap: 6px; max-width: 460px; }
.ecpi-conj-head { font-weight: 900; color: var(--ecpi-navy); font-size: 18px; margin-bottom: 4px; }
.ecpi-conj-row { display: grid; grid-template-columns: 110px auto 1fr; align-items: center; gap: 2px; padding: 8px 12px; border-radius: 12px; background: #f5f7fc; font-size: 19px; font-weight: 700; }
.ecpi-pron { color: var(--ecpi-muted); }
.ecpi-rad { text-align: right; }
.ecpi-end { color: #e63946; font-weight: 900; }
.ecpi-select { font: inherit; font-size: 17px; font-weight: 800; padding: 4px 6px; border-radius: 10px; border: 2px solid var(--ecpi-line); background: #fff; max-width: 140px; }
.ecpi-select.is-good { border-color: var(--ecpi-green); background: var(--ecpi-green-bg); }
.ecpi-select.is-bad { border-color: var(--ecpi-red); background: var(--ecpi-red-bg); }

/* ---------- Quiz ---------- */
.ecpi-quiz { background: linear-gradient(180deg, #f3f0ff, #fff); border-color: #ddd3ff; }
.ecpi-quiz .ecpi-ico { background: #ece6ff; }
.ecpi-qnum { margin: 0; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: #6c55c9; }
.ecpi-choices { display: grid; gap: 10px; margin-top: 8px; }
.ecpi-choice { text-align: left; border: 2px solid #ddd3ff; background: #fff; border-radius: 16px; padding: 13px 16px; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; transition: transform .12s, border-color .12s; }
.ecpi-choice:hover { transform: translateX(3px); border-color: #a99be0; }
.ecpi-choice.is-good { border-color: var(--ecpi-green); background: var(--ecpi-green-bg); }
.ecpi-choice.is-bad { border-color: var(--ecpi-red); background: var(--ecpi-red-bg); }
.ecpi-score { font-size: 40px; letter-spacing: 4px; margin: 4px 0; }

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
  .ecpi-card { padding: 16px; border-radius: 22px; }
  .ecpi-head h3 { font-size: 19px; }
  .ecpi-step { min-width: 74px; max-width: 96px; padding: 8px 4px 6px; }
  .ecpi-step-emo { font-size: 24px; }
  .ecpi-step-lbl { font-size: 12px; }
  .ecpi-arrow { font-size: 16px; }
  .ecpi-frame10 { grid-template-columns: repeat(5, 46px); }
  .ecpi-f10 { width: 46px; height: 46px; }
  .ecpi-word-txt { font-size: 28px; }
  .ecpi-op { font-size: 22px; }
  .ecpi-conj-row { grid-template-columns: 90px auto 1fr; font-size: 17px; }
  .ecpi-listen { margin-left: 0; }
}
.ecpi-wire.ecpi-plate { stroke-width: 7; stroke-linecap: butt; }