/* ========================================================================= Artworks Digital — Editorial Dark Gallery --------------------------------------------------------------------------- Direction artistique : galerie contemporaine, magazine luxe, institution culturelle digitale. Palette nuit + accent rouge profond #8A1C1C. Ce fichier surcharge static/css/main.css via la cascade CSS — il doit être chargé APRÈS main.css dans . ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,0..100,0..1&family=Inter:wght@300;400;500;600;700&display=swap'); /* ========================================================================= 1. TOKENS — palette + typographie + métriques éditoriales ========================================================================= */ :root { /* — Fonds — */ --ed-ink: #0B0B0B; /* fond principal, noir profond */ --ed-ink-2: #111111; /* fond secondaire (cards, sections alternées) */ --ed-ink-3: #161616; /* surfaces élevées (modals, dropdowns) */ --ed-ink-4: #1d1d1d; /* hover sur surfaces */ --ed-line: #262626; /* divisions discrètes */ --ed-line-soft: rgba(245, 241, 234, .08); --ed-line-strong:rgba(245, 241, 234, .18); /* — Texte — */ --ed-paper: #F5F1EA; /* texte principal, ivoire chaud */ --ed-paper-soft: #E7E2D8; /* hover / contraste subtil */ --ed-mute: #A8A29E; /* texte secondaire, légendes */ --ed-mute-2: #6B6660; /* labels discrets, hint */ /* — Accent éditorial (parcimonie absolue) — */ --ed-accent: #8A1C1C; /* rouge profond — galerie d'art */ --ed-accent-2: #A82424; /* hover accent */ --ed-accent-soft:#3B1414; /* fond d'accent (chips, tags) */ --ed-accent-ink: #F5F1EA; /* texte sur accent */ /* — Statuts éditoriaux (très subtils, jamais saturés) — */ --ed-success: #5E7C5A; --ed-warning: #B08750; --ed-danger: #8A1C1C; /* — Typographie — */ --ed-serif: 'Fraunces', 'EB Garamond', Cambria, 'Times New Roman', Times, serif; --ed-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ed-mono: 'JetBrains Mono', 'Menlo', 'Consolas', monospace; /* — Échelle typographique éditoriale (clamp pour fluide) — */ --ed-display: clamp(3.5rem, 8vw, 7.5rem); /* hero headlines */ --ed-h1: clamp(2.5rem, 5vw, 4.25rem); --ed-h2: clamp(1.875rem, 3.5vw, 2.75rem); --ed-h3: clamp(1.375rem, 2.2vw, 1.75rem); --ed-h4: clamp(1.125rem, 1.6vw, 1.25rem); --ed-body: clamp(.95rem, 1.05vw, 1.0625rem); --ed-small: .8125rem; --ed-eyebrow: .6875rem; /* — Espacements & rythmes éditoriaux — */ --ed-gutter: clamp(20px, 4vw, 56px); --ed-section: clamp(80px, 12vw, 200px); --ed-section-s: clamp(56px, 8vw, 120px); --ed-page-max: 1440px; --ed-text-max: 68ch; /* — Bordures, rayons (anti-rounded, garde le caractère papier) — */ --ed-radius: 2px; --ed-radius-md: 4px; --ed-radius-lg: 6px; --ed-radius-pill:999px; /* — Motion éditoriale (lente, cinématographique, jamais bouncy) — */ --ed-ease: cubic-bezier(.16, 1, .3, 1); /* expo-out */ --ed-ease-in: cubic-bezier(.7, 0, .84, 0); /* expo-in */ --ed-ease-soft: cubic-bezier(.4, 0, .2, 1); --ed-t-fast: 240ms var(--ed-ease); --ed-t: 480ms var(--ed-ease); --ed-t-slow: 900ms var(--ed-ease); --ed-t-cine: 1400ms var(--ed-ease); /* — Override tokens hérités de main.css — */ --bg: var(--ed-ink); --bg-soft: var(--ed-ink-2); --bg-muted: var(--ed-ink-3); --text: var(--ed-paper); --text-muted: var(--ed-mute); --text-light: var(--ed-mute-2); --border: var(--ed-line); --border-strong:var(--ed-line-strong); --primary: var(--ed-paper); --primary-hover:var(--ed-paper-soft); --primary-soft: var(--ed-ink-2); --white: var(--ed-paper); --gray-900: var(--ed-paper); --gray-800: var(--ed-paper-soft); --gray-700: var(--ed-mute); --gray-600: var(--ed-mute); --gray-500: var(--ed-mute-2); --gray-400: var(--ed-mute-2); --gray-300: var(--ed-line-strong); --gray-200: var(--ed-line); --gray-100: var(--ed-ink-3); --gray-50: var(--ed-ink-2); --font-sans: var(--ed-sans); --font-display: var(--ed-serif); --radius-btn: var(--ed-radius); --radius-sm: var(--ed-radius); --radius: var(--ed-radius-md); --radius-lg: var(--ed-radius-lg); --radius-xl: var(--ed-radius-lg); --radius-pill: var(--ed-radius-pill); --shadow-sm: none; --shadow: none; --shadow-lg: 0 24px 60px rgba(0, 0, 0, .6); --shadow-xl: 0 40px 80px rgba(0, 0, 0, .7); --shadow-btn: none; --shadow-btn-hover: none; --gradient-primary: var(--ed-paper); --gradient-deep: var(--ed-paper); --gradient-soft: var(--ed-ink); --gradient-text: var(--ed-paper); --gradient-glow: none; --gradient-gallery: var(--ed-paper); --gradient-gallery-deep: var(--ed-paper); --gradient-gallery-soft: var(--ed-ink); --gradient-gallery-text: var(--ed-paper); --gradient-gallery-glow: none; --section-y: var(--ed-section); --gutter: var(--ed-gutter); } /* ========================================================================= 2. BASE — reset + typographie éditoriale ========================================================================= */ html { background: var(--ed-ink); color-scheme: dark; } body { background: var(--ed-ink); color: var(--ed-paper); font-family: var(--ed-sans); font-weight: 400; font-size: var(--ed-body); line-height: 1.6; letter-spacing: -.005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "ss02", "kern"; } ::selection { background: var(--ed-accent); color: var(--ed-paper); } a { color: var(--ed-paper); text-decoration: none; transition: color var(--ed-t-fast), opacity var(--ed-t-fast); } a:hover { color: var(--ed-paper-soft); opacity: .85; } h1, h2, h3, h4, h5, h6 { font-family: var(--ed-serif); color: var(--ed-paper); font-weight: 400; /* serif éditorial = weight light */ font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0; line-height: 1.05; letter-spacing: -.025em; margin: 0 0 .5em; } h1 { font-size: var(--ed-h1); font-weight: 300; } h2 { font-size: var(--ed-h2); font-weight: 300; } h3 { font-size: var(--ed-h3); } h4 { font-size: var(--ed-h4); } h5 { font-size: 1rem; } p { color: var(--ed-paper); max-width: var(--ed-text-max); } .lead, .hero p, p.lead { font-family: var(--ed-serif); font-weight: 300; font-size: clamp(1.125rem, 1.7vw, 1.375rem); line-height: 1.45; letter-spacing: -.01em; color: var(--ed-paper); max-width: 56ch; } /* Eyebrow (sur-titre éditorial) */ .eyebrow { font-family: var(--ed-sans); font-size: var(--ed-eyebrow); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ed-mute); margin: 0 0 1.5em; display: inline-block; position: relative; } .eyebrow::before { content: ""; display: inline-block; width: 24px; height: 1px; background: var(--ed-mute); vertical-align: middle; margin-right: 12px; transform: translateY(-1px); } .muted, .text-muted, small, .small { color: var(--ed-mute) !important; } .accent { color: var(--ed-paper); font-style: italic; font-family: var(--ed-serif); font-weight: 300; } strong, b { font-weight: 600; color: var(--ed-paper); } em, i { font-style: italic; } hr { border: 0; border-top: 1px solid var(--ed-line); margin: var(--ed-section-s) 0; } /* ========================================================================= 3. LAYOUT — container, sections, grilles éditoriales ========================================================================= */ .container, .container-narrow { width: 100%; margin: 0 auto; padding: 0 var(--ed-gutter); } .container { max-width: var(--ed-page-max); } .container-narrow { max-width: 880px; } section { padding-block: var(--ed-section); background: var(--ed-ink); } section + section { border-top: 1px solid var(--ed-line-soft); } /* ========================================================================= 4. HEADER / NAV — minimal éditorial, type galerie ========================================================================= */ .site-header { background: var(--ed-ink); border-bottom: 1px solid var(--ed-line); position: sticky; top: 0; z-index: 100; backdrop-filter: saturate(1.1); transition: border-color var(--ed-t-fast); } .header-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 22px; gap: 32px; } .site-header .logo, .site-header a.logo { display: flex; align-items: center; gap: 12px; color: var(--ed-paper); font-family: var(--ed-serif); font-size: 1.375rem; font-weight: 300; letter-spacing: -.02em; line-height: 1; text-transform: none; } .site-header .logo-img { height: 32px; width: auto; filter: invert(1) brightness(1.1); opacity: .9; transition: opacity var(--ed-t-fast); } .site-header .logo:hover .logo-img { opacity: 1; } .main-nav .nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 36px; } .main-nav .nav-list > li > a, .main-nav .nav-list > li > details > summary { font-family: var(--ed-sans); font-size: .8125rem; font-weight: 400; letter-spacing: .04em; color: var(--ed-paper); transition: color var(--ed-t-fast); cursor: pointer; position: relative; } .main-nav .nav-list > li > a:hover, .main-nav .nav-list > li > details > summary:hover { color: var(--ed-mute); } .main-nav .nav-list > li > a::after { content: ""; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--ed-paper); transition: width var(--ed-t) var(--ed-ease); } .main-nav .nav-list > li > a:hover::after, .main-nav .nav-list > li > a[aria-current="true"]::after { width: 100%; } /* Dropdowns nav */ .nav-dropdown details summary, .lang-dropdown details summary { list-style: none; -webkit-appearance: none; } .nav-dropdown details summary::-webkit-details-marker, .lang-dropdown details summary::-webkit-details-marker { display: none; } .nav-menu { position: absolute; top: calc(100% + 12px); left: 0; min-width: 320px; background: var(--ed-ink-2); border: 1px solid var(--ed-line); padding: 8px; display: flex; flex-direction: column; gap: 0; box-shadow: var(--shadow-lg); z-index: 200; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity var(--ed-t-fast), transform var(--ed-t-fast); } .nav-dropdown details[open] .nav-menu { opacity: 1; transform: translateY(0); pointer-events: auto; } .nav-menu-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; color: var(--ed-paper); transition: background var(--ed-t-fast); border: 1px solid transparent; } .nav-menu-item:hover { background: var(--ed-ink-3); border-color: var(--ed-line); } .nav-menu-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; opacity: .7; } .nav-menu-body { display: flex; flex-direction: column; gap: 2px; } .nav-menu-body strong { font-family: var(--ed-serif); font-size: 1rem; font-weight: 400; letter-spacing: -.015em; } .nav-menu-body .small, .nav-menu-body .muted { font-size: .75rem; line-height: 1.4; } .cta-caret { font-size: .65em; opacity: .6; margin-left: 4px; } /* CTA boutons dans nav */ .nav-cta-compact, .btn.nav-cta-compact { background: var(--ed-paper) !important; color: var(--ed-ink) !important; padding: 12px 22px; border-radius: var(--ed-radius); font-family: var(--ed-sans); font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; transition: background var(--ed-t-fast), color var(--ed-t-fast); border: 1px solid var(--ed-paper); } .nav-cta-compact:hover, .btn.nav-cta-compact:hover { background: transparent !important; color: var(--ed-paper) !important; } .nav-cta-secondary { color: var(--ed-paper) !important; border-bottom: 1px solid var(--ed-line-strong); padding-bottom: 2px; } .nav-cta-secondary:hover { border-color: var(--ed-paper); } .nav-login-link, .nav-login-link span { color: var(--ed-paper) !important; } .nav-icon-btn { background: transparent; border: 1px solid var(--ed-line); color: var(--ed-paper); width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color var(--ed-t-fast), color var(--ed-t-fast); } .nav-icon-btn:hover { border-color: var(--ed-paper); } .nav-aria-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ed-paper) !important; } .nav-aria-logo { width: 16px; height: 16px; filter: invert(1) brightness(1.1); } /* Lang dropdown */ .lang-dropdown details summary { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--ed-line); border-radius: var(--ed-radius); } .lang-menu { position: absolute; top: calc(100% + 8px); right: 0; background: var(--ed-ink-2); border: 1px solid var(--ed-line); padding: 6px; min-width: 200px; box-shadow: var(--shadow-lg); z-index: 200; } .lang-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--ed-paper); transition: background var(--ed-t-fast); } .lang-option:hover { background: var(--ed-ink-3); } .lang-option.is-active { color: var(--ed-paper); background: var(--ed-ink-4); } .lang-flag svg, .flag-svg { width: 22px; height: 14px; display: block; } .lang-current { display: inline-flex; } .lang-current-code { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; } /* Mobile nav toggle */ .nav-toggle { display: none; } @media (max-width: 980px) { .nav-toggle { display: flex; flex-direction: column; gap: 5px; width: 32px; height: 32px; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; } .nav-toggle span { width: 22px; height: 1px; background: var(--ed-paper); transition: transform var(--ed-t-fast), opacity var(--ed-t-fast); } .main-nav .nav-list { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--ed-ink); border-top: 1px solid var(--ed-line); padding: var(--ed-gutter); max-height: 0; overflow: hidden; transition: max-height var(--ed-t) var(--ed-ease); } .main-nav[data-open="true"] .nav-list { max-height: 80vh; overflow-y: auto; } .main-nav .nav-list > li { padding-block: 14px; border-bottom: 1px solid var(--ed-line-soft); } .main-nav .nav-list > li:last-child { border-bottom: 0; } } /* ========================================================================= 5. FOOTER — minimal éditorial ========================================================================= */ .site-footer { background: var(--ed-ink); border-top: 1px solid var(--ed-line); padding-block: var(--ed-section-s) 36px; margin-top: var(--ed-section); color: var(--ed-paper); } .site-footer .container { display: flex; flex-direction: column; gap: 56px; } .footer-inner { display: grid; grid-template-columns: 1.4fr 2fr; gap: 80px; align-items: start; } .footer-brand .logo-footer .logo-img { height: 36px; filter: invert(1) brightness(1.1); opacity: .9; } .footer-brand p { font-family: var(--ed-serif); font-weight: 300; font-size: 1.1rem; line-height: 1.4; color: var(--ed-paper); margin-top: 18px; max-width: 48ch; } .footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; } .footer-nav h4 { font-family: var(--ed-sans); font-size: var(--ed-eyebrow); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ed-mute-2); margin-bottom: 18px; } .footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .footer-nav li a { color: var(--ed-paper); font-size: .9rem; transition: color var(--ed-t-fast); } .footer-nav li a:hover { color: var(--ed-mute); } .footer-bottom { padding-top: 36px; border-top: 1px solid var(--ed-line); font-size: var(--ed-small); color: var(--ed-mute-2); } @media (max-width: 720px) { .footer-inner { grid-template-columns: 1fr; gap: 40px; } .footer-nav { grid-template-columns: 1fr 1fr; gap: 32px; } } /* ========================================================================= 6. BOUTONS ========================================================================= */ .btn, button.btn, a.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 32px; background: var(--ed-paper); color: var(--ed-ink); border: 1px solid var(--ed-paper); font-family: var(--ed-sans); font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; border-radius: var(--ed-radius); cursor: pointer; transition: background var(--ed-t-fast), color var(--ed-t-fast), border-color var(--ed-t-fast); text-decoration: none; white-space: nowrap; line-height: 1; } .btn:hover { background: transparent; color: var(--ed-paper); } .btn-primary { background: var(--ed-paper) !important; color: var(--ed-ink) !important; border-color: var(--ed-paper) !important; } .btn-primary:hover { background: transparent !important; color: var(--ed-paper) !important; } .btn-ghost, .btn-secondary, .btn-outline { background: transparent !important; color: var(--ed-paper) !important; border: 1px solid var(--ed-line-strong) !important; } .btn-ghost:hover, .btn-secondary:hover, .btn-outline:hover { border-color: var(--ed-paper) !important; background: transparent !important; } .btn-accent, .btn-danger { background: var(--ed-accent) !important; color: var(--ed-paper) !important; border-color: var(--ed-accent) !important; } .btn-accent:hover, .btn-danger:hover { background: var(--ed-accent-2) !important; } .btn-lg { padding: 20px 40px; font-size: .8125rem; letter-spacing: .16em; } .btn-sm { padding: 10px 18px; font-size: .6875rem; } .btn-block { display: flex; width: 100%; } /* ========================================================================= 7. FORMS — inputs éditoriaux ========================================================================= */ .form-stack { display: flex; flex-direction: column; gap: 24px; } .form-field { display: flex; flex-direction: column; gap: 8px; } .form-field label, label { font-family: var(--ed-sans); font-size: var(--ed-eyebrow); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ed-mute); } input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="search"], input[type="number"], input[type="date"], textarea, select { background: transparent; border: 0; border-bottom: 1px solid var(--ed-line-strong); color: var(--ed-paper); font-family: var(--ed-sans); font-size: 1rem; padding: 14px 0; border-radius: 0; transition: border-color var(--ed-t-fast); width: 100%; } input::placeholder, textarea::placeholder { color: var(--ed-mute-2); font-family: var(--ed-sans); } input:focus, textarea:focus, select:focus { outline: 0; border-color: var(--ed-paper); } textarea { min-height: 120px; line-height: 1.6; resize: vertical; } select { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right .25em center; padding-right: 1.5em; } /* Inputs alternatifs : avec encadrement (fichiers de form spéciaux) */ input.input-boxed, textarea.input-boxed { border: 1px solid var(--ed-line); background: var(--ed-ink-2); padding: 14px 16px; } /* ========================================================================= 8. CARDS — éditoriales (papier, divider, mise en page magazine) ========================================================================= */ .card, .kpi-card, .feature-card { background: var(--ed-ink-2); border: 1px solid var(--ed-line); padding: 28px 28px 32px; border-radius: var(--ed-radius); color: var(--ed-paper); transition: border-color var(--ed-t), background var(--ed-t); } .card:hover { border-color: var(--ed-line-strong); } .card h3, .card h4 { color: var(--ed-paper); margin-bottom: 12px; } /* ========================================================================= 9. ŒUVRES & GALERIE — traitement éditorial des images ========================================================================= */ .artwork-card, .artwork, [class*="artwork-tile"] { background: transparent; border: 0; box-shadow: none; overflow: visible; transition: opacity var(--ed-t); } .artwork-card img, .artwork img, .artwork-tile img { width: 100%; height: auto; object-fit: cover; filter: saturate(1.02); transition: transform var(--ed-t-cine) var(--ed-ease), filter var(--ed-t-slow); border-radius: 0; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); } .artwork-card:hover img, .artwork:hover img, .artwork-tile:hover img { transform: scale(1.015); } .artwork-card figcaption, .artwork figcaption, .artwork-caption { padding-top: 18px; font-family: var(--ed-sans); font-size: .8125rem; color: var(--ed-mute); line-height: 1.5; } .artwork-card figcaption strong, .artwork figcaption strong, .artwork-caption strong { display: block; color: var(--ed-paper); font-family: var(--ed-serif); font-size: 1.15rem; font-weight: 400; letter-spacing: -.01em; margin-bottom: 2px; } /* Grille portfolio asymétrique éditoriale */ .gallery-grid, .portfolio-grid, .artwork-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(32px, 4vw, 64px); margin-block: var(--ed-section-s); } @media (min-width: 980px) { .gallery-grid--editorial, .portfolio-grid--editorial { grid-template-columns: 1fr 1.2fr 1fr; } .gallery-grid--editorial > *:nth-child(3n+1) { margin-top: 80px; } .gallery-grid--editorial > *:nth-child(3n+2) { margin-top: 0; } .gallery-grid--editorial > *:nth-child(3n+3) { margin-top: 140px; } } /* ========================================================================= 10. HERO — ouverture cinématographique ========================================================================= */ .hero, .ct-hero { background: var(--ed-ink); padding: var(--ed-section) 0 var(--ed-section-s); border-bottom: 1px solid var(--ed-line-soft); position: relative; overflow: hidden; } .hero h1, .ct-hero h1, section h1 { font-family: var(--ed-serif); font-size: var(--ed-display); font-weight: 300; line-height: .95; letter-spacing: -.04em; max-width: 18ch; margin-block: 0 24px; } .hero .accent, .ct-hero .accent { font-style: italic; font-weight: 300; color: var(--ed-paper); } .hero .lead, .ct-hero .lead { margin-top: 24px; font-family: var(--ed-serif); font-weight: 300; font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.45; color: var(--ed-paper); max-width: 52ch; } /* Blobs cliché contact → on les neutralise */ .ct-hero-blobs, .ct-blob, [class*="blob"], [class*="glow"] { display: none !important; } /* ========================================================================= 11. TOAST / FLASH MESSAGES — éditorial subtil ========================================================================= */ .toast-stack { position: fixed; top: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 12px; max-width: 380px; } .toast { background: var(--ed-ink-3); border: 1px solid var(--ed-line-strong); color: var(--ed-paper); padding: 16px 18px; display: flex; align-items: center; gap: 12px; font-size: .875rem; border-radius: var(--ed-radius); box-shadow: var(--shadow-lg); } .toast-success { border-left: 3px solid var(--ed-success); } .toast-error { border-left: 3px solid var(--ed-accent); } .toast-info { border-left: 3px solid var(--ed-mute); } .toast-close { background: transparent; border: 0; color: var(--ed-mute); font-size: 1.2rem; cursor: pointer; margin-left: auto; } /* ========================================================================= 12. SIGNUP MODAL — overlay sombre éditorial ========================================================================= */ .signup-modal { background: rgba(0, 0, 0, .85); backdrop-filter: blur(8px); } .signup-modal-card { background: var(--ed-ink-2); border: 1px solid var(--ed-line); border-radius: var(--ed-radius); color: var(--ed-paper); } /* ========================================================================= 13. ARIA FAB — discret ========================================================================= */ .aria-fab { background: var(--ed-ink-2); border: 1px solid var(--ed-line-strong); color: var(--ed-paper); border-radius: var(--ed-radius-pill); transition: border-color var(--ed-t-fast), background var(--ed-t-fast); } .aria-fab:hover { border-color: var(--ed-paper); } .aria-fab-logo { filter: invert(1) brightness(1.1); } .aria-fab-status { background: var(--ed-success); } /* ========================================================================= 14. EDITORIAL UTILITIES — composition fragments ========================================================================= */ .ed-divider { height: 1px; background: var(--ed-line); margin-block: var(--ed-section-s); border: 0; } .ed-rule-vertical { width: 1px; background: var(--ed-line); } .ed-num { font-family: var(--ed-mono); font-size: .75rem; color: var(--ed-mute-2); letter-spacing: .1em; } .ed-text-serif { font-family: var(--ed-serif) !important; font-weight: 300; } .ed-text-mono { font-family: var(--ed-mono) !important; letter-spacing: .04em; } .ed-uppercase { text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; } /* Big editorial number marker */ .ed-counter { font-family: var(--ed-serif); font-size: clamp(4rem, 8vw, 7rem); font-weight: 300; line-height: 1; color: var(--ed-paper); letter-spacing: -.04em; } /* Reveal on scroll (handled by main.js) */ [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity var(--ed-t-cine), transform var(--ed-t-cine); } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } /* ========================================================================= 15. OVERRIDES — neutralisation des effets violet/glow du main.css ========================================================================= */ [class*="gradient"], .bg-gradient, body::before, body::after { background: var(--ed-ink) !important; } .theme-gallery, body.theme-gallery { background: var(--ed-ink) !important; color: var(--ed-paper) !important; } /* Force le fond noir partout */ html, body { background: var(--ed-ink) !important; color: var(--ed-paper); } main, section, article, aside, header, footer, nav { background-color: transparent; } /* Toute card / surface héritée qui était blanche → ink-2 */ .curatorial-quote, .curatorial-fieldset, [class*="-card"]:not(.btn):not(.kpi-card-light) { background: var(--ed-ink-2); border: 1px solid var(--ed-line); color: var(--ed-paper); box-shadow: none; } .curatorial-mark { color: var(--ed-mute-2); } .curatorial-quote { border-left: 2px solid var(--ed-accent); } .curatorial-quote p { font-family: var(--ed-serif); color: var(--ed-paper); } /* Tags / badges / pills hérités */ .tag, .badge, .pill, .chip { background: var(--ed-ink-3) !important; color: var(--ed-paper) !important; border: 1px solid var(--ed-line) !important; border-radius: var(--ed-radius-pill) !important; padding: 6px 14px !important; font-size: .75rem !important; letter-spacing: .04em !important; text-transform: uppercase !important; font-weight: 500 !important; } /* Inputs de form hérités à fond clair */ .form-stack input, .form-stack textarea, .form-stack select, .form-field input, .form-field textarea, .form-field select { background: transparent !important; color: var(--ed-paper) !important; } /* SVG icons héritées */ svg { color: inherit; } /* Skip link */ .skip-link { background: var(--ed-paper); color: var(--ed-ink); padding: 12px 18px; border-radius: var(--ed-radius); } /* Scrollbar custom (Webkit) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--ed-ink); } ::-webkit-scrollbar-thumb { background: var(--ed-line-strong); border-radius: 0; } ::-webkit-scrollbar-thumb:hover { background: var(--ed-mute-2); } /* ========================================================================= 16bis. CLASSES UTILITAIRES ÉDITORIALES --------------------------------------------------------------------------- Hero, article, empty-state — composants partagés entre templates. ========================================================================= */ .ed-hero { padding-block: var(--ed-section) var(--ed-section-s); background: var(--ed-ink); border-bottom: 1px solid var(--ed-line-soft); text-align: center; } .ed-hero h1 { font-family: var(--ed-serif); font-size: var(--ed-display); font-weight: 300; line-height: .95; letter-spacing: -.04em; margin: 18px auto 24px; max-width: 16ch; color: var(--ed-paper); } .ed-hero .eyebrow { margin-bottom: 0; } .ed-hero .lead { margin: 0 auto; font-family: var(--ed-serif); font-weight: 300; color: var(--ed-paper); font-size: clamp(1.125rem, 1.7vw, 1.375rem); line-height: 1.45; max-width: 56ch; } .ed-hero .btn { margin-top: 32px; } .ed-article { font-family: var(--ed-sans); font-size: 1.0625rem; line-height: 1.75; color: var(--ed-paper); max-width: var(--ed-text-max); } .ed-article p { color: var(--ed-paper); margin: 0 0 1.4em; } .ed-article h2 { font-family: var(--ed-serif); font-weight: 300; font-size: var(--ed-h2); color: var(--ed-paper); margin: 2em 0 .6em; letter-spacing: -.02em; line-height: 1.05; } .ed-article h3 { font-family: var(--ed-serif); font-weight: 400; font-size: var(--ed-h3); color: var(--ed-paper); margin: 1.6em 0 .5em; } .ed-article ul, .ed-article ol { margin: 0 0 1.4em; padding-left: 1.4em; } .ed-article li { margin-bottom: .5em; color: var(--ed-paper); } .ed-article strong { color: var(--ed-paper); font-weight: 600; } .ed-article a { color: var(--ed-paper); text-decoration: underline; text-decoration-color: var(--ed-mute-2); text-underline-offset: 4px; } .ed-article a:hover { text-decoration-color: var(--ed-paper); } .ed-empty, .empty-state.ed-empty { text-align: center; padding: clamp(60px, 8vw, 120px) 20px; background: var(--ed-ink-2); border: 1px solid var(--ed-line); border-radius: var(--ed-radius); color: var(--ed-mute); } .ed-empty p { color: var(--ed-paper); font-family: var(--ed-serif); font-weight: 300; font-style: italic; font-size: 1.25rem; margin: 0 0 24px; max-width: 40ch; display: inline-block; } /* ========================================================================= 17. AGGRESSIVE DARK ENFORCEMENT --------------------------------------------------------------------------- Le main.css hérité contient ~150 sélecteurs avec background: var(--white) ou couleurs hardcodées. Cette section les neutralise. Aussi : attribute selectors pour rattraper les style="..." inline. ========================================================================= */ /* — Cards / panels génériques — */ .card, .card-light, .card-soft, .feature, .feature-card, .feature-tile, .cta-card, .cta-block, .cta-menu-item, .tier-card, .pricing-card, .price-card, .plan-card, .plan-pricing, .section-alt, .testimonial, .testimonial-card, .hp-blog-card, .hp-blog-item, .hp-comm-card, .hp-blog-row, .blog-card, .blog-article-card, .blog-summary, .featured-promo, .featured-promo-card, .promo-card, .promo-banner, .aria-hero-mockup, .aria-card, .signup-modal-card, .signup-modal-form, .cookie-banner, .timeline-item, .timeline-card, .faq details, .faq-item, .kpi-card-light, .offer-card, .offer-card-highlight, .offer-card-plan, .comm-card, .comm-card-body, .comm-card-head, .checklist-card, .checklist-item, .checklist-pill, .community-empty, .empty-state, .directory-card, .artist-card, .gallery-card, .matching-card, .partnership-card, .partner-card, .template-card, .tpl-card, .editor-card, .editor-panel, .editor-section, .editor-tile, .dash-card, .stat-card, .b-toolbar, .b-card, .feature.aria-highlight, .dashboard-card, .admin-card, .admin-panel, .box, .panel, .surface { background: var(--ed-ink-2) !important; border: 1px solid var(--ed-line) !important; color: var(--ed-paper) !important; box-shadow: none !important; } .card:hover, .feature:hover, .feature-card:hover, .tier-card:hover, .pricing-card:hover, .plan-card:hover, .offer-card:hover, .blog-card:hover, .comm-card:hover, .hp-blog-card:hover, .directory-card:hover, .template-card:hover { border-color: var(--ed-line-strong) !important; } .card h1, .card h2, .card h3, .card h4, .card p, .card li, .feature h1, .feature h2, .feature h3, .feature h4, .feature p, .feature li, .cta-card h2, .cta-card h3, .cta-card p, .tier-card h2, .tier-card h3, .tier-card p, .pricing-card h2, .pricing-card h3, .pricing-card p, .price-card h2, .price-card h3, .plan-card h2, .plan-card h3, .plan-card p, .testimonial h2, .testimonial h3, .testimonial p, .offer-card h2, .offer-card h3, .offer-card p, .offer-card li, .comm-card h2, .comm-card h3, .comm-card p, .hp-blog-card h2, .hp-blog-card h3, .hp-blog-card p, .hp-comm-card h2, .hp-comm-card h3, .hp-comm-card p, .blog-card h2, .blog-card h3, .blog-card p { color: var(--ed-paper) !important; } .card .muted, .feature .muted, .tier-card .muted, .card small, .feature small { color: var(--ed-mute) !important; } /* — Hero sections avec gradients pastels → ink — */ section[style*="linear-gradient(135deg, #faf5ff"], section[style*="linear-gradient(135deg, #eef2ff"], section[style*="linear-gradient(135deg, #eff6ff"], section[style*="linear-gradient(135deg, #e0f2fe"], section[style*="linear-gradient(135deg, #f0fdf4"], section[style*="linear-gradient(135deg, #fef2f2"], section[style*="linear-gradient(180deg, #f5f3ff"], section[style*="linear-gradient(180deg, #faf5ff"], section[style*="background: #fff"], section[style*="background:#fff"], section[style*="background: #f8fafc"], section[style*="background: #fafafa"] { background: var(--ed-ink) !important; color: var(--ed-paper) !important; border-bottom: 1px solid var(--ed-line-soft) !important; } /* — Inline background hardcodés génériques — */ [style*="background: #fff"]:not(.btn):not([class*="btn"]), [style*="background: white"]:not(.btn):not([class*="btn"]), [style*="background-color: #fff"]:not(.btn):not([class*="btn"]), [style*="background-color: white"]:not(.btn):not([class*="btn"]), [style*="background: #f8fafc"], [style*="background: #f1f5f9"], [style*="background: #faf5ff"], [style*="background: #eff6ff"], [style*="background: #eef2ff"], [style*="background: #fffaf5"], [style*="background: #fffbeb"] { background: var(--ed-ink-2) !important; color: var(--ed-paper) !important; } /* — Inline color hardcodés foncés → ivoire — */ [style*="color: #475569"], [style*="color: #64748b"], [style*="color: #1f2937"], [style*="color: #111827"], [style*="color: #1e293b"], [style*="color: #334155"], [style*="color: #312e81"], [style*="color: #6d28d9"], [style*="color: #1d4ed8"], [style*="color:#475569"], [style*="color:#64748b"], [style*="color:#1f2937"], [style*="color: var(--gray-900)"], [style*="color: var(--gray-800)"], [style*="color: var(--gray-700)"], [style*="color: var(--gray-600)"] { color: var(--ed-paper) !important; } /* — Inline borders claires → ed-line — */ [style*="border: 1px solid #e2e8f0"], [style*="border: 1px solid #f1f5f9"], [style*="border: 1px solid #e9d5ff"], [style*="border: 1px solid #cbd5e1"], [style*="border-color: #e2e8f0"], [style*="border-color: #c7d2fe"] { border-color: var(--ed-line) !important; } /* — Article / blog body — */ article, .article, .article-body, .blog-body, .blog-content, .blog-article-body, .blog-summary, .post-body { color: var(--ed-paper) !important; background: transparent !important; } article p, article li, article blockquote, .blog-content p, .blog-content li, .blog-content blockquote { color: var(--ed-paper) !important; } article h1, article h2, article h3, article h4, .blog-content h1, .blog-content h2, .blog-content h3, .blog-content h4 { color: var(--ed-paper) !important; font-family: var(--ed-serif); } article a, p a, li a, .blog-content a, .editor-content a { color: var(--ed-paper) !important; text-decoration: underline; text-decoration-color: var(--ed-mute-2); text-underline-offset: 4px; text-decoration-thickness: 1px; } article a:hover, p a:hover, li a:hover, .blog-content a:hover { text-decoration-color: var(--ed-paper) !important; } /* — Inputs (force) — */ input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="search"], input[type="number"], input[type="date"], textarea, select, .input, .form-input, .form-control { background: transparent !important; color: var(--ed-paper) !important; border-bottom: 1px solid var(--ed-line-strong) !important; } input::placeholder, textarea::placeholder { color: var(--ed-mute-2) !important; } /* — Tables / data-grids — */ table, .table, .admin-table, .data-table, .data-grid { background: transparent !important; color: var(--ed-paper) !important; } table th, .table th, .admin-table th, .data-table th { background: transparent !important; color: var(--ed-mute-2) !important; border-bottom: 1px solid var(--ed-line-strong) !important; } table td, .table td, .admin-table td, .data-table td { border-bottom: 1px solid var(--ed-line) !important; color: var(--ed-paper) !important; } table tbody tr:hover, .table tbody tr:hover, .admin-table tbody tr:hover { background: var(--ed-ink-2) !important; } /* — Badges / pills colorés — */ .badge, .pill, .tag, .chip, .offer-badge, .offer-boutique, .offer-premium, .comm-badge, .promo-badge, .status-badge, .label-pill, .meta-pill, .status-pill, .boutique-status-pill, .b-badge { background: var(--ed-ink-3) !important; color: var(--ed-paper) !important; border: 1px solid var(--ed-line) !important; } .badge-accent, .pill-accent, .tag-accent, .badge-danger, .pill-danger, .offer-premium { background: var(--ed-accent-soft) !important; color: var(--ed-paper) !important; border-color: var(--ed-accent) !important; } .badge-success, .pill-success, .tag-success { background: rgba(94, 124, 90, .12) !important; color: var(--ed-success) !important; border-color: var(--ed-success) !important; } /* — Modal — */ .modal, .modal-content, .modal-card, .signup-modal-card, .signup-modal-form, .signup-modal-grid, .popup, .popover { background: var(--ed-ink-2) !important; color: var(--ed-paper) !important; border-color: var(--ed-line) !important; } .modal-backdrop, .modal-overlay { background: rgba(0,0,0,.85) !important; } /* — Cookie banner / sticky bars — */ .cookie-banner, .cookie-bar, .sticky-cta, .promo-sticky, .promo-sticky-bar { background: var(--ed-ink-2) !important; color: var(--ed-paper) !important; border-color: var(--ed-line) !important; } /* — Editor space (/mon-espace) — */ .editor-shell, .editor-main, .editor-header, .editor-sidebar, .editor-content, .editor-section, .editor-panel, .editor-card, .editor-list, .editor-nav, .editor-tabs, [class^="editor-"], [class*=" editor-"] { background-color: var(--ed-ink) !important; color: var(--ed-paper) !important; } .editor-sidebar, .editor-nav-side { background-color: var(--ed-ink-2) !important; border-right: 1px solid var(--ed-line) !important; } .editor-sidebar a, .editor-nav a, .editor-tabs a { color: var(--ed-paper) !important; } .editor-sidebar a:hover, .editor-nav a:hover { color: var(--ed-paper-soft) !important; } .editor-sidebar a.is-active, .editor-nav a.is-active, .editor-tabs a.is-active { color: var(--ed-paper) !important; background: var(--ed-ink-3) !important; border-left: 2px solid var(--ed-accent) !important; } .editor-header { border-bottom: 1px solid var(--ed-line) !important; } .editor-card, .editor-panel, .editor-tile { background: var(--ed-ink-2) !important; border: 1px solid var(--ed-line) !important; } /* — Aria chat widget — */ .aria-chat, .aria-bubble, .aria-input, .aria-thread, .aria-msg-bot, .aria-msg-user, [class^="aria-msg"], [class^="aria-chat"] { background: var(--ed-ink-2) !important; color: var(--ed-paper) !important; border-color: var(--ed-line) !important; } .aria-msg-bot { background: var(--ed-ink-3) !important; } .aria-msg-user { background: var(--ed-accent-soft) !important; border-color: var(--ed-accent) !important; } /* — Marketplace / cart — */ .product-card, .marketplace-item, .marketplace-product, .market-card, .cart-line, .cart-item, .cart-row, .order-row, .order-card, .order-detail { background: var(--ed-ink-2) !important; color: var(--ed-paper) !important; border: 1px solid var(--ed-line) !important; } /* — Boutique themes — */ .tpl-boutique, .tpl-classic, .tpl-modern, .tpl-magazine, .bq-card, .bq-hero, .bq-product, .bq-section { background: var(--ed-ink-2) !important; color: var(--ed-paper) !important; border-color: var(--ed-line) !important; } /* — Buttons : main.css force color: #fff !important sur .btn-primary et color: var(--purple-800) !important sur .btn-light via ".btn-primary:link/visited/hover" (spécificité 0,2,0). On ré-affirme avec ".btn.btn-X..." (spécificité 0,3,0) pour gagner. — */ .btn.btn-primary, .btn.btn-primary:link, .btn.btn-primary:visited, .btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active, .btn.btn-primary *, a.btn.btn-primary, a.btn.btn-primary:link, a.btn.btn-primary:visited, button.btn.btn-primary { background: var(--ed-paper) !important; color: var(--ed-ink) !important; border: 1px solid var(--ed-paper) !important; box-shadow: none !important; text-shadow: none !important; } .btn.btn-primary *, a.btn.btn-primary *, button.btn.btn-primary * { color: var(--ed-ink) !important; } .btn.btn-primary:hover, a.btn.btn-primary:hover, button.btn.btn-primary:hover { background: transparent !important; color: var(--ed-paper) !important; border-color: var(--ed-paper) !important; } .btn.btn-primary:hover * { color: var(--ed-paper) !important; } .btn.btn-light, .btn.btn-light:link, .btn.btn-light:visited, .btn.btn-light:hover, .btn.btn-light:focus, .btn.btn-light:active, a.btn.btn-light, a.btn.btn-light:link, a.btn.btn-light:visited, button.btn.btn-light { background: var(--ed-paper) !important; color: var(--ed-ink) !important; border: 1px solid var(--ed-paper) !important; } .btn.btn-light:hover, a.btn.btn-light:hover { background: transparent !important; color: var(--ed-paper) !important; } /* — CTA dans nav (.nav-cta-compact) — */ .btn.nav-cta-compact, .btn.nav-cta-compact:link, .btn.nav-cta-compact:visited, a.btn.nav-cta-compact, a.btn.nav-cta-compact:link, a.btn.nav-cta-compact:visited { background: var(--ed-paper) !important; color: var(--ed-ink) !important; border-color: var(--ed-paper) !important; } .btn.nav-cta-compact:hover, a.btn.nav-cta-compact:hover { background: transparent !important; color: var(--ed-paper) !important; } /* — .btn-ghost / .btn-secondary / .btn-outline / .btn-danger — */ .btn.btn-ghost, .btn.btn-secondary, .btn.btn-outline, .btn.btn-ghost:link, .btn.btn-ghost:visited, a.btn.btn-ghost, a.btn.btn-ghost:link, a.btn.btn-ghost:visited, button.btn.btn-ghost { background: transparent !important; color: var(--ed-paper) !important; border: 1px solid var(--ed-line-strong) !important; } .btn.btn-ghost:hover, .btn.btn-secondary:hover, .btn.btn-outline:hover, a.btn.btn-ghost:hover, button.btn.btn-ghost:hover { background: transparent !important; color: var(--ed-paper) !important; border-color: var(--ed-paper) !important; transform: none !important; } .btn.btn-danger, .btn.btn-accent, .btn.btn-danger:link, .btn.btn-danger:visited, a.btn.btn-danger, a.btn.btn-danger:link, a.btn.btn-danger:visited { background: var(--ed-accent) !important; color: var(--ed-paper) !important; border: 1px solid var(--ed-accent) !important; } .btn.btn-danger:hover, .btn.btn-accent:hover, a.btn.btn-danger:hover { background: var(--ed-accent-2) !important; } /* — Neutralise le shine effect (::before) hérité main.css ligne 499 — */ .btn::before { display: none !important; } .btn-soft, .btn-subtle { background: var(--ed-ink-3) !important; color: var(--ed-paper) !important; border-color: var(--ed-line) !important; } .btn-link { background: transparent !important; color: var(--ed-paper) !important; border-color: transparent !important; text-decoration: underline !important; text-underline-offset: 4px !important; } /* — Gradient text → solid — */ .gradient-text, [class*="gradient-text"] { background: transparent !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: var(--ed-paper) !important; color: var(--ed-paper) !important; } /* — Liens couleurs primaire héritées — */ a[style*="color: #2563eb"], a[style*="color: #1d4ed8"], a[style*="color: #6d28d9"], a[style*="color: #7c3aed"], a[style*="color: #312e81"], a[style*="color: #c2410c"] { color: var(--ed-paper) !important; } /* — Body theme-gallery (orange override) — */ body.theme-gallery, body.theme-gallery section, body.theme-gallery .hero { background: var(--ed-ink) !important; color: var(--ed-paper) !important; } /* — Hr / dividers — */ hr, .divider, .separator, .rule { border: 0 !important; border-top: 1px solid var(--ed-line) !important; background: transparent !important; margin-block: var(--ed-section-s); } /* — Skip-link — */ .skip-link { background: var(--ed-paper) !important; color: var(--ed-ink) !important; } /* — Liens menus secondaires (.cta-menu-item) — */ .cta-menu-item, .menu-item, .dropdown-item { background: var(--ed-ink-2) !important; color: var(--ed-paper) !important; border-color: var(--ed-line) !important; } .cta-menu-item:hover, .menu-item:hover { background: var(--ed-ink-3) !important; border-color: var(--ed-line-strong) !important; } /* — Pricing / tarification — */ .price, .pricing, .price-cents, .price-currency, .offer-price { color: var(--ed-paper) !important; font-family: var(--ed-serif) !important; font-weight: 300 !important; } /* — Footer brand : forcer transparent — */ .footer-brand, .footer-section, .footer-col { background: transparent !important; color: var(--ed-paper) !important; } /* — Titles & headings hardcodés — */ h1, h2, h3, h4, h5, h6 { color: var(--ed-paper); } h1[style*="color"], h2[style*="color"], h3[style*="color"] { color: var(--ed-paper) !important; } /* — Containers avec fond explicite — */ .container[style*="background"], .container-narrow[style*="background"] { background: transparent !important; } /* — Promotion / promo-sticky widget — */ .promo-sticky-content, .promo-sticky-card, .promo-sticky-text, .promo-sticky-cta { background: var(--ed-ink-2) !important; color: var(--ed-paper) !important; } /* — Listes de plans / pricing tiers — */ .plan-pricing, .plan-card .plan-price, .plan-features, .plan-features li, .plan-cta { color: var(--ed-paper) !important; } /* — Themes / showcase template cards — */ .template-thumb, .tpl-thumb, .template-preview { background: var(--ed-ink-2) !important; border: 1px solid var(--ed-line) !important; } /* — Status colors discrètes — */ .status-success, .status-paid, .status-active { color: var(--ed-success) !important; } .status-pending, .status-waiting { color: var(--ed-warning) !important; } .status-failed, .status-error, .status-cancelled { color: var(--ed-accent) !important; } /* — Tooltips hérités — */ .tooltip, [role="tooltip"] { background: var(--ed-ink-3) !important; color: var(--ed-paper) !important; border: 1px solid var(--ed-line) !important; } /* ========================================================================= 18. PRINT — basic dark→light pour impression ========================================================================= */ @media print { html, body, * { background: white !important; color: black !important; } .site-header, .site-footer, .aria-fab, .toast-stack { display: none !important; } }