:root{
  /* Couleurs */
  --bg:#0B0D10; --surface:#14181D; --surface-2:#1B2129; --border:#232A33;
  --text:#F2F4F6; --muted:#8A97A3; --accent:#FF4D33; --ok:#35D07F; --danger:#ff5c5c;

  /* Polices */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Échelle typographique — un pas cohérent du plus discret au plus affirmé */
  --fs-2xs: 10.5px;  /* horodatages, micro-libellés */
  --fs-xs:  11.5px;  /* méta secondaire */
  --fs-sm:  12.5px;  /* texte secondaire, descriptions */
  --fs-base:14px;    /* texte courant, boutons */
  --fs-md:  15px;    /* titres de carte, titres de fenêtre */
  --fs-lg:  18px;    /* titres de section */
  --fs-xl:  22px;    /* accents ponctuels */
  --fs-2xl: 28px;    /* marque */

  --lh-tight:   1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Échelle d'espacement — multiples de 4px, pour un rythme régulier */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  /* Rayons */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--sans);}
body{font-size:var(--fs-base);line-height:var(--lh-normal);}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.layout{display:flex; align-items:flex-start;}
.app{max-width:1040px;margin:0 auto;padding:var(--sp-6) var(--sp-5) 80px; flex:1; min-width:0;}

/* ---------- Barre latérale (PC) / tiroir (mobile) ---------- */
/* Largeur fluide plutôt que fixe : 240px sur un petit écran PC (comme avant),
   grandit graduellement jusqu'à 320px sur un très grand moniteur — une barre
   à largeur fixe se sent étroite/serrée sur un écran haute résolution. */
.sidebar{
  flex:0 0 auto; width:clamp(240px, calc(180px + 6vw), 320px);
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:sticky; top:0; align-self:flex-start;
  height:100vh; height:100dvh; overflow:hidden; /* le défilement se fait dans .sidebar-scroll, pas ici */
}
/* Contient tout sauf .sidebar-links (voir plus bas) : c'est CETTE zone qui
   défile si le contenu dépasse, pour que les liens légaux, eux, restent
   toujours visibles en bas de la barre latérale. */
.sidebar-scroll{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:var(--sp-3);
  padding:var(--sp-5) var(--sp-4) var(--sp-4);
}
.sidebar-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-2);}
.sidebar-brand{font-family:var(--mono); font-weight:var(--fw-bold); font-size:20px; letter-spacing:-.4px;}
.sidebar-brand span{color:var(--accent);}
.sidebar-close{display:none;}
.sidebar-btn{width:100%; justify-content:center;}

/* ---------- Recherche (barre latérale) ---------- */
.sidebar-search{
  position:relative; display:flex; align-items:center;
}
.sidebar-search-icon{
  position:absolute; left:var(--sp-3); font-size:var(--fs-sm); color:var(--muted); pointer-events:none;
}
.sidebar-search input{
  width:100%; min-width:0; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text); font-family:var(--sans); font-size:var(--fs-sm);
  padding:9px 30px 9px 30px;
  -webkit-appearance:none; appearance:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sidebar-search input::placeholder{color:var(--muted); opacity:1;}
.sidebar-search input:focus{outline:none; border-color:var(--accent);}
/* On cache le bouton natif d'effacement du navigateur (Chrome/Edge/Safari ET
   Firefox) puisqu'on affiche notre propre bouton « ✕ » — sinon les deux se
   superposent et grugent encore plus l'espace déjà limité du texte. */
.sidebar-search input::-webkit-search-cancel-button,
.sidebar-search input::-webkit-search-decoration{ -webkit-appearance:none; display:none; }
.sidebar-search input::-ms-clear{ display:none; }
.sidebar-search-clear{
  position:absolute; right:6px; background:transparent; border:none; color:var(--muted);
  font-size:var(--fs-xs); padding:6px; border-radius:6px; line-height:1;
}
.sidebar-search-clear:hover{color:var(--text); background:var(--surface);}

/* ---------- Lecture en cours (plein écran PC) ---------- */
/* Visible seulement quand toggleFullscreen() y déplace le titre/les boutons —
   jamais superposé à la vidéo puisque c'est une zone complètement séparée. */
