/* SQ hubb : l'expérience des membres, retours de Jérôme du 22/10/2026.

   Une feuille à part de `sqhubb.css` et de `sqhubb_espace_complements.css`,
   pour ne pas croiser les chantiers qui les touchent : servie par l'en-tête
   du site. Elle reprend les jetons `--sqh-*` de la charte et ne vise que des
   classes neuves, ou des classes existantes sous un parent neuf.

   1. Les pictogrammes d'interface (`sqhubb_picto`).
   2. L'assistant de dépôt d'une annonce.
   3. Les gestes : un écart régulier entre les boutons.
   4. L'en-tête d'un onglet : à quoi sert la page.
   5. Mes annonces : la ligne cliquable.
   6. Demandes reçues : le message en entier.
   7. Offres : les trois gestes côte à côte.
   8. Les modales.
   9. Le suivi d'une commande : les gestes en boutons.
   10. Séquestres : les gestes de commande.
   11. Litiges.
   12. Déposer un besoin : un point d'entrée, deux modes.
   13. Le catalogue : la recherche d'abord, les filtres repliés.
   14. « À la une » : la croix.
   15. Espace acheteur et anti-contournement (23/10/2026). */

/* ── 1. Les pictogrammes ────────────────────────────────────────────────── */
.sqh .sqh-picto{display:inline-block;flex:none;vertical-align:-.15em}

/* ── 2. L'assistant de dépôt d'une annonce ──────────────────────────────── */
.sqh .assistant-annonce .aa-en-ligne{margin:-6px 0 18px}

/* La barre des étapes : quatre boutons, l'étape courante en bleu roi, une
   étape complète cochée. Sous 640 px, les libellés courts restent sur une
   ligne et la barre défile, sans déborder de la page. */
.sqh .aa-etapes{margin:0 0 22px}
.sqh .aa-etapes ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.sqh .aa-etape__bouton{width:100%;height:100%;display:flex;align-items:center;gap:10px;text-align:left;font:inherit;
  border:1.5px solid var(--sqh-line);background:var(--sqh-paper);color:var(--sqh-ink);border-radius:14px;padding:10px 12px;cursor:pointer}
.sqh .aa-etape__bouton:hover{border-color:var(--sqh-royal)}
.sqh .aa-etape__bouton:focus-visible{outline:3px solid rgba(0,66,215,.35);outline-offset:2px}
.sqh .aa-etape__num{flex:none;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;background:var(--sqh-ice);color:var(--sqh-royal)}
.sqh .aa-etape__texte{display:grid;gap:1px;min-width:0}
.sqh .aa-etape__libelle{font-size:13px;font-weight:700;line-height:1.25}
.sqh .aa-etape__etat{font-size:11px;color:var(--sqh-slate)}
.sqh .aa-etape.is-complete .aa-etape__num{background:var(--sqh-janus-bg);color:rgb(86.7,115.6,66.4)}
.sqh .aa-etape.is-a-completer .aa-etape__etat{color:rgb(172.4,126.9,22.8)}
.sqh .aa-etape.is-courante .aa-etape__bouton{border-color:var(--sqh-royal);background:var(--sqh-ice)}
.sqh .aa-etape.is-courante .aa-etape__num{background:var(--sqh-royal);color:var(--sqh-paper)}
.sqh .aa-progression{height:4px;border-radius:999px;background:var(--sqh-ice);margin-top:10px;overflow:hidden}
.sqh .aa-progression i{display:block;height:100%;background:var(--sqh-royal);border-radius:999px}

/* Un panneau par étape : son surtitre, son titre, son aide. */
.sqh .aa-panneau__tete{margin:0 0 14px}
.sqh .aa-kicker{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sqh-royal);margin-bottom:4px}
.sqh .auth-card .aa-panneau__tete h2{font-size:20px;color:var(--sqh-navy);margin:0 0 4px}
.sqh .auth-card .aa-panneau__tete .hint{font-size:13px;color:var(--sqh-slate);line-height:1.5;margin:0}
.sqh .auth-card .aa-panneau > .form-section:first-of-type{border-top:0;padding-top:0;margin-top:0}

