/* ════════════════════════════════════════════════════════════════════
   CARTE DE RÉACTION — DESIGN SYSTEM (Figma « Carte des reactions »)
   ════════════════════════════════════════════════════════════════════
   Une réaction se PRÉSENTE dans cette carte, ouverte par-dessus la page courante (markup dans
   reaction-ui.js) ; elle se REGARDE sur la page de lecture /watch/:id, qui réutilise le bloc
   d'infos (.rxc-body, actions, commentaires) — d'où « .wt » dans les sélecteurs ci-dessous.
   3 états : simple · commentaires ouverts · réservée aux abonnés.
   THÈME : la carte suit le clair/sombre du site via les jetons .ds-app
   (--panel/--ink/--raised/--muted…). Seul le MÉDIA garde ses dégradés
   sombres (texte blanc posé sur l'image), comme Netflix en thème clair.
   Marque : Redpink #FF3676 constant · radius carte 20 / boutons 12.
   ════════════════════════════════════════════════════════════════════ */

/* L'overlay SCROLLE (façon Netflix) : la carte est CENTRÉE quand elle tient
   dans l'écran (margin:auto), et si son contenu est long elle DÉPASSE — on
   fait alors défiler la page voilée, pas un scroll interne dans la carte. */
.modal-overlay {
  position: fixed; inset: 0; z-index: 300;   /* teinte du voile (noir 70 %, sans flou) : règle commune d'atelier.css */
  display: flex; padding: 32px;
  overflow-y: auto; overscroll-behavior: contain;
}
.modal-overlay[hidden] { display: none; }

/* Dialogue média : rayon 28 (extra-large) et élévation 3 comme toutes les fenêtres ; fond surface, même
   voile que les autres fenêtres. Écart documenté : largeur 800 (lecteur vidéo, au-delà des 560 d'un
   dialogue simple). */
.modal-overlay .modal {
  position: relative; width: 100%;
  background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-extra-large); box-shadow: var(--md-sys-elevation-level3);   /* rayon 28 comme toutes les fenêtres */
}

/* ── La carte (ouverte) — plus large que la maquette 557, format Netflix
   (demande porteur) : centrée si elle tient (margin:auto), sinon elle
   dépasse librement vers le bas. ── */
.modal-overlay .modal-rx { max-width: min(800px, 94vw); margin: auto; padding: 0; overflow: hidden;
  display: flex; flex-direction: column; min-height: 0; flex: none; width: 100%; }
/* Croix de fermeture : bouton icône du DS (.ibtn, 40, couche d'état), en
   version pleine BLANCHE constante car posée sur le média (comme le texte
   blanc du média), alignée sur la rangée des badges en haut à droite. */
.modal-overlay .modal-rx .modal-close { position: absolute; top: 24px; right: 24px; z-index: 5;
  background: var(--md-sys-color-on-media); color: var(--md-sys-color-scrim); }
.modal-overlay .modal-content { overflow: visible; }  /* pas de scroll interne : l'overlay scrolle */

/* ── Média (haut de carte) : mêmes proportions que la maquette (557×310) ── */
:is(.modal-overlay, .cf-post, .wt) .rxc-media { position: relative; aspect-ratio: 557 / 310; display: flex; flex-direction: column;
  justify-content: space-between; background-size: cover; background-position: center; overflow: clip; }
/* Voile de verrouillage (état « réservé aux abonnés ») : sous les dégradés. */
:is(.modal-overlay, .cf-post, .wt) .rxc-media.is-locked::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--md-sys-color-scrim) 70%, transparent); }
/* Dégradé noir en haut de l'image (retour du porteur 25/09/2026) : noir en haut, qui
   s'éclaircit en descendant ; le titre, les étiquettes et la croix restent lisibles
   sans fond derrière le titre. Il passe SOUS le contenu (.rxc-head, .rxc-launch). */
:is(.modal-overlay, .cf-post, .wt) .rxc-media::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 60%; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--md-sys-color-scrim) 72%, transparent) 0%, color-mix(in srgb, var(--md-sys-color-scrim) 42%, transparent) 40%, transparent 100%); }
:is(.modal-overlay, .cf-post, .wt) .rxc-head, :is(.modal-overlay, .cf-post, .wt) .rxc-launch { z-index: 1; }

/* Titre, étiquettes et croix sur une même ligne, centrés à la même hauteur (celle de la croix, 44). */
:is(.modal-overlay, .cf-post, .wt) .rxc-head { position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 24px; min-height: 44px; }
/* Titre en texte libre, posé sur le dégradé (plus de pastille floutée derrière) ; une ombre
   légère en plus pour les images très claires. */
:is(.modal-overlay, .cf-post, .wt) .rxc-show-title, :is(.modal-overlay, .cf-post, .wt) .rxc-show-ep { text-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 45%, transparent); }
:is(.modal-overlay, .cf-post, .wt) .rxc-show { min-width: 0; }
:is(.modal-overlay, .cf-post, .wt) .rxc-show-title { font: var(--md-sys-typescale-headline-small); line-height: 1.2; color: var(--md-sys-color-on-media); }
:is(.modal-overlay, .cf-post, .wt) .rxc-show-ep { font: var(--md-sys-typescale-label-large); line-height: 1.2; margin-top: 8px; color: var(--md-sys-color-on-media); }
/* Les étiquettes laissent la place de la croix (44px + 9 d'écart), à la même hauteur qu'elle. */
:is(.modal-overlay, .cf-post, .wt) .rxc-badges { display: flex; align-items: center; gap: 9px; flex: none;
  padding-right: 53px; }
