/* Charte : rouge du logo Interpreto, cartes arrondies, dégradé rouge profond → rouge vif. Aucune ressource externe. */
:root{
  --bg:#faf6f5;--bg2:#f3eeee;--card:#ffffff;--ink:#1c1414;--mut:#6b5f5f;--line:#eadfdd;
  --pri:#c80000;--pri2:#e21a1a;--hot:#ff4b3a;--sun:#ff9f1c;--acc:#00b894;--acc-ink:#00735c;--warn:#b25e00;--bad:#e0193f;
  --grad:linear-gradient(135deg,#c80000 0%,#e21a1a 55%,#ff4b3a 100%);--halo-pri:rgba(200,0,0,.16);--halo-hot:rgba(255,75,58,.14);
  --grad-go:linear-gradient(135deg,#00c9a7 0%,#00b0e0 100%);
  --shadow:0 10px 30px -12px rgba(90,10,10,.35);--r:20px;
}
/* Thème : la page d'écoute suit le réglage du téléphone ; les pages de travail portent data-theme (sombre par défaut, bouton pour changer). */
@media (prefers-color-scheme:dark){:root:not([data-theme]){
  --bg:#0d0a24;--bg2:#12103a;--card:#1a1642;--ink:#f4f1ff;--mut:#b3aed6;--line:#2f2a66;
  --pri:#ff5a52;--acc:#2be3bd;--acc-ink:#2be3bd;--warn:#ffb955;--bad:#ff6b85;--shadow:0 12px 34px -14px rgba(0,0,0,.7);color-scheme:dark;
}}
/* Thème sombre des pages de travail : anthracite de pupitre de studio, pour une régie utilisée en salle obscure. */
:root[data-theme=dark]{
  --bg:#1c1c1e;--bg2:#161617;--card:#27272a;--ink:#ececee;--mut:#9c9ca3;--line:#3b3b3f;
  --pri:#ff5a52;--acc:#2be3bd;--acc-ink:#2be3bd;--warn:#ffb955;--bad:#ff6b85;--shadow:0 12px 34px -14px rgba(0,0,0,.8);
  --halo-pri:rgba(200,0,0,.10);--halo-hot:rgba(255,75,58,.06);color-scheme:dark;
}
:root[data-theme=light]{color-scheme:light}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:16px/1.5 ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:radial-gradient(900px 500px at 110% -10%,var(--halo-hot),transparent 60%),radial-gradient(800px 520px at -20% 0%,var(--halo-pri),transparent 60%),linear-gradient(180deg,var(--bg),var(--bg2));
  background-attachment:fixed;min-height:100vh}
main{max-width:520px;margin:0 auto;padding:16px 16px calc(28px + env(safe-area-inset-bottom))}
button{cursor:pointer;font-family:inherit}
button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--sun);outline-offset:3px}