/* Ce qui manque pour soumettre : une note ambre ; complet : une note verte. */
.sqh .aa-manques{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:11px 14px;margin:0 0 18px;font-size:13px;line-height:1.45;
  background:rgba(229,177,58,.12);color:rgb(120,88,15)}
.sqh .aa-manques .sqh-picto{margin-top:2px;width:16px;height:16px}
.sqh .aa-manques b{font-weight:700}
.sqh .aa-manques--ok{background:var(--sqh-janus-bg);color:rgb(70,95,52)}
.sqh .aa-manques--conseil{background:var(--sqh-ice);color:var(--sqh-slate)}

/* Les blocs facultatifs, repliés : un résumé cliquable au style des titres
   de section, avec sa mention « Facultatif » et un chevron. */
.sqh .auth-card details.aa-option > summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;
  font-size:15px;font-weight:700;color:var(--sqh-navy);padding:2px 0}
.sqh .auth-card details.aa-option > summary::-webkit-details-marker{display:none}
.sqh .auth-card details.aa-option > summary small{font-size:11px;font-weight:600;color:var(--sqh-steel);background:var(--sqh-ice);
  border-radius:999px;padding:2px 9px}
.sqh .auth-card details.aa-option > summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--sqh-royal);
  border-bottom:2px solid var(--sqh-royal);transform:rotate(45deg);transition:transform .15s}
.sqh .auth-card details.aa-option[open] > summary::after{transform:rotate(-135deg)}
.sqh .auth-card details.aa-option[open] > summary{margin-bottom:10px}

/* La navigation d'étape : Précédent à gauche, Enregistrer, puis Suivant en
   bouton plein. Un écart régulier de 12 px entre les boutons. */
.sqh .auth-card .aa-navigation{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:flex-end;
  margin-top:26px;padding-top:18px;border-top:1px solid var(--sqh-line)}
.sqh .auth-card .aa-navigation .submit{width:auto;flex:0 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:999px;border:1.5px solid var(--sqh-royal);font-size:14px}
.sqh .auth-card .aa-navigation .submit .sqh-picto{width:16px;height:16px}
.sqh .auth-card .aa-navigation .submit.ghost:first-child{margin-right:auto}

/* Le récapitulatif de la relecture. */
.sqh .auth-card table.aa-recap{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:13px}
.sqh .auth-card table.aa-recap td{padding:9px 8px;border-bottom:1px solid var(--sqh-ice);vertical-align:top}
.sqh .auth-card table.aa-recap td:first-child{color:var(--sqh-slate);width:32%;padding-left:0}
.sqh .auth-card table.aa-recap td:nth-child(2){color:var(--sqh-ink);font-weight:600;word-break:break-word}
.sqh .auth-card table.aa-recap .aa-recap__geste{width:1%;white-space:nowrap;text-align:right;padding-right:0}
.sqh .auth-card .aa-vide{color:rgb(172.4,126.9,22.8);font-weight:600}

/* Sous 760 px, les quatre étapes tiennent sur une ligne : les autres
   étapes ne gardent que leur numéro (ou leur coche), l'étape courante son
   libellé. Rien ne défile, l'étape courante est toujours visible. */
