/* ============================================================
   Compagnons de route — bouton multi-états + page « Mes compagnons ».
   Thème night-cyan du site. Additif, réversible. (08/07/2026)
   ============================================================ */
.comp-btn{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;position:relative}
.comp-btn .comp-ic{font-size:.95em;line-height:1}
.comp-btn.comp-loading{opacity:.55;pointer-events:none}
.comp-respond{display:inline-flex;gap:6px;flex-wrap:wrap}
.comp-accepted{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}

.comp-add{border-color:rgba(47,216,200,.55) !important;color:#bff6ef !important;background:rgba(47,216,200,.14) !important}
.comp-add:hover{background:rgba(47,216,200,.24) !important}
.comp-pending{border:1px solid rgba(150,180,210,.4);background:rgba(120,150,180,.14);color:#c7ddf0;border-radius:8px;padding:7px 11px;font-size:12px;cursor:pointer}
.comp-refuse{opacity:.85}
.comp-badge-ok{display:inline-flex;align-items:center;gap:5px;background:rgba(47,216,200,.16);border:1px solid rgba(47,216,200,.5);color:#bff6ef;border-radius:8px;padding:6px 10px;font-size:12px;font-weight:500;white-space:nowrap}

.comp-more-wrap{position:relative;display:inline-block}
.comp-more{padding:6px 9px !important;line-height:1}
.comp-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:60;min-width:196px;max-width:min(240px,calc(100vw - 40px));background:#0e2137;border:1px solid rgba(120,190,240,.28);border-radius:11px;padding:5px;box-shadow:0 12px 34px rgba(0,0,0,.55);display:flex;flex-direction:column}
/* (29/07) Le menu ⋯ ne doit apparaître qu'au clic : sans ceci, display:flex écrase l'attribut hidden et le menu reste affiché (carré parasite sur la fiche). */
.comp-menu[hidden]{display:none}
.comp-menu-item{white-space:nowrap}
.comp-menu-item{background:transparent;border:0;color:#eaf3ff;text-align:left;padding:9px 11px;border-radius:8px;font:inherit;font-size:13px;cursor:pointer}
.comp-menu-item:hover{background:rgba(120,190,240,.12)}
.comp-menu-danger{color:#ff9a8b}
.comp-menu-danger:hover{background:rgba(255,90,60,.14)}

.comp-flash{display:inline-block;margin-left:8px;padding:4px 9px;border-radius:8px;font-size:12px;font-weight:500;vertical-align:middle}
.comp-flash-ok{background:rgba(52,199,120,.18);color:#c6f6d5;border:1px solid rgba(52,199,120,.5)}
.comp-flash-err{background:rgba(255,90,60,.16);color:#ffc7bd;border:1px solid rgba(255,90,60,.5)}

/* ---------- Page « Mes compagnons de route » ---------- */
.comp-page-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.comp-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 18px}
.comp-tab{display:inline-flex;align-items:center;gap:7px;background:var(--card-bg,#0e2137);border:1px solid var(--edge,rgba(120,190,240,.22));color:var(--text,#eaf3ff);border-radius:11px;padding:9px 14px;font-size:13.5px;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s}
.comp-tab:hover{border-color:rgba(47,216,200,.5)}
.comp-tab.is-active{background:rgba(47,216,200,.14);border-color:rgba(47,216,200,.6);color:#bff6ef}
.comp-tab .comp-count{background:rgba(47,216,200,.22);color:#bff6ef;border-radius:100px;min-width:20px;height:20px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:600}
.comp-tab .comp-count.comp-alert{background:#ef4444;color:#fff}

.comp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.comp-card{display:flex;flex-direction:column;gap:10px;background:var(--card-bg,#0e2137);border:1px solid var(--edge,rgba(120,190,240,.2));border-radius:14px;padding:14px}
.comp-card-top{display:flex;align-items:center;gap:11px}
.comp-ava{width:46px;height:46px;border-radius:50%;object-fit:cover;background:linear-gradient(135deg,#2b6cb0,#e44e60);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:500;flex-shrink:0}
.comp-name{font-size:14.5px;font-weight:500;color:var(--text,#eaf3ff);margin:0}
.comp-sub{font-size:12px;color:var(--text-dim,#8fb7dc);margin:2px 0 0;display:flex;align-items:center;gap:6px}
.comp-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block}
.comp-dot.online{background:#2fd8c8;box-shadow:0 0 6px #2fd8c8}
.comp-dot.recent{background:#f5a623}
.comp-dot.offline{background:#6b7684}
/* Actions de la carte : empilées proprement (Voir profil pleine largeur, puis la ligne compagnon). */
.comp-card-actions{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.comp-card-actions > a.adm-btn-outline,
.comp-card-actions > a.adm-btn-primary{display:block;width:100%;text-align:center;box-sizing:border-box}
.comp-card-actions .comp-btn{width:100%}
.comp-card-actions .comp-accepted{display:flex;width:100%;align-items:center;gap:6px;flex-wrap:wrap} /* (10/07) wrap : badge + icônes ne se chevauchent plus */
.comp-card-actions .comp-badge-ok{flex:1 1 100%;justify-content:center;min-width:0}
.comp-card-actions .comp-msg,
.comp-card-actions .comp-iconact{flex:1 1 auto;justify-content:center;min-width:0}
.comp-card-actions .comp-more-wrap{flex:0 0 auto}
.comp-card-actions .comp-respond{display:flex;width:100%;gap:6px}
.comp-card-actions .comp-respond > .comp-act{flex:1 1 0;justify-content:center}
.comp-card-actions .comp-add,
.comp-card-actions .comp-pending{display:flex;width:100%;justify-content:center;text-align:center}

.comp-empty{text-align:center;padding:40px 20px;color:var(--text-dim,#8fb7dc);background:var(--card-bg,#0e2137);border:1px dashed var(--edge,rgba(120,190,240,.28));border-radius:14px}
.comp-empty .comp-empty-ic{font-size:34px;display:block;margin-bottom:10px;opacity:.85}

@media (max-width:640px){
  .comp-grid{grid-template-columns:1fr}
  .comp-menu{right:auto;left:0}
}