/* Le bout de rangée de toutes les listes du produit.
 *
 *   <td class="lr-g-col" data-mob-act>
 *     <div class="lr-gestes">
 *       <a class="lr-geste" href="…">Relancer</a>
 *       <details class="lr-plus">
 *         <summary aria-label="Autres gestes sur F-2026-0131">Plus</summary>
 *         <div class="lr-menu" role="menu">
 *           <div class="lr-menu__grp"><a class="lr-menu__it" role="menuitem" href="…">Dupliquer</a></div>
 *           <div class="lr-menu__grp"><form method="post" action="…">{% csrf_token %}
 *             <button class="lr-menu__it lr-menu__it--danger" role="menuitem" data-confirm="…">Supprimer</button>
 *           </form></div>
 *         </div>
 *       </details>
 *     </div>
 *   </td>
 *
 * Un geste au repos, choisi par l'état de la ligne ; le reste dans « Plus », le
 * destructeur en dernier et seul dans son groupe. Le menu est placé par
 * gestes-rangee.js en `position:fixed`, car `.lr-tbl-wrap` défile en largeur et
 * couperait un menu en absolu. Un menu sans entrée (droits du rôle) ne s'affiche
 * pas : voir `:has` plus bas. */

.lr-g-col,
.lr .lr-tbl th.lr-g-col,
.lr .lr-tbl td.lr-g-col{width:1%;text-align:right;white-space:nowrap;}

/* Dans le flux : en absolu, l'intitulé sort de la zone qui défile et élargit la
   page au téléphone. Le back-office et le portail n'ont pas tous `.sr-only`. */
.lr-g-col .sr-only{display:inline-block;position:static;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}

.lr-gestes{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;}
.lr-gestes form{display:contents;}

.lr-geste,
.lr .lr-tbl a.lr-geste,
.lr a.lr-geste{display:inline-flex;align-items:center;justify-content:center;padding:5px 11px;
  border:none;border-radius:8px;background:var(--sf-ctl);color:var(--fg-1);font:inherit;font-size:12px;
  font-weight:500;line-height:1.35;text-decoration:none;white-space:nowrap;cursor:pointer;}
.lr-geste:hover,
.lr .lr-tbl a.lr-geste:hover,
.lr a.lr-geste:hover{background:var(--sf-ctl-hover);color:var(--fg-1);}
/* La ligne survolée se peint de la teinte du bouton : il passe sur la surface. */
tr:hover > .lr-g-col .lr-geste{background:var(--sf-1);}
tr:hover > .lr-g-col .lr-geste:hover{background:var(--sf-ctl-hover);}
.lr-geste--danger,
.lr a.lr-geste--danger,
.lr .lr-tbl a.lr-geste--danger{color:var(--ac-danger-strong);}
.lr-geste--danger:hover,
.lr a.lr-geste--danger:hover,
.lr .lr-tbl a.lr-geste--danger:hover{color:var(--ac-danger-strong);}
.lr-geste:focus-visible,.lr-plus > summary:focus-visible,.lr-menu__it:focus-visible{outline:2px solid var(--ac-brand);outline-offset:1px;}

.lr-plus{display:inline-block;position:relative;}
.lr-plus:not(:has(.lr-menu__it)){display:none;}
.lr-menu__grp:not(:has(.lr-menu__it)){display:none;}
.lr-plus > summary{list-style:none;cursor:pointer;padding:5px 9px;border-radius:8px;font-size:12px;
  font-weight:500;line-height:1.35;color:var(--fg-3);user-select:none;}
.lr-plus > summary::-webkit-details-marker{display:none;}
.lr-plus > summary:hover,.lr-plus[open] > summary{background:var(--sf-ctl);color:var(--fg-1);}

.lr-menu{position:fixed;z-index:400;min-width:220px;max-width:320px;max-height:calc(100vh - 16px);overflow-y:auto;
  padding:6px;background:var(--sf-pop);border:1px solid var(--sf-line-strong);border-radius:11px;
  box-shadow:0 14px 40px rgba(0,0,0,.22);text-align:left;white-space:normal;cursor:default;}
.lr-menu__grp + .lr-menu__grp{margin-top:6px;padding-top:6px;}
.lr-menu form{display:block;margin:0;}
.lr-menu__it,
.lr .lr-tbl .lr-menu a.lr-menu__it,
.lr .lr-menu a.lr-menu__it{display:block;width:100%;padding:7px 10px;border:none;border-radius:7px;background:none;
  font:inherit;font-size:12.5px;font-weight:400;line-height:1.4;text-align:left;text-decoration:none;
  color:var(--fg-1);cursor:pointer;}
.lr-menu__it:hover,.lr-menu__it:focus-visible{background:var(--sf-3);}
.lr-menu__it--danger,
.lr .lr-tbl .lr-menu a.lr-menu__it--danger,
.lr .lr-menu a.lr-menu__it--danger{color:var(--ac-danger-strong);}

/* La fenêtre d'un geste qui demande une saisie : voir gestes-rangee.js. */
.lr-fenetre{width:min(440px,calc(100vw - 32px));padding:20px;border:none;border-radius:14px;background:var(--sf-pop);color:var(--fg-1);
  box-shadow:0 18px 60px rgba(0,0,0,.28);font-size:13px;}
.lr-fenetre::backdrop{background:rgba(0,0,0,.32);}
.lr-fenetre__t{margin:0 0 14px;font-size:15px;font-weight:600;}
.lr-fenetre label{display:block;margin:0 0 12px;font-size:12px;font-weight:500;color:var(--fg-2);}
.lr-fenetre :is(input,select,textarea){display:block;width:100%;box-sizing:border-box;margin-top:5px;padding:8px 10px;
  border:1px solid var(--sf-line-strong);border-radius:8px;background:var(--sf-1);color:var(--fg-1);font:inherit;font-size:13px;}
.lr-fenetre__acts{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;}

/* Téléphone : le geste sous la rangée, le menu en feuille du bas, au-dessus de la
   barre d'onglets (z-index 300). Le voile est le ::before du details ouvert : un
   toucher dessus arrive sur le details, et gestes-rangee.js le referme. */
@media (max-width:768px){
  .lr-gestes{display:flex;width:100%;gap:8px;}
  .lr-gestes .lr-geste{flex:1;min-height:38px;font-size:13px;}
  .lr-plus > summary{display:flex;align-items:center;min-height:38px;padding:0 12px;font-size:13px;}
  .lr .lr-macts .lr-plus button{flex:none;}
  .lr-plus[open]::before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:399;background:rgba(0,0,0,.32);}
  .lr-menu{top:auto;right:0;bottom:0;left:0;min-width:0;max-width:none;max-height:70vh;border:none;
    border-radius:18px 18px 0 0;padding:10px 12px calc(14px + env(safe-area-inset-bottom,0px));}
  .lr-menu__it,
  .lr .lr-menu a.lr-menu__it{display:flex;align-items:center;min-height:44px;font-size:14px;}
}