@media (max-width: 760px){
  .sqh .aa-etapes ol{display:flex;gap:6px}
  .sqh .aa-etapes li{flex:0 0 auto}
  .sqh .aa-etapes li.is-courante{flex:1 1 auto;min-width:0}
  .sqh .aa-etape__bouton{padding:7px 8px;gap:8px}
  .sqh .aa-etape__etat{display:none}
  .sqh .aa-etape:not(.is-courante) .aa-etape__texte{display:none}
  .sqh .aa-etape.is-courante .aa-etape__libelle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width: 480px){
  .sqh .auth-card .aa-navigation{flex-direction:column-reverse;align-items:stretch}
  .sqh .auth-card .aa-navigation .submit{width:100%}
  .sqh .auth-card .aa-navigation .submit.ghost:first-child{margin-right:0}
  .sqh .auth-card table.aa-recap td:first-child{width:auto}
  .sqh .auth-card table.aa-recap tr{display:grid;grid-template-columns:1fr auto;padding:8px 0;border-bottom:1px solid var(--sqh-ice)}
  .sqh .auth-card table.aa-recap td{border:0;padding:2px 0}
  .sqh .auth-card table.aa-recap td:nth-child(2){grid-column:1 / -1;grid-row:2}
  .sqh .auth-card table.aa-recap .aa-recap__geste{grid-column:2;grid-row:1}
}

/* ── 3. Les gestes : un écart régulier entre les boutons ────────────────── */
/* Retours du 22/10/2026, point 8 : des boutons collés, d'autres écartés
   d'une espace typographique. Les gestes d'une cellule ou d'un bloc vivent
   dans `.sqh-gestes` : 8 px entre deux boutons, quel que soit leur type
   (lien, formulaire de `button_to`, bouton de modale). */
