/* Oqora CRM · styles de la section Mes pages (25/10/2026, .mp-*).
   Règles préfixées par la classe racine (.s-mespages) ; seule crm.css définit des jetons :root.
   Système de design de docs/sortie-ghl/audit-visuel.md § 3 : vrai tableau à lignes fines, texte d'une seule couleur,
   couleurs d'état seulement dans les petits badges. Chaque jeton du § 3.1 a un repli sur une variable de crm.css (ou
   sa valeur) : la page est la même avant et après le passage du style commun. */

.s-mespages{ display:block; max-width:var(--contenu-max, 1360px); }
.s-mespages p{ margin:0; }
.s-mespages .mp-chargement{ padding:var(--sp-6, 24px) 0; }
.s-mespages .mp{ display:flex; flex-direction:column; gap:var(--sp-3, 12px); min-width:0; color:var(--ink);
  font-size:var(--fs-14, 14px); line-height:1.45; }

/* Où pointe oqora.fr : une seule ligne d'information, neutre */
.s-mespages .mp-bascule{ padding:10px var(--sp-4, 16px); border:1px solid var(--rule); border-radius:8px;
  background:var(--surface-2, var(--bande, #f2f4f6)); color:var(--ink); font-size:var(--fs-14, 14px); font-weight:500; }

/* Tableau (audit § 3.3) : en-têtes 36 px, lignes d'au moins 48 px */
.s-mespages .mp-zone{ background:var(--surface); border:1px solid var(--rule); border-radius:12px; overflow-x:auto; }
.s-mespages .mp-tableau{ width:100%; min-width:960px; border-collapse:separate; border-spacing:0; table-layout:fixed; }
.s-mespages .mp-tableau th{ height:36px; padding:0 var(--sp-4, 16px); text-align:left; white-space:nowrap;
  font:var(--fw-moyen, 500) var(--fs-12, 12px)/1 var(--font); color:var(--ink-soft);
  background:var(--surface-2, var(--bande, #f2f4f6)); border-bottom:1px solid var(--rule); }
.s-mespages .mp-tableau td{ height:48px; padding:10px var(--sp-4, 16px); vertical-align:middle;
  border-bottom:1px solid var(--rule-soft); font-size:var(--fs-14, 14px); color:var(--ink); overflow-wrap:anywhere; }
.s-mespages .mp-tableau tbody tr:last-child td{ border-bottom:0; }
.s-mespages .mp-tableau tbody tr:hover td{ background:var(--hover, #f4f6f8); }

/* Largeurs : le nom, chaque adresse et son état tiennent sur leur ligne à 1440 px ; « ce que c'est » prend le reste */
.s-mespages .mp-col-page{ width:200px; }
.s-mespages .mp-col-adresse{ width:310px; }

.s-mespages .mp-nom{ display:block; font-weight:var(--fw-moyen, 500); }
.s-mespages .mp-parcours{ display:block; font-size:var(--fs-13, 13px); color:var(--ink-soft); }
.s-mespages .mp-col-quoi{ color:var(--ink-soft); }
.s-mespages .mp-adresse{ color:var(--ink); text-decoration:none; overflow-wrap:anywhere; }
.s-mespages a.mp-adresse:hover{ text-decoration:underline; text-underline-offset:3px; }
.s-mespages a.mp-adresse:focus-visible{ outline:3px solid var(--bleu-ring); outline-offset:2px; border-radius:4px; }

/* États : badges seulement (jamais de rouge plein) */
.s-mespages .mp-badge{ display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 8px; border-radius:6px;
  font:var(--fw-moyen, 500) var(--fs-12, 12px)/1 var(--font); white-space:nowrap; }
.s-mespages .mp-point{ width:8px; height:8px; flex:none; border-radius:50%; background:currentColor; }
.s-mespages .mp-badge--ok{ background:var(--vert-tint); color:var(--vert); }
.s-mespages .mp-badge--ko{ background:var(--rouge-tint); color:var(--rouge); }
.s-mespages .mp-badge--inconnu{ background:var(--surface-2); color:var(--ink-soft); }
.s-mespages .mp-reseau{ font-size:var(--fs-13, 13px); color:var(--ink-soft); }
.s-mespages .mp-etat{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; margin-top:6px; }
.s-mespages .mp-detail{ font-size:var(--fs-12, 12px); color:var(--ink-soft); }

.s-mespages .mp-verifie{ font-size:var(--fs-13, 13px); color:var(--ink-soft); }

/* Téléphone : le tableau défile dans son cadre, jamais la page */
@media (max-width:899px){
  .s-mespages .mp-bascule{ font-size:var(--fs-13, 13px); }
  .s-mespages a.mp-adresse{ display:inline-flex; align-items:center; min-height:var(--tap, 44px); }
}