/* Pop-up (retour du porteur 26/09/2026) : titre, étiquettes et croix centrés sur UNE ligne de 44,
   celle de la croix. La ligne est à 24 px du haut comme des côtés : le titre a le même écart en
   haut qu'à gauche, comme la croix en haut et à droite. L'épisode d'une série passe dessous.
   Le titre reçoit la marge qui centre SA PREMIÈRE ligne (1,2 em) dans ces 44 : un titre long
   qui passe sur plusieurs lignes (téléphone) commence toujours au niveau de la croix. */
.modal-overlay .rxc-head { align-items: flex-start; }
.modal-overlay .rxc-show-title { padding: calc((44px - 1.2em) / 2) 0; }
.modal-overlay .rxc-show-ep { margin-top: 0; }
.modal-overlay .rxc-badges { min-height: 44px; }
:is(.modal-overlay, .cf-post, .wt) .rxc-bdg { font: var(--md-sys-typescale-label-medium); line-height: 1.4; display: inline-flex; align-items: center; height: 30px; padding: 4px 12px;
 border-radius: 8px; background: color-mix(in srgb, var(--md-sys-color-scrim) 60%, transparent); 
 color: var(--md-sys-color-on-media); white-space: nowrap; }
/* Pastille du type (Film, Série, Animé) : fond de la couleur de sa nature (.bdg--film / --serie / --anime du DS). */
:is(.modal-overlay, .cf-post, .wt) .rxc-bdg.rxc-bdg--kind { background: var(--s); color: var(--md-sys-color-scrim); }

:is(.modal-overlay, .cf-post, .wt) .rxc-launch { position: relative; display: flex; align-items: center; gap: 12px;
  padding: 34px 24px 12px; }
/* Pendant « Comment veux-tu regarder ? » (body.vmode-question, view-mode.js), la barre de lancement (play,
   « Disponibles sur », Embarquer, source) s'efface en fondu et revient à la fermeture : la petite fenêtre est la
   seule chose à lancer (demande du porteur, 21/10/2026). Purement visuel, la place reste prise. */
:is(.modal-overlay, .cf-post, .wt) :is(.rxc-launch, .rxc-centerplay) { transition: opacity .2s ease, visibility .2s; }
body.vmode-question :is(.modal-overlay, .cf-post, .wt) :is(.rxc-launch, .rxc-centerplay) { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  :is(.modal-overlay, .cf-post, .wt) :is(.rxc-launch, .rxc-centerplay) { transition: none; }
}
:is(.modal-overlay, .cf-post, .wt) .rxc-play { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border: 0; border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
  cursor: pointer; text-decoration: none; position: relative; isolation: isolate; }
/* Réaction éditée / vidéo (carte ouverte) : le play au CENTRE du média, rond, sans plateformes ni pastille
   (demande du porteur, 27/09). Exception voulue par le porteur à la règle des 44 px (« le bouton play doit prendre
   plus de place proportionnellement », puis « plus petit ») : il suit la largeur du média — 9 %, entre 52 et 80 px —
   icône comprise. */
:is(.modal-overlay, .cf-post, .wt) .rxc-centerplay { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; pointer-events: none; }
:is(.modal-overlay, .cf-post, .wt) .rxc-centerplay .rxc-play { pointer-events: auto; border-radius: var(--md-sys-shape-corner-full);
  width: clamp(52px, 9%, 80px); height: auto; aspect-ratio: 1; }
:is(.modal-overlay, .cf-post, .wt) .rxc-centerplay .rxc-play svg { width: 42%; height: 42%; }
/* Couche d'état M3 (au lieu d'un rose plus foncé écrit en dur). */
:is(.modal-overlay, .cf-post, .wt) .rxc-play::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
:is(.modal-overlay, .cf-post, .wt) .rxc-play:hover::after { opacity: var(--md-sys-state-hover-opacity); }
:is(.modal-overlay, .cf-post, .wt) .rxc-availpill { display: inline-flex; align-items: center; min-height: 44px;
  padding: 7px; border-radius: 12px; background: var(--panel); color: var(--ink); }
:is(.modal-overlay, .cf-post, .wt) .rxc-avail-label { font: var(--md-sys-typescale-label-large); line-height: 1.2; padding: 0 4px 0 10px; }
:is(.modal-overlay, .cf-post, .wt) .rxc-availpill--sub { font: var(--md-sys-typescale-label-large); padding: 7px 17px; text-decoration: none; cursor: pointer; }
:is(.modal-overlay, .cf-post, .wt) .rxc-availpill--sub:hover { background: var(--raised); }

/* Plateformes « Disponibles sur : » (tuiles cliquables, choix du spectateur).
   La plateforme retenue est ENTOURÉE DE BLANC, comme la maquette. */