.sqh .sqh-gestes{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sqh .sqh-gestes > form, .sqh .dash-panel .sqh-gestes > form.inline{margin:0;display:inline-flex}
.sqh .sqh-gestes .mini-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.sqh .sqh-gestes .mini-btn .sqh-picto{width:14px;height:14px}
.sqh .dash-panel td.annonce-gestes .sqh-gestes{justify-content:flex-end}
/* La colonne des demandes reçues empile ses boutons : le même écart. */
.sqh .demandes-table td.demandes-gestes > * + *{margin-top:8px}
.sqh .demandes-table td.demandes-gestes .mini-btn{display:flex;align-items:center;justify-content:center;gap:6px}
.sqh .demandes-table td.demandes-gestes .mini-btn .sqh-picto{width:14px;height:14px}

/* ── 4. L'en-tête d'un onglet : à quoi sert la page ─────────────────────── */
.sqh .espace-intro{background:var(--sqh-paper);border:1px solid var(--sqh-line);border-radius:18px;padding:18px 20px;margin:0 0 18px}
.sqh .espace-intro h2{margin:0 0 4px;font-size:17px;font-weight:700;color:var(--sqh-navy)}
.sqh .espace-intro p{margin:0;font-size:13px;line-height:1.55;color:var(--sqh-slate);max-width:860px}
.sqh .espace-intro__etapes, .sqh .espace-intro__gestes{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sqh .espace-intro__etapes li{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:var(--sqh-ink)}
.sqh .espace-intro__etapes b{flex:none;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--sqh-ice);color:var(--sqh-royal);font-size:12px}
.sqh .espace-intro__gestes li{display:grid;gap:3px;padding:10px 12px;border-radius:12px;background:var(--sqh-ice);font-size:12px;line-height:1.45;color:var(--sqh-slate)}
.sqh .espace-intro__gestes b{font-size:13px;color:var(--sqh-royal)}
@media (max-width: 760px){
  .sqh .espace-intro{padding:14px 16px}
  .sqh .espace-intro__etapes, .sqh .espace-intro__gestes{grid-template-columns:minmax(0,1fr)}
}

/* ── 5. Mes annonces : la ligne cliquable ───────────────────────────────── */
.sqh .dash-panel tr.ligne-cliquable{cursor:pointer}
.sqh .dash-panel tr.ligne-cliquable:hover td{background:rgba(0,66,215,.04)}
.sqh .dash-panel a.ligne-cliquable__lien{color:inherit;text-decoration:none}
.sqh .dash-panel tr.ligne-cliquable:hover a.ligne-cliquable__lien, .sqh .dash-panel a.ligne-cliquable__lien:focus-visible{color:var(--sqh-royal);text-decoration:underline}

/* ── 6. Demandes reçues : le message en entier ──────────────────────────── */
.sqh .dash-panel .demande-message{margin:6px 0 0;padding:8px 10px;border-left:3px solid var(--sqh-line);background:var(--sqh-ice);border-radius:0 8px 8px 0;
  font-size:12.5px;line-height:1.5;color:var(--sqh-ink);white-space:pre-line;max-width:60ch}

/* ── 7. Offres : les trois gestes côte à côte ───────────────────────────── */
.sqh .offre-reponse.offre-reponse--gestes{display:block}
.sqh .offre-reponse--gestes .offre-decision__boutons{gap:10px}
.sqh .offre-reponse--gestes .sqh-modale-hote > .mini-btn{font-size:12.5px;padding:10px 18px;border-radius:10px;min-height:40px;background:var(--sqh-paper);
  border:1px solid var(--sqh-line);color:var(--sqh-royal)}
.sqh .offre-decision__note{display:block;margin-top:10px;font-size:11.5px;color:var(--sqh-slate)}
@media (max-width: 640px){
  .sqh .offre-reponse--gestes .offre-decision__boutons > *{flex:1 1 100%}
  .sqh .offre-reponse--gestes .sqh-modale-hote > .mini-btn{width:100%;min-height:44px}
}

/* ── 8. Les modales (`sqhubb-modale`) ───────────────────────────────────── */
.sqh .sqh-modale-hote{display:inline-flex}
.sqh dialog.sqh-modale{border:0;padding:0;border-radius:20px;width:min(560px, calc(100vw - 32px));max-height:calc(100vh - 48px);
  background:var(--sqh-paper);color:var(--sqh-ink);box-shadow:0 30px 80px -20px rgba(0,10,31,.45);font-family:var(--sqh-font);text-align:left;white-space:normal}
.sqh dialog.sqh-modale::backdrop{background:rgba(0,10,31,.45)}
.sqh .sqh-modale__boite{padding:22px 24px 20px;overflow:auto;max-height:calc(100vh - 48px);box-sizing:border-box}
.sqh .sqh-modale__tete{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 6px}
.sqh .sqh-modale__tete h2{margin:0;font-size:18px;line-height:1.3;color:var(--sqh-navy);font-weight:700}
.sqh .sqh-modale__fermer{flex:none;width:34px;height:34px;border-radius:50%;border:0;background:var(--sqh-ice);color:var(--sqh-slate);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.sqh .sqh-modale__fermer:hover{color:var(--sqh-royal)}
.sqh .sqh-modale__fermer .sqh-picto{width:16px;height:16px}
.sqh .sqh-modale__aide{margin:0 0 16px;font-size:13px;line-height:1.5;color:var(--sqh-slate)}
.sqh .sqh-modale form{margin:0}
.sqh .sqh-modale .sqh-champ{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
.sqh .sqh-modale .sqh-champ label{font-size:12px;font-weight:600;color:var(--sqh-navy)}
.sqh .sqh-modale .sqh-champ input, .sqh .sqh-modale .sqh-champ select, .sqh .sqh-modale .sqh-champ textarea{font:inherit;font-size:14px;
  border:1.5px solid var(--sqh-line);border-radius:10px;padding:10px 12px;background:var(--sqh-paper);color:var(--sqh-ink);width:100%;box-sizing:border-box}
.sqh .sqh-modale .sqh-champ textarea{min-height:110px;resize:vertical}
.sqh .sqh-modale .sqh-champ input:focus, .sqh .sqh-modale .sqh-champ select:focus, .sqh .sqh-modale .sqh-champ textarea:focus{
  outline:2px solid var(--sqh-royal);outline-offset:1px;border-color:var(--sqh-royal)}
.sqh .sqh-modale .sqh-champ small{font-size:11.5px;color:var(--sqh-steel);line-height:1.4}
.sqh .sqh-modale .sqh-champs-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.sqh .sqh-modale__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--sqh-ice)}
.sqh .sqh-modale__actions .mini-btn{font-size:13px;padding:11px 20px;border-radius:10px;min-height:42px}
.sqh .sqh-modale__actions .mini-btn.ghost{background:var(--sqh-paper);border:1px solid var(--sqh-line)}
.sqh .sqh-modale .offre-contre{padding:0;border:0}
.sqh .sqh-modale .offre-champ{max-width:none}
@media (max-width: 480px){
  .sqh dialog.sqh-modale{width:calc(100vw - 24px)}
  .sqh .sqh-modale__boite{padding:18px 16px 16px}
  .sqh .sqh-modale .sqh-champs-2{grid-template-columns:minmax(0,1fr)}
  .sqh .sqh-modale__actions{flex-direction:column-reverse}
  .sqh .sqh-modale__actions .mini-btn{width:100%;min-height:44px}
}

/* ── 9. Le suivi d'une commande : les gestes en boutons ─────────────────── */
.sqh .auth-card .suivi-gestes{margin:18px 0 6px;padding:14px 16px;border:1px solid var(--sqh-line);border-radius:14px;background:var(--sqh-ice)}
.sqh .auth-card .suivi-gestes__aide{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:var(--sqh-slate)}
.sqh .auth-card .suivi-gestes .mini-btn{font-size:13px;padding:11px 18px;border-radius:10px;min-height:42px}
.sqh .auth-card .suivi-gestes .mini-btn.ghost{background:var(--sqh-paper);border:1px solid var(--sqh-line);color:var(--sqh-royal)}
@media (max-width: 480px){
  .sqh .auth-card .suivi-gestes .sqh-gestes > *{flex:1 1 100%}
  .sqh .auth-card .suivi-gestes .sqh-modale-hote > .mini-btn{width:100%}
}

/* ── 10. Séquestres : les gestes de commande ────────────────────────────── */
.sqh .dash-panel form.geste-expedier{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0}
.sqh .dash-panel form.geste-expedier .notes{min-width:14ch}
.sqh .dash-panel .geste-delai + .sqh-gestes{margin-top:4px}

/* ── 11. Litiges ────────────────────────────────────────────────────────── */
.sqh .litiges-liste{list-style:none;margin:0;padding:0}
.sqh .litige{padding:16px 18px;border-top:1px solid var(--sqh-line)}
.sqh .litige--ouvert{background:rgba(229,177,58,.05)}
.sqh .litige__tete{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.sqh .litige__titre b{display:block;color:var(--sqh-ink);font-weight:600;font-size:13.5px}
.sqh .litige__titre small{display:block;color:var(--sqh-steel);font-size:11.5px;margin-top:2px}
.sqh .litige__corps{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:14px 22px;margin:12px 0}
.sqh .litige__libelle{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sqh-slate);margin-bottom:6px}
.sqh .litige__motif p{margin:0;padding:10px 12px;border-left:3px solid var(--sqh-gold);background:var(--sqh-paper);border-radius:0 10px 10px 0;
  font-size:13px;line-height:1.5;color:var(--sqh-ink);white-space:pre-line}
.sqh .litige__journal ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sqh .litige__journal li{display:flex;gap:10px;font-size:12.5px;color:var(--sqh-ink)}
.sqh .litige__journal time{flex:none;color:var(--sqh-steel);font-variant-numeric:tabular-nums;min-width:9ch}
.sqh .litige__pied{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.sqh .litige__pieces small{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px}
.sqh .litige__pieces a{color:var(--sqh-royal);font-weight:600}
@media (max-width: 760px){
  .sqh .litige{padding:14px}
  .sqh .litige__tete{flex-direction:column}
  .sqh .litige__corps{grid-template-columns:minmax(0,1fr)}
  .sqh .litige__pied .sqh-gestes, .sqh .litige__pied .sqh-gestes .mini-btn{width:100%}
}

/* ── 12. Déposer un besoin : un point d'entrée, deux modes ──────────────── */
.sqh .drop-zone.besoin-entree{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:16px 24px;align-items:center;text-align:left;cursor:default;
  padding:20px 22px;border-style:solid}
.sqh .drop-zone.besoin-entree:hover{border-color:var(--sqh-line);background:var(--sqh-paper)}
.sqh .besoin-entree__texte b{display:block;font-size:16px;color:var(--sqh-navy);margin-bottom:4px}
.sqh .besoin-entree__texte span{font-size:13px;line-height:1.5;color:var(--sqh-slate)}
.sqh .besoin-entree__modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.sqh a.besoin-mode{display:grid;gap:4px;padding:14px 16px;border-radius:14px;border:1.5px solid var(--sqh-line);background:var(--sqh-paper);
  text-decoration:none;color:var(--sqh-ink)}
.sqh a.besoin-mode:hover, .sqh a.besoin-mode:focus-visible{border-color:var(--sqh-royal);box-shadow:0 8px 22px -14px rgba(0,66,215,.5)}
.sqh .besoin-mode__titre{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--sqh-royal)}
.sqh .besoin-mode--janus .besoin-mode__titre{color:var(--sqh-janus)}
.sqh a.besoin-mode small{font-size:12px;line-height:1.45;color:var(--sqh-slate)}
.sqh .besoin-bascule{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:5px;border-radius:16px;background:var(--sqh-ice);margin:0 0 20px}
.sqh .besoin-bascule a{display:grid;gap:2px;padding:10px 14px;border-radius:12px;text-decoration:none;color:var(--sqh-slate)}
.sqh .besoin-bascule a b{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--sqh-navy)}
.sqh .besoin-bascule a small{font-size:11.5px;line-height:1.35}
.sqh .besoin-bascule a.on{background:var(--sqh-paper);box-shadow:0 6px 18px -12px rgba(6,35,101,.45)}
.sqh .besoin-bascule a.on b{color:var(--sqh-royal)}
.sqh .janus-liste .besoin-bascule{max-width:760px;margin:0 auto 22px}
.sqh .jl-manque .sqh-picto{vertical-align:-.12em}
@media (max-width: 760px){
  .sqh .drop-zone.besoin-entree{grid-template-columns:minmax(0,1fr)}
}

