@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url(fonts/poppins-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 800; font-display: swap; src: url(fonts/poppins-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(fonts/inter-latin-600-normal.woff2) format("woff2"); }

:root {
  --bleu: #0B1F3A; --orange: #F59E0B; --blanc: #FFFFFF; --beton: #F3F4F6;
  --graphite: #1F2937; --vert: #15803D; --ombre: rgba(11,31,58,.10);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--beton); color: var(--graphite); font-family: "Inter", "Segoe UI", system-ui, sans-serif; font-weight: 400; font-size: 17px; line-height: 1.45; padding-bottom: env(safe-area-inset-bottom); }
.bandeau { background: var(--bleu); color: var(--blanc); padding: calc(env(safe-area-inset-top) + 12px) 16px 12px; display: flex; justify-content: space-between; align-items: baseline; }
.logo { font-family: "Poppins", sans-serif; font-weight: 800; letter-spacing: .14em; font-size: .95rem; }
.produit { font-family: "Poppins", sans-serif; font-weight: 600; color: var(--orange); font-size: .95rem; }
#app { max-width: 640px; margin: 0 auto; padding: 16px; }
h1, h2 { font-family: "Poppins", sans-serif; font-weight: 800; color: var(--bleu); margin: 4px 0 6px; line-height: 1.15; }
h1 { font-size: 1.7rem; } h2 { font-size: 1.25rem; }
.sous { margin: 0 0 16px; color: var(--graphite); }
.haut { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.retour { background: var(--blanc); border: 0; border-radius: 12px; width: 46px; height: 46px; font-size: 1.3rem; color: var(--bleu); box-shadow: 0 2px 6px var(--ombre); }
.titre-haut { font-family: "Poppins", sans-serif; font-weight: 800; color: var(--bleu); }

.cartes { display: grid; gap: 12px; }
.carte { display: flex; align-items: center; gap: 14px; background: var(--blanc); border: 0; border-left: 6px solid var(--orange); border-radius: 14px; padding: 16px; width: 100%; text-align: left; box-shadow: 0 2px 8px var(--ombre); font: inherit; color: var(--graphite); min-height: 76px; }
.carte .emo { font-size: 2rem; }
.carte b { font-family: "Poppins", sans-serif; font-weight: 800; color: var(--bleu); display: block; }
.carte small { color: #4B5563; }
.barre { height: 6px; background: #E5E7EB; border-radius: 6px; margin-top: 6px; overflow: hidden; }
.barre i { display: block; height: 100%; background: var(--vert); }
.ligne { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--blanc); border: 0; border-radius: 12px; padding: 14px 16px; width: 100%; text-align: left; font: inherit; color: var(--graphite); box-shadow: 0 2px 8px var(--ombre); margin-bottom: 10px; }
.ligne .ok { color: var(--vert); font-weight: 600; }

.bulle { background: var(--blanc); border-radius: 16px; padding: 16px; box-shadow: 0 2px 8px var(--ombre); margin-bottom: 14px; }
.bulle .qui { font-family: "Poppins", sans-serif; font-weight: 600; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: #4B5563; margin-bottom: 4px; }
.bulle .en { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1.25rem; color: var(--bleu); }
.bulle .fr { color: #4B5563; margin-top: 6px; font-size: .95rem; }
mark { background: #FEF3C7; color: #92400E; font-weight: 800; border-bottom: 3px solid var(--orange); padding: 0 2px; }
.etape { font-family: "Poppins", sans-serif; font-weight: 600; font-size: .85rem; color: var(--bleu); margin: 8px 0 6px; }
.etape span { background: var(--bleu); color: #fff; border-radius: 999px; padding: 2px 10px; margin-right: 6px; }

.rangee { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { flex: 1; min-width: 130px; min-height: 52px; border: 0; border-radius: 12px; font: inherit; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1rem; background: var(--blanc); color: var(--bleu); box-shadow: 0 2px 8px var(--ombre); }
.btn.principal { background: var(--orange); color: var(--bleu); }
.btn.vert { background: var(--vert); color: #fff; }
.btn.rec { background: var(--bleu); color: #fff; }
.btn.rec.on { background: #B91C1C; }
.btn[disabled] { opacity: .45; }
.choix { display: grid; gap: 10px; }
.choix button { text-align: left; background: var(--blanc); border: 2px solid transparent; border-radius: 12px; padding: 14px 16px; font: inherit; color: var(--graphite); box-shadow: 0 2px 8px var(--ombre); min-height: 56px; }
.choix button.oups { border-color: var(--orange); animation: secoue .35s; }
.choix button.bon { border-color: var(--vert); background: #ECFDF5; }
@keyframes secoue { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.info { font-size: .9rem; color: #4B5563; margin: 8px 0; }
.lien { background: none; border: 0; color: var(--bleu); text-decoration: underline; font: inherit; padding: 6px 0; }
.signature { text-align: center; font-size: .75rem; letter-spacing: .16em; color: #4B5563; margin-top: 24px; font-family: "Poppins", sans-serif; font-weight: 600; }

:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; border-radius: 6px; }
.bandeau :focus-visible { outline-color: #fff; }
.titre-haut:focus, #app:focus, h1:focus { outline: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---- niveaux, jeux, vocabulaire ---- */
.niveau { background: var(--blanc); border-radius: 14px; padding: 12px 16px; margin: 0 0 14px; box-shadow: 0 2px 8px var(--ombre); font-size: .95rem; }
.niveau b { font-family: "Poppins", sans-serif; font-weight: 800; color: var(--bleu); }
.points { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pt { width: 12px; height: 12px; border-radius: 50%; background: #CBD5E1; }
.pt.fait { background: var(--vert); } .pt.ici { background: var(--bleu); transform: scale(1.3); }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--bleu); color: #fff; padding: 12px 20px; border-radius: 999px; font-family: "Poppins", sans-serif; font-weight: 600; z-index: 60; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.mots-tuiles { display: flex; flex-wrap: wrap; gap: 10px; }
.mt { min-height: 52px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--blanc); color: var(--bleu); font: inherit; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1.05rem; box-shadow: 0 2px 8px var(--ombre); border-bottom: 4px solid var(--orange); }
.mt[disabled] { opacity: .3; box-shadow: none; }
.mt.oups { animation: secoue .35s; }
.phrase-construite { min-height: 64px; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--bleu); }
.phrase-construite .vide { color: #4B5563; font-family: "Inter", sans-serif; font-weight: 400; }
.carte-voc { text-align: center; min-height: 120px; }
.piege .en { font-size: 1.5rem; }
.confettis { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
.confettis i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: tombe 2.2s linear forwards; }
@keyframes tombe { to { transform: translateY(105vh) rotate(540deg); } }
.choix button:disabled { opacity: .7; }

/* ---- jeux de rôle avec avatar ---- */
.scene-avatar { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.avatar { width: 128px; height: 136px; flex: none; border-radius: 18px; box-shadow: 0 2px 8px var(--ombre); }
.nom-avatar { display: flex; flex-direction: column; }
.nom-avatar b { font-family: "Poppins", sans-serif; font-weight: 800; color: var(--bleu); font-size: 1.1rem; }
.nom-avatar small { color: #4B5563; }
.avatar .yeux ellipse { transform-box: fill-box; transform-origin: center; animation: cligne 4.5s infinite; }
@keyframes cligne { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.avatar .sourcils line { transform-box: fill-box; transform-origin: center; transition: transform .25s; }
.m-content .avatar .sourcils line { transform: translateY(-3px); }
.m-confus .avatar .sourcils line:first-child { transform: rotate(14deg) translateY(-2px); }
.m-confus .avatar .sourcils line:last-child { transform: rotate(-14deg) translateY(-2px); }
.avatar.parle { animation: parle .5s ease-in-out infinite alternate; }
@keyframes parle { to { transform: translateY(-3px) rotate(-.6deg); } }
.bulle-avatar { position: relative; border: 2px solid var(--bleu); }
.en-h { margin: 0; font-size: 1.2rem; }
.pts-role { font-family: "Poppins", sans-serif; font-weight: 800; color: var(--bleu); min-width: 52px; text-align: right; }
.reaction { min-height: 1.6em; margin: 4px 0; font-family: "Poppins", sans-serif; font-weight: 600; color: var(--bleu); }
.feedback { background: #FEF3C7; border-left: 5px solid #B45309; border-radius: 10px; padding: 10px 14px; margin: 6px 0 10px; font-size: .95rem; color: #1F2937; }
.choix button small { display: block; margin-top: 4px; color: #4B5563; font-size: .85rem; }
.choix button.bon { border-color: var(--vert); background: #ECFDF5; }
.choix button.moyen { border-color: #B45309; background: #FFFBEB; }
.choix button.mauvais { border-color: #92400E; background: #FEF2E8; opacity: .8; }
.bilan-l { padding: 8px 0; border-bottom: 1px solid #E5E7EB; font-family: "Poppins", sans-serif; font-weight: 600; font-size: .95rem; color: var(--bleu); }
.bilan-l small { display: block; font-family: "Inter", sans-serif; font-weight: 400; color: #4B5563; }

/* ---- correctifs visuels (revue de captures) ---- */
[tabindex="-1"]:focus { outline: none; }

/* ---- répétitions audio, navigation précédent/suivant, question touchable ---- */
.rep { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; font-size: .9rem; color: #4B5563; }
.rep > span { font-weight: 600; color: var(--bleu); }
.rep button { min-width: 48px; min-height: 44px; border: 2px solid transparent; border-radius: 12px; background: var(--blanc); color: var(--bleu); font: inherit; font-family: "Poppins", sans-serif; font-weight: 600; box-shadow: 0 2px 8px var(--ombre); }
.rep button[aria-pressed="true"] { background: var(--bleu); color: #fff; }
.nav2 { display: flex; gap: 10px; margin: 16px 0 8px; }
.nav2 .btn { min-width: 0; }
.q-tap { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.q-tap .en { display: block; }
.q-tap .astuce { display: block; margin-top: 6px; font-size: .85rem; color: #B45309; font-weight: 600; text-decoration: underline dotted; }
.q-trad { color: #1F2937; font-size: 1rem; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #D1D5DB; }
.q-trad[hidden] { display: none; }
.serie { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 1rem; color: var(--bleu); margin: 18px 0 8px; }
.serie small { font-weight: 600; color: #4B5563; margin-left: 6px; }

/* =====================  STYLES  ===================== */
[data-style="a"] body { background: #F5F8FC; }
[data-style="a"] .carte, [data-style="a"] .ligne, [data-style="a"] .bulle, [data-style="a"] .choix button { border-radius: 16px; border: 1.5px solid #DCE6F2; border-bottom-width: 3px; box-shadow: none; }
[data-style="a"] .carte { border-left: 1.5px solid #DCE6F2; }
[data-style="a"] .carte:active, [data-style="a"] .ligne:active, [data-style="a"] .btn:active, [data-style="a"] .choix button:active { transform: translateY(2px); border-bottom-width: 1.5px; }
[data-style="a"] .btn { border-radius: 16px; border: 1.5px solid #DCE6F2; border-bottom: 3px solid #C5D5E8; box-shadow: none; }
[data-style="a"] .btn.principal { background: var(--orange); border-color: #D97706; border-bottom-color: #B45309; color: var(--bleu); }
[data-style="a"] .btn.vert { border-color: #166534; border-bottom-color: #14532D; }
[data-style="a"] .btn.rec { border-color: #1E3A8A; border-bottom-color: #0B1F3A; }
[data-style="a"] .barre { height: 14px; border-radius: 14px; background: #D6E4F5; }
[data-style="a"] .barre i { background: linear-gradient(90deg, #22C55E, #15803D); border-radius: 14px; }
[data-style="a"] .carte .emo { background: #EAF1FB; border-radius: 16px; width: 56px; height: 56px; display: grid; place-items: center; flex: none; }
[data-style="a"] .serie { color: #fff; border-radius: 12px; padding: 9px 14px; }
[data-style="a"] .serie small { color: rgba(255,255,255,.9); }
[data-style="a"] .serie:nth-of-type(1) { background: #15803D; }
[data-style="a"] .serie:nth-of-type(2) { background: #1D4ED8; }
[data-style="a"] .serie:nth-of-type(3) { background: #B45309; }
[data-style="a"] .ligne { margin-left: 14px; position: relative; }
[data-style="a"] .ligne::before { content: ""; position: absolute; left: -14px; top: -12px; bottom: -12px; width: 4px; background: #BFD3EA; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) { [data-style="a"] .carte:active, [data-style="a"] .ligne:active, [data-style="a"] .btn:active { transform: none; } }

/* =====================  PHASE 1 : TABLEAU DE BORD  ===================== */
@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url(fonts/manrope-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 600; font-display: swap; src: url(fonts/manrope-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 800; font-display: swap; src: url(fonts/manrope-latin-800-normal.woff2) format("woff2"); }

:root { --fond: #F5F8FC; --trait: #DCE6F2; --primaire: #0B1F3A; --accent: #F59E0B; --texte: #172B4D; }
[data-palette="moderne"] { --bleu: #102A43; --primaire: #1769AA; --accent: #16B8A6; --texte: #172B4D; --fond: #F5F8FC; }
[data-palette="moderne"] body, [data-palette="moderne"] button, [data-palette="moderne"] input, [data-palette="moderne"] h1, [data-palette="moderne"] h2, [data-palette="moderne"] b { font-family: "Manrope", "Inter", system-ui, sans-serif; }
[data-palette="moderne"] .bandeau { background: #102A43; }
[data-palette="moderne"] .reprendre { background: #1769AA; }
[data-palette="moderne"] .barre.fine i { background: #16B8A6; }
[data-palette="moderne"] .anneau { --c: #16B8A6; }
[data-palette="moderne"] .tabbar button.on { color: #1769AA; }
[data-palette="moderne"] .tabbar button.on::before { background: #16B8A6; }

body.large #app { max-width: 960px; }
body.avec-barre { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.dash h1 { font-size: 1.45rem; margin: 2px 0 4px; }
.dash .sous { margin: 0 0 14px; color: #4B5563; }

/* en-tête : avatar à initiales, niveau, XP, série */
.entete { background: #fff; border: 1.5px solid var(--trait); border-radius: 18px; padding: 14px 16px; margin-bottom: 14px; }
.ent-g { display: flex; align-items: center; gap: 12px; }
.avatar-ini { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 800 1.1rem "Poppins", sans-serif; }
.bonjour { font-size: .85rem; color: #4B5563; }
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
.past { background: var(--fond); border: 1px solid var(--trait); border-radius: 999px; padding: 4px 12px; font-size: .85rem; color: var(--texte); }
.past b { font-family: "Poppins", sans-serif; color: var(--bleu); }
.legende { display: block; color: #4B5563; font-size: .82rem; margin-top: 6px; }
.barre.fine { height: 8px; border-radius: 8px; background: #E5ECF5; margin-top: 6px; overflow: hidden; }
.barre.fine i { background: var(--vert); border-radius: 8px; }
.barre.fine.clair { background: rgba(255,255,255,.25); }
.barre.fine.clair i { background: var(--accent); }

.carte-nom, .bloc { background: #fff; border: 1.5px solid var(--trait); border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; }
.carte-nom .rangee, .bloc .rangee { margin-top: 8px; flex-wrap: nowrap; }
.champ { flex: 1; min-width: 0; min-height: 48px; border: 1.5px solid var(--trait); border-radius: 12px; padding: 0 14px; font: inherit; color: var(--texte); background: #fff; }
.bloc .champ { width: 100%; margin: 8px 0; }
.carte-nom .btn { flex: none; min-width: 72px; }
.couleurs { display: flex; gap: 10px; margin-top: 4px; }
.pastille-c { width: 36px; height: 36px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--trait); }
.pastille-c[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--bleu); }
.bloc .rep { margin: 8px 0 0; }

/* carte « Continue ton apprentissage » */
.reprendre { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--bleu); color: #fff; border-radius: 20px; padding: 18px; margin-bottom: 12px; }
.reprendre .rep-txt { flex: 1; min-width: 0; }
.reprendre .etiq { font: 600 .72rem "Poppins", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.reprendre h2 { color: #fff; font-size: 1.25rem; margin: 4px 0; }
.reprendre p { margin: 0; color: #DCE6F2; font-size: .9rem; }
.reprendre .btn { flex: none; min-width: 0; padding: 0 18px; }

/* objectif du jour */
.objectif { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1.5px solid var(--trait); border-radius: 16px; padding: 12px 16px; margin-bottom: 6px; }
.objectif small { display: block; color: #4B5563; }
.anneau { --c: var(--vert); width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c) calc(var(--p) * 1%), #E5ECF5 0); position: relative; font: 800 .8rem "Poppins", sans-serif; color: var(--bleu); }
.anneau::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.anneau span { position: relative; }

/* sections */
.sec { font-size: 1.05rem; margin: 22px 0 8px; }
.sec-sous { margin: -4px 0 10px; color: #4B5563; font-size: .9rem; }

/* grille de rubriques */
.grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.rub { background: #fff; border: 1.5px solid var(--trait); border-bottom-width: 3px; border-radius: 18px; padding: 14px; text-align: left; font: inherit; color: var(--texte); display: flex; flex-direction: column; gap: 4px; min-height: 132px; }
.rub:active { transform: translateY(2px); border-bottom-width: 1.5px; }
.rub-ico { width: 44px; height: 44px; border-radius: 12px; background: #EAF1FB; display: grid; place-items: center; font-size: 1.5rem; margin-bottom: 4px; }
.rub b { font: 800 .95rem/1.2 "Poppins", sans-serif; color: var(--bleu); }
.rub small { color: #4B5563; font-size: .82rem; }
.rub .barre { margin-top: auto; }

/* actions (parler, vocabulaire) */
.acts { display: grid; gap: 10px; }
.act { display: flex; align-items: center; gap: 14px; background: #fff; border: 1.5px solid var(--trait); border-bottom-width: 3px; border-radius: 16px; padding: 14px; text-align: left; font: inherit; color: var(--texte); min-height: 68px; width: 100%; }
.act:active { transform: translateY(2px); border-bottom-width: 1.5px; }
.act-ico { width: 44px; height: 44px; border-radius: 12px; background: #EAF1FB; display: grid; place-items: center; font-size: 1.5rem; flex: none; }
.act b { display: block; font: 800 .98rem "Poppins", sans-serif; color: var(--bleu); }
.act small { color: #4B5563; font-size: .85rem; }
.act.forte { border-color: var(--accent); background: #FFFBEB; }
.act.forte .act-ico { background: #FDE9B8; }

/* statistiques */
.tuiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tuile { background: #fff; border: 1.5px solid var(--trait); border-radius: 14px; padding: 12px 14px; }
.tuile b { display: block; font: 800 1.35rem "Poppins", sans-serif; color: var(--bleu); }
.tuile span { color: #4B5563; font-size: .82rem; }

@media (min-width: 700px) {
  .grille { grid-template-columns: repeat(4, 1fr); }
  .acts { grid-template-columns: repeat(3, 1fr); }
  .tuiles { grid-template-columns: repeat(4, 1fr); }
}

/* barre de navigation du bas */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; background: #fff; border-top: 1px solid var(--trait); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.tabbar[hidden] { display: none; }
.tabbar button { flex: 1; min-height: 56px; border: 0; background: none; font: inherit; color: #4B5563; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; }
.tabbar button span { font-size: 1.35rem; line-height: 1; }
.tabbar button small { font-size: .72rem; font-weight: 600; }
.tabbar button.on { color: var(--bleu); }
.tabbar button.on::before { content: ""; position: absolute; top: -7px; left: 22%; right: 22%; height: 3px; border-radius: 3px; background: var(--accent); }
@media (min-width: 900px) { .tabbar { left: 50%; right: auto; transform: translateX(-50%); width: 560px; bottom: 12px; border: 1px solid var(--trait); border-radius: 18px; } }
@media (max-width: 440px) { .reprendre { flex-direction: column; align-items: stretch; } .reprendre .btn { width: 100%; min-height: 50px; } }

/* ---- écoute : conversations à deux voix ---- */
.ec-acteurs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 12px; }
.ec-acteur { background: #fff; border: 1.5px solid var(--trait); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; transition: border-color .15s, transform .15s; }
.ec-acteur small { color: #4B5563; font-size: .78rem; }
.ec-acteur.parle { border-color: var(--accent); background: #FFFBEB; transform: translateY(-2px); }
.ec-acteur.parle .avatar-ini { box-shadow: 0 0 0 4px rgba(245,158,11,.35); }
.ec-texte { display: grid; gap: 8px; }
.ec-ligne { display: block; width: 100%; text-align: left; background: #fff; border: 1.5px solid var(--trait); border-radius: 14px; padding: 10px 14px; font: inherit; color: var(--texte); }
.ec-ligne small { display: block; font-weight: 600; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
.ec-ligne.A { border-left: 5px solid #1E3A8A; margin-right: 14px; }
.ec-ligne.B { border-left: 5px solid #B45309; margin-left: 14px; }
.ec-ligne.A small { color: #1E3A8A; } .ec-ligne.B small { color: #B45309; }
.ec-ligne em { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px dashed #D1D5DB; color: #1F2937; font-style: normal; font-size: .92rem; }
.ec-ligne.en-cours { background: #FFFBEB; border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .ec-acteur { transition: none; } .ec-acteur.parle { transform: none; } }

/* ---- mention discrète du Premium ---- */
.invite-avis { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 22px 0 8px; padding: 10px 14px; border: 1px dashed #C9D6E8; border-radius: 14px; background: #fff; color: #4B5563; font-size: .85rem; }
.invite-avis b { color: var(--bleu); }
.invite-avis button { margin-left: auto; border: 0; background: none; color: #1D4ED8; font: 600 .85rem "Inter", sans-serif; text-decoration: underline; padding: 6px 4px; min-height: 36px; }
.lien-btn { display: grid; place-items: center; text-decoration: none; width: 100%; box-sizing: border-box; }

/* ---- barre de progression de l'écoute et formulaire d'avis ---- */
.ec-prog { margin: 10px 0 4px; }
.ec-prog input[type="range"] { width: 100%; height: 32px; accent-color: var(--accent); background: none; margin: 0; }
.ec-temps { display: flex; justify-content: space-between; font-size: .8rem; color: #4B5563; font-variant-numeric: tabular-nums; }
.etoiles { display: flex; gap: 6px; margin-top: 6px; }
.etoiles button { width: 48px; height: 48px; border: 1.5px solid var(--trait); border-radius: 12px; background: #fff; font-size: 1.5rem; color: #B45309; }
.etoiles button[aria-pressed="true"] { border-color: var(--accent); background: #FFFBEB; }
.zone { width: 100%; min-height: 84px; padding: 10px 14px; resize: vertical; margin-top: 6px; line-height: 1.4; }

/* ---- bandeau de marque discret ---- */
.marque { margin: 18px 0 10px; padding: 12px 14px; background: #fff; border: 1.5px solid var(--trait); border-left: 5px solid var(--accent); border-radius: 14px; font-size: .85rem; color: #4B5563; }
.marque-t { font-size: .78rem; letter-spacing: .02em; color: #4B5563; }
.marque-t b { font-family: "Poppins", sans-serif; color: var(--bleu); }
.marque p { margin: 4px 0 8px; color: #1F2937; line-height: 1.35; }
.marque-liens { display: flex; flex-wrap: wrap; gap: 8px; }
.marque-liens a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--trait); border-radius: 999px; background: var(--fond); color: var(--bleu); font-weight: 600; font-size: .85rem; text-decoration: none; }