/* =============================================================================
   REFONTE APP — Mes compagnons (compagnons.php) · LOCAL / additif / réversible
   Scopé html.apprefonte + body.page-compagnons + .ar-compagnons, actif ≤768px.
   Thème SOMBRE (navy + cyan). N'affecte jamais le bureau ni la prod.
   ============================================================================= */

html.apprefonte body.page-compagnons{ background:var(--ar-bg,#071624) !important; }
html.apprefonte body.page-compagnons::before{ display:none !important; }
html.apprefonte body.page-compagnons .pub-topbar{ display:none !important; }
html.apprefonte body.page-compagnons main.pub-content{ padding:0 !important; max-width:none !important; }
html.apprefonte:has(.ar-compagnons) .pub-content > *:not(.ar-compagnons):not(.ann-banner-wrap):not(.flash){ display:none !important; }

/* ---------------------------------------------------------------------------- */
.ar-compagnons{
  --surf:#0E2337; --surf2:#12293F; --line:rgba(120,170,220,.16);
  --ink:var(--ar-ink,#F6F0DF); --soft:#9BB1BF; --cyan:#35D7D1; --blue:#4FB0E8;
  display:block; color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  padding-bottom:calc(var(--ar-navh,64px) + var(--ar-safe-b,0px) + 84px);
}
.ar-compagnons a{ text-decoration:none; color:inherit; }
.ar-compagnons svg{ display:block; }

/* En-tête */
.ar-cg-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:26px 16px 6px; }
.ar-cg-title{ margin:0; font:800 30px/1.05 'Inter',sans-serif; letter-spacing:-.3px; color:#fff; }
.ar-cg-sub{ margin:6px 0 0; font:400 15px/1.4 'Inter',sans-serif; color:var(--soft); }
.ar-cg-bell{ width:44px; height:44px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; color:var(--soft); }
.ar-cg-bell svg{ width:23px; height:23px; }

/* Onglets */
.ar-cg-tabs{ display:flex; gap:16px; padding:12px 16px 0; margin:0 0 12px; overflow-x:auto; border-bottom:1px solid var(--line); }
.ar-cg-tab{ display:inline-flex; align-items:center; gap:8px; padding:8px 2px 12px; background:none; border:0; border-bottom:2.5px solid transparent; cursor:pointer; white-space:nowrap; font:700 15px/1 'Inter',sans-serif; color:var(--soft); }
.ar-cg-tab.is-on{ color:var(--cyan); border-bottom-color:var(--cyan); }
.ar-cg-badge{ min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:rgba(255,255,255,.08); color:var(--soft); font:700 12px/22px 'Inter',sans-serif; text-align:center; }
.ar-cg-tab.is-on .ar-cg-badge{ background:rgba(53,215,209,.18); color:var(--cyan); }

.ar-cg-pane[hidden]{ display:none; }

/* Recherche + filtre */
.ar-cg-search{ display:flex; gap:11px; margin:0 16px 16px; }
.ar-cg-input{ flex:1; min-width:0; display:flex; align-items:center; gap:9px; padding:0 14px; height:50px; border-radius:14px; background:var(--surf); border:1px solid var(--line); }
.ar-cg-input svg{ width:18px; height:18px; flex:0 0 auto; color:var(--soft); }
.ar-cg-input input{ flex:1; min-width:0; background:none; border:0; outline:0; color:var(--ink); font:400 15px/1 'Inter',sans-serif; }
.ar-cg-input input::placeholder{ color:var(--soft); }
.ar-cg-filter{ display:inline-flex; align-items:center; gap:8px; padding:0 16px; height:50px; border-radius:14px; background:transparent; border:1px solid rgba(53,215,209,.5); color:var(--cyan); font:700 14px/1 'Inter',sans-serif; cursor:pointer; white-space:nowrap; }
.ar-cg-filter svg{ width:16px; height:16px; }
.ar-cg-filter.is-on{ background:rgba(53,215,209,.14); }

/* Carte compagnon */
.ar-cg-list{ display:flex; flex-direction:column; gap:12px; margin:0 16px; }
.ar-cg-card{ display:flex; align-items:center; gap:13px; padding:14px; border-radius:18px; background:var(--surf); border:1px solid var(--line); }
.ar-cg-card.is-hidden{ display:none; }
.ar-cg-avawrap{ position:relative; flex:0 0 auto; }
.ar-cg-ava{ width:62px; height:62px; border-radius:50%; object-fit:cover; display:block; background:#16283c; }
.ar-cg-ava-ini{ display:grid; place-items:center; font:800 24px/1 'Inter',sans-serif; color:#0b1a2a; background:linear-gradient(135deg,#5fd4d0,#3aa0c8); }
.ar-cg-dot{ position:absolute; right:2px; bottom:2px; width:15px; height:15px; border-radius:50%; background:var(--dc,#8393A5); border:3px solid var(--surf); }
.ar-cg-info{ flex:1; min-width:0; }
.ar-cg-name{ font:700 17px/1.2 'Inter',sans-serif; color:#fff; overflow-wrap:anywhere; }
.ar-cg-loc{ display:flex; align-items:center; gap:5px; margin-top:3px; font:400 13px/1.2 'Inter',sans-serif; color:var(--soft); }
.ar-cg-loc svg{ width:13px; height:13px; flex:0 0 auto; }
.ar-cg-pres{ margin-top:3px; font:600 13px/1.2 'Inter',sans-serif; }
.ar-cg-actions{ display:flex; flex-direction:column; gap:8px; flex:0 0 auto; }
.ar-cg-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 11px; border-radius:11px; font:700 12.5px/1 'Inter',sans-serif; cursor:pointer; white-space:nowrap; border:1px solid transparent; }
.ar-cg-btn svg{ width:15px; height:15px; }
.ar-cg-btn-cyan{ border-color:rgba(53,215,209,.5); color:var(--cyan); background:rgba(53,215,209,.06); }
.ar-cg-btn-ghost{ border-color:var(--line); color:#cfe0ee; }
.ar-cg-btn-solid{ background:var(--cyan); color:#06202a; }
.ar-cg-btn-danger{ border-color:rgba(239,110,90,.5); color:#F08E7E; }
.ar-cg-kebab{ width:40px; height:40px; flex:0 0 auto; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--soft); font:700 18px/1 'Inter',sans-serif; cursor:pointer; }

/* Suggestion */
.ar-cg-sugtitle{ margin:22px 16px 12px; font:800 17px/1 'Inter',sans-serif; color:var(--cyan); }
.ar-cg-card--sugg .ar-cg-actions{ flex-direction:row; }

/* Carte simple (pending / bloqué) : bouton unique à droite */
.ar-cg-card--row .ar-cg-actions{ flex-direction:row; }

.ar-cg-empty{ margin:8px 16px; padding:40px 18px; text-align:center; color:var(--soft); font:500 14.5px/1.5 'Inter',sans-serif; background:var(--surf); border:1px solid var(--line); border-radius:18px; }

/* ----------------------------------------------------------------------------
   (16/08) FIX MOBILE — alignement des cartes compagnons sur petit écran.
   Bug : sous ~460px, les 2 boutons (Message / Voir le profil) écrasaient la
   colonne infos (largeur ~42px) → le lieu se coupait lettre par lettre
   (« Sainte / s / (Chare / nte- »). Vérifié en banc de test : 9 lignes.
   Correctif : sous 560px, les boutons passent EN PLEINE LARGEUR sous les
   infos ; la colonne infos récupère toute la place (lieu = 2 lignes propres).
   Additif & réversible : supprimer ce bloc = retour à l'état précédent.
   ---------------------------------------------------------------------------- */
@media (max-width:560px){
  .ar-cg-card{ flex-wrap:wrap; row-gap:10px; }
  .ar-cg-avawrap{ order:1; }
  .ar-cg-info{ order:2; }
  .ar-cg-kebab{ order:3; }
  .ar-cg-actions{ order:4; flex:1 1 100%; flex-direction:row; }
  .ar-cg-actions .ar-cg-btn{ flex:1 1 0; min-width:0; }
}