/* Moments partagés — stories | feed | filtres.
   Éditorial Zihma : ivoire, vert, photographie. Pas un réseau social. */

.page--fil{background:var(--fond)}
.page--fil ::selection{background:var(--menthe);color:var(--vert-encre)}

.fil{display:grid;grid-template-columns:208px minmax(0,1fr) 284px;
  gap:var(--e5);align-items:start;width:100%;max-width:1260px;margin:0 auto;
  padding:var(--e5) var(--e6) var(--e9)}
.fil-col--stories{position:sticky;top:88px;align-self:start;
  display:flex;flex-direction:column;max-height:calc(100dvh - 112px);
  overflow:hidden}
.fil-col--stories .fil-stys{overflow:auto;min-height:0;
  scrollbar-width:thin;scrollbar-color:var(--bord) transparent}
.fil-col--stories .fil-stys::-webkit-scrollbar{width:4px}
.fil-col--stories .fil-stys::-webkit-scrollbar-thumb{
  background:var(--bord);border-radius:var(--r-pilule)}
.fil-col--rail{position:sticky;top:88px;align-self:start;
  display:flex;flex-direction:column;gap:0;overflow:visible;max-height:none}
.fil-rail__share{width:100%;justify-content:center;margin:0 0 var(--e3);
  transition:box-shadow 180ms ease}
.fil-col__titre{margin:0 0 var(--e1);font-size:var(--t4);font-weight:700;
  color:var(--vert-encre);letter-spacing:-.015em}
.fil-col__sous{margin:0 0 var(--e3);font-size:var(--t1);color:var(--gris-faible);
  line-height:1.4;font-weight:400}
.fil-col__lien{display:inline-flex;margin-top:var(--e2);font-size:var(--t2);
  font-weight:600;color:var(--vert)}

/* Le bloc « Filtrer » (21/09/2026) : un panneau de filtres ZIHMA, compose
   avec les primitives partagees d'app.css — SearchField (.champ-cherche),
   SelectField (.champ-select, pose par socle.js : UN seul contour), FilterChip
   (.fchip), Switch (.interrupteur), etiquettes .filtre__eti en casse normale.
   Ici ne restent que la boite et le rythme vertical. */
.fil-bloc--compact{display:flex;flex-direction:column;gap:var(--e4);
  padding:var(--e4);background:var(--surface);box-shadow:none}
.fil-bloc__tete{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--e2)}
.fil-bloc--compact .fil-col__titre{margin:0;font-size:var(--t5)}
.fil-reset{margin:0;padding:0;border:0;background:none;font:inherit;
  font-size:var(--t2);font-weight:600;color:var(--vert);cursor:pointer;
  min-height:var(--tactile)}
.fil-reset:hover,.fil-reset:focus-visible{text-decoration:underline}
.fil-reset:focus-visible{outline:2px solid var(--vert);outline-offset:2px}
.fil-cherche-box{position:relative}
.fil-sugg{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:8;
  margin:0;padding:var(--e2);background:var(--surface);border:var(--bord-popover);
  border-radius:var(--r-popover);box-shadow:var(--ombre-popover);max-height:min(240px,50vh);
  overflow:auto}
.fil-sugg__g{margin:var(--e2) var(--e2) 4px;font-size:var(--t1);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gris-faible)}
.fil-sugg__g:first-child{margin-top:0}
.fil-sugg__i{display:block;width:100%;margin:0;padding:8px var(--e2);border:0;
  border-radius:var(--r2);background:none;font:inherit;font-size:var(--t3);
  text-align:left;cursor:pointer;color:var(--encre)}
.fil-sugg__i:hover,.fil-sugg__i:focus-visible{background:var(--menthe);color:var(--vert)}
.fil-fcompact__sel,.fil-fsec{display:flex;flex-direction:column;gap:var(--e1);margin:0;min-width:0}
.fil-fcompact__sel .champ-select{width:100%}
.fil-opt--tog{position:relative;margin:0;min-height:var(--tactile);gap:var(--e3);
  justify-content:flex-start}
