/* =====================================================================
   Charte des outils internes — pages autonomes (30/10/2026)
   Connexion, administration (utilisateurs, permissions, journal), mentions légales,
   mes données. Référence : DESIGN.md. À charger APRÈS charte.css ; copiée à
   l'identique dans les apps. Ces pages n'ont pas de barre latérale ni de header.php :
   elles portent leur propre <style>, qu'on recouvre ici sous `body.charte`.
   ===================================================================== */

/* charte.css fixe la base à 14 px ; on se lit debout : 16 px, comme Stock et Bootstrap par défaut. */
body.charte{ background:var(--fond); font-size:16px; line-height:1.45; }

/* ---- Connexion : une carte blanche cernée d'un filet, le logo du site ---- */
body.charte:has(.login-card), body.charte .login-container{ background:var(--beige-clair); }
body.charte .login-card{ background:var(--fond); border:1px solid var(--filet); border-radius:var(--arrondi); box-shadow:none; }
body.charte .login-logo{ background:var(--vert); border-radius:var(--arrondi); box-shadow:none; }
body.charte .login-logo-img{ display:block; width:72px; height:72px; margin:0 auto 1.25rem; border-radius:999px; background:#fff; }
body.charte .login-card h4{ color:var(--encre); font-weight:600; }

/* ---- Bandeau des pages d'administration et des pages légales : blanc, un filet ---- */
body.charte .page-header{ background:var(--fond); color:var(--encre); padding:1rem 2rem; margin-bottom:1.5rem;
  border-bottom:1px solid var(--filet); }
body.charte .page-header h1{ color:var(--encre); font-size:22px; font-weight:600; }
body.charte .page-header .back-link, body.charte .back-link{ color:var(--encre-douce); }
body.charte .page-header .back-link:hover, body.charte .back-link:hover{ color:var(--encre); }
body.charte .nav-admin a{ color:var(--encre-douce); border:1px solid var(--filet); background:var(--fond); }
body.charte .nav-admin a:hover, body.charte .nav-admin a.active{ color:var(--encre); background:var(--beige); border-color:var(--contour); }

/* ---- Cartes : sans ombre, filet fin ---- */
body.charte .form-section, body.charte .content-card, body.charte .info-card{
  box-shadow:none; border:1px solid var(--filet); border-radius:var(--arrondi); background:var(--fond); }
body.charte .content-card h2, body.charte .info-card h2{ color:var(--encre); border-bottom:1px solid var(--filet); font-weight:600; }
body.charte .content-card h3{ color:var(--encre-douce); }
body.charte .info-label{ color:var(--encre-douce); }
body.charte .info-row{ border-bottom-color:var(--filet); }
body.charte .data-table th, body.charte .log-table th{ background:var(--beige); color:var(--encre-douce); font-weight:600; }

/* ---- États : un mot, jamais un aplat. Les couleurs des groupes et des modules restent
   (posées en ligne : ce sont des repères, comme celles des boutiques). ---- */
body.charte .badge-active{ color:var(--vert) !important; font-weight:600; }
body.charte .badge-inactive{ color:var(--discret) !important; font-weight:500; }
body.charte .log-action{ color:var(--encre); }
body.charte .log-details, body.charte .stats-bar .stat{ color:var(--encre-douce); }
body.charte .stats-bar .stat strong{ color:var(--encre); }

/* Connexion de Tracking : son propre gabarit (login-wrapper, login-brand) */
body.charte .login-wrapper{ background:var(--beige-clair); }
body.charte .login-brand h1{ color:var(--encre); font-size:20px; font-weight:600; }
body.charte .login-brand p{ color:var(--encre-douce); }

/* Pastilles d'application ou de rôle (mentions légales, mes données) : ce sont des étiquettes,
   pas des états. Sans cette règle un « KPI » rouge se lit comme une alerte. */
body.charte .badge-module, body.charte .badge-role{ color:var(--encre-douce) !important; font-weight:500 !important; }