/* La télé sur sa page autonome (ronde-17/actu, bâtie par _build/autonomes17.py) : tout tient dans l'écran, sans défilement.
   Rien ici ne touche l'accueil : tout est sous body.autonome. Le canvas couvre la section ; la télé se cadre sur .t-cadre,
   et l'antenne (au-dessus) comme le flight case (en dessous) débordent du cadre : d'où ses marges. */
body.autonome .s-tele { height:100%; padding:0 3vw; display:flex; flex-direction:column; }
body.autonome .s-tele .t-plateau { flex:1; min-height:0; }
body.autonome .s-tele .t-cadre { margin:14vh 0 13vh; }
body.autonome .s-tele .t-col { gap:.95rem; }
body.autonome .s-tele .t-titre { font-size:clamp(3.4rem, min(9vw, 15vh), 9rem); }
body.autonome .s-tele .t-num { font-size:clamp(9rem, min(25vw, 36vh), 25rem); top:-.18em; }
/* la liste en clair : son titre reste en bas ; ouverte, elle se déplie PAR-DESSUS la page (elle défile dans sa boîte, pas la page) */
body.autonome .s-tele .t-liste { position:static; flex:none; margin:0; padding:.1rem 0 .45rem; }
body.autonome .s-tele .t-liste summary { position:relative; z-index:2; }
body.autonome .s-tele .t-liste ol { position:absolute; left:3vw; right:3vw; bottom:2.6rem; margin:0; max-height:calc(100% - 3.4rem); overflow:auto; border:2px solid var(--t-encre); padding:0 1rem; z-index:6; overscroll-behavior:contain; }
@media (max-height:800px) { body.autonome .s-tele .t-aide { display:none; } }
@media (max-height:660px) { body.autonome .s-tele .t-chapo { display:none; } }
/* sans WebGL : la liste est la page, elle défile normalement */
body.autonome:has(.s-tele.sans-gl) { height:auto; min-height:100dvh; overflow:auto; }
body.autonome .s-tele.sans-gl { height:auto; padding-top:1.5rem; padding-bottom:1.5rem; }
body.autonome .s-tele.sans-gl .t-liste ol { position:static; max-height:none; border:0; border-top:2px solid var(--t-encre); padding:0; }

@media (max-width:900px), (max-aspect-ratio:9/10) {
  body.autonome .s-tele { padding:0 16px; }
  body.autonome .s-tele .t-plateau { gap:.5rem; }
  /* le titre est dans l'en-tête de la page : celui de la section reste pour les lecteurs d'écran */
  body.autonome .s-tele .t-tete { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  body.autonome .s-tele .t-cadre { flex:1; height:auto; min-height:0; margin:3.4rem -16px 0; }
  body.autonome .s-tele .t-num { font-size:min(42vw, 24vh); top:-3rem; }
  body.autonome .s-tele .t-legende { flex:none; height:7.4rem; min-height:0; overflow:hidden; font-size:.9rem; line-height:1.38; }
  body.autonome .s-tele .t-chaines button { min-height:3rem; padding:.35rem .1rem .3rem; }
  body.autonome .s-tele .t-cmd button, body.autonome .s-tele .t-cmd a { min-height:2.75rem; }
  /* dans le zoom, la scène passe derrière les commandes : elles gardent un fond de papier plein */
  body.autonome .s-tele .t-cmd, body.autonome .s-tele .t-liste { background:var(--t-papier); margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px; }
  body.autonome .s-tele .t-cmd { box-shadow:0 -.5rem 0 var(--t-papier), 0 .5rem 0 var(--t-papier); }
  body.autonome .s-tele .t-liste { padding-top:.15rem; padding-bottom:.3rem; }
  body.autonome .s-tele .t-liste ol { left:16px; right:16px; }
  body.autonome .s-tele.sans-gl .t-tete { position:static; width:auto; height:auto; clip-path:none; }
}