.fil-opt--tog .interrupteur__texte{font-size:var(--t3);line-height:1.3}
.fil-opt--tog .interrupteur__piste{order:-1}
.fil-compte{margin:0;font-size:var(--t2);color:var(--gris-texte)}
.fil-opts{display:flex;flex-direction:column;gap:var(--e2);margin:var(--e3) 0}
.fil-opt{display:flex;align-items:center;gap:var(--e2);font-size:var(--t3);
  min-height:var(--tactile);cursor:pointer}
.fil-opt input{accent-color:var(--vert);width:16px;height:16px;flex:0 0 auto}
.fil-tri{margin:0;font-size:var(--t2);color:var(--gris-texte)}
.fil-bloc__surtitre{margin:var(--e3) 0 var(--e2);font-size:var(--t2);
  font-weight:600;color:var(--gris-texte)}

/* ---- stories ---- */
.fil-stys{display:flex;flex-direction:column;gap:var(--e1);min-height:0;
  padding:var(--e1) var(--e1) var(--e2) 0}
.fil-sty{display:flex;align-items:center;gap:var(--e3);width:100%;
  padding:var(--e2) var(--e2);border:0;border-radius:var(--r-champ);
  background:none;text-align:left;cursor:pointer;min-height:var(--tactile);
  color:inherit;font:inherit;transition:background-color var(--mvt)}
.fil-sty:hover,.fil-sty:focus-visible{background:var(--gris-champ)}
.fil-sty:focus-visible{outline:2px solid var(--vert);outline-offset:2px}
.fil-sty__anneau{display:grid;place-items:center;width:52px;height:52px;flex:0 0 52px;
  border-radius:50%;background:var(--vert);padding:2px;
  transition:background-color var(--mvt),transform var(--mvt)}
.fil-sty:hover .fil-sty__anneau{transform:scale(1.04)}
.fil-sty[data-vue="oui"] .fil-sty__anneau{background:var(--bord-fort);padding:1px}
.fil-sty__anneau .fil-av{width:100%;height:100%;border:2px solid var(--surface);
  border-radius:50%;object-fit:cover;box-sizing:border-box}
.fil-sty__anneau .fil-av--init{font-size:var(--t1);line-height:1}
.fil-sty__txt{min-width:0;display:flex;flex-direction:column;gap:1px}
.fil-sty__nom{display:block;font-size:var(--t3);font-weight:600;color:var(--encre);
  line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:148px}
.fil-sty__nom--court{display:none}
.fil-sty__n{display:block;font-size:var(--t1);color:var(--gris-faible);line-height:1.2}

.fil-av{width:40px;height:40px;border-radius:50%;object-fit:cover;display:block;
  background:var(--menthe);flex:0 0 auto}
.fil-av--init{display:grid;place-items:center;font-size:var(--t2);font-weight:700;color:var(--vert)}
.fil-post[data-fil-role="zihma"] > .fil-post__tete > .fil-av{object-fit:contain;padding:5px;
  background:var(--fond);box-sizing:border-box}

/* ---- feed ---- */
.fil-feed__tete{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--e4);margin-bottom:var(--e4)}
.fil-feed__share{transition:opacity 180ms ease}
@media (min-width:1024px){
  .fil-feed__share{display:none}
}
.fil-feed__titre{margin:0;font-size:clamp(26px,2.4vw,30px);font-weight:800;
  color:var(--vert-encre);letter-spacing:-.02em;line-height:1.12;font-family:var(--police-titre)}
.fil-feed__sous{margin:var(--e2) 0 0;font-size:var(--t3);color:var(--gris-texte);
  line-height:1.45;font-weight:400;max-width:36ch}
.fil-feed__cta{display:flex;gap:var(--e2);flex-wrap:wrap;align-items:center;
  flex:0 0 auto}
