/* L'actu en télé à tube (ronde 16) — tout est préfixé par .s-tele. Les couleurs viennent des variables de la page, avec des valeurs de secours. */
.s-tele {
  --t-papier:var(--papier, #efe9dc); --t-encre:var(--encre, #121110); --t-doux:var(--doux, #5d574d); --t-fluo:var(--fluo, #e8ff2b); --t-filet:var(--filet, rgba(18,17,16,.18));
  position:relative; overflow:hidden; padding:7rem 3vw; color:var(--t-encre);
}
.s-tele .t-mono { font-family:'Space Mono',monospace; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }
.s-tele .t-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.s-tele :focus-visible { outline:3px solid var(--t-encre); outline-offset:3px; }

.s-tele .t-plateau { min-height:max(calc(100vh - 12rem), 620px); display:grid; grid-template-columns:minmax(0, 23rem) minmax(0, 1fr); gap:1vw; align-items:stretch; }
/* le canvas de la scène couvre toute la section (rien n'est coupé) */
.s-tele .t-scene { position:absolute; inset:0; z-index:1; touch-action:pan-y; }
.s-tele .t-scene canvas { display:block; width:100%; height:100%; outline:none; }
.s-tele .t-scene canvas:focus-visible { outline:3px solid var(--t-encre); outline-offset:-6px; }
.s-tele .t-col { position:relative; z-index:2; align-self:center; display:flex; flex-direction:column; gap:1.15rem; pointer-events:none; }
.s-tele .t-col > * { pointer-events:auto; }
.s-tele .t-titre { font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; line-height:.92; letter-spacing:-.005em; font-size:clamp(4.4rem,9vw,9rem); margin:0; }
.s-tele .t-titre span { display:block; overflow:hidden; }
.s-tele .t-titre i { display:block; font-style:normal; transform:translateY(105%); transition:transform .9s cubic-bezier(.2,.9,.2,1); }
.s-tele.vu .t-titre i { transform:none; }
.s-tele .t-chapo { font-size:1.02rem; color:var(--t-doux); max-width:23rem; }
.s-tele .t-glisse { opacity:0; transform:translateY(26px); transition:opacity .7s var(--d,0s), transform .9s var(--d,0s) cubic-bezier(.2,.9,.2,1); }
.s-tele.vu .t-glisse { opacity:1; transform:none; }

/* le programme : une chaîne par catégorie */
.s-tele .t-chaines { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; border-top:2px solid var(--t-encre); max-width:23rem; }
.s-tele .t-chaines button { width:100%; display:grid; grid-template-columns:3.1rem 1fr auto; align-items:center; gap:.4rem; text-align:left; font:700 .82rem 'Space Mono',monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--t-encre); background:transparent; border:0; border-bottom:1px solid var(--t-filet); border-radius:0; padding:.5rem .5rem .5rem .3rem; cursor:pointer; position:relative; transition:padding .2s; }
.s-tele .t-chaines button b { font:400 1.9rem/1 'Anton',sans-serif; letter-spacing:0; }
.s-tele .t-chaines button small { font:400 .68rem 'Space Mono',monospace; color:var(--t-doux); }
.s-tele .t-chaines button::before { content:""; position:absolute; inset:0 100% 0 0; background:var(--t-fluo); z-index:-1; transition:right .28s cubic-bezier(.2,.9,.2,1); }
@media (hover:hover) { .s-tele .t-chaines button:hover { padding-left:.7rem; } }
.s-tele .t-chaines button[aria-pressed="true"] { padding-left:.7rem; }
.s-tele .t-chaines button[aria-pressed="true"]::before { right:0; }
.s-tele .t-chaines button[aria-pressed="true"] small { color:var(--t-encre); }
.s-tele .t-cmd { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; max-width:23rem; }
.s-tele .t-cmd button, .s-tele .t-cmd a { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:2.75rem; min-width:2.9rem; font:700 .8rem 'Space Mono',monospace; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; padding:.5rem .85rem; border:2px solid var(--t-encre); border-radius:99px; background:var(--t-papier); color:var(--t-encre); cursor:pointer; transition:transform .15s, box-shadow .15s; }
@media (hover:hover) { .s-tele .t-cmd button:hover, .s-tele .t-cmd a:hover { transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--t-encre); } }
.s-tele .t-cmd a { background:var(--t-encre); color:var(--t-papier); flex:1; white-space:nowrap; }
.s-tele .t-cmd .t-zap { display:none; }
.s-tele .t-cmd button[data-a="pause"][aria-pressed="true"], .s-tele .t-cmd .t-zoom[aria-pressed="true"] { background:var(--t-fluo); }
.s-tele .t-cmd .t-zoom { white-space:nowrap; }
.s-tele .t-cmd a { flex-basis:100%; } /* « Lire la source » sur sa propre ligne : rien n'est coupé */
.s-tele .t-legende { transition:opacity .4s; }
.s-tele .t-aide { color:var(--t-doux); font-size:.68rem; max-width:23rem; }
.s-tele .t-legende { display:none; }