.modal-overlay .rx-avail-plats { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.modal-overlay .rx-plat { display: inline-flex; cursor: pointer; opacity: .8; transition: opacity .12s;
  border-radius: 9px; padding: 2px; border: 1px solid transparent; }
.modal-overlay .rx-plat.on, .modal-overlay .rx-plat:hover { opacity: 1; }
.modal-overlay .rx-plat.on { border-color: var(--ink); }
.modal-overlay .rx-plat:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.modal-overlay .rx-plat img { width: 30px; height: 30px; border-radius: 7px; display: block; }
.modal-overlay .rx-avail-loading, .modal-overlay .rx-avail-none {
 font-size: var(--md-sys-typescale-label-medium-size); color: var(--muted); display: inline-flex; align-items: center; gap: 5px; padding: 0 6px; }

/* Pilule « Full react : » (2026-09-09) — réaction SYNCHRONISÉE regardée SANS lancement
   automatique du film : [SydePlay] embarque la réaction + son seed dans l'addon (le
   spectateur ouvre son film où il veut) ; [hébergeur] regarde la full react ici, avec
   son timer, sans addon (comme une réaction éditée). Mêmes tuiles que « Disponibles sur ». */
:is(.modal-overlay, .cf-post, .wt) .rxc-fullpill { flex: none; }
.modal-overlay button.rx-plat { appearance: none; background: transparent; font: inherit; color: inherit; }
.modal-overlay .rx-full-file { width: 30px; height: 30px; border-radius: 7px; background: var(--raised); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; }
/* Au survol ou au clavier, l'icône (lien, Embarquer) passe au rose SydePlay (demande du porteur, 22/10/2026). */
.modal-overlay .rx-full:is(:hover, :focus-visible) .rx-full-file { color: var(--md-sys-color-primary); }

/* ── Corps ── */
:is(.modal-overlay, .cf-post, .wt) .rxc-body { display: flex; flex-direction: column; gap: 22px; padding: 24px; }
:is(.modal-overlay, .cf-post, .wt) .rxc-row1 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
:is(.modal-overlay, .cf-post, .wt) .rxc-creator { display: inline-flex; align-items: center; gap: 10px; min-width: 0;
  text-decoration: none; color: var(--ink); }
:is(.modal-overlay, .cf-post, .wt) .rxc-creator:hover .rxc-creator-name { text-decoration: underline; }
:is(.modal-overlay, .cf-post, .wt) .rxc-creator-name { font: var(--md-sys-typescale-label-large); line-height: 1.2; color: var(--ink);
 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.modal-overlay, .cf-post, .wt) .rxc-stats { font: var(--md-sys-typescale-label-medium); line-height: 1.4; display: inline-flex; align-items: center; gap: 14px; flex: none;
 color: var(--ink); }
:is(.modal-overlay, .cf-post, .wt) .rxc-sep { width: 1px; height: 12px; border-radius: 30px; background: var(--line-2); }
/* Téléphone : les vues et la date passent sous le nom du créateur au lieu de le réduire à « Aleks… ». */
@media (max-width: 560px) {
  :is(.modal-overlay, .cf-post, .wt) .rxc-row1 { flex-wrap: wrap; row-gap: 6px; }
}

:is(.modal-overlay, .cf-post, .wt) .rxc-title { font: var(--md-sys-typescale-headline-small); line-height: 1.2; margin: 0; color: var(--ink); overflow-wrap: anywhere; }

/* Texte clampé + « Afficher plus » (description et commentaires longs).
   Clamp par max-height (pas de -webkit-box : il s'effondre à largeur 0 dans
   ce contexte flex et fausse la détection de débordement).
   SOURCE UNIQUE de ce mécanisme : la logique JS est `armClamps()` (exportée
   par reaction-ui.js). Les contextes qui l'utilisent sont listés dans le
   `:is(...)` ci-dessous (`.cp-work-head` = résumé d'œuvre du profil créateur) ;
   la hauteur du clamp s'ajuste par variables quand l'interligne diffère. */
:is(.modal-overlay, .cf-post, .wt, .cp-work-head) .rxc-clamp p { margin: 0; }
:is(.modal-overlay, .cf-post, .wt, .cp-work-head) .rxc-clamp:not(.is-open) p {
  max-height: calc(var(--clamp-lines, 3) * var(--clamp-lh, 1.35em)); overflow: hidden; }
:is(.modal-overlay, .cf-post, .wt, .cp-work-head) .rxc-more { font: var(--md-sys-typescale-label-medium); line-height: 1.4; display: block; margin: 6px 0 0 auto; padding: 0; border: 0; background: none;
 color: var(--muted); cursor: pointer; }
:is(.modal-overlay, .cf-post, .wt, .cp-work-head) .rxc-more:hover { color: var(--ink); }
/* `pre-wrap` : les SAUTS DE LIGNE et paragraphes saisis par le créateur sont
   respectés (une description longue est structurée) — le clamp par max-height
   et la détection de débordement continuent de fonctionner. */
:is(.modal-overlay, .cf-post, .wt) .rxc-desc p { font: var(--md-sys-typescale-body-medium); font-weight: 500; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; white-space: pre-wrap; }
/* Liens cliquables dans la description (et, plus tard, les commentaires) : rouge
   marque — JAMAIS de bleu (règle DS). Soulignement au survol seulement. */
:is(.modal-overlay, .cf-post, .wt) .rxc-desc a.rxc-link,
:is(.modal-overlay, .cf-post, .wt) .rxc-com-body a.rxc-link { color: var(--brand); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
:is(.modal-overlay, .cf-post, .wt) .rxc-desc a.rxc-link:hover,
:is(.modal-overlay, .cf-post, .wt) .rxc-com-body a.rxc-link:hover { text-decoration: underline; }

/* Rangée d'actions : 44×44, transparents ; actif commentaire = fond blanc. */
:is(.modal-overlay, .cf-post, .wt) .rxc-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
:is(.modal-overlay, .cf-post, .wt) .rxc-actions-l { display: flex; align-items: center; gap: 8px; }
:is(.modal-overlay, .cf-post, .wt) .rxc-act { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; height: 44px; padding: 0 10px; border: 0; border-radius: 12px; background: transparent;
  color: var(--ink); cursor: pointer; font-family: inherit; transition: background .12s, color .12s; }
:is(.modal-overlay, .cf-post, .wt) .rxc-act:hover { background: var(--raised); }
:is(.modal-overlay, .cf-post, .wt) .rxc-act.is-on { color: var(--md-sys-color-primary); }
:is(.modal-overlay, .cf-post, .wt) .rxc-act.is-active { background: var(--ink); color: var(--panel); }
:is(.modal-overlay, .cf-post, .wt) .rxc-act-count { font: var(--md-sys-typescale-label-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Volet signalement : motif défini + message optionnel (une fois/pers.) ── */
:is(.modal-overlay, .cf-post, .wt) .rxc-report { display: flex; flex-direction: column; gap: 14px; padding: 0 24px 24px; }
:is(.modal-overlay, .cf-post, .wt) .rxc-report-title { font: var(--md-sys-typescale-title-medium); color: var(--md-sys-color-on-surface); }
:is(.modal-overlay, .cf-post, .wt) .rxc-report-reasons { display: flex; flex-direction: column; gap: 8px; }
/* Motif = ligne de choix : radio du DS (accent primary) dans un cadre, cadre primary quand il est choisi. */
:is(.modal-overlay, .cf-post, .wt) .rxc-reason { position: relative; isolation: isolate; display: flex; align-items: center; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 0 14px;
  border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-medium); cursor: pointer;
  font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface); }
:is(.modal-overlay, .cf-post, .wt) .rxc-reason::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
:is(.modal-overlay, .cf-post, .wt) .rxc-reason:hover::after { opacity: var(--md-sys-state-hover-opacity); }
:is(.modal-overlay, .cf-post, .wt) .rxc-reason:has(input:checked) { border-color: var(--md-sys-color-primary); background: var(--md-sys-color-primary-container); }
:is(.modal-overlay, .cf-post, .wt) .rxc-reason input { accent-color: var(--md-sys-color-primary); margin: 0; }
/* Texte = champ du DS (.ex-field textarea). Actions : Annuler puis Envoyer, à droite (ordre M3). */
:is(.modal-overlay, .cf-post, .wt) .rxc-report-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

/* ── Commentaires (état 2) ── */
:is(.modal-overlay, .cf-post, .wt) .rxc-comments { display: flex; flex-direction: column; gap: 32px; padding: 0 24px 24px; }
:is(.modal-overlay, .cf-post, .wt) .rxc-com-list { display: flex; flex-direction: column; gap: 22px; }
:is(.modal-overlay, .cf-post, .wt) .rxc-com { display: flex; flex-direction: column; gap: 11px; }
:is(.modal-overlay, .cf-post, .wt) .rxc-com-head { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
/* Un nom long sans espace (pseudo, URL) se coupe en « … » au lieu de pousser l'en-tête
   hors de l'écran : seul le nom rétrécit, l'avatar, le badge et l'âge gardent leur taille. */
:is(.modal-overlay, .cf-post, .wt) .rxc-com-head > :not(.rxc-com-name) { flex: none; }
:is(.modal-overlay, .cf-post, .wt) .rxc-com-name { font: var(--md-sys-typescale-label-large); line-height: 1.2; color: var(--ink);
  min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Auteur cliquable : ouvre sa fiche (shared/viewer-card.js). */
:is(.modal-overlay, .cf-post) .rxc-com-head [data-viewer-card] { cursor: pointer; }
:is(.modal-overlay, .cf-post) .rxc-com-name[data-viewer-card]:hover { text-decoration: underline; }
:is(.modal-overlay, .cf-post) .rxc-com-head [data-viewer-card]:focus-visible { outline: 3px solid var(--md-sys-color-primary); outline-offset: 2px; border-radius: var(--md-sys-shape-corner-extra-small); }
:is(.modal-overlay, .cf-post, .wt) .rxc-com-age { font: var(--md-sys-typescale-label-medium); line-height: 1.4; margin-left: 7px; color: var(--muted); }
:is(.modal-overlay, .cf-post, .wt) .rxc-com-body { font: var(--md-sys-typescale-body-medium); line-height: 1.6; color: var(--ink-2); overflow-wrap: anywhere; white-space: pre-wrap; }
:is(.modal-overlay, .cf-post, .wt) .rxc-com .rxc-clamp:not(.is-open) p { max-height: calc(10 * 1.6em); }
/* Les actions passent à la ligne sur petit écran (Spoiler + Pas un spoiler +
   Signaler + Masquer ne tiennent pas sur 375px en une seule rangée). */
:is(.modal-overlay, .cf-post, .wt) .rxc-com-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
/* Cible d'au moins 24 × 24 px (audit du 13/10/2026 : Répondre, Spoiler, Signaler et le cœur
   faisaient 14 à 16 px de haut). */
:is(.modal-overlay, .cf-post, .wt) .rxc-com-act { font: var(--md-sys-typescale-label-medium); min-height: 24px; min-width: 24px; padding: 4px 2px; border: 0; background: none; color: var(--muted); cursor: pointer; }
:is(.modal-overlay, .cf-post, .wt) .rxc-com-act:hover { color: var(--ink); }
:is(.modal-overlay, .cf-post, .wt) .rxc-com-act { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
:is(.modal-overlay, .cf-post, .wt) .rxc-com-act.is-on { color: var(--brand); }           /* mon vote actif — rouge marque */
:is(.modal-overlay, .cf-post, .wt) .rxc-spoil-score { font-variant-numeric: tabular-nums; opacity: .85; }

/* ── Spoiler signalé par la communauté (score < 0) ──────────────────
   Le texte est FLOUTÉ et illisible (blur + sélection coupée : on ne peut pas
   le copier ni le lire à la sélection) ; un bouton centré le révèle à la
   demande, pour CE lecteur uniquement (aucun vote n'est modifié).
   « Afficher plus » est masqué tant que c'est flouté (on ne déplie pas un
   texte qu'on ne lit pas) — il réapparaît après révélation via armClamps. */
:is(.modal-overlay, .cf-post, .wt) .rxc-clamp.is-spoiler { position: relative; }
:is(.modal-overlay, .cf-post, .wt) .rxc-clamp.is-spoiler p { filter: blur(6px); user-select: none; -webkit-user-select: none; pointer-events: none; }
:is(.modal-overlay, .cf-post, .wt) .rxc-clamp.is-spoiler .rxc-more { display: none; }
:is(.modal-overlay, .cf-post, .wt) .rxc-spoil-reveal { font: var(--md-sys-typescale-label-large); font-weight: 600; line-height: 1.2; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
 display: inline-flex; align-items: center; gap: 6px; max-width: 92%; padding: 8px 14px; min-height: 36px;
 border: 1px solid var(--line-2); border-radius: 4px; background: var(--panel); color: var(--ink);
 white-space: nowrap; cursor: pointer; }
:is(.modal-overlay, .cf-post, .wt) .rxc-spoil-reveal:hover { border-color: var(--brand); color: var(--brand); }

/* ── « J'aime » d'un commentaire ────────────────────────────────────── */
:is(.modal-overlay, .cf-post, .wt) .rxc-com-like.is-on { color: var(--brand); }          /* cœur plein rouge marque quand c'est le mien */
:is(.modal-overlay, .cf-post, .wt) .rxc-like-count { font-variant-numeric: tabular-nums; }

/* Badge « Créateur » : badge du DS (.bdg .bdg--sm .bdg--red, atelier.css) —
   ICI on ne fait que le PLACEMENT dans l'en-tête du commentaire. */
:is(.modal-overlay, .cf-post, .wt) .rxc-badge-creator { margin-left: 2px; flex: none; }

/* « Aimé par le créateur » : ligne discrète sous le texte (cœur plein rouge).
   Volontairement TEXTUEL (et non un avatar flottant) : c'est explicite, lisible
   au lecteur d'écran, et ça ne bouge pas la mise en page sur mobile. */
:is(.modal-overlay, .cf-post, .wt) .rxc-com-cliked { font: var(--md-sys-typescale-body-small); font-weight: 600; line-height: 1.2; display: inline-flex; align-items: center; gap: 6px;
 color: var(--brand); }

/* ── Réponses (fil à 2 niveaux) ─────────────────────────────────────
   Indentation + trait vertical = on voit la conversation d'un coup d'œil.
   Une seule réponse est visible ; les suivantes portent .is-folded. */
:is(.modal-overlay, .cf-post, .wt) .rxc-replies { display: flex; flex-direction: column; gap: 16px; margin-top: 4px;
  padding-left: 16px; border-left: 2px solid var(--line-2); }
:is(.modal-overlay, .cf-post, .wt) .rxc-reply.is-folded { display: none; }
:is(.modal-overlay, .cf-post, .wt) .rxc-more-replies { font: var(--md-sys-typescale-label-medium); font-weight: 600; line-height: 1.4; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
 padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
:is(.modal-overlay, .cf-post, .wt) .rxc-more-replies:hover { color: var(--brand); }

/* Champ de réponse (ouvert au clic sur « Répondre »). */
:is(.modal-overlay, .cf-post, .wt) .rxc-reply-form { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
:is(.modal-overlay, .cf-post, .wt) .rxc-reply-field { flex: 1 1 auto; min-width: 0; }   /* champ du DS ; placement uniquement */
:is(.modal-overlay, .cf-post, .wt) .rxc-reply-form .cbtn { flex: none; }

/* Mobile : on récupère de la largeur (indentation réduite) et le champ de
   réponse passe en pleine largeur avec son bouton dessous. */
@media (max-width: 560px) {
  :is(.modal-overlay, .cf-post, .wt) .rxc-replies { padding-left: 10px; }
  :is(.modal-overlay, .cf-post, .wt) .rxc-reply-form { flex-wrap: wrap; }
  :is(.modal-overlay, .cf-post, .wt) .rxc-reply-field { flex: 1 1 100%; }
  :is(.modal-overlay, .cf-post, .wt) .rxc-reply-form .cbtn { margin-left: auto; }
}
:is(.modal-overlay, .cf-post, .wt) .rxc-com-empty { font-size: var(--md-sys-typescale-body-small-size); color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }

/* Composer « Partage ton point de vue » + bouton Post (rose, ombre interne). */
:is(.modal-overlay, .cf-post, .wt) .rxc-composer { display: flex; align-items: center; gap: 12px; }
:is(.modal-overlay, .cf-post, .wt) .rxc-composer > .ava { flex: none; }
/* Champ = champ du DS avec bouton icône en fin (.ex-field + .ex-affix + .ibtn) ; ici le placement. */
:is(.modal-overlay, .cf-post, .wt) .rxc-field { flex: 1; min-width: 0; }
:is(.modal-overlay, .cf-post, .wt) .rxc-post { flex: none; }

/* Avatars de la carte : mêmes pastilles que le DS, sur fond sombre. */
:is(.modal-overlay, .cf-post, .wt) .ava { background: var(--raised); color: var(--ink); }

/* GARDE-FOU : l'attribut hidden gagne TOUJOURS sur les display posés ici
   (sinon le volet commentaires et « Afficher plus » restent visibles). */
/* `hidden` doit primer sur les composants (display:flex des formulaires de
   réponse, boutons « Afficher plus »…), dans la modale ET dans le fil. */
:is(.modal-overlay, .cf-post, .wt) [hidden] { display: none !important; }

/* ── Mobile : la carte prend toute la largeur et dépasse pareil ── */
@media (max-width: 760px) {
  .modal-overlay { padding: 0; }
  .modal-overlay .modal-rx { max-width: none; margin: 0; border-radius: 0; border: 0; min-height: 100%; }
}

/* ═══════════ Publications SONDAGE ═══════════
   Barre de résultat DANS le bouton (le remplissage est le fond) : on lit le
   score sans quitter la ligne, et le clic vote. Mon choix = rouge marque. */
:is(.modal-overlay, .cf-post, .wt) .rxc-poll { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
:is(.modal-overlay, .cf-post, .wt) .rxc-poll-opt { font: var(--md-sys-typescale-label-large); position: relative; display: flex; align-items: center; gap: 10px;
 width: 100%; min-height: 44px; padding: 8px 12px; overflow: hidden;
 border: 1px solid var(--line-2); border-radius: 4px; background: var(--panel);
 color: var(--ink); text-align: left; cursor: pointer; }
:is(.modal-overlay, .cf-post, .wt) .rxc-poll-opt:hover:not(:disabled) { border-color: var(--brand); }
:is(.modal-overlay, .cf-post, .wt) .rxc-poll-opt:disabled { cursor: default; }
:is(.modal-overlay, .cf-post, .wt) .rxc-poll-opt.is-mine { border-color: var(--brand); }
:is(.modal-overlay, .cf-post, .wt) .rxc-poll-fill { position: absolute; inset: 0 auto 0 0; z-index: 0;
  background: color-mix(in srgb, var(--brand) 14%, transparent); transition: width .25s ease; }
:is(.modal-overlay, .cf-post, .wt) .rxc-poll-opt.is-mine .rxc-poll-fill { background: color-mix(in srgb, var(--brand) 26%, transparent); }
:is(.modal-overlay, .cf-post, .wt) .rxc-poll-label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px;
  flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
:is(.modal-overlay, .cf-post, .wt) .rxc-poll-opt.is-mine .rxc-poll-label { color: var(--brand); font-weight: 700; }
:is(.modal-overlay, .cf-post, .wt) .rxc-poll-votes { font: var(--md-sys-typescale-label-large); font-weight: 600; position: relative; z-index: 1; flex: none; font-variant-numeric: tabular-nums;
 color: var(--muted); }
:is(.modal-overlay, .cf-post, .wt) .rxc-poll-foot { font: var(--md-sys-typescale-label-medium); color: var(--muted); }

/* Corps d'une publication texte : même peau que la description, mais en taille
   de lecture (c'est le contenu principal du post, pas une accroche). */
:is(.modal-overlay, .cf-post, .wt) .rxc-postbody p { font-size: var(--md-sys-typescale-title-medium-size); line-height: 1.6; color: var(--ink-2); }

/* ═══════════ Dimensions selon le TYPE de publication ═══════════
   Une publication SANS média (texte, sondage) partait avec la hauteur de son
   seul contenu : une annonce de 3 lignes donnait une carte minuscule, très loin
   du format des autres cartes. On la laisse s'AJUSTER à son contenu : elle
   GRANDIT naturellement si le texte est long (sans plafond bridant), et se
   RÉTRÉCIT quand il y a peu de contenu (pas de plancher qui crée du vide en bas). */
.modal-overlay .modal-rx.is-text .rxc-body,
.modal-overlay .modal-rx.is-poll .rxc-body { padding-top: 28px; }
/* Sans média, le haut de la carte porte l'arrondi et respire davantage. */
.modal-overlay .modal-rx.is-text .rxc-body > .rxc-row1,
.modal-overlay .modal-rx.is-poll .rxc-body > .rxc-row1 { margin-bottom: 2px; }
/* Le corps d'une publication texte n'est pas replié dans la fenêtre : c'est le contenu. Dans le
   Fil et l'Accueil (.cf-post), un post texte se replie à 8 lignes, avec « Afficher plus ». */
:is(.modal-overlay, .cf-post, .wt) .rxc-postbody:not(.rxc-clamp) p { max-height: none !important; overflow: visible; }
.cf-post .rxc-postbody.rxc-clamp { --clamp-lines: 8; --clamp-lh: 1.6em; }
/* Le sondage occupe l'espace disponible : les réponses respirent au lieu d'être
   tassées en haut d'une grande carte. */
.modal-overlay .modal-rx.is-poll .rxc-poll { margin-top: 2px; gap: 10px; }

@media (max-width: 560px) {
  .modal-overlay .modal-rx.is-text .rxc-body,
  .modal-overlay .modal-rx.is-poll .rxc-body { min-height: 0; padding-top: 20px; }
}

/* Pied du sondage : total à gauche, action du créateur à droite. */
:is(.modal-overlay, .cf-post, .wt) .rxc-poll-foot { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; }
:is(.modal-overlay, .cf-post, .wt) .rxc-poll-close { font: var(--md-sys-typescale-label-medium); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
 min-height: 32px; border: 1px solid var(--line-2); border-radius: 4px; background: none;
 color: var(--muted); cursor: pointer; }
:is(.modal-overlay, .cf-post, .wt) .rxc-poll-close:hover { border-color: var(--brand); color: var(--brand); }

/* Description d'un SONDAGE : placée SOUS les votes, présentée comme le corps d'un
   post texte (couleur var(--ink-2) via .rxc-postbody). Léger espace au-dessus. */
:is(.modal-overlay, .cf-post, .wt) .rxc-poll-desc { margin-top: 4px; }

/* ════════════════════════════════════════════════════════════════════
   FIL DE PUBLICATIONS (profil créateur) — chaque post affiché EN ENTIER.
   Réutilise les composants ci-dessus (sondage, commentaires) via le scope
   partagé :is(.modal-overlay, .cf-post, .wt). Marque rouge, icônes Lucide, pas de bleu.
   Habits « édition » (2026-10-23) : cartons de 18 px au filet fin,
   titre très gras, bouton lecture de la marque à halo, actions en pilules, tampon
   « Épinglé » pivoté. La structure (classes, data-act) est inchangée.
   ════════════════════════════════════════════════════════════════════ */
.cf-feed { display: flex; flex-direction: column; gap: 22px; max-width: 720px; margin: 0 auto; }
.cf-post { position: relative; background: var(--panel); border: 1px solid var(--line-2); border-radius: 18px; padding: 20px;
  box-shadow: 0 10px 28px -20px rgba(0, 0, 0, .5); transition: border-color .18s ease, box-shadow .18s ease; }
.cf-post:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--line-2)); }

.cf-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cf-author { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); min-width: 0; }
.cf-author:hover .cf-author-name { text-decoration: underline; }
.cf-author-name { font: var(--md-sys-typescale-title-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-dot { flex: none; width: 3px; height: 3px; border-radius: 50%; background: var(--muted); }
.cf-date { font-size: var(--md-sys-typescale-label-medium-size); color: var(--muted); white-space: nowrap; }
.cf-type { font: var(--md-sys-typescale-label-small); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 5px;
 padding: 5px 11px; border-radius: 999px; background: var(--raised); color: var(--muted);
  }

.cf-title { font: var(--md-sys-typescale-headline-small); font-weight: 800; letter-spacing: -0.015em; line-height: 1.28; margin: 0 0 6px; color: var(--ink); overflow-wrap: anywhere; }
.cf-ctx { font: var(--md-sys-typescale-body-small); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; color: var(--muted); }
.cf-ctx span { overflow-wrap: anywhere; }

/* Média : vignette 16/9 cliquable (vidéo → lecteur ; réaction sync → modale). */
.cf-media { position: relative; display: block; width: 100%; aspect-ratio: 16/9; margin: 0 0 14px;
  border: 0; border-radius: 14px; overflow: hidden; cursor: pointer; background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-on-media, #fff) 7%, transparent); }
.cf-media::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--md-sys-color-scrim) 28%, transparent); transition: background .15s; }
.cf-media:hover::after { background: color-mix(in srgb, var(--md-sys-color-scrim) 10%, transparent); }
.cf-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px;
  border-radius: 50%; background: var(--brand); color: var(--md-sys-color-on-primary);
  box-shadow: 0 14px 34px -8px rgba(0, 0, 0, .5);
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s ease; }
.cf-media:hover .cf-play { transform: translate(-50%,-50%) scale(1.07); }
.cf-body { margin: 0 0 14px; }

/* Rangée d'actions : like / commentaires / partage / enregistrer — en pilules. */
.cf-actions { display: flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.cf-act { font: var(--md-sys-typescale-label-large); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 0;
 border-radius: 999px; background: none; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; transition: background .15s ease, color .15s ease; }
.cf-act:hover { background: var(--raised); color: var(--ink); }
.cf-act.is-on { color: var(--brand); }
.cf-act--save { margin-left: 4px; }
/* Date de publication : poussée à droite, JUSTE avant le bouton enregistrer. */
.cf-date-act { font: var(--md-sys-typescale-label-medium); margin-left: auto; flex: none; color: var(--muted); white-space: nowrap; }
/* Fil d'actualité : la date est dans l'en-tête auteur — ce spacer garde le
   bouton enregistrer poussé à droite dans la rangée d'actions. */
.cf-flex-spacer { margin-left: auto; }
/* Titre + badge de type sur la MÊME ligne (l'auteur n'est plus en tête). */
/* Sur téléphone, le badge passe à la ligne au lieu d'écraser le titre (un mot par ligne). */
.cf-titlerow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.cf-titlerow .cf-title { margin-bottom: 0; flex: 1 1 14rem; min-width: 0; cursor: pointer; }
.cf-titlerow .cf-title:hover { text-decoration: underline; text-underline-offset: 2px; }
.cf-titlerow .cf-type { margin-left: 0; margin-top: 2px; }
/* Post épinglé : tampon de la marque légèrement pivoté (en tête du fil) + filet rosé. */
.cf-pinned-tag { font: var(--md-sys-typescale-label-medium); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px;
 padding: 5px 12px; border-radius: 6px; rotate: -1deg; color: #fff;
 background: var(--brand); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--brand) 55%, transparent); }
.cf-post.is-pinned { border-color: color-mix(in srgb, var(--brand) 40%, var(--line-2)); }
/* Sans ligne de contexte (vidéo libre, photos, sondage, texte), le média ou le
   corps suit directement le titre : on aère pour qu'il ne colle pas. Les posts
   sync/éditée gardent leur espacement via .cf-ctx (non concernés ici). */
.cf-titlerow + .cf-media,
.cf-titlerow + .cf-body { margin-top: 12px; }

/* Zone commentaires : composer + fil (5 par lot). */
.cf-comments { margin-top: 16px; }
.cf-composer { margin-bottom: 18px; }
:is(.modal-overlay, .cf-post, .wt) .rxc-com-loadmore { font: var(--md-sys-typescale-label-large); font-weight: 600; align-self: flex-start; display: inline-flex; align-items: center;
 gap: 6px; margin-top: 4px; padding: 0; border: 0; background: none; color: var(--brand); cursor: pointer; }
:is(.modal-overlay, .cf-post, .wt) .rxc-com-loadmore:hover { text-decoration: underline; }

/* États du fil (pagination + vide). */
.cf-state { max-width: 680px; margin: 18px auto 0; text-align: center; }
/* « Afficher plus » : bouton Outlined du DS (.cbtn--contour). */
.cf-loading, .cf-end { display: inline-flex; align-items: center; gap: 8px; padding: 12px; color: var(--muted); font-size: var(--md-sys-typescale-body-small-size);  }
.cf-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 56px 16px; color: var(--muted); font-size: var(--md-sys-typescale-body-medium-size);  }

@media (max-width: 560px) {
  .cf-post { padding: 16px; border-radius: 10px; }
  .cf-title { font-size: var(--md-sys-typescale-body-large-size);  }
}

/* ═══════════ Carrousel de PHOTOS (post `photos`) — modale + fil ═══════════
   Swipe natif via scroll-snap ; flèches / points / compteur synchronisés en JS.
   Photos en `contain` sur fond sombre : jamais rognées, hauteur de cadre stable. */
:is(.modal-overlay, .cf-post, .wt) .rxc-photos { position: relative; margin: 2px 0 4px; border-radius: 8px; overflow: hidden; background: var(--md-sys-color-scrim); }
:is(.modal-overlay, .cf-post, .wt) .rxc-photos-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none; }
:is(.modal-overlay, .cf-post, .wt) .rxc-photos-track::-webkit-scrollbar { display: none; }
:is(.modal-overlay, .cf-post, .wt) .rxc-photo { flex: 0 0 100%; scroll-snap-align: center; display: flex;
  align-items: center; justify-content: center; aspect-ratio: 1 / 1; max-height: 70vh; }