.fil-feed__fm{display:none}
.fil-feed__liste{display:flex;flex-direction:column;gap:var(--e5)}
.fil-feed__plus{display:flex;justify-content:center;margin:var(--e5) 0 0}
.fil-vide{padding:var(--e6) var(--e5);text-align:center;background:var(--surface);
  border:1px solid var(--bord);border-radius:var(--r-carte)}
.fil-vide__t{margin:0 0 var(--e4);font-size:var(--t6);color:var(--gris-fort);line-height:1.4}
.fil-vide__cta{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--e2)}

.fil-post{background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-carte);
  padding:var(--e4) var(--e4) var(--e3);display:flex;flex-direction:column;gap:var(--e3);
  box-shadow:none}
.fil-post[hidden]{display:none}
.fil-post__tete{display:flex;align-items:center;gap:var(--e3)}
.fil-post__id{flex:1 1 auto;min-width:0}
.fil-post__qui{margin:0;display:flex;align-items:center;gap:var(--e2);min-width:0}
.fil-post__qui b{font-weight:700;color:var(--encre);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;font-size:var(--t4)}
.fil-post__role{display:inline;font-size:var(--t1);font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--gris-texte)}
.fil-post__meta{margin:var(--e1) 0 0;font-size:var(--t1);color:var(--gris-texte);display:flex;
  align-items:baseline;flex-wrap:wrap;column-gap:var(--e2)}
.fil-post__verif{color:var(--vert);font-weight:600}
.fil-av[src*="logo-zihma"]{object-fit:contain;padding:5px;background:var(--surface);
  box-sizing:border-box}
.fil-post__texte{margin:0;font-size:var(--t5);line-height:1.6;color:var(--encre)}
.fil-post__texte.is-clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
  overflow:hidden}
.fil-post__plus{margin:calc(var(--e2) * -1) 0 0;padding:0;border:0;background:none;
  font:inherit;font-size:var(--t3);font-weight:600;color:var(--vert);cursor:pointer;
  align-self:flex-start;min-height:var(--tactile)}
.fil-post__plus:hover,.fil-post__plus:focus-visible{text-decoration:underline}
.fil-post__plus:focus-visible{outline:2px solid var(--vert);outline-offset:2px}
.fil-post__menu{position:relative}
.fil-post__menu-b{list-style:none;display:grid;place-items:center;width:var(--tactile);
  height:var(--tactile);border-radius:50%;cursor:pointer;transition:background-color var(--mvt)}
.fil-post__menu-b::-webkit-details-marker{display:none}
.fil-post__menu-b:hover{background:var(--gris-champ)}
.fil-post__menu-l{position:absolute;right:0;top:100%;z-index:3;min-width:160px;padding:var(--e2);
  background:var(--surface);border:var(--bord-popover);border-radius:var(--r-popover);
  box-shadow:var(--ombre-popover)}
.fil-menu__a{display:block;width:100%;text-align:left;padding:10px 12px;border:0;background:none;
  font:inherit;cursor:pointer;border-radius:var(--r2)}
.fil-menu__a:hover{background:var(--gris-champ)}
.fil-menu__a[data-fil-signaler]:hover{background:var(--danger-fond);color:var(--danger)}

.fil-media{position:relative;border-radius:var(--r4);overflow:hidden;background:var(--fond-creux)}
.fil-media__rail{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  cursor:grab}
.fil-media__rail:active{cursor:grabbing}
.fil-media__rail::-webkit-scrollbar{height:0}
.fil-media__slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;min-width:100%;
  max-height:380px}
.fil-media__img,.fil-media__v video{width:100%;height:100%;max-height:380px;object-fit:cover;
  display:block;aspect-ratio:4/3}
.fil-media[data-fil-medias="1"] .fil-media__img,
.fil-media[data-fil-medias="1"] .fil-media__v video{aspect-ratio:4/3;max-height:380px;object-fit:cover}
.fil-media__v{position:relative;min-height:0}
.fil-media__play{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);
  width:48px;height:48px;border:0;border-radius:50%;background:var(--voile-anthracite);
  color:var(--texte-inverse);display:grid;place-items:center;cursor:pointer;
  transition:transform var(--mvt),background-color var(--mvt)}