.sidebar-now-playing{
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:var(--sp-3);
}
.snp-label{
  margin:0 0 4px; font-family:var(--mono); font-size:var(--fs-2xs); color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em;
}
.snp-back-home{
  display:flex; align-items:center; gap:4px; width:100%;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text); font-size:var(--fs-xs); font-weight:var(--fw-semibold);
  padding:7px var(--sp-2); margin-bottom:var(--sp-2);
}
.snp-back-home:hover{border-color:#3a4450; background:var(--surface-2);}
.snp-title{
  margin:0 0 4px; font-size:var(--fs-sm); font-weight:var(--fw-semibold);
  line-height:var(--lh-normal); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
/* Nom du créateur, sous le titre — voir point 2 des correctifs : déplacé ici
   depuis la vignette d'accueil, cliquable pour filtrer sans sortir du plein
   écran (voir setUserFilterFromPlayer() dans app.js). */
.snp-username{
  display:none; align-items:center; background:transparent; border:none; padding:0;
  margin:0 0 var(--sp-3); color:var(--muted); font-size:var(--fs-xs); cursor:pointer; text-align:left;
}
.snp-username:hover{color:var(--accent); text-decoration:underline;}
/* Le bouton .comment-cta déplacé ici garde son HTML/JS intact — seule sa
   disposition change : empilé verticalement pour tenir dans la largeur
   étroite de la barre latérale plutôt que côte à côte. */
.snp-actions .comment-cta{ flex-direction:column; padding:0; gap:var(--sp-2); }
.snp-actions .comment-cta .cta-main,
.snp-actions .comment-cta .player-nav-controls{ flex:0 0 auto; width:100%; }

/* ---------- Rail « à suivre » (plein écran PC uniquement) ----------
   Empilé verticalement dans la barre latérale — donc JAMAIS par-dessus la
   vidéo — avec un espacement régulier entre chaque élément, comme demandé :
   pub, vignette précédente (si disponible), vignette en cours, puis les
   quelques prochaines. Voir renderQueueRail() dans app.js. */
.sidebar-queue-rail{
  display:flex; flex-direction:column; gap:var(--sp-3);
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:var(--sp-3);
}
/* Boîte séparée avec sa propre barre de défilement dès que le contenu dépasse
   — la pub et le reste de la barre latérale (recherche, catégories, etc.)
   restent, eux, toujours pleinement visibles sans avoir à défiler. */
.queue-rail-list{display:flex; flex-direction:column; gap:var(--sp-3); max-height:420px; overflow-y:auto; padding-right:2px;}
.rail-item{
  display:flex; gap:var(--sp-2); align-items:center; text-align:left; width:100%;
  background:transparent; border:1px solid transparent; border-radius:var(--radius-sm); padding:4px;
  font-family:var(--sans);
}
/* Pas de transform ici non plus (voir la note plus haut sur .nav-ctrl) —
   seuls le fond et la bordure changent au survol/à l'état actif. */
.rail-item.rail-clickable:hover{background:var(--surface); border-color:var(--border);}
.rail-item.active{border-color:var(--accent); background:var(--surface); cursor:default;}
.rail-thumb{flex:0 0 auto; width:64px; height:92px; border-radius:6px; overflow:hidden; background:#000; position:relative;}
.rail-thumb video{width:100%; height:100%; object-fit:cover;}
.rail-badge{
  position:absolute; top:3px; left:3px; font-size:var(--fs-2xs); font-family:var(--mono);
  background:rgba(0,0,0,.65); color:#fff; padding:1px 5px; border-radius:4px;
}
.rail-meta{min-width:0; flex:1;}
.rail-title{
  font-size:var(--fs-xs); font-weight:var(--fw-semibold); line-height:var(--lh-tight); color:var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rail-sub{font-size:var(--fs-2xs); color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.sidebar-accordion{margin-top:var(--sp-2); border-top:1px solid var(--border); padding-top:var(--sp-3);}
.accordion-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:transparent; border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:var(--sp-2) var(--sp-3); color:var(--text); font-weight:var(--fw-semibold); font-size:var(--fs-base);
}
.accordion-toggle:hover{border-color:#3a4450;}
.accordion-chevron{transition:transform .2s;}
.accordion-toggle.open .accordion-chevron{transform:rotate(180deg);}
.accordion-panel{display:none; padding:var(--sp-3) var(--sp-2) 0;}
.accordion-panel.open{display:block;}
.accordion-empty{color:var(--muted); font-size:var(--fs-sm); font-style:italic; margin:0;}
.category-item{
  display:block; width:100%; text-align:left;
  background:transparent; border:none; color:var(--muted);
  padding:7px var(--sp-2); font-size:var(--fs-sm); font-family:var(--sans);
  border-radius:6px;
}
.category-item:hover{background:var(--surface-2); color:var(--text);}
.category-item.active{color:var(--accent); font-weight:var(--fw-semibold);}
.sidebar-backdrop{display:none;}
.sidebar-menu-btn{display:none;}

@media (max-width:900px){
  .sidebar{
    position:fixed; left:0; top:0; bottom:0; z-index:90; width:260px;
    transform:translateX(-100%); transition:transform .25s ease;
    box-shadow:0 0 40px rgba(0,0,0,.5);
  }
  .sidebar.open{transform:translateX(0);}
  .sidebar-close{display:flex;}
  .sidebar-menu-btn{display:flex;}
  .sidebar-backdrop{
    display:none; position:fixed; inset:0; z-index:89;
    background:rgba(4,5,6,.7);
  }
  .sidebar-backdrop.show{display:block;}
}

/* ---------- Navigation façon app mobile ---------- */
/* Visible seulement sur petit écran ; sur desktop, les actions restent
   accessibles via la barre du haut habituelle. */
.bottom-nav{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--surface); border-top:1px solid var(--border);
  padding:var(--sp-2) var(--sp-5) calc(var(--sp-2) + env(safe-area-inset-bottom));
  align-items:center; justify-content:space-around;
}
.bn-item{
  background:transparent; border:none; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:var(--sp-2) var(--sp-3); font-size:var(--fs-2xs); font-family:var(--mono);
  font-weight:var(--fw-medium); letter-spacing:.02em;
  transition:color .15s;
}
.bn-item.active, .bn-item:active{color:var(--text);}
.bn-icon{font-size:20px; line-height:1;}
.bn-center{margin-top:-22px;}
.bn-icon-center{
  width:48px; height:48px; border-radius:50%;
  background:var(--accent); color:#1a0904;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:var(--fw-bold); line-height:1;
  box-shadow:0 4px 14px rgba(255,77,51,.4);
}
/* Redondant avec la barre latérale (PC) et la nav du bas (mobile) — gardé dans
   le DOM car sidebarAddBtn/navAdd déclenchent encore un clic dessus. */
#openUpload{display:none;}
@media (max-width:700px){
  .bottom-nav{display:flex;}
  .app{padding-bottom:88px;}
}

/* ---------- En-tête / marque ---------- */
header.top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
  border-bottom:1px solid var(--border);padding-bottom:var(--sp-4);margin-bottom:var(--sp-6);}
.top-left{display:flex;align-items:center;gap:var(--sp-3);}
.brand{display:flex;align-items:baseline;gap:var(--sp-3);}
.brand .mark{font-family:var(--mono);font-weight:var(--fw-bold);font-size:var(--fs-2xl);
  letter-spacing:-.6px;margin:0;display:inline;}
.brand .mark span{color:var(--accent);}
.brand .tag{color:var(--muted);font-size:var(--fs-sm);font-family:var(--mono);font-weight:var(--fw-medium);}
header.top .desc{color:var(--muted);font-size:var(--fs-sm);margin:var(--sp-1) 0 0;max-width:420px;line-height:var(--lh-normal);}
.auth-area{display:none;} /* redondant avec la barre latérale — gardé dans le DOM car le code s'y fie encore */

/* ---------- Boutons ---------- */
.btn{border:1px solid var(--border);background:var(--surface);color:var(--text);padding:9px var(--sp-4);
  border-radius:var(--radius-sm);font-size:var(--fs-base);font-weight:var(--fw-semibold);
  display:inline-flex;align-items:center;gap:6px;transition:border-color .15s,background .15s;}
.btn:hover{border-color:#3a4450;background:var(--surface-2);}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#1a0904;}
.btn:disabled{opacity:.45;cursor:not-allowed;}

/* ---------- Fil de vidéos ---------- */
.section-label{font-family:var(--mono);font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--text);
  margin:0 0 var(--sp-4);letter-spacing:-.2px;}
.feed{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-4);}
@media (max-width:860px){.feed{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.feed{grid-template-columns:repeat(2,1fr);}}

/* ---------- Page d'accueil : sections par catégorie (carrousels) ---------- */
.home-section{margin-bottom:var(--sp-8);}
.home-section-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  margin-bottom:var(--sp-3);}
/* Titre de section : <button> cliquable pour une vraie catégorie (mène à sa page,
   réutilise setCategoryFilter() — même mécanisme que les catégories de la barre
   latérale), <span> simple pour « À la une » qui n'a pas de page dédiée. */
.home-section-title{font-family:var(--mono);font-size:var(--fs-lg);font-weight:var(--fw-bold);
  color:var(--text);letter-spacing:-.2px;background:none;border:none;padding:0;margin:0;
  display:inline-flex;align-items:center;gap:6px;}
button.home-section-title{cursor:pointer;}
button.home-section-title:hover{color:var(--accent);}
.home-section-title .chev{font-size:var(--fs-sm);opacity:.6;}
.home-section-arrows{display:flex;gap:6px;flex:0 0 auto;}
.row-arrow{background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-base);line-height:1;flex:0 0 auto;}
.row-arrow:hover{background:var(--surface);border-color:#3a4450;color:var(--accent);}
/* Rangée déroulante horizontalement — scrollbar cachée car les flèches (et le
   glissement tactile/trackpad, natif à overflow-x:auto) suffisent à naviguer. */
.home-row{display:flex;gap:var(--sp-4);overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:none;padding-bottom:2px;}
.home-row::-webkit-scrollbar{display:none;}
.home-row .card{flex:0 0 auto;width:170px;}
/* Section « à la une » : cartes plus grosses, 4 à la fois plutôt que ~5. */
.home-row.featured-row .card{width:230px;}
@media (max-width:860px){
  .home-row .card{width:150px;}
  .home-row.featured-row .card{width:190px;}
}
@media (max-width:560px){
  .home-row .card{width:130px;}
  .home-row.featured-row .card{width:160px;}
}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;
  text-align:left;padding:0;color:var(--text);display:flex;flex-direction:column;
  transition:border-color .15s, box-shadow .15s;
  animation:cardIn .35s ease backwards;}
@keyframes cardIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
/* Effet de survol fait avec box-shadow, pas transform : la vignette contient
   une vraie vidéo (avec la lecture au survol), et transform sur cette carte
   la forcerait dans sa propre couche de composition PENDANT la lecture —
   exactement le même problème que celui du lecteur (voir plus bas, .overlay
   .panel) — au pire moment possible, puisque c'est justement à ce moment-là
   (mouseenter) que la vidéo démarre sa lecture. */
.card:hover{border-color:#3a4450;box-shadow:0 6px 14px rgba(0,0,0,.35);}
.card .thumb{position:relative;aspect-ratio:9/13;background:#000;overflow:hidden;}
.card video{width:100%;height:100%;object-fit:cover;display:block;}
.card .playmark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s;background:rgba(0,0,0,.15);font-size:var(--fs-xl);}
.card:hover .playmark{opacity:1;}
.delete-post-btn{
  position:absolute;top:var(--sp-2);right:var(--sp-2);z-index:3;
  width:28px;height:28px;border-radius:var(--radius-sm);
  background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.2);color:#fff;
  font-size:var(--fs-base);display:flex;align-items:center;justify-content:center;
}
.delete-post-btn:hover{background:var(--danger);border-color:var(--danger);}
.card .meta{padding:var(--sp-3);}
.card .meta h3{font-size:var(--fs-md);font-weight:var(--fw-semibold);margin:0 0 var(--sp-1);
  line-height:var(--lh-tight);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card .meta .count{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);
  display:flex;gap:var(--sp-3);align-items:center;margin-top:var(--sp-2);}
.post-title-link{cursor:pointer;}
.post-title-link:hover{color:var(--accent);text-decoration:underline;}
/* Pictogrammes pouce en l'air / pouce en bas — sous les vignettes d'accueil
   (remplace l'ancien texte « 💬 N réponses · @auteur ») et, sur téléphone/
   tablette, en mode lecture à la place du texte « Aucune réponse... »
   (voir sentiPictoHtml() dans app.js). */
.senti-picto{display:inline-flex;align-items:center;gap:4px;}
.senti-picto.senti-neg{color:var(--muted);}
.empty-feed{color:var(--muted);font-size:var(--fs-base);padding:var(--sp-8) 0;text-align:center;grid-column:1/-1;}

/* ---------- Fenêtres modales ---------- */
.overlay{position:fixed;inset:0;background:rgba(4,5,6,.97);backdrop-filter:blur(14px);
  display:none;align-items:center;justify-content:center;z-index:50;padding:var(--sp-5);
  opacity:0;transition:opacity .2s ease;}
/* Le lecteur reste "en dessous" — connexion/ajout/réponse doivent toujours
   pouvoir s'afficher par-dessus lui quand les deux sont visibles en même temps
   (ex: on quitte le plein écran pour se connecter, sans fermer le lecteur). */
#playerOverlay{z-index:50;}
#authOverlay, #uploadOverlay, #recOverlay{z-index:55;}
.overlay.show{display:flex;opacity:1;}
@starting-style{ .overlay.show{opacity:0;} }
.overlay .panel{transition:transform .2s ease, opacity .2s ease;transform:scale(.96);opacity:0;}
/* IMPORTANT : transform:none (pas scale(1)) une fois affiché. scale(1) est
   visuellement identique à aucune transformation, mais reste, au sens CSS,
   une transformation active — ce qui force ce panneau (donc la vidéo à
   l'intérieur, y compris en plein écran) dans sa propre couche de
   composition en PERMANENCE tant que le lecteur reste ouvert, pas
   seulement pendant l'animation d'ouverture de 0,2s. Ça empêche le
   navigateur d'utiliser son chemin d'affichage vidéo direct/accéléré, et le
   coût de composition qui reste augmente alors avec le nombre de pixels
   affichés — exactement le lag qui suit le niveau de zoom. transform:none
   anime de la même façon (scale(.96) → aucune transformation est traité
   comme scale(.96) → scale(1) par le navigateur), mais ne laisse plus rien
   d'actif une fois l'ouverture terminée. */
.overlay.show .panel{transform:none;opacity:1;}
@starting-style{ .overlay.show .panel{transform:scale(.96);opacity:0;} }
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  width:100%;max-width:420px;
  max-height:min(92vh, 780px);
  max-height:min(92dvh, 780px);
  overflow:auto;}

