/* ═══════════════════════════════════════════════════════════════════════════ CLIENT VAULT — CSS ISOLATION FOUNDATION (v11.5.0) ═══════════════════════════════════════════════════════════════════════════ Objectif : rendre Client Vault (admin + front) ENTIÈREMENT indépendant des styles WordPress core, des thèmes tiers et de tout autre plugin. Architecture : 1. Cascade Layers internes (cv-reset < cv-tokens < cv-base < cv-components < cv-utilities < cv-overrides) pour organiser notre propre cascade. 2. Reset via `all: revert-layer` + resets explicites sur les éléments les plus ciblés par les thèmes (h1-h6, button, input, a, table, form…). 3. Selectors doublés `.cv-app.cv-app` pour booster la spécificité à 0,2,0 et battre la majorité des règles de thèmes (qui sont ≤ 0,1,1). 4. Tokens `--cv-*` définis sur `.cv-app` → scopés, ne polluent pas :root. 5. `isolation: isolate` pour créer un nouveau contexte d'empilement (z-index internes indépendants du site). 6. Ce fichier est chargé EN PREMIER (avant admin.css / frontend.css / cv-frontend-parcours.css) et doit rester le single source of truth pour les tokens et le reset. IMPORTANT : ne JAMAIS définir de règles ici qui utilisent `!important` sauf pour les 3 resets d'inheritance critiques marqués ci-dessous. Toutes les autres règles battent le thème par spécificité seule. ═══════════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────────── ORDRE DES LAYERS CV Les layers plus tardifs gagnent (override) sur les précédents à spécificité équivalente DANS le scope CV. Cette hiérarchie organise uniquement notre cascade interne ; elle n'influence pas le thème. ───────────────────────────────────────────────────────────────────────── */ @layer cv-reset, cv-tokens, cv-base, cv-components, cv-utilities, cv-overrides; /* ═══════════════════════════════════════════════════════════════════════════ LAYER 1 — RESET : neutraliser l'héritage du thème et de WordPress core ═══════════════════════════════════════════════════════════════════════════ */ @layer cv-reset { /* La bulle d'isolation : tout Client Vault vit à l'intérieur. .cv-app.cv-app double la spécificité (0,2,0) — bat quasiment tout thème classique qui stylera via `.entry-content .thing` (0,1,1). */ .cv-app.cv-app { /* revert-layer = "tout ce qui vient d'un layer précédent ou unlayered se réinitialise". En dehors d'un layer explicite, c'est équivalent à `revert` = retour aux styles UA. → toute règle du thème touchant `.cv-app` est neutralisée. */ all: revert-layer; /* Nouveau contexte d'empilement : nos z-index internes sont complètement indépendants du site hôte. */ isolation: isolate; /* Conteneur bloc par défaut, jamais inline. */ display: block; box-sizing: border-box; /* Reset des propriétés de typographie héritées (le thème fait souvent font: ; sur , line-height sur :root). */ font-family: var(--cv-font-sans); font-size: var(--cv-font-size-base); line-height: var(--cv-line-height-base); font-weight: var(--cv-font-weight-normal); font-style: normal; letter-spacing: normal; text-transform: none; text-align: start; text-decoration: none; text-shadow: none; /* Couleurs & fond : partir d'une base propre. */ color: var(--cv-text); background-color: transparent; /* Remettre un cursor par défaut (certains thèmes forcent). */ cursor: auto; /* Tab-size raisonnable pour le code. */ tab-size: 4; /* Anti-aliasing cohérent. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Reset de tous les descendants : on revient aux styles UA puis chaque composant applique ses propres règles. */ .cv-app.cv-app *, .cv-app.cv-app *::before, .cv-app.cv-app *::after { box-sizing: border-box; } /* ─── Reset explicite sur les éléments les plus ciblés par les thèmes ─── */ /* Typographie de titres — beaucoup de thèmes forcent font-size/weight/color via `.entry-content h1-h6`, on neutralise. */ .cv-app.cv-app :where(h1, h2, h3, h4, h5, h6) { all: revert-layer; margin: 0; padding: 0; font-family: inherit; font-weight: var(--cv-font-weight-semibold); line-height: var(--cv-line-height-tight); color: inherit; text-transform: none; letter-spacing: normal; border: 0; background: transparent; } /* Paragraphes et blocs texte. */ .cv-app.cv-app :where(p, blockquote, address, pre, figure) { margin: 0; padding: 0; font-family: inherit; color: inherit; background: transparent; border: 0; } /* Listes — les thèmes ajoutent souvent du padding-left énorme. */ .cv-app.cv-app :where(ul, ol, dl) { margin: 0; padding: 0; list-style: none; } .cv-app.cv-app :where(li, dt, dd) { margin: 0; padding: 0; } /* Liens — les thèmes décorent souvent tous les avec underline/couleurs. */ .cv-app.cv-app a { color: var(--cv-link); background-color: transparent; text-decoration: none; cursor: pointer; border: 0; outline: 0; box-shadow: none; font-weight: inherit; } .cv-app.cv-app a:hover, .cv-app.cv-app a:focus { color: var(--cv-link-hover); text-decoration: none; } .cv-app.cv-app a:focus-visible { outline: 2px solid var(--cv-border-focus); outline-offset: 2px; } /* Boutons — les thèmes sont particulièrement intrusifs ici (WP admin, Gutenberg, Bootstrap, Tailwind injecté par d'autres plugins). */ .cv-app.cv-app :where(button, input[type="button"], input[type="submit"], input[type="reset"]) { all: revert-layer; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 0; padding: 0; margin: 0; cursor: pointer; text-transform: none; text-decoration: none; box-shadow: none; text-shadow: none; appearance: none; -webkit-appearance: none; letter-spacing: normal; } .cv-app.cv-app :where(button, input[type="button"], input[type="submit"], input[type="reset"]):hover, .cv-app.cv-app :where(button, input[type="button"], input[type="submit"], input[type="reset"]):focus, .cv-app.cv-app :where(button, input[type="button"], input[type="submit"], input[type="reset"]):active { background: transparent; color: inherit; box-shadow: none; text-shadow: none; border-color: transparent; outline: 0; transform: none; } .cv-app.cv-app button::-moz-focus-inner { border: 0; padding: 0; } /* Champs de formulaire — WP admin force beaucoup de styles. */ .cv-app.cv-app :where(input, select, textarea) { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; background-color: var(--cv-card); border: 1px solid var(--cv-border); border-radius: var(--cv-radius-sm); padding: 8px 12px; margin: 0; box-shadow: none; text-shadow: none; appearance: none; -webkit-appearance: none; letter-spacing: normal; text-transform: none; } .cv-app.cv-app :where(input[type="checkbox"], input[type="radio"]) { appearance: auto; -webkit-appearance: auto; padding: 0; border: 0; background: transparent; } .cv-app.cv-app :where(input, select, textarea):focus { outline: 0; border-color: var(--cv-primary); box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12); } /* Tables — WP admin a un style de table très marqué. */ .cv-app.cv-app :where(table) { border-collapse: collapse; border-spacing: 0; width: 100%; margin: 0; background: transparent; } .cv-app.cv-app :where(th, td) { padding: 8px 12px; text-align: start; vertical-align: middle; font-weight: inherit; color: inherit; background: transparent; border: 0; } /* Formulaires et fieldsets. */ .cv-app.cv-app :where(form, fieldset, legend, label) { margin: 0; padding: 0; border: 0; background: transparent; font: inherit; color: inherit; } /* Images et média — éviter le max-width intrusif des thèmes. */ .cv-app.cv-app :where(img, svg, video, canvas, audio, iframe, embed, object) { display: block; max-width: 100%; height: auto; vertical-align: middle; } /* HR, code, kbd. */ .cv-app.cv-app :where(hr) { border: 0; border-top: 1px solid var(--cv-border); margin: 0; } .cv-app.cv-app :where(code, kbd, samp, pre) { font-family: var(--cv-font-mono); font-size: var(--cv-font-size-sm); } /* Éléments sémantiques HTML5. */ .cv-app.cv-app :where(article, aside, details, figcaption, figure, footer, header, main, nav, section, summary) { display: block; } /* WP admin notices — masquer par défaut dans la bulle CV. Les notices CV natives utilisent `.cv-settings-inline-notice`. */ .cv-app.cv-app .notice:not(.cv-settings-inline-notice), .cv-app.cv-app .notice-success:not(.cv-settings-inline-notice), .cv-app.cv-app .notice-error:not(.cv-settings-inline-notice), .cv-app.cv-app .notice-warning:not(.cv-settings-inline-notice), .cv-app.cv-app .notice-info:not(.cv-settings-inline-notice), .cv-app.cv-app .update-nag { display: none !important; /* !important critique : WP les injecte dynamiquement */ } /* Thèmes Gutenberg-ready : bloquer les injections d'espacement globales. */ .cv-app.cv-app .wp-block, .cv-app.cv-app .wp-block-group, .cv-app.cv-app .alignfull, .cv-app.cv-app .alignwide { max-width: none; margin-left: 0; margin-right: 0; } } /* ═══════════════════════════════════════════════════════════════════════════ LAYER 2 — TOKENS : variables de design centralisées ═══════════════════════════════════════════════════════════════════════════ */ @layer cv-tokens { /* Tokens définis sur .cv-app (scoped, pas de pollution :root). Hérités par toute la sous-arborescence via `inherit`. */ .cv-app { /* ─── COULEURS PRIMAIRES ─── */ --cv-primary: #1e3a5f; --cv-primary-light: #2a5298; --cv-primary-dark: #132742; --cv-primary-subtle: #eef3f9; /* ─── COULEURS ACCENT ─── */ --cv-accent: #e8913a; --cv-accent-light: #f5a623; --cv-accent-strong: #c97520; /* ─── COULEURS SÉMANTIQUES ─── */ --cv-success: #27ae60; --cv-success-bg: #d4edda; --cv-danger: #e74c3c; --cv-danger-dark: #991b1b; --cv-danger-bg: #dc2626; --cv-warning: #92400e; --cv-warning-bg: #fef3c7; --cv-info: #1e40af; --cv-info-bg: #dbeafe; /* ─── NEUTRES / FONDS ─── */ --cv-bg: #f0f2f5; --cv-bg-alt: #f8fafc; --cv-bg-hover: #f8f9fb; --cv-bg-subtle: #fafbfc; --cv-card: #ffffff; --cv-surface: #ffffff; --cv-surface-2: #f7f8fa; /* ─── BORDURES ─── */ --cv-border: #e1e5eb; --cv-border-light: #d0d5dd; --cv-border-strong: #9ca3af; --cv-border-focus: #e8ecf0; /* ─── TEXTE ─── */ --cv-text: #2c3e50; --cv-text-dark: #1a2332; --cv-text-secondary: #555; --cv-text-tertiary: #666; --cv-text-muted: #5a6c7d; --cv-text-hint: #7b8794; --cv-text-placeholder: #9aa5b1; /* ─── LIENS & BOUTONS ─── */ --cv-link: #1e3a5f; --cv-link-hover: #2a5298; --cv-button-text: #ffffff; /* ─── TAGS ─── */ --cv-tag-blue: #1e40af; --cv-tag-blue-bg: #e8f0fe; --cv-tag-green: #155724; --cv-tag-green-bg: #d4edda; --cv-tag-orange: #856404; --cv-tag-orange-bg: #fff3cd; --cv-tag-red: #721c24; --cv-tag-red-bg: #f8d7da; --cv-tag-purple: #6b21a8; --cv-tag-purple-bg: #f3e8ff; /* ─── API (endpoint groups) ─── */ --cv-api-group-color: var(--cv-primary); /* ─── TYPOGRAPHIE ─── */ --cv-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --cv-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --cv-font-size-xs: 11px; --cv-font-size-sm: 12px; --cv-font-size-base: 14px; --cv-font-size-md: 15px; --cv-font-size-lg: 16px; --cv-font-size-xl: 18px; --cv-font-size-2xl: 22px; --cv-font-size-3xl: 28px; --cv-font-size-4xl: 36px; --cv-font-weight-normal: 400; --cv-font-weight-medium: 500; --cv-font-weight-semibold: 600; --cv-font-weight-bold: 700; --cv-font-weight-black: 800; --cv-line-height-tight: 1.25; --cv-line-height-base: 1.5; --cv-line-height-relaxed: 1.7; /* ─── ESPACEMENTS (échelle 4px) ─── */ --cv-space-0: 0; --cv-space-1: 2px; --cv-space-2: 4px; --cv-space-3: 6px; --cv-space-4: 8px; --cv-space-5: 12px; --cv-space-6: 16px; --cv-space-7: 20px; --cv-space-8: 24px; --cv-space-9: 32px; --cv-space-10: 40px; --cv-space-11: 48px; --cv-space-12: 64px; /* ─── RAYONS DE BORDURE ─── */ --cv-radius-xs: 3px; --cv-radius-sm: 7px; --cv-radius: 10px; --cv-radius-lg: 14px; --cv-radius-xl: 20px; --cv-radius-pill: 999px; --cv-radius-circle: 50%; /* ─── OMBRES ─── */ --cv-shadow-xs: 0 1px 2px rgba(0,0,0,0.04); --cv-shadow-sm: 0 1px 4px rgba(0,0,0,0.06); --cv-shadow: 0 2px 12px rgba(0,0,0,0.06); --cv-shadow-md: 0 4px 16px rgba(0,0,0,0.08); --cv-shadow-lg: 0 8px 28px rgba(0,0,0,0.10); --cv-shadow-xl: 0 16px 48px rgba(0,0,0,0.14); --cv-shadow-focus: 0 0 0 3px rgba(30, 58, 95, 0.15); /* ─── Z-INDEX (tous scopés à .cv-app grâce à isolation: isolate) ─── */ --cv-z-base: 1; --cv-z-dropdown: 100; --cv-z-sticky: 500; --cv-z-modal: 1000; --cv-z-overlay: 9999; --cv-z-toast: 10000; --cv-z-tooltip: 10500; /* ─── TRANSITIONS ─── */ --cv-transition-fast: 120ms ease; --cv-transition-base: 200ms ease; --cv-transition-slow: 320ms ease; /* ─── TAILLES DE CONTAINER ─── */ --cv-container-sm: 640px; --cv-container-md: 768px; --cv-container-lg: 1024px; --cv-container-xl: 1280px; } } /* ═══════════════════════════════════════════════════════════════════════════ LAYER 3 — BASE : styles de base hérités dans la bulle CV Ce layer est UNLAYERED du point de vue externe (les règles de thème non-layérées peuvent les battre à spécificité ≥), mais nos règles sont à 0,2,0 via `.cv-app.cv-app` donc elles résistent à la majorité. ═══════════════════════════════════════════════════════════════════════════ */ @layer cv-base { /* Scroll container styles. */ .cv-app.cv-app ::selection { background-color: var(--cv-primary); color: var(--cv-button-text); } /* Scrollbar stylée (WebKit). */ .cv-app.cv-app ::-webkit-scrollbar { width: 10px; height: 10px; } .cv-app.cv-app ::-webkit-scrollbar-track { background: var(--cv-bg-alt); } .cv-app.cv-app ::-webkit-scrollbar-thumb { background: var(--cv-border-light); border-radius: var(--cv-radius-pill); } .cv-app.cv-app ::-webkit-scrollbar-thumb:hover { background: var(--cv-border-strong); } /* Placeholder. */ .cv-app.cv-app ::placeholder { color: var(--cv-text-placeholder); opacity: 1; } /* Focus ring par défaut (accessibilité). */ .cv-app.cv-app :focus-visible { outline: 2px solid var(--cv-primary); outline-offset: 2px; } } /* ═══════════════════════════════════════════════════════════════════════════ LAYER 6 — OVERRIDES : corrections résiduelles vs WordPress admin Ces règles utilisent `!important` de manière ciblée pour neutraliser les styles WP qui sont injectés via `#wpbody-content .wrap` etc. ═══════════════════════════════════════════════════════════════════════════ */ @layer cv-overrides { /* WP admin force `max-width: 100%` et `padding: 20px 10px 0 0` sur `.wrap` — on neutralise pour que notre layout .cv-app prenne le lead. */ .cv-app.cv-app.cv-admin-page { max-width: 100% !important; margin: 0; padding: 20px 20px 40px; } /* WP admin Form-table override dans le scope CV. */ .cv-app.cv-app .form-table { clear: none; } .cv-app.cv-app .form-table th, .cv-app.cv-app .form-table td { padding: 12px; } /* Dashicons : WP les style globalement, s'assurer qu'ils héritent bien de la couleur courante dans la bulle CV. */ .cv-app.cv-app .dashicons, .cv-app.cv-app .dashicons-before::before { color: inherit; } } /* ═══════════════════════════════════════════════════════════════════════════ FIN — cv-isolation.css est le socle. Les fichiers suivants s'appuient dessus : admin.css, frontend.css, cv-frontend-parcours.css, cv-utilities.css. ═══════════════════════════════════════════════════════════════════════════ */