.fil-media__play:hover,.fil-media__play:focus-visible{transform:translate(-50%,-50%) scale(1.06);
  background:var(--encre)}
.fil-media__play:focus-visible{outline:2px solid var(--texte-inverse);outline-offset:2px}
.fil-media__n{position:absolute;top:var(--e3);right:var(--e3);z-index:2;padding:var(--e1) var(--e2);
  border-radius:var(--r-pilule);background:var(--voile-anthracite);color:var(--texte-inverse);
  font-size:var(--t1);font-weight:600;letter-spacing:.02em;line-height:1}
/* Points et fleches sont des <button> : `min-height:0` les soustrait au
   plancher de 44 px (button{min-height}) qui etirait les points en barres ;
   la cible tactile est rendue par un calque ::after. */
.fil-media__dots{position:absolute;left:0;right:0;bottom:var(--e3);z-index:2;display:flex;
  justify-content:center;gap:var(--e3);pointer-events:none}
.fil-media__dot{position:relative;width:6px;height:6px;min-height:0;padding:0;border:0;border-radius:50%;
  background:var(--texte-inverse);opacity:.55;font-size:0;line-height:0;pointer-events:auto;
  cursor:pointer;transition:opacity var(--mvt),transform var(--mvt)}
.fil-media__dot::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:28px;
  transform:translate(-50%,-50%)}
.fil-media__dot.is-on{opacity:1;transform:scale(1.35)}
.fil-media__fleche{position:absolute;top:50%;z-index:2;width:40px;height:40px;min-height:0;padding:0;border:0;
  border-radius:50%;background:var(--voile-anthracite);color:var(--texte-inverse);display:grid;
  place-items:center;transform:translateY(-50%);cursor:pointer;transition:background-color var(--mvt)}
.fil-media__fleche::after{content:"";position:absolute;left:50%;top:50%;width:var(--tactile);
  height:var(--tactile);transform:translate(-50%,-50%)}
.fil-media__fleche:hover,.fil-media__fleche:focus-visible{background:var(--encre)}
.fil-media__fleche--prev{left:var(--e3)}
.fil-media__fleche--next{right:var(--e3)}
@media (max-width:640px){.fil-media__fleche{display:none}}

.fil-lien{display:flex;align-items:center;gap:var(--e3);padding:var(--e2);border:1px solid var(--bord);
  border-radius:var(--r-champ);background:var(--fond);color:inherit;min-height:var(--tactile);
  transition:border-color var(--mvt),background-color var(--mvt)}
.fil-lien:hover{border-color:var(--vert);background:var(--menthe)}
.fil-lien:focus-visible{outline:2px solid var(--vert);outline-offset:2px}
.fil-lien__img{width:56px;height:56px;object-fit:cover;border-radius:var(--r2);flex:0 0 auto}
.fil-lien__txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.fil-lien__titre{font-weight:700;font-size:var(--t3);color:var(--vert-encre);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fil-lien__lieu{font-size:var(--t1);color:var(--gris-texte)}
.fil-lien__cta{display:inline-flex;align-items:center;gap:var(--e2);flex:0 0 auto;
  font-size:var(--t2);font-weight:600;color:var(--vert);line-height:1;white-space:nowrap}
.fil-lien__cta .ic{display:block;flex:0 0 auto}

.fil-post__acts{display:flex;align-items:center;gap:var(--e1);margin-top:var(--e1)}
.fil-act{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  min-width:var(--tactile);height:var(--tactile);padding:0 var(--e3);border:0;
  border-radius:var(--r-pilule);background:none;cursor:pointer;color:var(--encre);
  font:inherit;transition:background-color var(--mvt),color var(--mvt),transform var(--mvt-d) ease}
.fil-act .ic{display:block;flex:0 0 auto}
.fil-act:hover,.fil-act:focus-visible{background:var(--gris-champ);color:var(--vert)}
.fil-act:focus-visible{outline:2px solid var(--vert);outline-offset:2px}
.fil-act[aria-pressed="true"]{color:var(--vert)}
.fil-act[aria-pressed="true"] .ic path{fill:currentColor}
.fil-act[data-fil-like][aria-pressed="true"] .ic{animation:fil-like var(--mvt-lent-d) ease}
.fil-act__n{font-size:var(--t2);font-weight:600;min-width:0.75em;font-variant-numeric:tabular-nums}
@keyframes fil-like{40%{transform:scale(1.16)}100%{transform:scale(1)}}

.fil-coms__teaser{display:flex;flex-direction:column;gap:var(--e2)}
.fil-coms__teaser[hidden]{display:none}
.fil-coms__apercu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--e2)}
.fil-coms__apercu .fil-com__txt{margin:0;font-size:var(--t3);line-height:1.45;color:var(--encre)}
.fil-coms__apercu b{font-weight:600;margin-right:var(--e2)}
.fil-coms__plus{align-self:flex-start;margin:0;padding:0;border:0;background:none;font:inherit;
  font-size:var(--t2);font-weight:600;color:var(--vert);cursor:pointer;min-height:var(--tactile)}