/* le cadre : là où la télé se pose. Le fond (trame, barres, numéro géant) est dedans */
.s-tele .t-cadre { position:relative; z-index:0; min-height:0; }
.s-tele .t-disque { position:absolute; left:50%; top:52%; width:min(100%, 86vh); aspect-ratio:1; transform:translate(-50%,-50%) scale(.6); opacity:0; background:radial-gradient(circle, var(--t-fluo) 0 3px, transparent 3.5px) 0 0/9px 9px; -webkit-mask:radial-gradient(closest-side, #000 52%, transparent); mask:radial-gradient(closest-side, #000 52%, transparent); transition:transform 1.2s .2s cubic-bezier(.2,.8,.2,1), opacity .6s .2s; }
.s-tele.vu .t-disque { transform:translate(-50%,-50%); opacity:1; }
.s-tele .t-barres { position:absolute; left:-2vw; right:-6vw; top:var(--by,34%); height:var(--bh,30%); background:repeating-linear-gradient(0deg, var(--t-fluo) 0 var(--e,5px), transparent var(--e,5px) var(--p,13px)); -webkit-mask:linear-gradient(90deg, transparent 0, #000 22% 84%, transparent); mask:linear-gradient(90deg, transparent 0, #000 22% 84%, transparent); opacity:0; transition:top .5s cubic-bezier(.7,0,.2,1), height .5s cubic-bezier(.7,0,.2,1), opacity .8s .5s; }
.s-tele.vu .t-barres { opacity:1; }
.s-tele .t-cadre[data-ch="0"] { --by:40%; --bh:26%; --e:5px; --p:13px; }
.s-tele .t-cadre[data-ch="1"] { --by:14%; --bh:22%; --e:9px; --p:18px; }
.s-tele .t-cadre[data-ch="2"] { --by:30%; --bh:46%; --e:12px; --p:30px; }
.s-tele .t-num { position:absolute; right:-1.2vw; top:-5.4rem; font:400 clamp(11rem, 25vw, 25rem)/.8 'Anton',sans-serif; color:transparent; -webkit-text-stroke:2px var(--t-encre); letter-spacing:-.01em; overflow:hidden; height:.82em; padding:0 .03em; opacity:0; transition:opacity .8s .6s; user-select:none; }
.s-tele.vu .t-num { opacity:.9; }
.s-tele .t-num span { display:block; }
.s-tele .t-cadre.zap .t-num span { animation:t-roule .44s steps(5) both; }
.s-tele .t-cadre.zap .t-barres { animation:t-saute .44s steps(4) both; }
@keyframes t-roule { 0% { transform:translateY(-70%); } 60% { transform:translateY(34%); } 100% { transform:none; } }
@keyframes t-saute { 0% { transform:translateY(-22%) skewX(-14deg); } 50% { transform:translateY(16%) skewX(9deg); } 100% { transform:none; } }

.s-tele .t-bulle { position:fixed; z-index:45; left:0; top:0; pointer-events:none; background:var(--t-encre); color:var(--t-papier); padding:.25rem .55rem; font:700 .68rem 'Space Mono',monospace; letter-spacing:.05em; text-transform:uppercase; opacity:0; transition:opacity .15s; white-space:nowrap; }
.s-tele .t-bulle.on { opacity:1; }

/* la liste en clair (lecteur d'écran, repli sans WebGL, source des données) */
/* la boîte <details> fait toute la largeur et passerait devant la scène : seuls son titre et sa liste prennent les clics */
.s-tele .t-liste { position:relative; z-index:2; margin-top:1.6rem; pointer-events:none; }
.s-tele .t-liste > * { pointer-events:auto; }
.s-tele .t-liste summary { display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; font:700 .78rem 'Space Mono',monospace; letter-spacing:.06em; text-transform:uppercase; border-bottom:2px solid var(--t-encre); padding:.3rem 0; list-style:none; background:var(--t-papier); }
.s-tele .t-liste summary::-webkit-details-marker { display:none; }
.s-tele .t-liste summary::after { content:"+"; font-size:1.1rem; line-height:1; }
.s-tele .t-liste[open] summary::after { content:"–"; }
.s-tele .t-liste ol { list-style:none; margin:1.4rem 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 2.4rem; border-top:2px solid var(--t-encre); background:var(--t-papier); }
.s-tele .t-liste li { border-bottom:1px solid var(--t-filet); }
.s-tele .t-liste li.cache { display:none; }
.s-tele .t-liste li a { display:block; text-decoration:none; color:inherit; padding:.8rem 0; }
.s-tele .t-liste li a:hover h3 { background:var(--t-fluo); }
.s-tele .t-liste .t-cat { background:var(--t-encre); color:var(--t-fluo); padding:.1rem .4rem; margin-right:.5rem; }
.s-tele .t-liste h3 { font:700 .92rem/1.4 'Space Mono',monospace; text-transform:none; letter-spacing:0; margin:.45rem 0 .3rem; display:inline; }
.s-tele .t-liste .t-pied { display:block; color:var(--t-doux); margin-top:.3rem; }
.s-tele.sans-gl .t-plateau { min-height:0; grid-template-columns:minmax(0,1fr); }
.s-tele.sans-gl .t-scene, .s-tele.sans-gl .t-cadre, .s-tele.sans-gl .t-cmd, .s-tele.sans-gl .t-aide, .s-tele.sans-gl .t-legende, .s-tele.sans-gl .t-liste summary { display:none; }

@media (prefers-reduced-motion: reduce) {
  .s-tele *, .s-tele *::before, .s-tele *::after { animation:none !important; transition:none !important; }
  .s-tele .t-glisse, .s-tele .t-titre i { opacity:1; transform:none; }
}
@media (max-width:900px), (max-aspect-ratio:9/10) {
  .s-tele { padding:5rem 16px; }
  .s-tele .t-plateau { display:flex; flex-direction:column; gap:.7rem; min-height:0; }
  .s-tele .t-col { display:contents; }
  .s-tele .t-tete { position:relative; z-index:2; order:1; display:flex; flex-direction:column; gap:.4rem; }
  .s-tele .t-titre { font-size:clamp(3.4rem,17vw,5rem); }
  .s-tele .t-chapo { font-size:.86rem; line-height:1.4; max-width:none; }
  .s-tele .t-cadre { order:2; height:min(46svh, 106vw); min-height:300px; margin:0 -16px; }
  .s-tele .t-num { font-size:42vw; top:-1.4rem; right:0; -webkit-text-stroke-width:1.5px; }
  .s-tele .t-disque { width:min(104%, 50svh); top:50%; }
  .s-tele .t-legende { order:3; display:block; position:relative; z-index:2; border-left:4px solid var(--t-fluo); padding-left:.7rem; font-size:.8rem; line-height:1.4; min-height:5.4em; margin:0; }
  .s-tele .t-legende b { display:block; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--t-doux); font-weight:700; }
  .s-tele .t-legende small { font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--t-doux); }
  .s-tele .t-chaines { order:4; position:relative; z-index:2; flex-direction:row; max-width:none; border:2px solid var(--t-encre); border-radius:.6rem; overflow:hidden; background:var(--t-papier); }
  .s-tele .t-chaines li { flex:1; }
  .s-tele .t-chaines li + li { border-left:1px solid var(--t-filet); }
  .s-tele .t-chaines button { display:flex; flex-direction:column; align-items:center; gap:0; padding:.45rem .1rem .4rem; border-bottom:0; min-height:3.3rem; }
  .s-tele .t-chaines button[aria-pressed="true"] { padding-left:.1rem; }
  .s-tele .t-chaines button b { font-size:1.5rem; }
  .s-tele .t-chaines button span { font-size:.62rem; letter-spacing:.02em; white-space:nowrap; }
  .s-tele .t-chaines button small { display:none; }
  .s-tele .t-chaines button::before { inset:100% 0 0 0; transition:top .25s; z-index:0; }
  .s-tele .t-chaines button[aria-pressed="true"]::before { top:0; }
  .s-tele .t-chaines button > * { position:relative; z-index:1; }
  .s-tele .t-cmd { order:5; position:relative; z-index:2; max-width:none; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:.4rem; }
  .s-tele .t-cmd button, .s-tele .t-cmd a { min-height:3rem; padding:.4rem .2rem; font-size:.74rem; }
  .s-tele .t-cmd .t-zap { display:inline-flex; }
  .s-tele .t-cmd a { grid-column:span 3; }
  .s-tele .t-cmd .t-zoom { grid-column:span 2; }
  .s-tele.t-zoome .t-legende { opacity:0; pointer-events:none; } /* dans le zoom, l'écran dit déjà tout */
  .s-tele .t-aide { display:none; }
  .s-tele .t-liste ol { grid-template-columns:minmax(0,1fr); }
  /* téléphone : rien sous 13 px, le texte se lit sans zoomer */
  .s-tele .t-mono { font-size:.8rem; }
  .s-tele .t-chapo { font-size:1rem; line-height:1.5; }
  .s-tele .t-legende { font-size:1rem; line-height:1.45; }
  .s-tele .t-legende b, .s-tele .t-legende small { font-size:.78rem; }
  .s-tele .t-chaines button span { font-size:.72rem; }
  .s-tele .t-cmd button, .s-tele .t-cmd a { font-size:.82rem; }
  .s-tele .t-liste summary { font-size:.86rem; }
}