/* Panneau du LECTEUR VIDÉO uniquement : hauteur calculée sur l'écran réel (pas 92vh fixe),
   pour que les boutons restent toujours visibles sans défiler, sur iPhone comme sur TV. */
#playerPanel{
  max-width:min(94vw, 560px);
  height:min(100vh - var(--sp-6), 860px);
  height:min(100dvh - var(--sp-6), 860px);
  max-height:min(100vh - var(--sp-6), 860px);
  max-height:min(100dvh - var(--sp-6), 860px);
  display:flex;
  flex-direction:row; /* rangée pour pouvoir accueillir la barre latérale à gauche en plein écran */
  overflow:hidden;
}
.player-content{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center;}
.player-content > *{width:100%; max-width:560px;}
/* Quand la barre latérale est déplacée ici (plein écran PC), elle garde son
   style normal — juste une positition statique plutôt que collante, puisque
   le contexte de défilement est différent à l'intérieur du plein écran natif. */
#playerPanel.is-fullscreen > .sidebar{
  position:static; height:100%; flex:0 0 auto;
}
#playerPanel.is-fullscreen{
  max-width:100vw; width:100vw;
  height:100vh; max-height:100vh;
  border-radius:0;
  background:#000;
}
#playerPanel .panel-head{flex:0 0 auto;}
#playerPanel .comment-cta{flex:0 0 auto;}
#playerPanel .comments-strip{flex:0 1 auto;overflow-y:auto;max-height:160px;}

