/* =========================================================================
   MEETennis — assets/feed-actions.css
   Le menu d'une publication, la modification en place, le glissement vers
   la gauche et la mention « modifié ».

   Pourquoi une feuille à part
   ---------------------------
   feed.css approche des 26 ko et se charge sur l'accueil, le profil public
   et la recherche. Trois règles corrigées ici n'ont pas à faire
   retélécharger le reste.
   ========================================================================= */

/* =========================================================================
   1. La mention « modifié »
   -------------------------------------------------------------------------
   Discrète, mais lisible. Elle n'est pas décorative : c'est ce qui empêche
   de retourner le sens d'un message après que dix personnes l'ont approuvé.
   Le titre au survol porte la date — « modifié » seul laisse croire à une
   correction de l'instant.
   ========================================================================= */
.post-edited{
  font-style:italic;
  opacity:.72;
  cursor:help;
}

/* =========================================================================
   2. Le menu de la carte
   ========================================================================= */
.post-menu{position:relative;margin-left:auto;flex:none}

/* Le bouton réutilise .post-flag (même taille, même zone tactile) : deux
   boutons de tailles différentes au même endroit de l'en-tête, on vise mal
   l'un des deux. */
.pm-btn{margin-left:0}

.pm-list{
  position:absolute;
  top:100%;right:0;
  z-index:40;
  min-width:190px;
  margin-top:4px;
  padding:5px;
  background:var(--card,#fff);
  border:1px solid var(--line,#e7e1dc);
  border-radius:14px;
  box-shadow:0 14px 34px rgba(30,20,12,.16);
  display:flex;flex-direction:column;gap:2px;
}
.pm-list[hidden]{display:none}

.pm-list button{
  display:flex;align-items:center;gap:9px;
  width:100%;
  /* 42 px de haut : en dessous, on rate la ligne sur un téléphone, et ici
     la ligne d'à côté supprime. */
  min-height:42px;
  padding:0 11px;
  border:0;border-radius:10px;
  background:transparent;
  font:600 14px/1.3 Raleway,system-ui,sans-serif;
  color:var(--ink,#2a211c);
  text-align:left;
  cursor:pointer;
}
.pm-list button:hover,
.pm-list button:focus-visible{background:var(--wash,#f6f2ee)}
.pm-list button svg{flex:none;opacity:.72}

/* Rouge, et en dernier. Un bouton destructeur qui ressemble aux autres se
   clique par erreur ; posé en tête de liste, il se clique par réflexe. */
.pm-list button.danger{color:#b3261e}
.pm-list button.danger svg{opacity:.9}
.pm-list button.danger:hover{background:rgba(179,38,30,.08)}

/* =========================================================================
   3. La modification en place
   ========================================================================= */
.pe-box{display:flex;flex-direction:column;gap:9px}

.post-body textarea,
.cmt-body textarea{
  width:100%;
  padding:11px 12px;
  border:1.5px solid var(--line,#e7e1dc);
  border-radius:12px;
  background:var(--card,#fff);
  color:var(--ink,#2a211c);
  font:500 15px/1.55 Raleway,system-ui,sans-serif;
  resize:vertical;
}
.post-body textarea:focus,
.cmt-body textarea:focus{outline:none;border-color:var(--brand,#e4572e)}

.pe-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}

/* =========================================================================
   4. Le glissement vers la gauche
   -------------------------------------------------------------------------
   Le fond rouge ne bouge jamais : c'est la carte qui glisse par-dessus.
   L'inverse (un fond qui entre par la droite) demande de synchroniser deux
   animations, et le moindre décalage laisse une bande blanche entre les
   deux.
   ========================================================================= */
.swipe{position:relative}

.swipe-back{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:flex-end;
  padding-right:22px;
  border-radius:18px;
  background:linear-gradient(90deg,rgba(179,38,30,.82) 0%,#b3261e 62%);
  color:#fff;
  /* Invisible tant que la carte n'a pas bougé : un liseré rouge qui dépasse
     en permanence sous chaque publication ferait croire à une alerte. */
  opacity:0;
  pointer-events:none;
  transition:opacity .14s ease;
}
.swipe.sliding .swipe-back{opacity:1}

.sb-lbl{
  display:inline-flex;align-items:center;gap:7px;
  font:800 13.5px/1 Raleway,system-ui,sans-serif;
  letter-spacing:.01em;
}
.sb-lbl svg{width:18px;height:18px}

/* La carte revient à sa place toute seule quand le geste n'a pas été assez
   franc. Pendant le glissement, JavaScript pose un transform inline et la
   transition est retirée : sinon la carte traîne derrière le doigt. */
.swipe .post{
  position:relative;
  transition:transform .2s cubic-bezier(.22,.61,.36,1);
  /* touch-action laisse le défilement vertical au navigateur et ne nous
     réserve que l'horizontal : sans ça, le fil ne défile plus sous le doigt
     dès qu'on effleure une carte. */
  touch-action:pan-y;
}
.swipe.sliding .post{transition:none}

/* Sur ordinateur, pas de glissement : le menu ⋯ fait le travail, et une
   carte qui bouge à la souris n'est comprise par personne. */
@media (hover:hover) and (pointer:fine){
  .swipe-back{display:none}
}

/* =========================================================================
   5. Le glissement sur un COMMENTAIRE
   -------------------------------------------------------------------------
   Même geste, même seuil, même confirmation que sur une publication. Deux
   différences seulement, et elles viennent de la forme du commentaire :

     · un commentaire n'est pas une carte posée sur le fond, c'est une ligne
       séparée par un filet. Le fond rouge reprend donc un rayon plus
       serré et une étiquette plus courte, sinon il déborde visuellement
       sur la ligne du dessus ;
     · une réponse est décalée de 34 px. Le fond doit l'être aussi, faute
       de quoi la bande rouge commence dans le vide, à gauche du trait
       vertical, et on ne sait plus quel message on est en train de
       supprimer.
   ========================================================================= */
.cmt-swipe{position:relative}

.cmt-swipe .swipe-back{
  border-radius:12px;
  padding-right:14px;
  background:linear-gradient(90deg,rgba(179,38,30,.78) 0%,#b3261e 70%);
}
.cmt-swipe .sb-lbl{font-size:12.5px}
.cmt-swipe .sb-lbl svg{width:16px;height:16px}

/* La réponse et son fond décalés ensemble. La classe vient du JS qui
   construit le commentaire (feed.js) : :has() n'est pas connu de tous les
   navigateurs encore en circulation, et ce décalage-là ne doit pas dépendre
   d'une version. */
.cmt-swipe.reply .swipe-back{left:34px}

.swipe .cmt{
  position:relative;
  /* Le commentaire doit être opaque : sans fond, le rouge transparaît sous
     le texte dès le premier pixel de glissement. */
  background:var(--card,#fff);
  transition:transform .2s cubic-bezier(.22,.61,.36,1);
  touch-action:pan-y;
}
.swipe.sliding .cmt{transition:none}

/* =========================================================================
   6. Les actions d'un commentaire
   ========================================================================= */
.cmt-acts button.danger{color:#b3261e}

/* =========================================================================
   7. Commentaires : reprise après erreur, message ciblé par une notification
   ========================================================================= */
.cmt-retry{margin-left:6px;border:0;background:none;padding:0;cursor:pointer;
  color:var(--brand,#e15e01);font:700 13px/1.4 Raleway,system-ui,sans-serif;text-decoration:underline}
@keyframes cmtFlash{0%,40%{background:rgba(225,94,1,.14)}100%{background:transparent}}
.cmt.cmt-flash{animation:cmtFlash 2.6s ease-out;border-radius:12px}