.fil-coms__plus:hover,.fil-coms__plus:focus-visible{text-decoration:underline}
.fil-coms__plus:focus-visible{outline:2px solid var(--vert);outline-offset:2px}

.fil-coms{border-top:1px solid var(--bord);padding-top:var(--e3);display:flex;
  flex-direction:column;gap:var(--e3)}
.fil-coms[hidden]{display:none}
.fil-coms__liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--e3)}
.fil-com{display:flex;gap:var(--e2);align-items:flex-start}
.fil-com .fil-av{width:28px;height:28px}
.fil-com__meta{margin:0;display:flex;gap:var(--e2);align-items:baseline;font-size:var(--t2)}
.fil-com__txt{margin:var(--e1) 0 0;font-size:var(--t3);line-height:1.45;color:var(--encre)}
.fil-coms__form{display:flex;align-items:stretch;gap:0;min-height:40px;
  border:1px solid var(--bord);border-radius:var(--r-champ);background:var(--surface);overflow:hidden}
.fil-coms__form:focus-within{border-color:var(--vert);box-shadow:0 0 0 3px var(--menthe)}
.fil-coms__form input{flex:1 1 auto;min-width:0;min-height:40px;padding:0 var(--e3);border:0;
  background:transparent;font:inherit;color:inherit}
.fil-coms__form input:focus{outline:none}
.fil-coms__form .bouton{border-radius:0;min-height:40px;height:40px;box-shadow:none}
.fil-coms__etat{margin:0;font-size:var(--t2);color:var(--gris-texte)}

.fil-skel{pointer-events:none}
.fil-skel__c{display:block;background:var(--gris-champ);border-radius:var(--r2);
  animation:fil-skel 1.2s ease-in-out infinite}
.fil-skel__av{width:40px;height:40px;border-radius:50%}
.fil-skel__l{height:12px;width:42%;margin-top:var(--e2)}
.fil-skel__t{height:12px;width:88%}
.fil-skel__m{height:180px;width:100%;border-radius:var(--r4)}
@keyframes fil-skel{50%{opacity:.55}}

/* ---- filtres ---- */
.fil-bloc + .fil-bloc{margin-top:var(--e4);padding-top:var(--e3);border-top:1px solid var(--bord);
  min-height:0}
.fil-fs{display:flex;flex-direction:column;gap:0}
.fil-f{display:inline-flex;align-items:center;gap:var(--e2);width:auto;min-height:36px;
  padding:0 var(--e1);border:0;border-bottom:2px solid transparent;background:none;
  text-align:left;cursor:pointer;font:inherit;font-size:var(--t3);color:var(--encre);
  border-radius:0;transition:color var(--mvt),border-color var(--mvt)}