/* ---------- Plein écran PC ----------
   Historique : un design « façon YouTube Shorts » (titre + boutons +
   réponses flottant en permanence SUR la vidéo) a été essayé puis retiré —
   il provoquait un vrai lag, probablement en empêchant le navigateur
   d'utiliser son affichage vidéo accéléré dès qu'un élément est superposé
   à l'image. La solution retenue : le titre et les boutons « Répondre en
   vidéo »/« Suivant » sont déplacés (par app.js, pas dupliqués) dans la
   barre latérale — voir .sidebar-now-playing — donc jamais sur la vidéo.
   Les icônes ✕/⛶ sont dans une bande fine tout en haut, EN DEHORS de la
   vidéo (jamais superposées à l'image — voir la note plus bas, ça a causé
   exactement le même problème de lag/déchirure une 2e fois). */
#playerPanel.is-fullscreen .panel-head{
  /* IMPORTANT : remis dans le flux normal (plus du tout position:absolute
     par-dessus la vidéo). Même seulement 2 petites icônes suffisent, si
     elles sont superposées à l'image et changent d'opacité à chaque
     mousemove, à empêcher le navigateur d'utiliser son chemin d'affichage
     vidéo matériel direct en plein écran — c'est exactement ce qui avait
     causé le lag + la déchirure d'image (tearing) avec le premier design
     "façon YouTube Shorts", et c'est revenu pour la même raison ici, en
     plus petit. La seule config confirmée sans lag/sans déchirure est
     celle où RIEN n'est dessiné par-dessus la vidéo — donc bande fine,
     non superposée, comme ceci : */
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:flex-end;
  width:100%; max-width:none; background:transparent; border-bottom:none;
  padding:6px var(--sp-3);
}
#playerPanel.is-fullscreen .panel-head h2{ display:none; } /* le titre est dans la barre latérale */
#playerPanel.is-fullscreen .panel-head-actions .icon-btn{
  background:rgba(255,255,255,.08); color:#fff; border-radius:8px;
}
#playerPanel.is-fullscreen .panel-head-actions .icon-btn:hover{
  background:rgba(255,255,255,.16); color:#fff;
}
/* La vidéo est plus grande en plein écran (jusqu'à 820px au lieu de 560px
   dans la petite fenêtre de lecture normale) — sans reproduire le design
   plein-cadre/superposé qui causait le lag : c'est toujours le même
   agencement sûr en colonne (.player-video-wrap garde flex:1 1 auto,
   position:relative), seule la limite de largeur change. */
