/* ══════════════════════════════════════════════════════════════════════
   Le fil — design « Frenchy Site · Feed », Claude Design

   Classes prefixees fy- comme sur l'accueil : la page charge aussi
   tokens.css, layout.css et nav.css, partages avec le reste du site.

   La barre du haut n'est PAS celle du design. Celui-ci propose un en-tete
   propre au fil, avec recherche et avatar ; le site en a deja une, partagee
   par 23 pages, refaite deux fois cette semaine pour la rendre coherente.
   En introduire une troisieme variante defferait ce travail. Les commandes
   propres au fil — publier, onglets — vivent donc DANS la page.
   ══════════════════════════════════════════════════════════════════════ */

/* RENOMMEE : elle s'appelait `.fy-fil`, comme le fil d'Ariane de barre.css.
   publier.html charge les deux feuilles, celle-ci en dernier : le fil
   d'Ariane de la barre devenait cette grille, et sous 900 px ses trois
   morceaux s'empilaient en colonne. Aucune page n'applique cette grille
   — le feed emploie `feed-main` — donc c'est elle qui cede le nom. */
.fy-colonnes {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 32px 80px;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr) 316px;
  gap: 32px;
  align-items: start;
}

/* ── Les deux colonnes laterales ─────────────────────────────────────── */
.fy-cote { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 26px; }
.fy-cote-droit { gap: 16px; }

