/* WCGEO-2209 heure-r1 : l'heure d'une webcam sous « A propos » (order:3), tm-owner passe a 4. */
/* + bouton r1 (24/09, BOUTON-PROPRIO-2409) : « Vous représentez ce média ? » est un bouton encadré, pas un bloc à filet : il retrouve son bord et sa marge du BAS, retirés par la règle `.co-bloc`. */
/* colonne-onglets-20260922-r1.css — la colonne de droite en onglets, 22/09/2026.
   r8 (22/09) : la colonne est positionnée et la section du salon ne l'est plus : la poignée du salon 2.1.1, en
   absolu, prend le coin bas droit de la COLONNE (comme la poignée du lecteur prend celui du lecteur). Deux mots.
   r7 (22/09) : la colonne « salon » prend la hauteur `--tchat-h` posée par la poignée du salon 2.1.0 (sinon celle
   du lecteur, comme avant) ; les messages du fil nu vont bord à bord (100 %). Deux règles, rien d'autre.
   r6 (22/09) : les onglets se dimensionnent à leur TEXTE (flex 1 1 auto) et se partagent le reste ; en tiers
   égaux (1 1 0), « Visualisations » se coupait en « Visualisati… » à 375 px. Seule différence avec la r1.
   Ne s'applique QUE sous `aside.stream-info[data-co-onglets]`, l'attribut que le module pose :
   sans lui (coupe-circuit, module absent), pas une règle d'ici ne touche la page.
   Les couleurs viennent des JETONS de l'Explorer (--ink, --line, --surface, --accent, --muted,
   --soft) : les thèmes jour/nuit et les styles suivent sans une ligne de thème ici.
   Les `!important` sont voulus et BORNÉS à cet attribut : en mode onglets, c'est ce module qui
   décide de la mise en page des blocs, pas leurs auteurs (colonne-ordre pose ses propres marges
   dans un <style> injecté APRÈS cette feuille, à égalité de spécificité). */

/* ── la colonne : une pile en flex, l'ordre visuel écrit ici, pas dans le DOM ── */
.stream-info[data-co-onglets]{position:relative;display:flex;flex-direction:column;box-sizing:border-box;min-height:var(--co-h,0px)}   /* r8 : la poignée du salon prend le coin de la colonne */
.stream-info[data-co-onglets="salon"]{height:max(var(--tchat-h,var(--co-h,420px)),420px)}   /* r7 : la poignée du salon pose --tchat-h */
.stream-info[data-co-onglets] > .co-cache{display:none!important}
.stream-info[data-co-onglets] > .co-onglets{order:-1}
.stream-info[data-co-onglets] > .media-about{order:1}
.stream-info[data-co-onglets] > .stream-rating{order:2}
.stream-info[data-co-onglets] > .media-specific[data-kind="webcam"]{order:3}
.stream-info[data-co-onglets] > .tm-owner{order:4;align-self:flex-start}
.stream-info[data-co-onglets] > .media-settings{order:4}
.stream-info[data-co-onglets] > .media-specific{order:5}
.stream-info[data-co-onglets] > .tchat{order:6}
.stream-info[data-co-onglets] > .co-bloc:not(.media-about):not(.stream-rating):not(.tm-owner):not(.media-settings):not(.media-specific):not(.tchat){order:9}

/* ── les blocs : plus de filet SOUS eux (le dernier visible en portait un au bord de la carte) ;
      un filet AU-DESSUS de chaque bloc visible sauf le premier, que le module marque ── */
.stream-info[data-co-onglets] > .co-bloc{margin:0!important;padding-bottom:0!important;border-bottom:0!important}
/* bouton r1 : `a.tm-owner` garde le cadre complet de la feuille de l'Explorer (1 px, 10 px) ; la règle ci-dessus ne vise que les blocs à filet. Même spécificité, écrite APRÈS : elle gagne. */
.stream-info[data-co-onglets] > .tm-owner{padding-bottom:10px!important;border-bottom:1px solid var(--line)!important}
.stream-info[data-co-onglets] > .co-bloc:not([data-co-premier]){margin-top:16px!important;padding-top:16px!important;border-top:1px solid var(--line)!important}
.stream-info[data-co-onglets] > .tm-owner:not([data-co-premier]){padding-top:10px!important;border-top:1px solid var(--line)!important}
.stream-info[data-co-onglets] > .media-about > .eyebrow{margin-top:0}
.stream-info[data-co-onglets] > .media-specific > h2{margin-top:0}