:is(.modal-overlay, .cf-post, .wt) .rxc-photo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
/* Flèches rondes semi-opaques (masquées en bout de course via [hidden]). */
:is(.modal-overlay, .cf-post, .wt) .rxc-photos-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0;
  border-radius: 50%; background: color-mix(in srgb, var(--md-sys-color-scrim) 55%, transparent); color: var(--md-sys-color-on-media); cursor: pointer; }
:is(.modal-overlay, .cf-post, .wt) .rxc-photos-nav:hover { background: color-mix(in srgb, var(--md-sys-color-scrim) 75%, transparent); }
:is(.modal-overlay, .cf-post, .wt) .rxc-photos-prev { left: 10px; }
:is(.modal-overlay, .cf-post, .wt) .rxc-photos-next { right: 10px; }
/* Compteur « 1/4 » en haut à droite. */
:is(.modal-overlay, .cf-post, .wt) .rxc-photos-count { font: var(--md-sys-typescale-label-medium); font-weight: 600; position: absolute; top: 10px; right: 10px; z-index: 2;
 padding: 3px 9px; border-radius: 20px; background: color-mix(in srgb, var(--md-sys-color-scrim) 60%, transparent); color: var(--md-sys-color-on-media); font-variant-numeric: tabular-nums; }
/* Points de position (bas centre). Le point actif est ROUGE marque. */
:is(.modal-overlay, .cf-post, .wt) .rxc-photos-dots { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2;
  display: flex; justify-content: center; gap: 6px; }