/* ── 13. Le catalogue : la recherche d'abord, les filtres repliés ───────── */
.sqh .cat-recherche{margin:0 0 6px}
.sqh .cat-recherche__barre{display:flex;align-items:center;gap:10px;background:var(--sqh-paper);border:1.5px solid rgba(0,66,215,.28);border-radius:999px;
  padding:6px 6px 6px 18px;box-shadow:0 10px 30px -18px rgba(6,35,101,.25)}
.sqh .cat-recherche__barre:focus-within{border-color:var(--sqh-electric)}
.sqh .cat-recherche__loupe{flex:none;display:inline-flex;color:var(--sqh-royal)}
.sqh .cat-recherche__loupe .sqh-picto{width:20px;height:20px}
.sqh .cat-recherche__barre input[type=search]{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:var(--sqh-ink);padding:10px 0}
.sqh .cat-recherche__go{flex:none;font:inherit;font-size:14px;font-weight:700;border:0;cursor:pointer;background:var(--sqh-royal);color:var(--sqh-paper);
  border-radius:999px;padding:12px 24px}
.sqh .cat-recherche__go:hover{background:var(--sqh-royal-dk)}
.sqh details.cat-filtres{margin:12px 0 4px}
.sqh details.cat-filtres > summary{list-style:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13.5px;font-weight:600;
  color:var(--sqh-navy);padding:9px 16px;border-radius:999px;border:1px solid var(--sqh-line);background:var(--sqh-paper)}