#playerPanel.is-fullscreen .player-video-wrap{
  max-width:min(92vw, 820px);
}
/* Le petit repère « vidéo »/« Réponse — @untel » avec le point rouge qui
   clignote, et la bande de réponses sous la vidéo (compteur + miniatures),
   sont retirés en plein écran pour dégager encore plus d'espace — le titre
   et les boutons sont déjà dans la barre latérale, donc plus rien ne
   manque, juste moins de texte superposé à l'image. */
#playerPanel.is-fullscreen .now-playing-tag{ display:none; }
#playerPanel.is-fullscreen .comments-strip{ display:none; }
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4);
  border-bottom:1px solid var(--border);}
.panel-head-actions{display:flex;gap:2px;}
.panel-head h2{font-size:var(--fs-md);font-weight:var(--fw-bold);margin:0;font-family:var(--mono);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.icon-btn{background:transparent;border:none;color:var(--muted);font-size:var(--fs-lg);
  padding:4px var(--sp-2);border-radius:6px;}
.icon-btn:hover{background:var(--surface-2);color:var(--text);}
.panel-body{padding:var(--sp-4);}

#playerPanel .player-video-wrap{
  position:relative;background:#000;
  flex:1 1 auto;
  min-height:0; /* essentiel pour que le flex puisse rétrécir correctement dans le panneau */
}
.player-video-wrap video{width:100%;height:100%;object-fit:contain;display:block;background:#000;}
.now-playing-tag{position:absolute;top:var(--sp-3);left:var(--sp-3);font-family:var(--mono);font-size:var(--fs-xs);
  background:rgba(0,0,0,.6);padding:3px var(--sp-2);border-radius:6px;display:flex;align-items:center;gap:6px;}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 1.1s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.tap-indicator{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.5);
  color:#fff;font-size:var(--fs-xl);display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.tap-indicator.show{opacity:1;}

/* ---------- Bannière d'installation ---------- */
.install-banner{
  position:fixed; left:var(--sp-3); right:var(--sp-3); bottom:var(--sp-3); z-index:70;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:var(--sp-3); display:none; align-items:center; gap:var(--sp-3);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.install-banner.show{display:flex;}
.install-banner-icon img{border-radius:9px; display:block;}
.install-banner-text{flex:1; display:flex; flex-direction:column; gap:2px; min-width:0;}
.install-banner-text strong{font-size:var(--fs-base);font-weight:var(--fw-semibold);}
.install-banner-text span{font-size:var(--fs-xs); color:var(--muted); line-height:var(--lh-normal);}
.install-banner .btn{padding:var(--sp-2) var(--sp-3); font-size:var(--fs-sm); white-space:nowrap;}
@media (max-width:420px){
  .install-banner-text span{display:none;} /* garde la bannière compacte sur petit écran */
}

/* ---------- Boutons d'action sous le lecteur ---------- */
.comment-cta{display:flex; gap:var(--sp-2); padding:var(--sp-3) var(--sp-3) 4px;}
.comment-cta .cta-main{flex:3; justify-content:center;}

/* Précédent / Rejouer / Suivant — pictogrammes seulement (voir aria-label
   pour le texte accessible). Pas de transform sur :hover — une transition
   sur transform, même minime, a déjà causé une régression de lag/déchirure
   plein écran ailleurs sur ce site (voir .card:hover) : ici comme là-bas,
   seuls la couleur et le fond changent. */
.player-nav-controls{display:flex; gap:6px; flex:2;}
.nav-ctrl{
  flex:1; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  font-size:var(--fs-lg); padding:9px 0; color:var(--text);
}
.nav-ctrl:hover{background:var(--surface); border-color:#3a4450; color:var(--text);}
.nav-ctrl:disabled{opacity:.35; cursor:not-allowed; background:var(--surface-2); border-color:var(--border);}
.nav-ctrl:disabled:hover{background:var(--surface-2); border-color:var(--border);}
#skipNext.nav-ctrl{background:var(--ok); border-color:var(--ok); color:#052b16; font-weight:var(--fw-bold);}
#skipNext.nav-ctrl:hover{filter:brightness(1.08); background:var(--ok); border-color:var(--ok);}

.btn.sentiment-pos{background:var(--ok); border-color:var(--ok); color:#052b16; font-weight:var(--fw-bold);}
.btn.sentiment-pos:hover{filter:brightness(1.08);}
.btn.sentiment-neg{background:var(--danger); border-color:var(--danger); color:#3a0a0a; font-weight:var(--fw-bold);}
.btn.sentiment-neg:hover{filter:brightness(1.08);}
.sentiment-reminder{
  text-align:center; font-size:var(--fs-sm); color:var(--muted); margin-top:var(--sp-3);
}

/* ---------- Bande de réponses ---------- */
.clip{position:relative;}
.clip .sentiment-dot{
  position:absolute; top:4px; right:4px; width:10px; height:10px; border-radius:50%;
  border:2px solid var(--surface); z-index:2;
}
.clip .sentiment-dot.positive{background:var(--ok);}
.clip .sentiment-dot.negative{background:var(--danger);}
.comments-strip{padding:var(--sp-3) var(--sp-4) var(--sp-4);}
.comments-strip h4{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);font-weight:var(--fw-semibold);
  text-transform:uppercase;letter-spacing:.06em;margin:0 0 var(--sp-2);}
.comments-row{display:flex;gap:var(--sp-2);overflow-x:auto;padding-bottom:4px;}
.clip{flex:0 0 auto;width:78px;text-align:center;}
.clip .thumb{width:78px;height:112px;border-radius:var(--radius-sm);overflow:hidden;background:#000;border:2px solid transparent;}
.clip.active .thumb{border-color:var(--accent);}
.clip video{width:100%;height:100%;object-fit:cover;}
.clip .name{font-size:var(--fs-2xs);color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.empty-comments{font-size:var(--fs-sm);color:var(--muted);font-style:italic;}
/* Toujours à jour (voir renderCommentsStrip() dans app.js) ; caché sur PC, où
   le h4#commentsCount texte suffit déjà — affiché seulement sur téléphone/
   tablette via la media query plus bas. */
.comments-count-picto{display:none;gap:var(--sp-3);align-items:center;margin:0 0 var(--sp-2);}

/* ---------- Enregistrement d'une réponse ---------- */
.rec-wrap{position:relative;aspect-ratio:9/13;background:#000;border-radius:var(--radius-md);overflow:hidden;}
.rec-wrap video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:block;}
.ring-wrap{position:absolute;top:var(--sp-3);left:var(--sp-3);width:56px;height:56px;}
.ring-wrap svg{transform:rotate(-90deg);}
.ring-bg{fill:none;stroke:rgba(255,255,255,.15);stroke-width:4;}
.ring-fg{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;}
.ring-time{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:var(--fs-sm);}
.rec-status{position:absolute;top:var(--sp-3);right:var(--sp-3);font-family:var(--mono);font-size:var(--fs-xs);
  background:rgba(0,0,0,.55);padding:3px var(--sp-2);border-radius:6px;display:flex;align-items:center;gap:6px;}
.rec-actions{display:flex;gap:var(--sp-2);margin-top:var(--sp-3);}
.rec-actions button{flex:1;justify-content:center;}
.field{margin-bottom:var(--sp-3);}
.field label{display:block;font-size:var(--fs-sm);color:var(--muted);margin-bottom:6px;}
.field input{width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  padding:10px var(--sp-3);border-radius:var(--radius-sm);font-size:var(--fs-base);}
.field-select{width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  padding:10px var(--sp-3);border-radius:var(--radius-sm);font-size:var(--fs-base);}
.choice-row{display:flex;gap:var(--sp-3);margin-bottom:var(--sp-4);}
.choice-row button{flex:1;flex-direction:column;padding:var(--sp-4) var(--sp-3);font-weight:var(--fw-semibold);font-size:var(--fs-base);gap:6px;}
.note{font-size:var(--fs-xs);color:var(--muted);line-height:var(--lh-relaxed);margin-top:var(--sp-6);
  border-top:1px solid var(--border);padding-top:var(--sp-4);}
.toast{position:fixed;bottom:var(--sp-6);left:50%;transform:translateX(-50%) translateY(10px);
  background:var(--surface);border:1px solid var(--ok);color:var(--text);padding:10px var(--sp-4);border-radius:var(--radius-sm);
  font-size:var(--fs-base);opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;z-index:80;
  max-width:90vw;text-align:center;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.is-error{border-color:var(--danger);}
.modstate{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-base);color:var(--muted);padding:10px 0;}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid var(--border);border-top-color:var(--accent);
  animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.errbox{background:#2a1512;border:1px solid #5c2018;color:#ffb9ab;padding:10px var(--sp-3);border-radius:var(--radius-sm);
  font-size:var(--fs-sm);line-height:var(--lh-relaxed);margin-bottom:var(--sp-3);}
.qr-fallback{text-align:center;padding-bottom:var(--sp-4);margin-bottom:var(--sp-4);border-bottom:1px solid var(--border);}
.qr-fallback-text{font-size:var(--fs-sm);color:var(--muted);margin:0 0 var(--sp-3);line-height:var(--lh-normal);}
.qr-fallback img{background:#fff;padding:var(--sp-2);border-radius:var(--radius-sm);}
.qr-retry-btn{
  display:none; margin:var(--sp-2) auto 0; background:transparent; border:none;
  color:var(--accent); font-size:var(--fs-xs); text-decoration:underline; padding:4px;
}
.qr-fallback-divider{font-size:var(--fs-xs);color:var(--muted);margin:var(--sp-3) 0 0;}
.tabs{display:flex;gap:6px;margin-bottom:var(--sp-4);}
.tabs button{flex:1;padding:var(--sp-2);border-radius:7px;border:1px solid var(--border);background:var(--surface-2);
  color:var(--muted);font-weight:var(--fw-semibold);font-size:var(--fs-base);}
.tabs button.active{background:var(--accent);color:#1a0904;border-color:var(--accent);}
/* Téléphone/tablette, en mode lecture (même seuil que le tiroir de la barre
   latérale, voir plus haut) : le but est de maximiser la place laissée à la
   vidéo, donc (1) le texte « 0 réponse(s) » ET « Aucune réponse pour
   l'instant » disparaissent tous les deux au profit des pictogrammes déjà
   utilisés sous les vignettes d'accueil, et (2) le bouton « Commenter »
   perd environ un tiers de sa hauteur. */
@media (max-width:900px){
  #commentsCount{display:none;}
  .empty-comments{display:none;}
  .comments-count-picto{display:flex;}
  /* align-self:center par précaution : .comment-cta est en display:flex sans
     align-items explicite (donc stretch par défaut), et les boutons
     pictogrammes juste à côté (.nav-ctrl) gardent leur padding d'origine —
     sans ceci, ce bouton pourrait être étiré à leur hauteur au lieu de sa
     propre hauteur réduite selon le moteur de rendu. */
  #openRecorder{padding-top:3px; padding-bottom:3px; align-self:center;}
  /* Le pastille rouge clignotante « ● vidéo »/« ● Réponse de @x » en haut à
     gauche de la vidéo — déjà cachée en plein écran PC (voir
     #playerPanel.is-fullscreen .now-playing-tag plus haut), mais jamais sur
     mobile puisqu'il n'utilise jamais ce plein écran natif. */
  .now-playing-tag{display:none;}
}
/* Sur mobile, pas de plein écran automatique (contrainte d'iOS) — on compense
   en réduisant l'espace pris par l'en-tête et les boutons, pour laisser le
   maximum de place à la vidéo elle-même. */
@media (max-width:600px){
  #playerPanel .panel-head{padding:6px var(--sp-3);}
  #playerPanel .panel-head h2{font-size:var(--fs-sm);}
  #playerPanel .comment-cta{padding:6px var(--sp-3) 4px;}
  #playerPanel .comments-strip{padding:6px var(--sp-3) var(--sp-2); max-height:110px;}
  .clip{width:60px;}
  .clip .thumb{width:60px;height:86px;}
}

/* ---------- Pages documentaires (à propos, conditions, confidentialité...) ---------- */
.doc-header{border-bottom:1px solid var(--border); padding-bottom:var(--sp-4); margin-bottom:var(--sp-6);}
.doc-header .back-link{color:var(--muted); font-size:var(--fs-sm); text-decoration:none; display:inline-flex; align-items:center; gap:6px; margin-bottom:var(--sp-4);}
.doc-header .back-link:hover{color:var(--text);}
.doc-header .mark{font-family:var(--mono); font-weight:var(--fw-bold); font-size:24px; letter-spacing:-.4px; margin:0 0 var(--sp-2);}
.doc-header .mark span{color:var(--accent);}
.doc-main{max-width:720px; margin:0 auto; padding:var(--sp-6) var(--sp-5) 80px;}
.doc-main h1{font-size:26px; font-weight:var(--fw-bold); margin:0 0 var(--sp-2); line-height:var(--lh-tight);}
.doc-updated{color:var(--muted); font-size:var(--fs-sm); margin:0 0 var(--sp-6);}
.doc-main h2{font-size:var(--fs-xl); font-weight:var(--fw-bold); margin:var(--sp-8) 0 var(--sp-3); line-height:var(--lh-tight);}
.doc-main h3{font-size:var(--fs-lg); font-weight:var(--fw-semibold); margin:var(--sp-6) 0 var(--sp-2);}
.doc-main p{color:var(--text); font-size:var(--fs-base); line-height:var(--lh-relaxed); margin:0 0 var(--sp-4);}
.doc-main ul, .doc-main ol{color:var(--text); font-size:var(--fs-base); line-height:var(--lh-relaxed); margin:0 0 var(--sp-4); padding-left:22px;}
.doc-main li{margin-bottom:6px;}
.doc-main a{color:var(--accent);}
.doc-note{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--sp-4); font-size:var(--fs-sm); color:var(--muted); margin:var(--sp-6) 0;}
.doc-contact-box{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--sp-5); margin-top:var(--sp-4);}
.doc-contact-box a{font-weight:var(--fw-semibold);}

/* Liens de bas de barre latérale — remplacent le pied de page classique */
/* Toujours visible : en dehors de .sidebar-scroll, donc jamais poussée hors
   champ par le contenu qui défile au-dessus (catégories dépliées, rail
   « à suivre », etc.). */
.sidebar-links{flex:0 0 auto; padding:var(--sp-4) var(--sp-4) var(--sp-5); border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:4px;}
.sidebar-links a{color:var(--muted); font-size:var(--fs-xs); text-decoration:none; padding:3px 4px;}
.sidebar-links a:hover{color:var(--text);}

@media (prefers-reduced-motion: reduce){ .dot{animation:none;} .spinner{animation:none;} .card{animation:none;} }