.fil-f .zihma-univers-icone{width:18px;height:18px;opacity:.9}
.fil-f:hover{color:var(--vert)}
.fil-f:hover .zihma-univers-icone,.fil-f[aria-pressed="true"] .zihma-univers-icone{opacity:1}
.fil-f[aria-pressed="true"]{color:var(--vert);font-weight:600;border-bottom-color:var(--vert)}
.fil-f:focus-visible{outline:2px solid var(--vert);outline-offset:2px}
.fil-f--sec{color:var(--gris-fort)}
.fil-fs--sec{margin-top:2px}

.fil-msg{display:flex;align-items:center;gap:var(--e3);padding:var(--e2) var(--e1);
  min-height:var(--tactile);color:inherit;border-radius:var(--r-champ);margin:0 -4px}
.fil-msg:hover{background:var(--gris-champ)}
.fil-msg:focus-visible{outline:2px solid var(--vert);outline-offset:2px}
.fil-msg__av,.fil-msg .fil-av{width:36px;height:36px}
.fil-msg__txt{flex:1 1 auto;min-width:0}
.fil-msg__haut{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e2)}
.fil-msg__nom{display:block;font-size:var(--t3);font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.fil-msg__quand{font-size:var(--t1);color:var(--gris-faible);flex:0 0 auto;white-space:nowrap}
.fil-msg__ex{display:block;font-size:var(--t2);color:var(--gris-texte);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fil-msg__badge{min-width:20px;height:20px;padding:0 var(--e2);border-radius:var(--r-pilule);
  background:var(--vert);color:var(--texte-inverse);font-size:var(--t1);font-weight:700;
  display:grid;place-items:center;flex:0 0 auto}

/* ---- composer / viewer ---- */
.fil-comp{width:min(520px,calc(100vw - 32px));padding:0;border:1px solid var(--bord);
  border-radius:var(--r-carte);background:var(--surface);box-shadow:var(--ombre-3)}
.fil-comp::backdrop{background:var(--voile-sombre)}
.fil-comp form{padding:var(--e5)}
.fil-comp__tete{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
  margin-bottom:var(--e5)}
.fil-comp__tete h2{margin:0;font-size:var(--t8);color:var(--vert-encre);letter-spacing:-.015em}
.fil-x{display:grid;place-items:center;width:var(--tactile);height:var(--tactile);
  border:0;border-radius:50%;background:none;cursor:pointer;transition:background-color var(--mvt)}
.fil-x:hover{background:var(--gris-champ)}
.fil-comp__etapes{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--e5)}
.fil-comp__etape{margin:0 0 var(--e2);font-weight:700;color:var(--vert-encre);font-size:var(--t4)}
.fil-comp__sous{margin:0 0 var(--e2);font-size:var(--t2);color:var(--gris-texte)}
.fil-comp__aide,.fil-comp__etat,.fil-comp__vide{font-size:var(--t2);color:var(--gris-texte);line-height:1.4}
.fil-comp__biens{display:flex;flex-direction:column;gap:var(--e2);max-height:220px;overflow:auto;
  scrollbar-width:thin;margin-top:var(--e2)}
.fil-comp__bien{display:flex;align-items:center;gap:var(--e3);padding:var(--e2);
  border:1px solid var(--bord);border-radius:var(--r-champ);cursor:pointer;
  transition:border-color var(--mvt),background-color var(--mvt)}
.fil-comp__bien:has(input:checked){border-color:var(--vert);background:var(--menthe)}
.fil-comp__bien img{width:40px;height:40px;object-fit:cover;border-radius:var(--r2)}
.fil-comp__bien small{display:block;color:var(--gris-texte)}
.fil-comp textarea,.fil-comp input[type="file"],.fil-comp input[type="search"]{width:100%;font:inherit}
.fil-comp textarea{border:1px solid var(--bord);border-radius:var(--r-champ);padding:var(--e3);
  min-height:76px}
.fil-comp textarea:focus{outline:2px solid var(--vert);outline-offset:2px}
.fil-comp__apercu{display:flex;gap:var(--e3);align-items:center;padding:var(--e3);
  border:1px dashed var(--bord);border-radius:var(--r-champ);background:var(--fond);min-height:72px}
.fil-comp__apercu img,.fil-comp__apercu video{width:64px;height:64px;object-fit:cover;
  border-radius:var(--r2);flex:0 0 auto}
.fil-comp__apercu p{margin:0;font-size:var(--t3);line-height:1.4;color:var(--encre)}
.fil-comp__pied{display:flex;justify-content:flex-end;gap:var(--e2);margin-top:var(--e5)}

/* la bulle partagee (.fab, app.css) ; sur Moments elle n'existe que sous
   1023 px, ou le bouton « Partager » de la colonne droite disparait */
.fil-fab{display:none}

.fil-vw{width:100vw;height:100dvh;max-width:none;margin:0;padding:0;border:0;
  background:transparent;color:var(--texte-inverse)}
.fil-vw::backdrop{background:var(--voile-sombre)}
.fil-vw__cadre{position:relative;width:min(468px,calc(100vw - 24px));height:min(88dvh,840px);
  margin:auto;display:flex;flex-direction:column;background:var(--encre);
  border-radius:var(--r5);box-shadow:var(--ombre-3);overflow:hidden}
.fil-vw__bars{display:flex;gap:3px;padding:var(--e3) var(--e3) 0}
.fil-vw__bars i{flex:1 1 0;height:2px;background:var(--menthe-bord);border-radius:2px;overflow:hidden}
.fil-vw__bars i em{display:block;height:100%;width:0;background:var(--texte-inverse)}
.fil-vw__bars i[data-fait] em{width:100%}
.fil-vw__tete{display:flex;align-items:center;justify-content:space-between;
  padding:var(--e2) var(--e2) var(--e2) var(--e3);gap:var(--e2)}
.fil-vw__qui{display:flex;align-items:center;gap:var(--e2);font-size:var(--t3);
  font-weight:600;min-width:0}
.fil-vw__qui .fil-av{width:32px;height:32px}
.fil-vw__qui-nom{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.fil-vw__qui-nom b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fil-vw__qui-nom small{font-size:var(--t1);font-weight:500;color:var(--texte-inverse);opacity:.75}
.fil-vw__cmds{display:flex}
.fil-vw__b{display:grid;place-items:center;width:44px;height:44px;border:0;background:none;
  color:inherit;cursor:pointer;border-radius:50%;transition:background-color var(--mvt),color var(--mvt)}
.fil-vw__b:hover{background:var(--vert-sombre)}
.fil-vw__b:focus-visible{outline:2px solid var(--texte-inverse);outline-offset:2px}
.fil-vw__b[aria-pressed="true"]{color:var(--vert)}
.fil-vw__b[aria-pressed="true"] .ic path{fill:currentColor}
.fil-vw__b[data-fil-vw="pause"] [data-icone="lecture"]{display:none}
.fil-vw__b[data-fil-vw="pause"][aria-pressed="true"] [data-icone="pause"]{display:none}
.fil-vw__b[data-fil-vw="pause"][aria-pressed="true"] [data-icone="lecture"]{display:block}
.fil-vw__nav{position:absolute;top:72px;bottom:148px;width:28%;background:none;border:0;
  color:transparent;cursor:pointer;z-index:2}
.fil-vw__nav--prev{left:0}
.fil-vw__nav--next{right:0}
.fil-vw__media{flex:1 1 auto;min-height:180px;display:grid;place-items:center;padding:0 var(--e2)}
.fil-vw__media img,.fil-vw__media video{width:100%;height:100%;max-height:58vh;object-fit:contain}
.fil-lien--viewer{background:var(--surface);border:1px solid var(--bord);color:var(--encre)}
.fil-lien--viewer:hover{border-color:var(--vert);background:var(--menthe)}
.fil-lien--viewer .fil-lien__titre{color:var(--vert-encre)}
.fil-lien--viewer .fil-lien__cta{color:var(--vert)}
.fil-lien--viewer .fil-lien__lieu{color:var(--gris-texte)}
.fil-vw__pied{padding:var(--e3) var(--e4) var(--e4);display:flex;flex-direction:column;gap:var(--e2)}
.fil-vw__caption{margin:0;font-size:var(--t3);line-height:1.45;color:var(--texte-inverse)}
.fil-vw__acts{display:flex;gap:var(--e1)}

@media (max-width:1279px){
  .fil{grid-template-columns:168px minmax(0,1fr) 240px;max-width:1080px;
    gap:var(--e4);padding:var(--e4) var(--e5) var(--e8)}
  .fil-col--stories{max-height:calc(100dvh - 104px)}
  .fil-sty__nom{max-width:112px}
}
@media (max-width:1023px){
  .fil{grid-template-columns:minmax(0,1fr);max-width:720px}
  .fil-col--stories{position:static;max-height:none;overflow:visible;order:-1}
  .fil-col--stories .fil-stys{overflow:visible;overflow-x:auto}
  .fil-stys{flex-direction:row;overflow-x:auto;gap:var(--e3);padding:var(--e1) var(--e1) var(--e3);
    scrollbar-width:none;scroll-snap-type:x proximity}
  .fil-sty{flex:0 0 auto;flex-direction:column;width:76px;padding:var(--e1);scroll-snap-align:start;
    min-height:0;gap:var(--e2)}
  .fil-sty:hover .fil-sty__anneau{transform:none}
  .fil-sty__txt{text-align:center;align-items:center}
  .fil-sty__nom{max-width:76px;font-size:var(--t1)}
  .fil-sty__nom--long{display:none}
  .fil-sty__nom--court{display:block}
  .fil-sty__n{display:none}
  .fil-col--rail{display:none}
  .fil-feed__fm{display:inline-flex;align-items:center}
  .fil-col__sous{display:none}
  .fil-feed__tete{align-items:flex-start}
  .fil-fab{display:inline-flex}
  .page--fil{padding-bottom:88px}
}
@media (max-width:767px){
  .fil{padding:var(--e3) var(--e4) var(--e8);gap:var(--e3)}
  .fil-feed__tete{flex-direction:column;align-items:stretch;margin-bottom:var(--e4)}
  .fil-feed__cta{flex-direction:row;align-items:center;flex-wrap:wrap}
  .fil-feed__share{display:none}
  .fil-feed__fm{width:auto}
  .fil-fab{opacity:1;transform:none;pointer-events:auto}
  .fil-post{padding:var(--e3)}
  .fil-feed__liste{gap:var(--e4)}
  .fil-media,.fil-media__slide,.fil-media__img,.fil-media__v video{max-height:none}
  .fil-lien:not(.fil-lien--viewer) .fil-lien__cta span:not(.ic):not([class]){position:absolute;
    width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .fil-lien{position:relative}
  .fil-vw__cadre{width:100%;height:100%;max-height:none;border-radius:0;
    padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
  .fil-comp{width:100%;max-width:none;border-radius:var(--r-carte) var(--r-carte) 0 0;
    margin-top:auto;max-height:92dvh}
  #fil-filtres-m.fil-comp{width:100%;border-radius:var(--r-carte) var(--r-carte) 0 0;
    margin:auto 0 0;max-height:88dvh}
  #fil-filtres-m .fil-bloc--compact{border:0;padding:0;background:transparent}
  #fil-filtres-m .fil-bloc__tete{display:none}
  #fil-filtres-m .fil-rail__share{display:none}
  #fil-filtres-m .fil-sugg{position:static;box-shadow:none;max-height:160px}
  .fil-lien:not(.fil-lien--viewer){padding-right:76px}
}
@media (prefers-reduced-motion:reduce){
  .fil-sty__anneau,.fil-sty,.fil-act,.fil-lien,.fil-media__play{transition:none}
  .fil-sty:hover .fil-sty__anneau{transform:none}
  .fil-act[data-fil-like][aria-pressed="true"] .ic{animation:none}
  .fil-vw__bars i em{transition:none}
  .fil-skel__c{animation:none}
}