/* Paddock social (paddock.html, onglet « Fil », fil.js) : maquette design/pack-v2 écran 03.
   Bureau : colonne gauche 210 px / fil / rail droit 280 px ; 768–1199 px : gauche réduite + fil (pas de rail droit écrasé) ;
   téléphone : le fil seul, la barre basse existante (common.js) sert de menu. Variables --td2-* (styles.css) et composants
   partagés td2-* (fin de site.css) ; classes propres préfixées pf-. */

.pf-panneau:focus { outline: none; }
.pf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.pf.pf-connecte { grid-template-columns: 210px minmax(0, 1fr) 280px; }
.pf:not(.pf-connecte) { max-width: 760px; }   /* visiteur : une colonne de lecture, pas toute la largeur */
.pf-centre { min-width: 0; }
.pf-i { width: 20px; height: 20px; flex: none; vertical-align: middle; }
.pf-charge { margin: 0; padding: 14px; color: var(--td2-muted); font-size: 14px; }
.pf-err { margin: 8px 0 0; color: var(--td2-action-hover); font: 500 13.5px/1.4 var(--f-text); }
.pf-lienb { padding: 0; border: 0; background: none; color: var(--td2-action); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* Avatars : photo du profil public, sinon initiale sur fond neutre */
.pf-av { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; background: var(--td2-neutral-bg); }
.pf-av-l { width: 56px; height: 56px; }
.pf-av-m { width: 44px; height: 44px; }
.pf-av-s { width: 32px; height: 32px; }
.pf-ini { display: inline-grid; place-items: center; color: #26333d; background: #e9ecef; font: 750 15px var(--f-display); box-shadow: inset 0 0 0 1px var(--td2-border); }
.pf-av-l.pf-ini { font-size: 21px; }
.pf-av-s.pf-ini { font-size: 12px; }
.pf-av-g { color: #fff; background: var(--g, #475467); box-shadow: none; }
.pf-av-g .pf-i { width: 20px; height: 20px; }
.td2-avatars > .pf-av-s { width: 28px; height: 28px; }

/* ---------- Colonne gauche ---------- */
.pf-gauche { position: sticky; top: 16px; display: grid; gap: 16px; min-width: 0; }
.pf-ident { padding: 18px 16px 14px; }
.pf-ident-t { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pf-ident-t > div { display: grid; min-width: 0; }
.pf-ident-t b { font: 750 17px/1.2 var(--f-display); overflow-wrap: anywhere; }
.pf-ident-t small { color: var(--td2-muted); font-size: 13px; overflow-wrap: anywhere; }
.pf-cpt { display: grid; grid-template-columns: repeat(3, 1fr); margin: 16px 0 10px; text-align: center; }
.pf-cpt > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; padding: 0 2px; }   /* chiffres alignés en haut, même si un libellé tient sur 2 lignes */
.pf-cpt > div + div { border-left: 1px solid var(--td2-border); }
.pf-cpt dd { margin: 0; font: 750 18px var(--f-display); font-variant-numeric: tabular-nums; }
.pf-cpt dt { color: var(--td2-muted); font-size: 11.5px; line-height: 1.25; }
.pf-ident-l { display: block; margin-top: 6px; color: var(--td2-action); font: 600 13px var(--f-text); text-align: center; }
.pf-nav { display: grid; gap: 4px; }
.pf-nav a, .pf-compte { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; border-radius: 9px; color: var(--td2-ink);
  font: 500 14.5px var(--f-text); text-decoration: none; }
.pf-nav a:hover, .pf-compte:hover { background: var(--td2-neutral-bg); }
.pf-nav a[aria-current=page] { background: var(--td2-active-bg); color: var(--td2-action); font-weight: 650; box-shadow: inset 3px 0 var(--td2-action); }
.pf-nav .pf-nb { margin-left: auto; }
.pf-compte { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--td2-border); border-radius: 0; font-size: 13.5px; color: var(--td2-neutral); }
.pf-compte span { flex: 1; }
.pf-i-s { width: 16px; height: 16px; }
.pf-nb { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--td2-action); color: #fff; font: 700 11.5px var(--f-text); }

/* ---------- Barre : sous-onglets, tri, recherche ---------- */
.pf-barre { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--td2-border); }
.pf-sous { display: flex; gap: 22px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pf-sous::-webkit-scrollbar { display: none; }
.pf-sous button { flex: none; min-height: 46px; padding: 0 2px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--td2-ink);
  font: 600 15px var(--f-text); cursor: pointer; white-space: nowrap; }
.pf-sous button:hover { border-bottom-color: var(--rule-strong); }
.pf-sous button[aria-pressed=true] { color: var(--td2-action); border-bottom-color: var(--td2-action); }
.pf-sous button:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 2px; }
.pf-public-t { margin: 0; padding-bottom: 12px; font: 700 15px var(--f-text); }
.pf-tri { flex: none; margin-bottom: 7px; }
.pf-tri select { min-height: 36px; padding: 0 30px 0 12px; border: 1px solid var(--td2-border); border-radius: 8px; background-color: #fff; color: var(--td2-ink); font: 500 13px var(--f-text); }
.pf-cherche { display: flex; gap: 8px; margin-bottom: 16px; }
.pf-cherche-in { flex: 1; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--td2-border); border-radius: 10px; background: #fff; min-width: 0; }
.pf-cherche-in:focus-within { border-color: var(--red-deep); box-shadow: var(--focus); }
.pf-cherche-in .pf-i { color: var(--td2-muted); }
.pf-cherche-in input { flex: 1; min-width: 0; height: 42px; border: 0; outline: none; background: none; font: 500 14.5px var(--f-text); color: var(--td2-ink); }
.pf-cherche .btn { flex: none; height: 44px; }
#pf-filtre { margin-bottom: 14px; }
.pf-res { margin: 0; font: 600 14.5px var(--f-text); }
.pf-retour { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 6px; border: 1px solid var(--td2-border); border-radius: 9px; background: #fff;
  color: var(--td2-ink); font: 600 14px var(--f-text); cursor: pointer; }

/* ---------- Composeur ---------- */
.pf-comp { padding: 16px; margin-bottom: 18px; }
.pf-comp-h { display: flex; align-items: flex-start; gap: 12px; }
.pf-comp-h textarea { flex: 1; min-width: 0; min-height: 48px; padding: 12px 14px; border: 1px solid var(--td2-border); border-radius: 10px; background: var(--td2-bg);
  color: var(--td2-ink); font: 500 15px/1.45 var(--f-text); resize: none; }
.pf-comp-h textarea:focus { outline: none; border-color: var(--red-deep); background: #fff; box-shadow: var(--focus); }
.pf-comp-a { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.pf-comp-b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--td2-border);
  border-radius: 9px; background: #fff; color: var(--td2-ink); font: 600 14px var(--f-text); cursor: pointer; }
.pf-comp-b:hover:not(:disabled) { background: var(--td2-neutral-bg); }
.pf-comp-b:disabled { opacity: .45; cursor: not-allowed; }
.pf-comp-r { color: var(--td2-action); }
.pf-court { display: none; }
.pf-comp-f { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--td2-border); }
.pf-aud { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding-left: 10px; border: 1px solid var(--td2-border); border-radius: 9px; background: #fff; }
.pf-aud .pf-i { width: 17px; height: 17px; color: var(--td2-neutral); }
.pf-aud select { min-width: 0; max-width: 230px; min-height: 40px; padding: 0 28px 0 2px; border: 0; background-color: transparent; color: var(--td2-ink); font: 600 13.5px var(--f-text); }
.pf-comp-n { flex: 1; color: var(--td2-muted); font-size: 12.5px; text-align: right; }
.pf-comp-f .btn { flex: none; }
.pf-pj:empty { display: none; }
.pf-pj { margin-top: 12px; display: grid; gap: 8px; }
.pf-pj-ph { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pf-pj-ph li { position: relative; width: 92px; height: 92px; border-radius: 9px; overflow: hidden; background: var(--td2-neutral-bg); }
.pf-pj-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-pj-att { display: grid; place-items: center; height: 100%; color: var(--td2-muted); font-size: 12px; }
.pf-pj-e { position: absolute; inset: auto 0 0; padding: 3px 4px; background: rgba(180, 35, 24, .92); color: #fff; font-size: 10.5px; line-height: 1.2; }
.pf-pj-x { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(22, 26, 29, .72); color: #fff; cursor: pointer; }
.pf-pj-x .pf-i { width: 15px; height: 15px; }
.pf-pj-c { position: relative; display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 46px 10px 12px; border-radius: 9px; background: var(--td2-bg); font-size: 14px; }
.pf-pj-c .pf-pj-x { top: 50%; transform: translateY(-50%); background: none; color: var(--td2-ink); }
.pf-pj-c .pf-pj-x:hover { background: var(--td2-neutral-bg); }

/* Invitation (visiteur, pseudo manquant) */
.pf-invite { padding: 18px; margin-bottom: 18px; }
.pf-invite p { margin: 0; }
.pf-invite-a { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px !important; }

/* ---------- Publication ---------- */
.pf-liste { display: grid; gap: 18px; }
.pf-post { padding: 20px; }
.pf-post-h { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.pf-post-h > a { flex: none; border-radius: 50%; }
.pf-post-q { flex: 1; min-width: 0; }
.pf-post-q p { margin: 0; line-height: 1.4; }
.pf-nom { color: var(--td2-ink); font-weight: 700; text-decoration: none; }
a.pf-nom:hover { text-decoration: underline; }
.pf-handle, .pf-act { color: var(--td2-muted); font-size: 13.5px; }
.pf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--td2-muted); font-size: 12.5px; }
.pf-meta a { color: inherit; text-decoration: none; }
.pf-meta a:hover { text-decoration: underline; }
.pf-aud-b { display: inline-flex; align-items: center; gap: 4px; }
.pf-aud-b .pf-i { width: 14px; height: 14px; }
.pf-menu { position: relative; flex: none; margin: -8px -8px 0 0; }
.pf-menu summary { list-style: none; }
.pf-menu summary::-webkit-details-marker { display: none; }
.pf-menu > div { position: absolute; z-index: 20; right: 0; top: calc(100% + 4px); display: grid; min-width: 190px; padding: 6px; background: #fff; border: 1px solid var(--td2-border);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(22, 26, 29, .12); }
.pf-menu > div button { min-height: 42px; padding: 0 12px; border: 0; border-radius: 7px; background: none; color: var(--td2-ink); font: 500 14px var(--f-text); text-align: left; cursor: pointer; }
.pf-menu > div button:hover { background: var(--td2-neutral-bg); }
.pf-texte { margin: 0 0 12px; font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.pf-tag, .pf-ment { color: var(--td2-action); font-weight: 600; text-decoration: none; }
a.pf-tag:hover, a.pf-ment:hover { text-decoration: underline; }
.pf-texte a:not(.pf-tag):not(.pf-ment) { color: var(--td2-action); overflow-wrap: anywhere; }
.pf-retire { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background: var(--td2-bg); color: var(--td2-muted); font-size: 13.5px; font-style: italic; }

/* Photos : 1 grande, 2 côte à côte, 3 (1 + 2), 4 en carré */
.pf-photos { display: grid; gap: 4px; margin: 0 0 12px; border-radius: 10px; overflow: hidden; }
.pf-ph { display: block; min-width: 0; background: var(--td2-neutral-bg); }
.pf-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-photos-1 .pf-ph img { height: auto; max-height: 560px; object-fit: contain; background: #111; }
.pf-photos-2 { grid-template-columns: 1fr 1fr; aspect-ratio: 2 / 1.1; }
.pf-photos-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 3 / 2; }
.pf-photos-3 .pf-ph:first-child { grid-row: 1 / 3; }
.pf-photos-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1 / .8; }

/* Carte « chrono » : un temps déclaré reste déclaré (« Avec preuve » ≠ homologué) */
.pf-lap { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; padding: 16px; border: 1px solid var(--td2-border); border-radius: 10px; }
.pf-trace { width: 54px; height: 54px; }
.pf-lap-c { flex: 1; display: grid; gap: 2px; min-width: 0; }
.pf-lap-c a { color: var(--td2-ink); text-decoration: none; }
.pf-lap-c a:hover { text-decoration: underline; }
.pf-lap-c b { font: 700 16px var(--f-display); }
.pf-lap-c small { color: var(--td2-muted); font-size: 12.5px; }
.pf-lap-t { display: grid; justify-items: end; gap: 6px; }
.pf-lap-t strong { font: 800 30px/1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pf-lap-b { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.pf-lap-b .td2-badge { padding: 3px 8px; font-size: 11.5px; }

/* Carte « sortie » : journée liée, date, organisateur, accès au groupe (pas de photo inventée : le tracé du circuit) */
.pf-sortie { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); margin: 0 0 12px; border: 1px solid var(--td2-border); border-radius: 10px; overflow: hidden; }
.pf-sortie-v { display: grid; place-items: center; padding: 18px; background: var(--td2-bg); }
.pf-trace-g { max-width: 170px; }
.pf-sortie-c { padding: 16px 18px; min-width: 0; }
.pf-sortie-c h3 { margin: 0 0 8px; font: 750 19px/1.2 var(--f-display); }
.pf-sortie-c p { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--td2-neutral); font-size: 13.5px; }
.pf-sortie-c p .pf-i, .pf-sortie-c p .ico { width: 16px; height: 16px; flex: none; }
.pf-qui { margin-top: 10px !important; }
.pf-sortie-a { flex-wrap: wrap; margin-top: 14px !important; }
.pf-sortie-a .btn { display: inline-flex; align-items: center; gap: 6px; }
.pf-sortie-a .pf-i { width: 16px; height: 16px; }

/* Réactions et commentaires */
.pf-post-a { display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid #eef0f2; }
.pf-like, .pf-rx-b, .pf-com-b, .pf-like-v { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 10px; border: 0; border-radius: 8px; background: none;
  color: var(--td2-ink); font: 600 13.5px var(--f-text); cursor: pointer; text-decoration: none; }
.pf-like-v { cursor: default; padding-left: 4px; }
.pf-like:hover, .pf-rx-b:hover, .pf-com-b:hover { background: var(--td2-neutral-bg); }
.pf-like[aria-pressed=true] { color: var(--td2-action); }
.pf-like[aria-pressed=true] .pf-i path { fill: currentColor; }
.pf-com-b { margin-left: auto; }
.pf-com-b .pf-n { display: none; }
.pf-like + .pf-com-b .pf-n, .pf-rx-b + .pf-com-b .pf-n { display: inline; }
.pf-com-b .pf-com-l { color: var(--td2-neutral); font-weight: 500; }
a.pf-com-b { color: var(--td2-action); font-weight: 500; }
.pf-coms { margin-top: 8px; padding-top: 12px; border-top: 1px solid #eef0f2; }
.pf-cl { display: grid; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.pf-cl-r { padding-left: 42px; }
.pf-cl-r .pf-cl { margin: 0; }
.pf-com { display: flex; gap: 10px; align-items: flex-start; }
.pf-com.is-cible .pf-com-bulle { box-shadow: 0 0 0 2px var(--td2-action); }
.pf-com-c { min-width: 0; flex: 1; }
.pf-com-bulle { display: inline-block; max-width: 100%; padding: 8px 12px; border-radius: 4px 14px 14px 14px; background: var(--td2-bg); font-size: 14px; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.pf-com-m { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 2px 0 0 4px; color: var(--td2-muted); font-size: 12px; }
.pf-com-m button { min-height: 32px; padding: 0 4px; border: 0; background: none; color: var(--td2-neutral); font: 600 12px var(--f-text); cursor: pointer; }
.pf-com-m button:hover { color: var(--td2-ink); text-decoration: underline; }
.pf-com-v { margin: 0 0 12px; color: var(--td2-muted); font-size: 13.5px; }
.pf-cf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 10px; align-items: end; }
.pf-cf > .pf-av { align-self: start; }
.pf-cf textarea { min-height: 40px; padding: 9px 12px; border: 1px solid var(--td2-border); border-radius: 18px; background: var(--td2-bg); color: var(--td2-ink);
  font: 500 14px/1.4 var(--f-text); resize: none; }
.pf-cf textarea:focus { outline: none; border-color: var(--red-deep); background: #fff; box-shadow: var(--focus); }
.pf-cf .btn { height: 40px; }
.pf-cf-rep { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 0; color: var(--td2-neutral); font-size: 12.5px; }
.pf-cf-rep[hidden] { display: none; }
.pf-cf-rep button { min-height: 30px; padding: 0 6px; border: 0; background: none; color: var(--td2-action); font: 600 12.5px var(--f-text); cursor: pointer; }
.pf-cf .pf-err { grid-column: 1 / -1; }

/* États : chargement, vide, erreur */
.pf-squelette { display: grid; gap: 12px; padding: 20px; }
.pf-squelette span { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--td2-neutral-bg), #fff, var(--td2-neutral-bg)); background-size: 200% 100%; }
.pf-squelette span:first-child { width: 40%; height: 18px; }
.pf-squelette span:last-child { width: 70%; }
@media (prefers-reduced-motion: no-preference) { .pf-squelette span { animation: pf-luit 1.4s linear infinite; } }
@keyframes pf-luit { to { background-position: -200% 0; } }
.pf-vide { padding: 34px 24px; text-align: center; }
.pf-vide h3 { margin: 0 0 6px; font: 750 19px var(--f-display); }
.pf-vide p { margin: 0 auto; max-width: 46ch; color: var(--td2-neutral); }
.pf-vide-a { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px !important; }
.pf-suite { margin: 18px 0 0; text-align: center; }
.pf-suite .btn[hidden] { display: none; }

/* ---------- Rail droit ---------- */
.pf-droite { position: sticky; top: 16px; display: grid; gap: 16px; min-width: 0; }
.pf-rc { padding: 16px; }
.pf-rc-t { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pf-rc h3 { margin: 0; font: 750 16.5px var(--f-display); }
.pf-rc-t a { flex: none; color: var(--td2-action); font: 600 12.5px var(--f-text); text-decoration: none; }
.pf-rc-t a:hover { text-decoration: underline; }
.pf-rc-c { color: var(--td2-muted); font-weight: 500; }
.pf-rc-v { margin: 0 0 12px; color: var(--td2-muted); font-size: 13.5px; }
.pf-sortie-mini { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 10px; background: var(--td2-bg); }
.pf-sortie-mini > div { display: grid; gap: 3px; min-width: 0; }
.pf-sortie-mini b { font: 700 15px var(--f-display); }
.pf-sortie-mini small { display: flex; align-items: center; gap: 6px; color: var(--td2-neutral); font-size: 12.5px; }
.pf-sortie-mini small .pf-i { width: 14px; height: 14px; }
.pf-rc-l { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 12px 0; }
.pf-rc-n { color: var(--td2-neutral); font-size: 12.5px; }
.pf-rc-l .td2-badge { margin-left: auto; }
.pf-btn-plein { display: flex; width: 100%; justify-content: center; align-items: center; gap: 6px; }
.pf-btn-plein .pf-i { width: 16px; height: 16px; }
.pf-enligne { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; margin: 0; padding: 0; list-style: none; }
.pf-enligne a { position: relative; display: grid; justify-items: center; gap: 2px; color: var(--td2-ink); text-align: center; text-decoration: none; }
.pf-enligne b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.pf-enligne small { color: var(--td2-success); font-size: 11.5px; }
.pf-pt { position: absolute; top: 31px; left: calc(50% + 12px); width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: var(--td2-success); }
.pf-convs { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pf-convs a { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px; margin: 0 -6px; border-radius: 9px; color: var(--td2-ink); text-decoration: none; }
.pf-convs a:hover { background: var(--td2-neutral-bg); }
.pf-conv-c { flex: 1; display: grid; min-width: 0; }
.pf-conv-c b { font-size: 14px; }
.pf-conv-c small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--td2-muted); font-size: 12.5px; }
.pf-conv-f { display: grid; justify-items: end; gap: 4px; color: var(--td2-muted); font-size: 11.5px; }
.pf-rc-pub h3 { margin-bottom: 10px; }
.pf-rc-liens { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.pf-rc-liens a { display: grid; place-items: center; min-height: 42px; border: 1px solid var(--td2-border); border-radius: 9px; color: var(--td2-ink); font: 600 13.5px var(--f-text); text-decoration: none; }
.pf-rc-liens a:hover { background: var(--td2-neutral-bg); }

/* ---------- Fenêtre (chrono, sortie, signalement) ---------- */
.pf-dlg { width: min(560px, calc(100vw - 24px)); max-height: min(720px, calc(100dvh - 24px)); padding: 0; border: 1px solid var(--td2-border); border-radius: 14px; color: var(--td2-ink);
  box-shadow: 0 20px 60px rgba(22, 26, 29, .25); }
.pf-dlg::backdrop { background: rgba(22, 26, 29, .45); }
.pf-dlg-tete { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 20px; background: #fff;
  border-bottom: 1px solid var(--td2-border); }
.pf-dlg-tete h2 { margin: 0; font: 750 19px var(--f-display); }
#pf-dlg-c { padding: 16px 20px 20px; }
.pf-dlg-a { margin: 0 0 14px; color: var(--td2-neutral); font-size: 14px; }
.pf-dlg-h { margin: 16px 0 8px; font: 700 14px var(--f-text); }
.pf-dlg-q { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; margin-bottom: 8px; border: 1px solid var(--td2-border); border-radius: 10px; }
.pf-dlg-q:focus-within { border-color: var(--red-deep); box-shadow: var(--focus); }
.pf-dlg-q input { flex: 1; min-width: 0; height: 42px; border: 0; outline: none; font: 500 15px var(--f-text); }
.pf-dlg-l { display: grid; gap: 6px; font: 600 14px var(--f-text); }
.pf-dlg-l textarea { padding: 10px 12px; border: 1px solid var(--td2-border); border-radius: 10px; font: 500 14.5px/1.45 var(--f-text); resize: vertical; }
.pf-dlg-b { display: flex; justify-content: flex-end; gap: 10px; margin: 16px 0 0; }
.pf-choix { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pf-choix button { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; width: 100%; min-height: 56px; padding: 10px 12px; border: 1px solid var(--td2-border);
  border-radius: 10px; background: #fff; color: var(--td2-ink); font: 500 14px var(--f-text); text-align: left; cursor: pointer; }
.pf-choix button:hover, .pf-choix button:focus-visible { border-color: var(--td2-action); background: #fff6f5; }
.pf-choix button b { grid-row: 1 / 3; align-self: center; font: 750 16px var(--f-display); font-variant-numeric: tabular-nums; }
.pf-choix button small { color: var(--td2-muted); font-size: 12.5px; }
.pf-choix-v { padding: 12px; color: var(--td2-muted); font-size: 14px; }

/* ---------- Tablette : colonne gauche réduite, pas de rail droit écrasé ---------- */
@media (max-width: 1199px) {
  .pf.pf-connecte { grid-template-columns: 180px minmax(0, 1fr); gap: 20px; }
  .pf-droite { display: none; }
  .pf-nav a, .pf-compte { padding: 10px; font-size: 13.5px; }
  .pf-ident { padding: 14px 12px 12px; }
  .pf-ident-t { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- Téléphone : le fil seul ; profil, garage, chronos par la barre basse (« Mon espace », « Plus ») ---------- */
@media (max-width: 767px) {
  .pf, .pf.pf-connecte { display: block; }
  .pf-gauche, .pf-droite { display: none; }
  .pf-barre { display: block; border-bottom: 0; margin-bottom: 10px; }
  .pf-sous { gap: 18px; border-bottom: 1px solid var(--td2-border); }
  .pf-sous button { font-size: 14.5px; }
  .pf-tri { display: flex; justify-content: flex-end; margin: 10px 0 0; }
  .pf-tri select { font-size: 12.5px; padding-right: 26px; }
  .pf-cherche .btn { display: none; }
  .pf-comp { padding: 12px; }
  .pf-comp-h .pf-av { width: 36px; height: 36px; }
  .pf-comp-a { gap: 6px; }
  .pf-comp-b { gap: 5px; padding: 6px 4px; font-size: 12.5px; }
  .pf-comp-b .pf-i { width: 17px; height: 17px; }
  .pf-long { display: none; }
  .pf-court { display: inline; }
  .pf-comp-f { flex-wrap: wrap; }
  .pf-aud { flex: 1; }
  .pf-aud select { max-width: none; width: 100%; }
  .pf-comp-n { order: 3; flex-basis: 100%; text-align: left; }
  .pf-post { padding: 15px; }
  .pf-texte { font-size: 14.5px; }
  .pf-lap { flex-wrap: wrap; padding: 14px; }
  .pf-lap-c { flex-basis: calc(100% - 70px); }
  .pf-lap-t { flex-basis: 100%; grid-auto-flow: column; justify-content: space-between; align-items: center; }
  .pf-lap-t strong { font-size: 27px; }
  .pf-sortie { grid-template-columns: minmax(0, 1fr); }
  .pf-sortie-v { padding: 12px; }
  .pf-trace-g { max-width: 120px; }
  .pf-cl-r { padding-left: 24px; }
  .pf-post-a { gap: 2px; }
  .pf-com-b .pf-com-l { display: none; }
  .pf-com-b { margin-left: 0; }
  a.pf-com-b { margin-left: auto; font-size: 12.5px; }
  .pf-photos-1 .pf-ph img { max-height: 420px; }
}
@media (max-width: 359px) {
  .pf-sous { gap: 12px; }
  .pf-sous button { font-size: 13.5px; }
  .pf-comp-b span { font-size: 11.5px; }
}

/* Modifier une publication (fil.js) */
.pf-modif { margin-left: 6px; color: var(--ink-3); font-size: 12.5px; font-style: italic; }
.pf-edit { display: grid; gap: 10px; margin: 12px 0 4px; }
.pf-edit-z { position: relative; }
.pf-edit textarea { width: 100%; min-height: 84px; padding: 10px 12px; border: 1px solid var(--td2-border, var(--rule-strong)); border-radius: 10px;
  background: #fff; color: var(--ink); font: 500 15px/1.45 var(--f-text); resize: vertical; }
.pf-edit textarea:focus { outline: none; border-color: var(--ink); box-shadow: var(--focus); }
.pf-edit-b { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.pf-edit-b .pf-aud { margin-right: auto; }

/* Mentions @pseudo bien visibles : couleur de l'action et surlignage léger (cliquables quand le profil est public) */
.pf-ment { display: inline; padding: 0 4px; border-radius: 5px; background: color-mix(in srgb, var(--td2-action) 12%, transparent);
  color: var(--td2-action); font-weight: 700; text-decoration: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
a.pf-ment:hover, a.pf-ment:focus-visible { background: color-mix(in srgb, var(--td2-action) 22%, transparent); text-decoration: none; }

/* Zone des commentaires toujours ouverte : « Voir les N commentaires » puis le champ */
.pf-coms { margin-top: 10px; }
.pf-cl-z:empty { display: none; }
.pf-voir { display: block; margin: 0 0 8px; padding: 2px 0; border: 0; background: none; color: var(--ink-2); font: 600 14px var(--f-text); cursor: pointer; }
.pf-voir:hover { color: var(--ink); text-decoration: underline; }

/* Réactions 👍 ❤️ 🏁 🔥 👎 (fil.js, 24/10) : bouton « J'aime » (couleur de ma réaction), compteur des 3 plus données + total,
   barre flottante au survol prolongé / appui long / Entrée, « qui a réagi » dans la fenêtre du fil */
.pf-rx-b, .pf-rx-l { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.pf-rx-b .pf-i { width: 19px; height: 19px; }
.pf-rx-e { font-size: 18px; line-height: 1; }
.pf-rx-b + .pf-com-b { margin-left: 0; }
.rx-jaime { color: #1f5fbf !important; }
.rx-coeur { color: var(--td2-action) !important; }
.rx-damier { color: var(--td2-ink) !important; }
.rx-feu { color: #c2410c !important; }
.rx-bof { color: #5b6168 !important; }
.pf-rx-b[aria-pressed=true] span:last-child, .pf-rx-l[aria-pressed=true] { font-weight: 700; }
.pf-rx-s, .pf-rx-c { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; color: var(--td2-neutral); font: 500 13px/1 var(--f-text);
  font-variant-numeric: tabular-nums; }
.pf-rx-s[hidden], .pf-rx-c[hidden] { display: none; }
.pf-rx-s { min-height: 44px; padding: 4px 8px; border-radius: 8px; }
.pf-rx-b ~ .pf-rx-s { margin-left: auto; }
button.pf-rx-s, button.pf-rx-c { cursor: pointer; }
button.pf-rx-s:hover .pf-n { color: var(--td2-ink); text-decoration: underline; }
.pf-rx-pile { display: inline-flex; }
.pf-rx-pe { display: grid; place-items: center; width: 20px; height: 20px; margin-left: -4px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 2px #fff;
  font-size: 13px; line-height: 1; }
.pf-rx-pe:first-child { margin-left: 0; }
.pf-like-v + .pf-like-v, .pf-rx-s + .pf-like-v { margin-left: 0; }
/* Commentaire : petit compteur accroché en bas à droite de la bulle, lien « J'aime » sous la bulle */
.pf-com-bulle { position: relative; }
.pf-com-bulle:has(> .pf-rx-c:not([hidden])) { margin-bottom: 8px; padding-right: 14px; }
.pf-rx-c { position: absolute; right: -10px; bottom: -11px; gap: 3px; min-height: 22px; padding: 1px 6px 1px 3px; border-radius: 99px; background: #fff;
  box-shadow: 0 1px 3px rgba(22, 26, 29, .18); font-size: 12px; color: var(--td2-neutral); }
.pf-rx-c .pf-rx-pe { width: 17px; height: 17px; font-size: 11.5px; box-shadow: none; }
button.pf-rx-c:hover { color: var(--td2-ink); }
.pf-com-m .pf-rx-l { color: var(--td2-neutral); }
/* Barre des réactions */
.pf-rx-barre { position: fixed; z-index: 1000; display: flex; gap: 2px; padding: 5px; background: #fff; border: 1px solid var(--td2-border, #d0d5dd);
  border-radius: 99px; box-shadow: 0 8px 24px rgba(22, 26, 29, .18); }
.pf-rx-o { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 99px; background: none; cursor: pointer;
  -webkit-touch-callout: none; user-select: none; touch-action: manipulation; }
.pf-rx-oe { font-size: 27px; line-height: 1; }
.pf-rx-o.is-moi { background: var(--td2-active-bg, #feeceb); }
.pf-rx-o:focus-visible { outline: 2px solid var(--td2-action); outline-offset: 1px; }
.pf-rx-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; padding: 3px 8px; border-radius: 99px; background: var(--td2-ink, #161a1d); color: #fff;
  font: 600 11.5px/1.3 var(--f-text); white-space: nowrap; opacity: 0; transform: translateX(-50%); pointer-events: none; }
.pf-rx-barre.is-dessous .pf-rx-tip { bottom: auto; top: calc(100% + 6px); }
.pf-rx-o:hover .pf-rx-tip, .pf-rx-o:focus-visible .pf-rx-tip, .pf-rx-o.is-vise .pf-rx-tip { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .pf-rx-barre { animation: pf-rx-ouvre .16s ease-out; transform-origin: 20% 100%; }
  .pf-rx-barre.is-dessous { transform-origin: 20% 0; }
  .pf-rx-oe { transition: transform .12s ease-out; }
  .pf-rx-o:hover .pf-rx-oe, .pf-rx-o:focus-visible .pf-rx-oe, .pf-rx-o.is-vise .pf-rx-oe { transform: scale(1.25) translateY(-3px); }
}
@keyframes pf-rx-ouvre { from { opacity: 0; transform: scale(.85) translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 359px) { .pf-rx-o { width: 40px; height: 40px; } .pf-rx-oe { font-size: 24px; } }
/* Qui a réagi */
.pf-rx-onglets { display: flex; gap: 4px; margin: 0 0 8px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--td2-border, #e4e7ec); }
.pf-rx-onglets button { flex: none; min-height: 40px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--td2-neutral);
  font: 600 14px/1 var(--f-text); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; }
.pf-rx-onglets button[aria-pressed=true] { color: var(--td2-ink); border-bottom-color: var(--td2-action); }
.pf-rx-onglets button:focus-visible { outline: 2px solid var(--td2-action); outline-offset: -2px; }
.pf-rx-qui { display: grid; gap: 2px; max-height: min(420px, 60vh); margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.pf-rx-qui li { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.pf-rx-qn { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pf-rx-qe { flex: none; font-size: 21px; line-height: 1; }