/* ── la barre ── */
.stream-info[data-co-onglets] > .co-onglets{display:flex;gap:4px;margin:0 0 16px;padding:4px;border-radius:14px;background:var(--soft,#eaf0fa)}
/* 13,5 px et 6 px de marge : à 1024 px la colonne fait 288 px, soit trois onglets de 77 px ;
   « À propos » et « Réglages » y tiennent entiers, un titre long (« Visualisations ») s'abrège. */
.co-onglets > .co-onglet{flex:1 1 auto;min-width:0;min-height:44px;padding:0 6px;border:0;border-radius:10px;background:transparent;color:var(--muted,var(--ink));font:600 13.5px/1.2 system-ui,sans-serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.co-onglets > .co-onglet[hidden]{display:none}
.co-onglets > .co-onglet > .co-libelle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-onglets > .co-onglet[aria-pressed="true"]{background:var(--surface,#fff);color:var(--accent,#2456c6);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.co-onglets > .co-onglet:hover{color:var(--ink)}
.co-onglets > .co-onglet:focus-visible{outline:2px solid var(--accent,#2456c6);outline-offset:2px}
.co-badge{flex:0 0 auto;min-width:18px;height:18px;box-sizing:border-box;padding:0 5px;border-radius:9px;background:var(--accent,#2456c6);color:var(--surface,#fff);font:700 11px/18px system-ui,sans-serif;text-align:center}
.co-badge:empty{display:none}
.co-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── le salon dans la colonne : il remplit la carte, le fil défile, le titre est porté par l'onglet ── */
.stream-info[data-co-onglets] > .tchat{position:static;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;margin:0!important;padding:0!important;border-top:0!important}   /* r8 : pas la section, la colonne */
.stream-info[data-co-onglets] > .tchat > .tchat-entete{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.stream-info[data-co-onglets] > .tchat > .tchat-corps{flex:1 1 auto;min-height:160px;max-height:none}
.stream-info[data-co-onglets] .tchat-msg{max-width:100%}   /* r7 : fil nu, bord à bord */
.stream-info[data-co-onglets] .tchat-form{gap:6px;margin-top:10px}
.stream-info[data-co-onglets] .tchat-etat{margin-top:6px}

/* ── grand écran : saisie compacte, l'envoi en icône seule (son libellé reste lu par les lecteurs d'écran) ── */
@media (min-width:761px){
  .stream-info[data-co-onglets] .tchat-form input[type=text]{min-height:40px;padding:8px 12px;font-size:14px}
  .stream-info[data-co-onglets] .tchat-ligne{flex-wrap:nowrap;align-items:center}
  .stream-info[data-co-onglets] .tchat-ligne textarea{height:44px;min-height:44px;padding:11px 12px;font-size:14px;resize:none}
  .stream-info[data-co-onglets] .tchat-compteur{display:none}
  .stream-info[data-co-onglets] .tchat-compteur.tchat-compteur-bas{display:block}
  .stream-info[data-co-onglets] .tchat-envoyer{flex:0 0 44px;width:44px;padding:0;justify-content:center}
  .stream-info[data-co-onglets] .tchat-envoyer > span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
}

/* ── téléphone : la colonne est sous le lecteur, pleine largeur ; pas de hauteur imposée ── */
@media (max-width:760px){
  .stream-info[data-co-onglets]{min-height:0}
  .stream-info[data-co-onglets="salon"]{height:auto}
  .stream-info[data-co-onglets] > .tchat > .tchat-corps{flex:0 0 auto;max-height:52vh}
}
@media (prefers-reduced-motion:reduce){.co-onglets *{transition:none!important}}

/* 28/09/2026 : épisodes sous la description et la note ; heure webcam préservée. */
.stream-info[data-co-onglets] > .media-specific[data-kind="podcast"]{order:3}