/* ========================================================================== RELICKEEPER® — CHARTE GRAPHIQUE DE L'ÉCOSYSTÈME · v1.0 -------------------------------------------------------------------------- Éditeur : RELICKEEPER® SAS — Marseille · contact@relickeeper.fr Périmètre : relickeeper.art · relickeeper.shop · relickeeper.fr · yty.yt Date : 2026-09-10 -------------------------------------------------------------------------- SOURCE DE VÉRITÉ UNIQUE. On l'importe, on ne la duplique pas. Aucun site de l'écosystème ne redéfinit une couleur, une graisse ou un rayon en dur : tout passe par les variables ci-dessous. Une valeur qui manque se demande à la Direction ; elle ne s'invente pas localement. INTÉGRATION (3 lignes, dans cet ordre, avant toute autre feuille) : ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap"); /* -------------------------------------------------------------------------- 1. MODE JOUR — socle par défaut Fond crème papier, encre brun-noir, or profond. C'est le mode « atelier » : catalogue imprimable, corporate, facture, certificat. -------------------------------------------------------------------------- */ :root { --v-bg: #FAF7F1; --v-bg-grad: radial-gradient(1100px 680px at 76% -10%, #FFFFFF 0%, #F0ECE3 64%); --v-header: rgba(250, 247, 241, .88); --v-scrim: rgba(32, 24, 18, .46); --v-panel: #FFFFFF; --v-panel-2: #EDE7DB; --v-ink: #1A1614; --v-ink-2: #3A342E; --v-dim: #4A4339; --v-mute: #5D5548; --v-mute-2: #5B5346; --v-faint: #635B4E; --v-faint-2: #6B6355; --v-ghost: #8C8271; --v-line: rgba(26, 22, 20, .13); --v-line-soft: rgba(26, 22, 20, .09); --v-line-strong: rgba(26, 22, 20, .2); --v-chip-bg: rgba(26, 22, 20, .04); --v-gold: #7A5D10; --v-gold-bg: rgba(122, 93, 16, .1); --v-gold-border: rgba(122, 93, 16, .42); --v-cyan: #00697A; --v-cyan-bg: rgba(0, 105, 122, .1); --v-cyan-border: rgba(0, 105, 122, .42); --v-mag: #B00038; --v-mag-bg: rgba(176, 0, 56, .09); --v-mag-border: rgba(176, 0, 56, .4); --v-on-accent: #FAF7F1; color-scheme: light; } /* -------------------------------------------------------------------------- 2. MODE NUIT — mode de présentation des œuvres Noir de salle, encre blanche, or #D4AF37. C'est le mode « cimaise » : galerie, fiche œuvre, boutique. Défaut recommandé sur .art et .shop. -------------------------------------------------------------------------- */ [data-theme="dark"] { --v-bg: #050505; --v-bg-grad: radial-gradient(1100px 680px at 76% -10%, #111111 0%, #050505 62%); --v-header: rgba(5, 5, 5, .86); --v-scrim: rgba(5, 5, 5, .8); --v-panel: #0A0A0C; --v-panel-2: #141416; --v-ink: #FFFFFF; --v-ink-2: #CFC8BC; --v-dim: #BFB8AC; --v-mute: #A29A8E; --v-mute-2: #ADA59A; --v-faint: #9C948A; --v-faint-2: #948C82; --v-ghost: #6E675E; --v-line: rgba(244, 241, 234, .1); --v-line-soft: rgba(244, 241, 234, .07); --v-line-strong: rgba(244, 241, 234, .15); --v-chip-bg: rgba(244, 241, 234, .04); --v-gold: #D4AF37; --v-gold-bg: rgba(212, 175, 55, .13); --v-gold-border: rgba(212, 175, 55, .5); --v-cyan: #7FE5F0; --v-cyan-bg: rgba(127, 229, 240, .12); --v-cyan-border: rgba(127, 229, 240, .46); --v-mag: #E5C687; --v-mag-bg: rgba(229, 198, 135, .14); --v-mag-border: rgba(229, 198, 135, .52); --v-on-accent: #000000; color-scheme: dark; } /* Sans attribut data-theme, on suit la préférence système. data-theme="light" force le jour et gagne contre le système. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --v-bg: #050505; --v-bg-grad: radial-gradient(1100px 680px at 76% -10%, #111111 0%, #050505 62%); --v-header: rgba(5, 5, 5, .86); --v-scrim: rgba(5, 5, 5, .8); --v-panel: #0A0A0C; --v-panel-2: #141416; --v-ink: #FFFFFF; --v-ink-2: #CFC8BC; --v-dim: #BFB8AC; --v-mute: #A29A8E; --v-mute-2: #ADA59A; --v-faint: #9C948A; --v-faint-2: #948C82; --v-ghost: #6E675E; --v-line: rgba(244, 241, 234, .1); --v-line-soft: rgba(244, 241, 234, .07); --v-line-strong: rgba(244, 241, 234, .15); --v-chip-bg: rgba(244, 241, 234, .04); --v-gold: #D4AF37; --v-gold-bg: rgba(212, 175, 55, .13); --v-gold-border: rgba(212, 175, 55, .5); --v-cyan: #7FE5F0; --v-cyan-bg: rgba(127, 229, 240, .12); --v-cyan-border: rgba(127, 229, 240, .46); --v-mag: #E5C687; --v-mag-bg: rgba(229, 198, 135, .14); --v-mag-border: rgba(229, 198, 135, .52); --v-on-accent: #000000; color-scheme: dark; } } /* -------------------------------------------------------------------------- 3. SUR IMAGE — inversion locale Toute légende, tout badge, tout bouton posé sur une photographie ou sur une œuvre passe en encre claire, quel que soit le mode de la page. À appliquer sur le conteneur de l'image, jamais sur le . -------------------------------------------------------------------------- */ .v-on-image { color: #F5F2EC; --v-ink: #F5F2EC; --v-ink-2: #DED7CC; --v-dim: #CBC4B8; --v-mute: #B7B0A4; --v-mute-2: #ABA498; --v-faint: #BDB6AB; --v-faint-2: #BDB6AB; --v-line: rgba(244, 241, 234, .14); --v-line-soft: rgba(244, 241, 234, .1); --v-line-strong: rgba(244, 241, 234, .2); --v-chip-bg: rgba(244, 241, 234, .06); --v-panel: #0D0D0E; --v-panel-2: #141416; --v-gold: #D4AF37; --v-gold-bg: rgba(212, 175, 55, .18); --v-gold-border: rgba(212, 175, 55, .54); --v-cyan: #7FE5F0; --v-cyan-bg: rgba(127, 229, 240, .16); --v-cyan-border: rgba(127, 229, 240, .48); --v-mag: #E5C687; --v-mag-bg: rgba(229, 198, 135, .16); --v-mag-border: rgba(229, 198, 135, .54); } /* -------------------------------------------------------------------------- 4. TYPOGRAPHIE, FORMES, MOUVEMENT — identiques dans les deux modes -------------------------------------------------------------------------- */ :root, [data-theme] { --font-display: 'Cinzel', ui-serif, Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Rayons — trois seulement. Pas de quatrième valeur. */ --r-field: 14px; /* champs, boutons rectangulaires, vignettes */ --r-card: 18px; /* cartes, panneaux, modales */ --r-pill: 999px; /* pastilles, actions principales, filtres */ /* Rythme vertical — base 4 px */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; /* Mouvement */ --dur-instant: 100ms; --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 320ms; --dur-hero: 500ms; --ease-standard: cubic-bezier(.2, 0, 0, 1); --ease-enter: cubic-bezier(.05, .7, .1, 1); --ease-exit: cubic-bezier(.3, 0, .8, .15); --ease-spring-fast: cubic-bezier(.42, 1.67, .21, .9); --ease-spring-default: cubic-bezier(.38, 1.21, .22, 1); /* Cible tactile minimale — jamais en dessous */ --hit: 44px; } /* -------------------------------------------------------------------------- 5. SOCLE — à appliquer tel quel -------------------------------------------------------------------------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--v-bg); } body { color: var(--v-ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-wrap: pretty; } /* Cinzel n'a pas d'italique : ne jamais en demander, le navigateur fabriquerait une oblique synthétique. Pour insister, on emploie l'interlettrage ou la graisse 600. */ h1, h2, h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .05em; line-height: 1.06; margin: 0; } h1 { font-size: clamp(34px, 5vw, 64px); } h2 { font-size: clamp(26px, 3.4vw, 44px); } h3 { font-size: clamp(19px, 2.2vw, 26px); } a { color: var(--v-gold); text-decoration: none; } a:hover { color: var(--v-mag); } button { -webkit-tap-highlight-color: transparent; } :focus-visible { outline: 2px solid var(--v-cyan); outline-offset: 3px; border-radius: inherit; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* -------------------------------------------------------------------------- 6. GRAIN — la signature de surface Voile de bruit fixe posé au-dessus de la page, opacité 5,5 %. Présent dans les deux modes, il donne au noir sa matière et au crème son papier. Se déclare sur l'élément qui porte data-theme. -------------------------------------------------------------------------- */ [data-theme]::after, .rk-grain::after { content: ''; position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: .055; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,"); background-size: 160px 160px; } /* -------------------------------------------------------------------------- 7. MOUVEMENTS NOMMÉS -------------------------------------------------------------------------- */ @keyframes rkRise { from { opacity: 0; transform: translateY(16px) scale(.96) } to { opacity: 1; transform: none } } @keyframes rkPing { 0% { transform: scale(.72); opacity: .85 } 100% { transform: scale(1.5); opacity: 0 } } @keyframes rkSweep { 0% { transform: translateY(-110%) } 100% { transform: translateY(210%) } } @keyframes rkBreathe { 0%, 100% { opacity: .55 } 50% { opacity: 1 } } @keyframes rkShimmer { from { background-position: 220% 0 } to { background-position: -120% 0 } } /* -------------------------------------------------------------------------- 8. PRIMITIVES — les six éléments partagés par tout l'écosystème Rien d'autre n'est autorisé à ce niveau. Un composant métier se construit avec ces briques ; il n'introduit pas de nouvelle forme. -------------------------------------------------------------------------- */ /* Surtitre — 10 px, capitales, interlettrage large. Le liant de la marque. */ .rk-eyebrow { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--v-faint-2); } .rk-eyebrow--gold { color: var(--v-gold); } /* Action principale — or plein, texte sur or */ .rk-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--hit); padding: 15px 22px; border: 0; border-radius: var(--r-pill); background: var(--v-gold); color: var(--v-on-accent); font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-spring-fast); } .rk-btn:hover { opacity: .88; } .rk-btn:active { transform: scale(.98); } /* Action secondaire — filet, jamais de fond */ .rk-btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--hit); padding: 15px 20px; border: 1px solid var(--v-line-strong); border-radius: var(--r-pill); background: none; color: var(--v-ink-2); font-family: var(--font-body); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); } .rk-btn-ghost:hover { border-color: var(--v-gold-border); color: var(--v-gold); } /* Carte / panneau */ .rk-card { background: var(--v-panel); border: 1px solid var(--v-line); border-radius: var(--r-card); padding: var(--sp-5); } /* Pastille d'information */ .rk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--v-line); border-radius: var(--r-pill); background: var(--v-chip-bg); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--v-mute); white-space: nowrap; } .rk-chip--gold { border-color: var(--v-gold-border); background: var(--v-gold-bg); color: var(--v-gold); } /* Champ de saisie */ .rk-field { width: 100%; min-height: var(--hit); padding: 14px 16px; border: 1px solid var(--v-line-strong); border-radius: var(--r-field); background: var(--v-panel); color: var(--v-ink); font-family: var(--font-body); font-size: 16px; /* 16 px minimum : en dessous, iOS zoome au focus */ outline: none; transition: border-color var(--dur-fast) var(--ease-standard); } .rk-field::placeholder { color: var(--v-ghost); } .rk-field:focus { border-color: var(--v-gold-border); } /* Filet de section */ .rk-rule { height: 1px; border: 0; background: var(--v-line); margin: var(--sp-6) 0; } /* ========================================================================== RÈGLES NON NÉGOCIABLES -------------------------------------------------------------------------- · Deux fontes, pas trois : Cinzel pour le display, Inter pour tout le reste. Cinzel n'a pas d'italique — ne jamais styler en italique. · Un seul accent porteur par écran : l'or. Le cyan est réservé au focus et aux états de lecture (NFC, scan) ; le signal d'alerte au capture guard. · Contraste : 4,5:1 minimum pour le texte courant, 3:1 accepté seulement au corps titre. Toute encre posée sur une œuvre est à pleine opacité. · Cible tactile 44 px minimum, texte de saisie 16 px minimum. · Aucun dégradé décoratif. Le seul dégradé de la charte est --v-bg-grad. · Vocabulaire : « Verre Acrylique » (jamais « Plexiglas »), « Sceau NFC », « Relique », « crédit d'usage », « points cadeau de fidélité », « registre local souverain ». Interdits : jeton, token, crypto, blockchain, royalties, NFT. Le ® ne suit que RELICKEEPER®. · Cette feuille est versionnée. Un besoin non couvert remonte à la Direction et s'ajoute ici — il ne se règle pas dans le CSS d'un site. ========================================================================== */