@charset "UTF-8"; /* ========================================================================== saa-backend.css — socle de l'espace client / coach (/mon-compte/). Plugin selfie-app-api. Lot W0. Portee : enfile UNIQUEMENT sous is_account_page() (includes/web-assets.php). Le des pages Mon compte porte la classe .mp-app ; la zone applicative porte .mp-screen (ou les conteneurs WooCommerce natifs). REGLES NON NEGOCIABLES - Aucune couleur, taille, rayon ou duree ne se declare hors du bloc :root. - Aucune ressource distante : polices auto-hebergees, chemins RELATIFS. ⛔ Aucun service de polices distant (RGPD projet : local + rien d'autre). - Aucun caractere-pictogramme : les sous-ensembles Poppins (~220 glyphes) n'en contiennent pas. Les icones sont des SVG en ligne (partials/icon.php). - Le focus n'est jamais supprime. Sommaire 1. Polices auto-hebergees (@font-face) 2. Tokens :root 3. Reprise de l'existant (h3.product-name) 4. Portee applicative et typographie 5. Focus 6. Liens (piege du contraste sur creme) 7. Boutons 8. Cartes 9. Badges 10. Champs de formulaire 11. Tableaux (+ responsive < 768 px) 12. Pagination 13. Barre de filtres et puces 14. Etats vides 15. Squelettes de chargement 16. En-tetes de section et cartes de synthese 17. Navigation laterale (sidebar 264 px / rail 64 px / tiroir mobile) 18. Semantique de ligne contractuelle 19. Utilitaires 20. prefers-reduced-motion ========================================================================== */ /* ========================================================================== 1. Polices auto-hebergees Chemins RELATIFS a cette feuille (assets/css/ -> assets/fonts/) : ils suivent le domaine servant le plugin, sans jamais coder d'URL en dur. ========================================================================== */ @font-face { font-family: 'Poppins'; src: url('../fonts/poppins-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/poppins-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/poppins-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* ========================================================================== 2. Tokens — transposition EXACTE de theme-beyond3/style.css (:root, l.20-46) + tokens propres au back-office. ========================================================================== */ :root { /* — Marque ------------------------------------------------------------- */ --mp-accent: #e84e1b; /* SEULE couleur d'action. Fonds/bordures. */ --mp-accent-hover: #d14314; /* Survol, ET tout TEXTE orange (cf. §6). */ --mp-gold: #f39200; /* Decoratif : eyebrow, grand chiffre. */ --mp-teal: #02c39a; /* Validation, reussite. Decoratif. */ --mp-teal-ink: #01755e; /* Le teal quand il doit porter du TEXTE. */ /* — Encre et neutres ---------------------------------------------------- */ --mp-ink: #23262d; /* titres, surfaces sombres */ --mp-ink-2: #2c3038; /* carte posee sur l'encre */ --mp-body: #494d56; /* texte courant */ --mp-muted: #6e7076; /* secondaire (subhead, aide) — 4,95:1 */ --mp-faint: #9a9da4; /* DECORATIF UNIQUEMENT — 2,72:1 */ --mp-paper: #ffffff; --mp-cream: #faf6f2; /* fond alterne, en-tete de table, cartes */ --mp-line: #e9e5e0; /* filet 1 px clair — JAMAIS une bordure de champ */ --mp-line-dark: #3a3e47; /* filet 1 px sur encre */ --mp-on-ink: #ffffff; --mp-on-ink-body: #b9bcc4; /* 7,97:1 sur --mp-ink */ --mp-grad-warm: linear-gradient(96deg, #f39200 0%, #e84e1b 78%); /* — Voiles alpha -------------------------------------------------------- */ --mp-accent-wash: rgba(232, 78, 27, .09); --mp-accent-chip: rgba(232, 78, 27, .08); --mp-focus-halo: rgba(232, 78, 27, .14); --mp-selection: rgba(232, 78, 27, .16); --mp-teal-wash: rgba(2, 195, 154, .11); --mp-gold-wash: rgba(243, 146, 0, .12); --mp-scrim: rgba(35, 38, 45, .55); /* — Typographie --------------------------------------------------------- */ --mp-font-title: Poppins, 'Segoe UI', sans-serif; --mp-font-body: Inter, 'Segoe UI', sans-serif; /* Echelle back-office : 6 paliers, ratio ~1,2. PAS le clamp du site : une console de gestion ne doit pas grossir avec la fenetre. */ --mp-fs-xs: 0.75rem; /* 12px — titre de groupe sidebar */ --mp-fs-sm: 0.8125rem; /* 13px — corps de tableau dense, aide */ --mp-fs-base: 0.875rem; /* 14px — defaut back-office */ --mp-fs-md: 1rem; /* 16px — corps des ecrans client final */ --mp-fs-lg: 1.25rem; /* 20px — titre de section */ --mp-fs-xl: 1.75rem; /* 28px — chiffre de carte de synthese */ --mp-lh-tight: 1.2; --mp-lh-body: 1.5; --mp-lh-table: 1.4; --mp-tracking-title: -.01em; --mp-tracking-micro: .07em; /* — Rayons -------------------------------------------------------------- */ --mp-r-field: 12px; --mp-r-card: 18px; --mp-r-bento: 28px; --mp-r-pill: 980px; --mp-r-sm: 8px; /* — Profondeur : le site est PLAT. Bordure 1 px, pas d'ombre. ----------- */ --mp-shadow-1: 0 1px 2px rgba(35, 38, 45, .06); --mp-shadow-2: 0 14px 40px rgba(35, 38, 45, .12); --mp-shadow-modal: 0 30px 80px rgba(35, 38, 45, .30); /* — Espacement, base 8 -------------------------------------------------- */ --mp-sp-1: 4px; --mp-sp-2: 8px; --mp-sp-3: 12px; --mp-sp-4: 16px; --mp-sp-5: 24px; --mp-sp-6: 32px; --mp-sp-7: 48px; --mp-sp-8: 64px; --mp-gutter: 24px; --mp-section: 40px; /* — Mouvement : UNE seule courbe pour tout ------------------------------ */ --mp-ease: cubic-bezier(.25, .7, .2, 1); --mp-d-fast: 120ms; --mp-d-base: 200ms; --mp-d-slow: 300ms; /* — Tokens propres au BACK-OFFICE --------------------------------------- */ --mp-sidebar-w: 264px; /* deployee — absorbe « Comptes-rendus » */ --mp-sidebar-w-rail: 64px; /* repliee (rail d'icones) */ --mp-nav-item-h: 44px; --mp-icon: 20px; --mp-control-h: 44px; /* champs, boutons, selecteurs : IDENTIQUES */ --mp-touch-min: 24px; /* [NORME] WCAG 2.5.8 */ --mp-row-dense: 36px; --mp-row-comfortable: 48px; --mp-row-spacious: 60px; --mp-cell-px: 16px; --mp-cell-py: 8px; --mp-form-max: 640px; --mp-focus-ring: 3px; --mp-focus-offset: 2px; --mp-skeleton-delay: 300ms; --mp-skeleton-min: 500ms; /* — Semantique de ligne A CONSERVER (contrainte projet n°5) ------------- */ --mp-row-stock-ok: #e8f5e9; /* stock positif */ --mp-row-never-seen: #fdecea; /* jamais connecte (prioritaire) */ --mp-row-expired: #ede7f6; /* licence expiree */ --mp-row-highlight: #fff9c4; /* surbrillance saa_hl */ --mp-delegated: #7a1fa2; /* connexion deleguee — 8,25:1 sur blanc */ } /* ========================================================================== 3. Reprise de l'existant — ⛔ contrainte projet n°2. Provenance : alex-fonctions-perso/includes/lmfwc-myaccount.php:78-81 (bloc