.sqh details.cat-filtres > summary::-webkit-details-marker{display:none}
.sqh details.cat-filtres > summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--sqh-royal);border-bottom:2px solid var(--sqh-royal);
  transform:rotate(45deg);margin:-3px 0 0 4px;transition:transform .15s}
.sqh details.cat-filtres[open] > summary::after{transform:rotate(-135deg);margin-top:3px}
.sqh details.cat-filtres > summary:hover, .sqh details.cat-filtres > summary:focus-visible{border-color:var(--sqh-royal);color:var(--sqh-royal)}
.sqh details.cat-filtres > summary .sqh-picto{width:16px;height:16px;color:var(--sqh-royal)}
.sqh .cat-filtres__nombre{font-size:11px;font-weight:700;background:var(--sqh-royal);color:var(--sqh-paper);border-radius:999px;padding:2px 8px}
.sqh .cat-filtres__corps{margin-top:12px}
.sqh .cat-filtres__corps .cat-filters{margin:0 0 4px}
.sqh .cat-filtres__corps .cat-search{margin-top:12px}
.sqh .cat-filtres__effacer{align-self:center;font-size:13px;font-weight:600;color:var(--sqh-slate);text-decoration:underline;padding:0 4px}
.sqh .cat-filtres__effacer:hover{color:var(--sqh-royal)}
@media (max-width: 640px){
  .sqh .cat-recherche__barre{padding-left:14px}
  .sqh .cat-recherche__go{padding:11px 16px}
  .sqh details.cat-filtres > summary{width:100%;justify-content:flex-start;box-sizing:border-box}
  .sqh .cat-filtres__corps .cat-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  .sqh .cat-filtres__corps .cat-filters::-webkit-scrollbar{display:none}
  .sqh .cat-filtres__corps .cat-filters a{flex:0 0 auto}
}

