/* Retouches du hub, série « mobile » (essai 2026-09-28), actives sous html.essai-m.
   Surcharge pure, comme essai.css : aucun fichier existant n'est modifié. */

/* 1. Amis : appareils et connexions repliés derrière un bouton (téléphone) */
html.essai-m .em-bascule { display: none; }
@media (max-width: 760px) {
  html.essai-m .em-bascule {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    margin: 12px 0 0; padding: 12px 14px; border-radius: 12px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    color: inherit; font: inherit; font-size: .9rem; text-align: left; cursor: pointer;
  }
  html.essai-m .em-bascule .em-fleche { transition: transform .2s; opacity: .7; }
  html.essai-m .em-ouvert .em-bascule .em-fleche { transform: rotate(180deg); }
  html.essai-m .em-replie .cp-cols { display: none; }
  html.essai-m .em-bascule b { font-weight: 700; }
}

/* 2. Suivi : sections repliables d'un tap sur le titre */
html.essai-m #view section.em-pliable > h2 { cursor: pointer; user-select: none; }
html.essai-m #view section.em-pliable > h2::after {
  content: "▾"; margin-left: 10px; opacity: .55; font-size: .85em; display: inline-block; transition: transform .2s;
}
html.essai-m #view section.em-pliable.em-ferme > h2::after { transform: rotate(-90deg); }
html.essai-m #view section.em-pliable.em-ferme > *:not(h2) { display: none; }
html.essai-m #view section.em-pliable.em-ferme { padding-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  html.essai-m .em-bascule .em-fleche, html.essai-m #view section.em-pliable > h2::after { transition: none; }
}

/* 3. Amis : en-tête compact et boutons qui ne sortent plus de l'écran */
@media (max-width: 760px) {
  html.essai-m .cp { position: relative; }
  html.essai-m .cp-tete { display: grid; grid-template-columns: 40px 1fr; gap: 10px 12px; align-items: start; }
  html.essai-m .cp-avatar { width: 40px; height: 40px; font-size: 1rem; }
  html.essai-m .cp-ident { min-width: 0; padding-right: 34px; }
  html.essai-m .cp-info { display: block; line-height: 1.5; }
  html.essai-m .cp-info > svg { display: inline-block; vertical-align: -2px; margin-right: 6px; }
  html.essai-m .cp-actions {
    grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%;
  }
  html.essai-m .cp-actions .att-btn { width: 100%; justify-content: center; padding-left: 8px; padding-right: 8px; }
  html.essai-m .cp-actions .cp-plus { position: absolute; top: 14px; right: 12px; }
}