:is(.modal-overlay, .cf-post, .wt) .rxc-photos-dot { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--md-sys-color-on-media) 50%, transparent); cursor: pointer; transition: background .15s; }
:is(.modal-overlay, .cf-post, .wt) .rxc-photos-dot.is-on { background: var(--brand); }

/* ═══════════ FIL DE PUBLICATIONS : la colonne (680) qui porte le titre (titre de page du DS,
   .h-page), la barre de liste du DS (.ds-list, feed-ds.css : Rechercher, Filtre, Trier par ;
   seule collée en haut) et le fil ═══════════ */
.cf-feedhead { max-width: 680px; margin: 0 auto; }

/* La carte d'une publication en surimpression : la même que dans le fil, au centre de l'écran. */
.cf-ov { justify-content: center; align-items: flex-start; padding: 4vh 16px; }
.cf-ov-panel { position: relative; width: min(100%, max(560px, 44vw)); margin: auto 0; }
.cf-ov-panel > .cf-post { max-width: none; margin: 0; }
.cf-ov-x { position: absolute; top: 0; left: calc(100% + 10px); background: var(--panel); color: var(--ink); }
@media (max-width: 760px) {
  .cf-ov { padding-top: 56px; }
  .cf-ov-x { top: -44px; left: auto; right: 0; }
}