.fy-menu { display: flex; flex-direction: column; gap: 2px; }
.fy-menu a, .fy-menu span {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 13px; border-radius: 11px;
  color: var(--fy-gris, #a5a3bc); font-size: .94rem; text-decoration: none;
  transition: background .16s ease, color .16s ease;
}
.fy-menu a:hover { background: rgba(255, 255, 255, .05); color: var(--fy-encre, #f2f1f7); }
.fy-menu .fy-ici {
  background: rgba(139, 123, 255, .14);
  color: var(--fy-encre, #f2f1f7); font-weight: 600;
}
.fy-menu .fy-compte { margin-left: auto; font-family: var(--font-mono, monospace); font-size: .69rem; color: var(--fy-violet, #8b7bff); }
.fy-menu .nav-point-direct { margin-left: auto; }

.fy-cote-pied {
  border-top: 1px solid var(--fy-bord, rgba(255,255,255,.08));
  padding-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: .78rem;
}
.fy-cote-pied a { color: var(--fy-sourd, #6e6c88); text-decoration: none; }
.fy-cote-pied a:hover { color: var(--fy-gris, #a5a3bc); }

.fy-bloc {
  background: var(--fy-carte, #0c0c24);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px; padding: 18px;
}
.fy-bloc-tete {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
  font-family: var(--font-mono, monospace); font-size: .655rem;
  font-weight: 500; letter-spacing: .12em; color: var(--fy-sourd, #6e6c88);
}
.fy-bloc-liste { display: flex; flex-direction: column; gap: 14px; }

/* ── Le fil central ──────────────────────────────────────────────────── */
.fy-centre { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* Le rail des createurs. Il deborde volontairement : c'est ce debordement
   qui dit qu'il y a la suite. */
.fy-rail-gens { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.fy-rail-gens::-webkit-scrollbar { display: none; }
.fy-gens-item { flex: none; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; }
.fy-gens-rond {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--fy-surface, #14142e); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 1.3rem; font-weight: 600; color: var(--fy-sourd, #6e6c88);
}
.fy-gens-rond img { width: 100%; height: 100%; object-fit: cover; }
/* L'anneau ne decore pas : il dit qu'un direct est en cours. */
.fy-gens-item.fy-en-direct .fy-gens-rond {
  border: 0; padding: 2px;
  background: linear-gradient(135deg, #ff6b6b, #f0b45c);
}
.fy-gens-item.fy-en-direct .fy-gens-rond > * {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--fy-surface, #14142e);
  display: flex; align-items: center; justify-content: center;
}
.fy-gens-nom {
  font-size: .72rem; color: var(--fy-gris, #a5a3bc);
  max-width: 76px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fy-gens-publier .fy-gens-rond { background: var(--fy-carte, #0c0c24); border: 1px dashed rgba(255,255,255,.2); cursor: pointer; }
.fy-gens-publier .fy-gens-nom { color: var(--fy-violet, #8b7bff); }

/* ── Le compositeur ──────────────────────────────────────────────────── */
.fy-composer {
  background: var(--fy-carte, #0c0c24);
  border: 1px solid rgba(139, 123, 255, .35);
  border-radius: 18px; padding: 20px;
}
.fy-composer[hidden] { display: none; }
.fy-composer textarea {
  width: 100%; min-height: 84px; resize: vertical;
  background: none; border: 0; outline: none;
  font-family: inherit; font-size: 1rem; line-height: 1.55; color: var(--fy-encre, #f2f1f7);
  padding: 6px 0 14px;
}
.fy-composer textarea::placeholder { color: var(--fy-sourd, #6e6c88); }
.fy-composer-bas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fy-choix {
  display: flex; align-items: center; gap: 7px;
  font-size: .84rem; color: var(--fy-corps, #d6d4e4);
  background: none; border: 1px solid rgba(255,255,255,.13); border-radius: 9px;
  padding: 8px 12px; cursor: pointer; font-family: inherit;
}
.fy-choix:hover { border-color: rgba(255,255,255,.28); }
.fy-choix[aria-pressed="true"] { background: var(--fy-violet, #8b7bff); color: var(--fy-nuit, #07071a); border-color: transparent; font-weight: 600; }
.fy-carre-mini { width: 8px; height: 8px; border-radius: 2px; flex: none; }

/* ── Les onglets ─────────────────────────────────────────────────────── */
.fy-onglets {
  display: flex; align-items: center; gap: 4px;
  border-bottom: 1px solid var(--fy-bord, rgba(255,255,255,.08));
  position: sticky; top: 0; z-index: 5;
  background: rgba(7, 7, 26, .92); backdrop-filter: blur(12px);
}
.fy-onglet {
  border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: .91rem; font-weight: 600; padding: 14px 16px;
  border-bottom: 2px solid transparent; color: var(--fy-sourd, #6e6c88);
  display: flex; align-items: center; gap: 8px;
}
.fy-onglet[aria-selected="true"] { color: var(--fy-encre, #f2f1f7); border-bottom-color: var(--fy-violet, #8b7bff); }

/* ── Une publication ─────────────────────────────────────────────────── */
.fy-post {
  background: var(--fy-carte, #0c0c24);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 18px; padding: 22px;
}
.fy-post-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.fy-vignette {
  width: 44px; height: 44px; flex: none; border-radius: 13px; overflow: hidden;
  background: var(--fy-surface, #14142e);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.06rem; font-weight: 600; color: var(--fy-violet, #8b7bff);
}
.fy-vignette img { width: 100%; height: 100%; object-fit: cover; }
.fy-post-qui { flex: 1; min-width: 0; }
.fy-post-nom { display: flex; align-items: center; gap: 7px; font-size: .97rem; font-weight: 600; }
.fy-post-nom a { color: inherit; text-decoration: none; }
.fy-post-nom a:hover { color: var(--fy-violet, #8b7bff); }
.fy-post-quand { font-size: .81rem; color: var(--fy-sourd, #6e6c88); margin-top: 2px; }
.fy-suivre {
  flex: none; cursor: pointer; background: none;
  font-family: var(--font-mono, monospace); font-size: .72rem; font-weight: 500; letter-spacing: .06em;
  padding: 8px 13px; border-radius: 100px;
  border: 1px solid rgba(92, 214, 232, .35); color: var(--fy-cyan, #5cd6e8);
}
.fy-suivre[aria-pressed="true"] { border-color: rgba(255,255,255,.16); color: var(--fy-sourd, #6e6c88); }
.fy-post-texte { margin: 0 0 16px; font-size: 1rem; line-height: 1.6; color: #e6e4f0; white-space: pre-wrap; overflow-wrap: anywhere; }
.fy-post-image { width: 100%; border-radius: 14px; margin-bottom: 16px; display: block; }

.fy-post-actions { display: flex; align-items: center; gap: 24px; }
.fy-action {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: .875rem; color: var(--fy-gris, #a5a3bc);
}
.fy-action:hover { color: var(--fy-encre, #f2f1f7); }
.fy-action[aria-pressed="true"] { color: #ff6b6b; }
.fy-action[aria-pressed="true"] svg { fill: #ff6b6b; }
.fy-action-fin { margin-left: auto; }

/* ── Le produit lie ──────────────────────────────────────────────────── */
.fy-produit {
  display: flex; align-items: center; gap: 14px; margin-top: 16px;
  background: var(--fy-nuit, #07071a);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; padding: 14px;
}
.fy-produit-image {
  width: 60px; height: 60px; flex: none; border-radius: 11px; overflow: hidden;
  background: repeating-linear-gradient(135deg, #191940 0 7px, #212148 7px 14px);
}
.fy-produit-image img { width: 100%; height: 100%; object-fit: cover; }
.fy-produit-corps { flex: 1; min-width: 0; }
.fy-produit-etiq {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
  font-family: var(--font-mono, monospace); font-size: .625rem; letter-spacing: .1em;
  color: var(--fy-violet, #8b7bff);
}
.fy-produit-nom { font-size: .94rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fy-produit-prix { font-family: var(--font-mono, monospace); font-size: .91rem; font-weight: 500; color: var(--fy-cyan, #5cd6e8); margin-top: 3px; }

/* ── Les commentaires ────────────────────────────────────────────────── */
.fy-commentaires { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; margin-top: 16px; border-top: 1px solid rgba(255,255,255,.07); }
.fy-commentaire { display: flex; gap: 11px; }
.fy-commentaire .fy-vignette { width: 30px; height: 30px; border-radius: 9px; font-size: .75rem; }
.fy-commentaire-texte { font-size: .91rem; line-height: 1.5; color: var(--fy-corps, #d6d4e4); overflow-wrap: anywhere; }
.fy-commentaire-texte strong { color: var(--fy-encre, #f2f1f7); }
.fy-commentaire-quand { font-size: .78rem; color: var(--fy-sourd, #6e6c88); margin-top: 4px; }
.fy-plus {
  align-self: flex-start; border: 0; background: none; cursor: pointer; padding: 0;
  font-family: inherit; font-size: .84rem; color: var(--fy-sourd, #6e6c88);
}
.fy-plus:hover { color: var(--fy-gris, #a5a3bc); }
.fy-repondre { display: flex; align-items: center; gap: 11px; padding-top: 4px; }
.fy-repondre input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  font-family: inherit; font-size: .91rem; color: var(--fy-encre, #f2f1f7);
}
.fy-repondre input::placeholder { color: var(--fy-sourd, #6e6c88); }

/* ── La carte de direct, dans le fil ─────────────────────────────────── */
.fy-carte-direct {
  background: linear-gradient(135deg, rgba(240,180,92,.1), rgba(255,107,107,.06));
  border: 1px solid rgba(240, 180, 92, .3); border-radius: 18px; padding: 22px;
  display: flex; align-items: center; gap: 20px; text-decoration: none; color: inherit;
}
.fy-carte-direct:hover { border-color: rgba(240, 180, 92, .55); color: inherit; }
.fy-direct-image {
  width: 120px; height: 88px; flex: none; border-radius: 12px; position: relative; overflow: hidden;
  background: repeating-linear-gradient(160deg, #0f0f28 0 10px, #191940 10px 20px);
}
.fy-direct-image img { width: 100%; height: 100%; object-fit: cover; }
.fy-etiq-direct {
  position: absolute; top: 8px; left: 8px;
  font-family: var(--font-mono, monospace); font-size: .56rem; font-weight: 500; letter-spacing: .1em;
  color: #fff; background: rgba(255, 107, 107, .92); border-radius: 100px; padding: 3px 7px;
}
.fy-direct-corps { flex: 1; min-width: 0; }
.fy-direct-etat {
  display: flex; align-items: center; gap: 9px; margin-bottom: 7px;
  font-family: var(--font-mono, monospace); font-size: .655rem; font-weight: 500; letter-spacing: .1em;
  color: var(--fy-ambre, #f0b45c);
}
.fy-direct-titre { font-size: 1.06rem; font-weight: 600; }
.fy-direct-sous { font-size: .875rem; color: var(--fy-gris, #a5a3bc); margin-top: 5px; }
.fy-rejoindre {
  flex: none; background: var(--fy-ambre, #f0b45c); color: var(--fy-nuit, #07071a);
  font-size: .91rem; font-weight: 600; padding: 13px 20px; border-radius: 11px; text-decoration: none;
}
.fy-rejoindre:hover { background: #f7c578; color: var(--fy-nuit, #07071a); }

/* ── La carte d'offre d'emploi ───────────────────────────────────────── */
.fy-carte-emploi {
  background: var(--fy-carte, #0c0c24);
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 18px; padding: 22px;
}
.fy-emploi-etiq {
  display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
  font-family: var(--font-mono, monospace); font-size: .655rem; font-weight: 500; letter-spacing: .1em;
  color: var(--fy-cyan, #5cd6e8);
}
.fy-carte-emploi h3 {
  margin: 0 0 8px;
  font-family: var(--font-display, 'Instrument Serif', Georgia, serif); font-weight: 400;
  font-size: 1.6rem; line-height: 1.15;
}
.fy-carte-emploi h3 a { color: inherit; text-decoration: none; }
.fy-emploi-texte { margin: 0 0 18px; font-size: .97rem; line-height: 1.6; color: var(--fy-gris, #a5a3bc); }
.fy-emploi-bas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fy-emploi-lien {
  background: rgba(255, 255, 255, .1); color: var(--fy-encre, #f2f1f7);
  font-size: .875rem; font-weight: 600; padding: 11px 17px; border-radius: 10px; text-decoration: none;
}
.fy-emploi-lien:hover { background: rgba(255, 255, 255, .18); color: var(--fy-encre, #f2f1f7); }
.fy-emploi-meta { font-size: .84rem; color: var(--fy-sourd, #6e6c88); }

/* ── L'onglet des directs ────────────────────────────────────────────── */
.fy-grille-directs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fy-tuile-direct {
  background: var(--fy-carte, #0c0c24); border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit; display: block;
}
.fy-tuile-direct:hover { border-color: rgba(255,255,255,.2); color: inherit; }
.fy-tuile-image { position: relative; height: 200px; background: repeating-linear-gradient(160deg, #0f0f28 0 12px, #191940 12px 24px); }
.fy-tuile-image img { width: 100%; height: 100%; object-fit: cover; }
.fy-tuile-corps { padding: 16px 18px; }
.fy-tuile-nom { font-size: .97rem; font-weight: 600; }
.fy-tuile-sous { font-size: .84rem; color: var(--fy-gris, #a5a3bc); margin-top: 4px; }
.fy-etiq-prevu {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font-mono, monospace); font-size: .59rem; font-weight: 500; letter-spacing: .1em;
  color: var(--fy-nuit, #07071a); background: var(--fy-ambre, #f0b45c);
  border-radius: 100px; padding: 5px 10px;
}

/* ── Le message quand il n'y a rien ──────────────────────────────────── */
.fy-vide { text-align: center; padding: 56px 24px; color: var(--fy-sourd, #6e6c88); font-size: .94rem; line-height: 1.6; }
.fy-vide strong { display: block; color: var(--fy-gris, #a5a3bc); font-size: 1.06rem; font-weight: 600; margin-bottom: 8px; }

/* ── L'infobulle de panier ───────────────────────────────────────────── */
.fy-toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 40;
  background: var(--fy-clair, #f4f2ee); color: var(--fy-nuit, #07071a);
  border-radius: 13px; padding: 15px 20px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
  font-size: .94rem; font-weight: 500;
}
.fy-toast[hidden] { display: none; }
.fy-toast a { color: #5b4bd6; font-weight: 600; text-decoration: none; }

/* ── Adaptations ─────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  /* La colonne de droite part la premiere : c'est la moins essentielle, et
     ses deux blocs se retrouvent en bas de la colonne de gauche. */
  .fy-colonnes { grid-template-columns: 220px minmax(0, 1fr); }
  .fy-cote-droit { grid-column: 1; position: static; }
}
@media (max-width: 900px) {
  .fy-colonnes { grid-template-columns: minmax(0, 1fr); padding: 20px 20px 90px; gap: 20px; }
  /* Le menu lateral fait doublon avec la barre d'onglets du bas sur mobile. */
  .fy-cote-gauche { display: none; }
  .fy-cote-droit { position: static; }
  .fy-grille-directs { grid-template-columns: 1fr; }
  .fy-carte-direct { flex-wrap: wrap; }
  .fy-rejoindre { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   Les outils du fil, en haut a droite

   Quatre gestes, dans l'ordre ou on les fait : publier, ecrire, relever
   ses alertes, aller chez soi. Le bouton porte un libelle, les trois
   autres sont des icones — une barre de quatre libelles se lirait comme
   un menu de plus, alors que ce sont des actions.
   ══════════════════════════════════════════════════════════════════════ */
/* Les outils du compte vivent dans css/barre.css. Ce bloc les redéclarait
   avec un « Publier » violet au lieu du gris de la maquette, et un avatar de
   44 px rayon 13 au lieu de 36 rayon 11 — et comme cette feuille se charge
   APRÈS barre.css, c'est elle qui gagnait. Sept pages avaient donc une barre
   différente des onze autres, sans que rien ne le signale. */

/* ══ La recherche, dans la page ════════════════════════════════════════
   Elle vivait dans la barre. La règle de barre arrêtée sur maquette y met
   cinq entrées de menu et quatre outils : mesurés, ils remplissent les
   1280 px, et il ne reste pas 420 px pour un champ. La recherche descend
   donc en tête de contenu, où elle a la place d'être large et où elle est
   plus près de ce qu'elle filtre.                                        */
.fy-recherche-ligne {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 26px;
}
.fy-recherche {
  position: relative; flex: 1; max-width: 420px;
  display: flex; align-items: center; gap: 10px;
  background: var(--fy-carte, #0c0c24);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 11px;
  height: 44px; padding: 0 14px; color: var(--fy-sourd, #6e6c88);
  transition: border-color .18s ease;
}
.fy-recherche:focus-within { border-color: rgba(139, 123, 255, .5); }
.fy-recherche input {
  flex: 1; min-width: 0; height: 100%; min-height: 0; background: none; border: 0; outline: none;
  /* 16 px : en dessous, iOS agrandit la page a chaque appui dans le champ. */
  font-family: inherit; font-size: 1rem; color: var(--fy-encre, #f2f1f7);
}
.fy-recherche input::placeholder { color: var(--fy-sourd, #6e6c88); }
.fy-recherche input::-webkit-search-cancel-button { filter: invert(.6); }

.fy-resultats {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  background: var(--fy-carte, #0c0c24);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px;
  padding: 8px; max-height: 60vh; overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
}
.fy-resultats[hidden] { display: none; }
.fy-resultats-titre {
  font-family: var(--font-mono, monospace); font-size: .62rem; letter-spacing: .12em;
  color: var(--fy-sourd, #6e6c88); padding: 10px 10px 6px;
}
.fy-resultat {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px;
  border-radius: 10px; text-decoration: none; color: inherit;
}
.fy-resultat:hover, .fy-resultat:focus-visible { background: rgba(255, 255, 255, .06); color: inherit; }
.fy-resultat-nom { font-size: .91rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fy-resultat-sous { font-size: .78rem; color: var(--fy-sourd, #6e6c88); margin-top: 2px; }

/* Elle n'est plus dans la barre : plus rien ne la comprime, et il n'y a plus
   de raison de la faire disparaître sur téléphone — c'est là qu'elle sert le
   plus. Elle prend simplement toute la largeur. */
@media (max-width: 860px) {
  .fy-recherche { max-width: none; }
}