/* En-tête */
header{position:relative;padding:18px 18px 20px;border-radius:var(--r);background:var(--grad);color:#fff;box-shadow:var(--shadow);overflow:hidden}
header::after{content:"";position:absolute;right:-40px;top:-50px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.14)}
h1{font-size:1.3rem;line-height:1.25;margin:0;padding-right:96px;font-weight:800;letter-spacing:-.01em;position:relative;z-index:1}
h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--mut);margin:24px 4px 10px;font-weight:800}
.sim{display:inline-block;margin:10px 0 0;padding:4px 12px;border-radius:99px;background:#fff;color:#8a2a00;font-size:.78rem;font-weight:800;position:relative;z-index:1}
.ui-lang{position:absolute;right:14px;top:14px;display:flex;gap:4px;z-index:2;background:rgba(255,255,255,.2);padding:3px;border-radius:99px}
.ui-lang button{border:0;background:transparent;color:#fff;border-radius:99px;padding:6px 11px;font-size:.78rem;font-weight:800}
.ui-lang button[aria-pressed=true]{background:#fff;color:#a30000}

/* Langues */
.langs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.langs button{position:relative;min-height:74px;border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:18px;font-size:1.08rem;font-weight:800;box-shadow:0 4px 14px -10px rgba(90,10,10,.5);transition:transform .12s ease,border-color .12s ease}
.langs button:active{transform:scale(.97)}
.langs button small{display:block;font-weight:500;color:var(--mut);font-size:.76rem;margin-top:2px}
.langs button[aria-checked=true]{border-color:transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box;box-shadow:var(--shadow)}
.langs button[aria-checked=true]::after{content:"✓";position:absolute;top:8px;right:10px;width:22px;height:22px;border-radius:50%;background:var(--grad);color:#fff;font-size:.8rem;line-height:22px}
.langs button .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;background:#a9a5c7;vertical-align:middle}
.langs button[data-state=available] .dot{background:var(--acc);box-shadow:0 0 0 4px rgba(0,184,148,.2)}
.langs button[data-state=unavailable] .dot,.langs button[data-state=cut] .dot{background:var(--bad)}

/* Bouton principal */
.play{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;margin-top:20px;min-height:72px;border:0;border-radius:99px;background:var(--grad-go);color:#04263a;font-size:1.25rem;font-weight:900;letter-spacing:.01em;box-shadow:0 14px 30px -12px rgba(0,176,224,.7);transition:transform .12s ease}
.play::before{content:"▶";font-size:1rem;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.55)}
.play:active{transform:scale(.98)}
.play:disabled{opacity:.5;box-shadow:none}
.play[aria-pressed=true]{background:var(--grad);color:#fff;box-shadow:0 14px 30px -12px rgba(200,0,0,.8)}
.play[aria-pressed=true]::before{content:"❚❚";font-size:.8rem;background:rgba(255,255,255,.25)}
@media (prefers-reduced-motion:no-preference){
  body[data-listening=true] .play[aria-pressed=true]{animation:pulse 2s ease-in-out infinite}
  @keyframes pulse{0%,100%{box-shadow:0 14px 30px -12px rgba(200,0,0,.8),0 0 0 0 rgba(200,0,0,.45)}50%{box-shadow:0 14px 30px -12px rgba(200,0,0,.8),0 0 0 14px rgba(200,0,0,0)}}
}

/* État */
.status{margin-top:20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:6px 16px 10px;box-shadow:0 6px 20px -16px rgba(90,10,10,.6)}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line)}
.row:last-of-type{border-bottom:0}
.k{color:var(--mut);font-size:.9rem}
.v{font-weight:800;text-align:right}
.status .v{padding:3px 12px;border-radius:99px;background:rgba(108,77,255,.1);font-size:.92rem}
.v[data-tone=ok],.v.ok{color:var(--acc-ink)}.status .v[data-tone=ok]{background:rgba(0,184,148,.15)}
.v[data-tone=warn],.v.warn{color:var(--warn)}.status .v[data-tone=warn]{background:rgba(255,159,28,.18)}
.v[data-tone=bad],.v.bad{color:var(--bad)}.status .v[data-tone=bad]{background:rgba(224,25,63,.13)}
.hint{color:var(--mut);font-size:.88rem;margin:8px 0 4px}

/* Sous-titres */
.subs{margin-top:16px}
.st-toggle{width:100%;min-height:50px;border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:16px;font-size:1rem;font-weight:800}
.st-toggle::before{content:"CC";display:inline-block;margin-right:10px;padding:1px 7px;border-radius:6px;background:var(--pri);color:var(--card);font-size:.72rem;vertical-align:2px}
.st-toggle[aria-pressed=true]{border-color:transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box}
.st-box{margin-top:10px;background:linear-gradient(160deg,#150f3d,#2a0f45);color:#fff;border-radius:18px;padding:16px 18px;min-height:5.4em;box-shadow:var(--shadow)}
.st-text{margin:0;font-size:1.3rem;line-height:1.4;font-weight:700;overflow-wrap:anywhere}
.st-text.partial{opacity:.8}
.st-box .hint{color:#d6cff5;margin:6px 0 0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Volume, actions, aide */
.volume{margin-top:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px}
.volume label{font-weight:800;font-size:.9rem}
.volume input{width:100%;accent-color:var(--pri2);height:28px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.link{background:rgba(200,0,0,.10);border:0;color:var(--pri);font-weight:800;font-size:.92rem;padding:10px 16px;border-radius:99px}
.help{margin-top:18px;color:var(--mut);background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:4px 16px}
.help summary{padding:12px 0;font-weight:800;color:var(--ink)}
.help ul{margin:0 0 12px;padding-left:20px}

/* Qualité de réception : quatre barres, remplies selon le niveau */
.q{display:inline-flex;align-items:center;gap:8px}
.q-bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.q-bars i{width:4px;border-radius:1px;background:currentColor;opacity:.2}
.q-bars i:nth-child(1){height:4px}.q-bars i:nth-child(2){height:7px}.q-bars i:nth-child(3){height:10px}.q-bars i:nth-child(4){height:14px}
.q[data-grade=poor] .q-bars i:nth-child(-n+1),.q[data-grade=fair] .q-bars i:nth-child(-n+2),.q[data-grade=good] .q-bars i:nth-child(-n+3),.q[data-grade=excellent] .q-bars i{opacity:1}

/* Logos : événement dans l'en-tête, organisateurs en bas de page */
.logo-event{display:block;max-height:64px;max-width:70%;margin:0 0 10px;object-fit:contain;position:relative;z-index:1}
.orgs{display:flex;justify-content:center;align-items:center;gap:28px;flex-wrap:wrap;padding:16px 12px;margin-top:14px;background:#fff;border:2px solid var(--line);border-radius:var(--r)}
.orgs img{max-height:52px;max-width:42%;object-fit:contain}

/* Sponsors : logos centrés sur plusieurs lignes ; quand ils dépassent la largeur, le script double la liste et pose .run (ruban en boucle) */
.sponsors h2{margin:18px 4px 8px;text-align:center}
.sp-view{overflow:hidden;border-radius:14px}
.sp-view:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.sp-list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0;padding:0;list-style:none}
.sp-list li{display:grid;place-items:center;padding:6px 12px;border-radius:12px;background:#fff;border:1px solid var(--line)}
.sp-list img{display:block;height:44px;width:auto;max-width:150px;object-fit:contain}
.sp-view.run{-webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent)}
.sp-view.run .sp-track{display:flex;width:max-content;animation:sp-roll var(--sp-dur,30s) linear infinite}
.sp-view.run .sp-list{flex:none;flex-wrap:nowrap;justify-content:flex-start;padding-right:10px}
.sp-view.run:hover .sp-track,.sp-view.run:focus .sp-track{animation-play-state:paused}
@keyframes sp-roll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.sp-view.run .sp-track{animation:none}}

/* Mention du propriétaire de la solution, tout en bas */
.owner{display:flex;justify-content:center;align-items:center;gap:6px 8px;flex-wrap:wrap;margin:18px 0 0;color:var(--mut);font-size:.8rem;text-align:center}
.owner a,.owner b{display:inline-flex;align-items:center;min-width:0;color:var(--ink);font-weight:800;overflow-wrap:anywhere;border-radius:8px}
.owner img{display:block;box-sizing:content-box;height:26px;width:auto;max-width:140px;object-fit:contain;padding:4px 8px;border-radius:8px;background:#fff}

/* ═════ Page d'écoute des auditeurs (body.ecoute) ═════
   Un écran, sans défilement : en-tête, scène (choix de la langue, lecteur, sous-titres), bandeau du bas toujours visible.
   États posés par le script sur <body> : data-view (pick|listen), data-pick (volet des langues), data-play
   (idle|connecting|on|wait|cut|offline|blocked), data-caps (sous-titres en place principale), data-stz (taille du texte). */
.ecoute{overflow:hidden}
.ecoute main{max-width:560px;height:100vh;height:100dvh;margin:0 auto;display:flex;flex-direction:column;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 0 calc(14px + env(safe-area-inset-left))}
.ecoute h2{margin:0}
.ecoute .hint{margin:0;text-align:center}

/* En-tête : logo et titre de l'événement, langue de l'interface, aide */
.ecoute .head{flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;padding:10px 12px 10px 16px;border-radius:20px}
.ecoute .head-id{flex:1 1 70px;min-width:0;display:flex;align-items:center;gap:10px;position:relative;z-index:1}
.ecoute h1{padding:0;font-size:1.15rem;overflow-wrap:anywhere}
.ecoute .logo-event{flex:none;max-height:44px;max-width:38%;margin:0}
.ecoute .sim{flex:1 1 100%;margin:0;padding:3px 10px;font-size:.68rem;line-height:1.3;border-radius:12px}
.ecoute .head-tools{flex:none;display:flex;align-items:center;gap:6px;position:relative;z-index:2}
.ecoute .ui-lang{position:static}
.ecoute .ui-lang button{min-width:42px;min-height:44px;padding:0 8px}
.ecoute .help-b{width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;font-size:1.05rem;font-weight:900}
.ecoute .help-b[aria-expanded=true]{background:#fff;color:#a30000}
.ecoute .help-box{flex:none;padding:12px 16px;border-radius:18px;background:var(--card);border:1px solid var(--line);color:var(--mut);font-size:.9rem}
.ecoute .help-box h2{color:var(--ink)}
.ecoute .help-box ul{margin:6px 0 0;padding-left:20px}

/* Scène : seule zone qui peut défiler si l'écran est vraiment trop petit */
.ecoute .stage{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;overflow-y:auto;overscroll-behavior:contain;margin:-4px;padding:4px}
.ecoute[data-view=pick] .player,.ecoute[data-view=pick] .caps{display:none}

/* Choix de la langue : grandes tuiles (drapeau, nom dans sa propre langue) */
.ecoute .picker{display:flex;flex-direction:column;gap:14px;margin:auto 0;padding:4px 0}
.ecoute .picker>*{width:100%;max-width:532px;margin-inline:auto}
.ecoute .picker-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px}
.ecoute .picker h2{font-size:1.3rem;line-height:1.2;text-transform:none;letter-spacing:-.01em;color:var(--ink);font-weight:900}
.ecoute .tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ecoute .tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:116px;padding:16px 8px 12px;
  border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:22px;box-shadow:0 6px 18px -14px rgba(0,0,0,.6);transition:transform .12s ease,box-shadow .2s ease}
.ecoute .tile:active{transform:scale(.97)}
.ecoute .tile b{font-size:1.18rem;font-weight:900;line-height:1.15;overflow-wrap:anywhere}
.ecoute .tile small{color:var(--mut);font-size:.76rem;line-height:1.2}
.ecoute .tile .flag{width:57px;height:38px;border-radius:8px;margin-bottom:4px}
.ecoute .tile[aria-checked=true]{border-color:transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box;box-shadow:var(--shadow)}
.ecoute .tile[aria-checked=true]::after{content:"✓";position:absolute;top:9px;right:10px;width:24px;height:24px;border-radius:50%;background:var(--grad);color:#fff;font-size:.82rem;font-weight:900;line-height:24px}
.ecoute .tile .dot{position:absolute;top:13px;left:13px;width:9px;height:9px;border-radius:50%;background:var(--mut);opacity:.45}
.ecoute .tile[data-state=available] .dot{background:var(--acc);opacity:1}
.ecoute .tile[data-state=unavailable] .dot,.ecoute .tile[data-state=cut] .dot{background:var(--bad);opacity:1}
.ecoute .flag{flex:none;position:relative;display:inline-block;overflow:hidden;border-radius:6px;box-shadow:0 0 0 1px var(--line),0 4px 10px -6px rgba(0,0,0,.6)}
.ecoute .flag svg{display:block;width:100%;height:100%}
.ecoute .flag.none{display:grid;place-items:center;background:var(--bg2);color:var(--mut);font-size:.68rem;font-weight:800}
/* Écran d'écoute : la liste des langues est repliée ; « Changer de langue » l'ouvre par-dessus l'écran */
.ecoute[data-view=listen] .picker{display:none}
.ecoute[data-view=listen][data-pick=open] .picker{display:flex;position:fixed;inset:0;z-index:30;margin:0;justify-content:flex-start;overflow-y:auto;background:var(--bg);
  padding:calc(14px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left))}
.ecoute[data-view=listen] .go{display:none}
.ecoute .round-b{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:1rem;font-weight:800}

/* Icône lecture ↔ pause : deux moitiés dont le contour se transforme (triangle ↔ deux barres) */
.ecoute .pp{display:inline-flex;flex:none;width:26px;height:28px;transition:transform .3s ease}
.ecoute .pp i{flex:1;background:currentColor;transition:clip-path .3s cubic-bezier(.4,0,.2,1)}
.ecoute .pp i+i{margin-left:-.5px}
.ecoute .pp i:first-child{clip-path:polygon(0 0,100% 25%,100% 75%,0 100%)}
.ecoute .pp i:last-child{clip-path:polygon(0 25%,100% 50%,100% 50%,0 75%)}
.ecoute [aria-pressed=true]>.pp i:first-child{clip-path:polygon(0 0,64% 0,64% 100%,0 100%)}
.ecoute [aria-pressed=true]>.pp i:last-child{clip-path:polygon(36% 0,100% 0,100% 100%,36% 100%)}

/* Grand bouton « Écouter » du premier écran */
.ecoute .go{display:flex;align-items:center;justify-content:center;gap:14px;min-height:72px;border:0;border-radius:99px;background:var(--grad-go);color:#04263a;font-size:1.3rem;font-weight:900;letter-spacing:.01em;box-shadow:0 14px 30px -12px rgba(0,176,224,.7);transition:transform .12s ease,opacity .2s ease}
.ecoute .go:active{transform:scale(.98)}
.ecoute .go:disabled{opacity:.45;box-shadow:none}
.ecoute .go .pp{width:20px;height:22px}

/* Lecteur : langue écoutée en grand, bouton rond animé, indicateurs, réglages discrets */
.ecoute .player{margin:auto 0;display:flex;flex-direction:column;align-items:center;gap:12px;padding:4px 0;text-align:center}
.ecoute .now{display:flex;align-items:center;gap:14px;min-width:0;max-width:100%}
.ecoute .now-flag{display:flex;flex:none}
.ecoute .now-flag .flag{width:72px;height:48px;border-radius:10px}
.ecoute .now-t{min-width:0;text-align:left}
.ecoute .now-name{margin:0;font-size:clamp(1.9rem,9vw,2.6rem);font-weight:900;line-height:1.05;letter-spacing:-.02em;overflow-wrap:anywhere}
.ecoute .now-sub{margin:3px 0 0;color:var(--mut);font-size:.86rem;line-height:1.25}
.ecoute .now-sub[data-tone=warn]{color:var(--warn)}
.ecoute .pill-b{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--mut);font-size:.88rem;font-weight:700}
.ecoute .disc{position:relative;flex:none;display:grid;place-items:center;width:176px;height:176px}
.ecoute .disc>*{grid-area:1/1}
.ecoute .disc-b{position:relative;z-index:2;display:grid;place-items:center;width:120px;height:120px;border:0;border-radius:50%;background:var(--grad-go);color:#04263a;box-shadow:0 16px 34px -12px rgba(0,176,224,.75);transition:transform .15s ease,filter .3s ease}
.ecoute .disc-b:active{transform:scale(.94)}
.ecoute .disc-b .pp{width:40px;height:44px}
.ecoute .disc-b[aria-pressed=false] .pp{transform:translateX(4px)}
.ecoute .disc-b[aria-pressed=true]{background:var(--grad);color:#fff;box-shadow:0 16px 34px -14px var(--pri)}
.ecoute[data-play=cut] .disc-b,.ecoute[data-play=offline] .disc-b{filter:saturate(.35)}
.ecoute .wave{width:120px;height:120px;border-radius:50%;border:2px solid var(--pri);opacity:0;pointer-events:none}
.ecoute .spin{width:142px;height:142px;border-radius:50%;border:4px solid transparent;border-top-color:var(--sun);border-right-color:var(--sun);opacity:0;pointer-events:none;transition:opacity .3s ease}
.ecoute[data-play=connecting] .spin,.ecoute[data-play=wait] .spin,.ecoute[data-play=offline] .spin{opacity:1}
/* Indicateurs : une seule ligne compacte (état · qualité · réseau · source) */
.ecoute .ind{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0;max-width:100%;padding:4px 12px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.ecoute .chip{display:inline-flex;align-items:center;gap:6px;min-height:24px;color:var(--mut);font-size:.76rem;font-weight:700;line-height:1.25;text-align:left}
.ecoute .chip:not([hidden])~.chip::before{content:"";flex:none;width:3px;height:3px;margin:0 3px 0 9px;border-radius:50%;background:var(--mut)}
@media (max-width:479px){.ecoute #q-text{display:none}}
.ecoute #v-state{color:var(--ink)}
.ecoute .chip[data-tone=ok]{color:var(--acc-ink)}.ecoute .chip[data-tone=warn]{color:var(--warn)}.ecoute .chip[data-tone=bad]{color:var(--bad)}
.ecoute .eq{display:none;flex:none;align-items:flex-end;gap:2px;height:12px}
.ecoute[data-play=on] .eq{display:inline-flex}
.ecoute .eq i{width:3px;height:100%;border-radius:1px;background:currentColor;transform-origin:bottom;transform:scaleY(.6)}
.ecoute .tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;width:100%}
.ecoute .tool-b{flex:none;min-width:44px;min-height:44px;padding:0 10px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:.9rem;font-weight:800}
.ecoute .tool-b[aria-pressed=true]{border-color:transparent;background:var(--pri);color:var(--card)}
.ecoute .tool-b:disabled{opacity:.4}
.ecoute .vol{flex:0 1 200px;min-width:0;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--mut)}
.ecoute .vol-i{flex:none;width:20px;height:20px}
.ecoute .vol input{flex:1;min-width:0;width:100%;height:44px;margin:0;accent-color:var(--pri2)}

/* Sous-titres en place principale : grand texte lisible à bout de bras, phrase en cours nette, anciennes lignes estompées */
.ecoute[data-stz="0"]{--cap:1.15rem}.ecoute[data-stz="1"]{--cap:1.4rem}.ecoute[data-stz="2"]{--cap:1.7rem}.ecoute[data-stz="3"]{--cap:2.1rem}.ecoute[data-stz="4"]{--cap:2.6rem}
.ecoute .caps{flex:1;min-height:8.5rem;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:14px 18px 16px;border-radius:22px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.ecoute .cap-lines p{margin:.35em 0 0;font-size:calc(var(--cap,1.7rem)*var(--capk,1));line-height:1.28;font-weight:800;letter-spacing:-.01em;overflow-wrap:anywhere}
.ecoute .cap-lines .old{opacity:.45;font-weight:700}
.ecoute .cap-lines .old:nth-last-child(n+3){opacity:.3}
.ecoute .cap-lines .partial::after{content:"\00a0_";color:var(--pri)}
.ecoute .cap-note{margin:0;color:var(--mut);font-size:1rem}
.ecoute .cap-note:empty{display:none}
/* … et le lecteur se réduit à une barre compacte, sous les sous-titres */
.ecoute[data-caps=on] .head{padding:8px 10px 8px 14px}
.ecoute[data-caps=on] h1{font-size:1rem}
.ecoute[data-caps=on] .logo-event{max-height:30px}
.ecoute[data-caps=on] .player{flex:none;margin:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"disc now chg" "ind ind ind" "tools tools tools";align-items:center;gap:6px 10px;padding:8px 10px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:22px}
.ecoute[data-caps=on] .disc{grid-area:disc;width:60px;height:60px}
.ecoute[data-caps=on] .disc-b{width:54px;height:54px;box-shadow:none}
.ecoute[data-caps=on] .disc-b .pp{width:18px;height:20px}
.ecoute[data-caps=on] .disc-b[aria-pressed=false] .pp{transform:translateX(2px)}
.ecoute[data-caps=on] .wave{display:none}
.ecoute[data-caps=on] .spin{width:62px;height:62px;border-width:3px}
.ecoute[data-caps=on] .now{grid-area:now;gap:8px}
.ecoute[data-caps=on] .now-t{display:flex;align-items:baseline;gap:8px}
.ecoute[data-caps=on] .now-sub{margin:0;font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ecoute[data-caps=on] .now-flag .flag{width:30px;height:20px;border-radius:4px}
.ecoute[data-caps=on] .now-name{font-size:1.1rem;letter-spacing:0}
.ecoute[data-caps=on] #hint,.ecoute[data-caps=on] #q-text{display:none}
.ecoute[data-caps=on] .chg{grid-area:chg;width:44px;padding:0}
.ecoute[data-caps=on] #lang-b-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ecoute[data-caps=on] .ind{grid-area:ind;justify-content:flex-start;padding:0 4px;border:0;background:none}
.ecoute[data-caps=on] .chip{min-height:0}
.ecoute[data-caps=on] .tools{grid-area:tools;flex-wrap:nowrap;justify-content:flex-start}
.ecoute[data-caps=on] .vol{flex:1 1 auto}
@media (min-width:760px){.ecoute[data-caps=on] main{max-width:1080px}.ecoute[data-caps=on]{--capk:1.45}}
@media (min-width:1200px) and (min-height:760px){.ecoute[data-caps=on]{--capk:1.8}}

/* Bandeau du bas, toujours visible au-dessus de la zone sûre : sponsors, organisateurs, « Solution fournie par » */
.ecoute .dock{flex:none;display:grid;gap:6px;min-width:0;border-radius:18px 18px 0 0;background:var(--card);border:1px solid var(--line);border-bottom:0;box-shadow:0 -10px 26px -20px rgba(0,0,0,.6);
  margin:0 calc(-6px - env(safe-area-inset-right)) 0 calc(-6px - env(safe-area-inset-left));
  padding:8px calc(10px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left))}
.ecoute .sponsors{min-width:0}
.ecoute .sponsors h2{margin:0 0 4px;font-size:.62rem;text-align:center}
.ecoute .sp-view:not(.run){overflow-x:auto}
.ecoute .sp-view:not(.run) .sp-list{flex-wrap:nowrap;justify-content:safe center}
.ecoute .sp-list{gap:8px}
.ecoute .sp-list li{flex:none;padding:4px 10px;border-radius:10px}
.ecoute .sp-list img{height:32px;max-width:120px}
.ecoute .credits{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 18px;min-width:0}
.ecoute .orgs{flex-wrap:nowrap;gap:14px;margin:0;padding:4px 10px;border-width:1px;border-radius:12px;min-width:0}
.ecoute .orgs img{max-height:30px;max-width:110px}
.ecoute .owner{margin:0;font-size:.74rem}
.ecoute .owner img{height:20px;padding:3px 6px}

/* Petit téléphone : le lecteur se resserre pour que tout tienne sans défilement */
@media (max-height:700px){
  .ecoute .player{gap:8px}
  .ecoute:not([data-caps=on]) .disc{width:140px;height:140px}.ecoute:not([data-caps=on]) .disc-b{width:98px;height:98px}.ecoute:not([data-caps=on]) .wave{width:98px;height:98px}.ecoute:not([data-caps=on]) .spin{width:118px;height:118px}
  .ecoute .now-flag .flag{width:54px;height:36px;border-radius:8px}
  .ecoute:not([data-caps=on]) .now-name{font-size:1.7rem}
  .ecoute .tile{min-height:98px;padding:12px 8px 10px}
  .ecoute .picker{gap:10px}.ecoute .go{min-height:60px}
}
@media (max-height:600px){
  .ecoute .player{gap:6px}
  .ecoute:not([data-caps=on]) .disc{width:112px;height:112px}.ecoute:not([data-caps=on]) .disc-b{width:84px;height:84px}.ecoute:not([data-caps=on]) .wave{width:84px;height:84px}.ecoute:not([data-caps=on]) .spin{width:100px;height:100px}
  .ecoute:not([data-caps=on]) .disc-b .pp{width:30px;height:33px}
  .ecoute .sponsors h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}
/* Écran très bas (téléphone couché) : la page défile, le bandeau reste collé en bas */
@media (max-height:520px){
  .ecoute{overflow:auto}
  .ecoute main{height:auto;min-height:100vh;min-height:100dvh}
  .ecoute .stage{overflow:visible}
  .ecoute .dock{position:sticky;bottom:0;z-index:5}
}

/* Animations : invitation à appuyer au repos, ondes sonores et égaliseur en écoute, anneau qui tourne en reconnexion */
@media (prefers-reduced-motion:no-preference){
  .ecoute[data-play=idle] .disc-b,.ecoute[data-play=blocked] .disc-b,.ecoute .go:not(:disabled){animation:ec-invite 2.2s ease-in-out infinite}
  .ecoute .go:not(:disabled) .pp{animation:ec-nudge 2.2s ease-in-out infinite}
  .ecoute[data-play=on] .wave{animation:ec-wave 2.7s cubic-bezier(.2,.6,.4,1) infinite}
  .ecoute[data-play=on] .wave:nth-child(2){animation-delay:.9s}
  .ecoute[data-play=on] .wave:nth-child(3){animation-delay:1.8s}
  .ecoute[data-play=on][data-caps=on] .disc-b{animation:ec-beat 1.8s ease-in-out infinite}
  .ecoute[data-play=connecting] .spin,.ecoute[data-play=wait] .spin{animation:ec-spin 1s linear infinite}
  .ecoute[data-play=offline] .spin{animation:ec-spin 2.6s linear infinite}
  .ecoute[data-play=on] .eq i{animation:ec-eq .9s ease-in-out infinite alternate}
  .ecoute .eq i:nth-child(2){animation-delay:-.35s}.ecoute .eq i:nth-child(3){animation-delay:-.7s}.ecoute .eq i:nth-child(4){animation-delay:-.2s}
  .ecoute .cap-lines .partial::after{animation:ec-blink 1s steps(2,jump-none) infinite}
  @keyframes ec-invite{0%,100%{transform:scale(1);box-shadow:0 16px 34px -12px rgba(0,176,224,.75),0 0 0 0 rgba(0,176,224,.5)}50%{transform:scale(1.045);box-shadow:0 16px 34px -12px rgba(0,176,224,.75),0 0 0 18px rgba(0,176,224,0)}}
  @keyframes ec-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
  @keyframes ec-wave{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.46);opacity:0}}
  @keyframes ec-beat{0%,100%{box-shadow:0 0 0 0 var(--halo-pri)}50%{box-shadow:0 0 0 7px var(--halo-pri)}}
  @keyframes ec-spin{to{transform:rotate(360deg)}}
  @keyframes ec-eq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
  @keyframes ec-blink{from{opacity:1}to{opacity:.15}}
}
@media (prefers-reduced-motion:reduce){
  .ecoute .pp,.ecoute .pp i,.ecoute .disc-b,.ecoute .spin,.ecoute .tile,.ecoute .go{transition:none}
  .ecoute[data-play=on] .wave:first-child{opacity:.4;transform:scale(1.22)}
}

/* ═════ Page d'écoute : adaptation au téléphone couché et à la tablette ═════ */
/* Lien du fournisseur : zone tactile de 44 px sans épaissir le bandeau. */
.ecoute .owner a{position:relative}
.ecoute .owner a::after{content:"";position:absolute;inset:-14px -6px -4px}
/* Tablette (et grand écran) : lecteur et tuiles un peu plus grands, page toujours centrée. */
@media (min-width:700px) and (min-height:800px){
  .ecoute:not([data-caps=on]) main{max-width:640px}
  .ecoute .picker>*{max-width:612px}
  .ecoute .tile{min-height:140px}
  .ecoute .tile b{font-size:1.35rem}
  .ecoute .tile .flag{width:72px;height:48px}
  .ecoute:not([data-caps=on]) .player{gap:16px}
  .ecoute:not([data-caps=on]) .disc{width:220px;height:220px}
  .ecoute:not([data-caps=on]) .disc-b,.ecoute:not([data-caps=on]) .wave{width:150px;height:150px}
  .ecoute:not([data-caps=on]) .spin{width:178px;height:178px}
  .ecoute:not([data-caps=on]) .disc-b .pp{width:50px;height:55px}
  .ecoute:not([data-caps=on]) .now-name{font-size:3rem}
  .ecoute:not([data-caps=on]) .now-flag .flag{width:84px;height:56px;border-radius:12px}
}
/* Téléphone couché (large et bas) : l'écran d'écoute tient sur un seul écran. En-tête sur une ligne ; lecteur sur deux
   colonnes (bouton à gauche, langue et réglages à droite) ; avec les sous-titres, le texte à gauche et le lecteur
   compact à droite : bouton de lecture et sous-titres restent visibles ensemble. Le choix de la langue, lui, défile. */
@media (max-height:520px) and (min-width:600px){
  .ecoute main{max-width:none;gap:8px;padding-top:calc(6px + env(safe-area-inset-top))}
  .ecoute .head{flex-wrap:nowrap;padding:4px 8px 4px 14px;border-radius:16px}
  .ecoute .head-id{flex:0 1 auto}
  .ecoute .sim{order:1;flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ecoute .head-tools{order:2;margin-left:auto}
  .ecoute h1,.ecoute[data-caps=on] h1{font-size:1rem}
  .ecoute .logo-event{max-height:32px}
  .ecoute[data-view=listen]{overflow:hidden}
  .ecoute[data-view=listen] main{height:100vh;height:100dvh;min-height:0}
  .ecoute[data-view=listen] .stage{gap:8px;overflow-y:auto}
  .ecoute[data-view=listen] .dock{position:static}
  .ecoute[data-view=listen]:not([data-caps=on]) .player{display:grid;grid-template-columns:auto minmax(0,auto);justify-content:center;justify-items:start;align-items:center;gap:6px 28px;text-align:left}
  .ecoute[data-view=listen]:not([data-caps=on]) .player>*{grid-column:2}
  .ecoute[data-view=listen]:not([data-caps=on]) .player>.disc{grid-column:1;grid-row:1/span 6}
  .ecoute[data-view=listen]:not([data-caps=on]) .player .hint{text-align:left}
  .ecoute[data-view=listen]:not([data-caps=on]) .tools{justify-content:flex-start;width:auto}
  .ecoute[data-view=listen]:not([data-caps=on]) .vol{flex:0 0 200px}
  .ecoute[data-caps=on]{--capk:1}
  .ecoute[data-caps=on][data-view=listen] .stage{flex-direction:row;align-items:stretch;overflow:hidden}
  .ecoute[data-caps=on] .caps{flex:1 1 0;min-width:0;min-height:0;padding:10px 14px}
  .ecoute[data-caps=on] .player{flex:0 0 min(330px,44%);align-self:flex-end;min-width:0}
  .ecoute .picker{gap:8px}
  .ecoute .picker>*{max-width:none}
  .ecoute .tiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
  .ecoute .tile{min-height:84px;padding:8px}
  .ecoute .tile .flag{width:42px;height:28px;border-radius:6px}
  .ecoute .go{min-height:52px}
  .ecoute .dock{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding-top:5px;padding-bottom:calc(5px + env(safe-area-inset-bottom))}
  .ecoute .dock>:only-child,.ecoute .sponsors[hidden]+.credits{grid-column:1/-1}
}