/* ── 14. « À la une » : la croix ────────────────────────────────────────── */
.sqh .mises-en-avant{position:relative}
.sqh .mises-en-avant[hidden]{display:none}
.sqh .mises-en-avant__fermer{position:absolute;top:-10px;right:-10px;z-index:2;width:30px;height:30px;border-radius:50%;border:1px solid var(--sqh-line);
  background:var(--sqh-paper);color:var(--sqh-slate);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px -8px rgba(0,10,31,.4)}
.sqh .mises-en-avant__fermer:hover, .sqh .mises-en-avant__fermer:focus-visible{color:var(--sqh-royal);border-color:var(--sqh-royal)}
.sqh .mises-en-avant__fermer .sqh-picto{width:14px;height:14px}
@media (max-width: 640px){
  .sqh .mises-en-avant__fermer{top:-12px;right:-4px;width:34px;height:34px}
}

/* ── 15. Espace acheteur et anti-contournement (23/10/2026) ─────────────── */
/* Commandes : le suivi à droite de la ligne, en bouton principal, à côté
   des gestes. Les gestes de l'acheteur (`_marketplace_order_actions`) sont
   déjà dans un `.sqh-gestes` : il se fond dans celui de la cellule, pour un
   seul rang de boutons au même écart. Le délai d'expédition et le numéro de
   suivi du vendeur, eux, prennent leur propre ligne. */
.sqh .dash-panel td.commande-gestes-cellule{text-align:right}
.sqh .commande-gestes{justify-content:flex-end}
.sqh .commande-gestes > .sqh-gestes{display:contents}
.sqh .commande-gestes > form.geste-delai, .sqh .commande-gestes > form.geste-expedier{flex:1 1 100%;margin:0;align-items:flex-end;max-width:none}
.sqh .commande-gestes > form.geste-delai .geste-delai__saisie{justify-content:flex-end}
/* Le lien court vers la livraison, sous la transaction ; ambré quand une
   cotation de fret attend la décision du membre. */
.sqh .dash-panel a.commande-livraison{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;font-weight:600;color:var(--sqh-royal);text-decoration:none}
.sqh .dash-panel a.commande-livraison:hover, .sqh .dash-panel a.commande-livraison:focus-visible{text-decoration:underline}
.sqh .dash-panel a.commande-livraison .sqh-picto{width:15px;height:15px}
.sqh .dash-panel a.commande-livraison.a-decider{padding:4px 10px;border-radius:999px;background:rgba(229,177,58,.2);color:var(--sqh-navy)}
/* Mes livraisons / Expéditions : le panneau à organiser, ancré par commande. */
.sqh .dash-panel.acheminement{scroll-margin-top:90px}
.sqh .acheminement-ligne{scroll-margin-top:90px}
.sqh .acheminement-ligne:target td{background:rgba(0,66,215,.06)}
.sqh .dash-panel td.acheminement-action{width:300px}
.sqh .dash-panel td.acheminement-action .sqh-gestes{margin-top:8px}
.sqh .dash-panel td.acheminement-action > small{display:block}
/* Espace logistique : le bouton du suivi. */
.sqh .auth-card td.logistique-suivi{text-align:right;white-space:nowrap}
/* Demandes reçues : la garde, le relais de l'équipe, et la demande. */
.sqh .espace-intro .demandes-garde{margin:12px 0 0}
.sqh .demandes-table td.demandes-gestes small.demandes-relais{display:block;white-space:normal;max-width:22ch;margin:0 auto;font-size:11.5px;line-height:1.4;color:var(--sqh-steel)}
.sqh .field small.champ-aide{display:block;margin-top:6px;font-size:11.5px;line-height:1.45;color:var(--sqh-steel)}
.sqh .demande-suite{margin:14px 0 0}
.sqh .demande-suite:empty{display:none}
/* Sur téléphone, une commande (et une ligne à organiser) devient une fiche :
   la transaction en tête, le montant et le statut côte à côte, la barre
   d'avancement, puis les gestes et le suivi, sans défilement horizontal. */
@media (max-width: 640px){
  .sqh .dash-panel table.commandes-table, .sqh .dash-panel table.commandes-table tbody,
  .sqh .dash-panel table.acheminement-table, .sqh .dash-panel table.acheminement-table tbody{display:block;width:100%}
  .sqh .dash-panel table.commandes-table tr:has(> th), .sqh .dash-panel table.acheminement-table tr:has(> th){display:none}
  .sqh .dash-panel table.commandes-table tr, .sqh .dash-panel table.acheminement-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:10px 12px;padding:14px 16px;border-top:1px solid var(--sqh-line)}
  .sqh .dash-panel table.commandes-table td, .sqh .dash-panel table.acheminement-table td{display:block;padding:0;border:0;min-width:0}
  .sqh .dash-panel table.commandes-table td:nth-child(1), .sqh .dash-panel table.commandes-table td:nth-child(3),
  .sqh .dash-panel table.commandes-table td.commande-gestes-cellule{grid-column:1 / -1}
  .sqh .dash-panel table.commandes-table td:nth-child(2){grid-column:1;grid-row:2}
  .sqh .dash-panel table.commandes-table td:nth-child(4){grid-column:2;grid-row:2;text-align:right}
  .sqh .dash-panel table.commandes-table td:nth-child(3){grid-row:3}
  .sqh .dash-panel table.acheminement-table td:nth-child(1), .sqh .dash-panel table.acheminement-table td.acheminement-action{grid-column:1 / -1}
  .sqh .dash-panel table.acheminement-table td:nth-child(2){grid-column:2;grid-row:2;text-align:right}
  .sqh .dash-panel table.acheminement-table td:nth-child(3){grid-column:1;grid-row:2}
  .sqh .commande-gestes > *, .sqh .commande-gestes > .sqh-gestes > *{flex:1 1 auto}
  .sqh .commande-gestes .mini-btn{width:100%}
}
@media (max-width: 760px){
  .sqh .dash-panel td.commande-gestes-cellule{text-align:left}
  .sqh .commande-gestes{justify-content:flex-start}
  .sqh .commande-gestes > form.geste-delai, .sqh .commande-gestes > form.geste-expedier{align-items:stretch}
  .sqh .commande-gestes > form.geste-delai .geste-delai__saisie{justify-content:flex-start}
  .sqh .dash-panel td.acheminement-action{width:auto}
  .sqh .auth-card td.logistique-suivi{white-space:normal}
}