/* ============================================================ STEPHANE-ASTRO · DESIGN SYSTEM v90.1 ============================================================ Tokens canoniques du site stephane-astro.com. Chargé AVANT style.css pour que tous les composants puissent utiliser ces variables. Ne pas modifier sans validation visuelle. ============================================================ */ :root { /* v90.19 : tokens uniques du bloc alias v90.12 (les doublons ont ete supprimes, la palette principale ci-dessous est la seule source) */ --ds-text-bright: #F8F2DE; --ds-gold-pale: #F4D58A; --ds-night-deep: #0B1024; --ds-night-mid: #1A2342; /* ============================================================ 1. COULEURS · Palette unique et nommée ============================================================ Bleu nuit : la nuit signature. Or : 4 niveaux UNIQUEMENT. Si vous avez besoin d'une 5e nuance, c'est que vous ne voyez pas la bonne dans cette palette. Crème / parchemin : 2 niveaux pour les fonds clairs et tables. Rouille : usage RARE, boutons destructifs ou alertes lourdes. ============================================================ */ /* Nuit (4 niveaux) */ --ds-night: #0B1020; --ds-night-soft: #121831; --ds-night-elev: #1A2240; --ds-night-up: #1F2848; /* Or (4 niveaux et 4 niveaux seulement) */ --ds-gold-bright: #E4C07E; /* hover, highlights, glyphe actif */ --ds-gold: #D4B87A; /* couleur signature de la marque */ --ds-gold-deep: #C8A25C; /* or antique stable, surfaces */ --ds-gold-dark: #8E6D2E; /* or sombre, ombres et bordures discrètes */ /* Parchemin et crème */ --ds-cream: #F3ECD7; /* fond clair texturé */ --ds-cream-deep: #E8DFCB; /* fond clair plus sombre */ /* Texte sur fond nuit */ --ds-text: #F3EBD9; --ds-text-dim: #C7BBA1; --ds-text-mute: #A39A82; /* WCAG AA 5.5:1 sur night */ --ds-text-meta: #8A7F66; /* WCAG AA 4.5:1 sur night */ /* Couleurs utilitaires */ --ds-rust: #A14932; /* danger, suppression, alerte forte */ --ds-rust-soft: #C2553A; /* hover des actions destructrices */ --ds-success: #66bb6a; /* feedback positif */ --ds-info: #5c8edb; /* information neutre */ --ds-warning: #d4b87a; /* avertissement doux */ /* Lignes et bordures */ --ds-line: rgba(243, 235, 217, 0.10); --ds-line-strong: rgba(243, 235, 217, 0.22); --ds-line-vivid: rgba(243, 235, 217, 0.35); --ds-line-gold: rgba(212, 184, 122, 0.35); /* ============================================================ 2. TYPOGRAPHIE · Trois familles, six tailles canoniques ============================================================ */ --ds-serif: 'Fraunces', 'Cormorant Garamond', 'Times New Roman', serif; --ds-sans: 'Hanken Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; --ds-mono: 'IBM Plex Mono', 'IBM Plex Mono', 'SF Mono', Consolas, monospace; /* Six tailles canoniques. Si vous avez besoin d'une 7e, parlez-en avant de l'ajouter. */ --ds-type-display: clamp(2.5rem, 6vw, 4.5rem); /* hero immersif (accueil, page hero) */ --ds-type-h1: clamp(2rem, 5vw, 3.2rem); /* titre principal de page */ --ds-type-h2: clamp(1.4rem, 3vw, 2.2rem); /* titre de section */ --ds-type-h3: clamp(1.15rem, 2vw, 1.5rem); /* titre de sous-section */ --ds-type-body: 1.05rem; /* texte courant */ --ds-type-meta: 0.82rem; /* labels, méta-données */ --ds-leading-tight: 1.15; --ds-leading-snug: 1.35; --ds-leading-normal: 1.6; --ds-leading-relaxed: 1.75; --ds-tracking-tight: -0.01em; --ds-tracking-normal: 0; --ds-tracking-wide: 0.08em; --ds-tracking-loose: 0.22em; /* ============================================================ 3. ESPACEMENT · Échelle de 8 paliers, base 4 ============================================================ N'utilisez RIEN d'autre que ces 8 valeurs. Si vous avez besoin de quelque chose entre --ds-space-3 et --ds-space-4, c'est probablement --ds-space-3 ou --ds-space-4. ============================================================ */ --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 24px; --ds-space-6: 32px; --ds-space-7: 48px; --ds-space-8: 64px; --ds-space-9: 96px; /* Layout */ --ds-max-width: 1440px; --ds-text-width: 680px; --ds-gutter: clamp(1.25rem, 4vw, 2.5rem); --ds-section-y: clamp(5rem, 10vw, 9rem); /* ============================================================ 4. RADIUS · Quatre niveaux SEULEMENT ============================================================ */ --ds-radius-sm: 4px; /* inputs, tags, petites pastilles */ --ds-radius-md: 8px; /* boutons, cartes, panneaux */ --ds-radius-lg: 14px; /* modals, conteneurs majeurs */ --ds-radius-pill: 999px; /* badges arrondis, toggles */ /* ============================================================ 5. ÉLÉVATION · Ombres canoniques ============================================================ */ --ds-shadow-sm: 0 1px 2px rgba(0,0,0,0.20); --ds-shadow-md: 0 4px 12px rgba(0,0,0,0.30); --ds-shadow-lg: 0 12px 32px rgba(0,0,0,0.40); --ds-shadow-gold: 0 4px 16px rgba(212, 184, 122, 0.25); /* ============================================================ 6. TRANSITIONS · Trois cadences ============================================================ */ --ds-transition-fast: 0.15s cubic-bezier(0.2, 0, 0.2, 1); --ds-transition: 0.35s cubic-bezier(0.2, 0, 0.2, 1); --ds-transition-slow: 0.80s cubic-bezier(0.2, 0, 0.2, 1); /* ============================================================ 7. BUTTON SYSTEM · Tokens uniques ============================================================ */ --ds-btn-h: 48px; --ds-btn-h-sm: 36px; --ds-btn-h-lg: 56px; --ds-btn-radius: var(--ds-radius-md); --ds-btn-padding-x: 24px; --ds-btn-padding-x-sm: 16px; --ds-btn-padding-x-lg: 32px; --ds-btn-font-size: 0.95rem; --ds-btn-font-weight: 600; --ds-btn-letter-spacing: var(--ds-tracking-wide); } /* ============================================================ 8. RÉTROCOMPATIBILITÉ · Alias des anciens tokens ============================================================ Les anciens noms (--accent, --black, etc.) continuent de fonctionner en pointant vers les nouveaux tokens. Cette section sera retirée progressivement après refactor complet du style.css. ============================================================ */ :root { --black: var(--ds-night); --black-soft: var(--ds-night-soft); --black-elev: var(--ds-night-elev); --surface: var(--ds-night-up); --white: var(--ds-text); --white-dim: var(--ds-text-dim); --white-mute: var(--ds-text-mute); --dim: var(--ds-text-meta); --accent: var(--ds-gold-deep); --accent-dim: var(--ds-gold-dark); --accent-bright:var(--ds-gold-bright); --cream: var(--ds-cream); --cream-deep: var(--ds-cream-deep); --rust: var(--ds-rust); --line: var(--ds-line); --line-strong: var(--ds-line-strong); --line-vivid: var(--ds-line-vivid); --line-gold: var(--ds-line-gold); --cream-dim: var(--ds-cream-deep); /* v90.1 alias rétrocompat */ --ink: var(--ds-night); /* v90.1 alias rétrocompat */ --ink-dim: var(--ds-night-soft); /* v90.1 alias rétrocompat */ --serif: var(--ds-serif); --sans: var(--ds-sans); --mono: var(--ds-mono); --max-width: var(--ds-max-width); --text-width: var(--ds-text-width); --gutter: var(--ds-gutter); --section-y: var(--ds-section-y); --radius: var(--ds-radius-sm); --transition: var(--ds-transition); --transition-slow: var(--ds-transition-slow); } /* ============================================================ 9. SYSTÈME DE BOUTONS UNIFIÉ ============================================================ 3 styles canoniques : primary, ghost, danger. 3 tailles : sm, md (défaut), lg. Toutes les anciennes classes (.tfc-cta, .syn-cta, .pa-cta-link) doivent migrer vers ces classes au fil des modifications. ============================================================ */ .ds-btn, .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2); height: var(--ds-btn-h); padding: 0 var(--ds-btn-padding-x); border-radius: 0; font-family: var(--ds-sans); font-size: var(--ds-btn-font-size); font-weight: var(--ds-btn-font-weight); letter-spacing: var(--ds-btn-letter-spacing); text-transform: uppercase; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background var(--ds-transition-fast), color var(--ds-transition-fast), border-color var(--ds-transition-fast), transform var(--ds-transition-fast); white-space: nowrap; min-width: 44px; } .ds-btn-sm, .btn-sm { height: var(--ds-btn-h-sm); padding: 0 var(--ds-btn-padding-x-sm); font-size: 0.85rem; } .ds-btn-lg, .btn-large { height: var(--ds-btn-h-lg); padding: 0 var(--ds-btn-padding-x-lg); font-size: 1rem; } /* Variantes : on garde .btn-primary et .btn-ghost existants pour la rétro-compat */ .btn-primary, .ds-btn-primary { background: var(--ds-gold); color: var(--ds-night); border-color: var(--ds-gold); } .btn-primary:hover, .ds-btn-primary:hover { background: var(--ds-gold-bright); border-color: var(--ds-gold-bright); transform: translateY(-1px); } .btn-primary:active, .ds-btn-primary:active { transform: translateY(0); } .btn-primary:disabled, .ds-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .btn-ghost, .ds-btn-ghost { background: transparent; color: var(--ds-gold); border-color: var(--ds-gold); } .btn-ghost:hover, .ds-btn-ghost:hover { background: rgba(212, 184, 122, 0.12); border-color: var(--ds-gold-bright); color: var(--ds-gold-bright); } .ds-btn-danger { background: transparent; color: var(--ds-rust-soft); border-color: var(--ds-rust); } .ds-btn-danger:hover { background: var(--ds-rust); color: var(--ds-text); } /* Focus visible commun à tous les boutons */ .ds-btn:focus-visible, .btn:focus-visible { outline: 2px solid var(--ds-gold-bright); outline-offset: 3px; } /* ============================================================ 10. UTILITIES TYPOGRAPHIQUES ============================================================ Utilisez ces classes pour les nouveaux composants. Les anciennes classes (h1-tail, syn-title, hero-title-wrap, etc.) restent fonctionnelles mais ne doivent plus être créées de nouvelles. ============================================================ */ .ds-type-display { font-family: var(--ds-serif); font-size: var(--ds-type-display); font-weight: 400; line-height: var(--ds-leading-tight); letter-spacing: var(--ds-tracking-tight); color: var(--ds-text); } .ds-type-h1 { font-family: var(--ds-serif); font-size: var(--ds-type-h1); font-weight: 400; line-height: var(--ds-leading-tight); letter-spacing: var(--ds-tracking-tight); color: var(--ds-text); } .ds-type-h2 { font-family: var(--ds-serif); font-size: var(--ds-type-h2); font-weight: 400; line-height: var(--ds-leading-snug); color: var(--ds-text); } .ds-type-h3 { font-family: var(--ds-serif); font-size: var(--ds-type-h3); font-weight: 400; line-height: var(--ds-leading-snug); color: var(--ds-text); } .ds-type-body { font-family: var(--ds-serif); font-size: var(--ds-type-body); font-weight: 400; line-height: var(--ds-leading-relaxed); color: var(--ds-text); } .ds-type-meta { font-family: var(--ds-sans); font-size: var(--ds-type-meta); font-weight: 500; line-height: var(--ds-leading-normal); letter-spacing: var(--ds-tracking-loose); color: var(--ds-gold); text-transform: uppercase; } .ds-italic { font-style: italic; color: var(--ds-gold); } /* ============================================================ 11. UTILITIES D'ESPACEMENT (échelle stricte) ============================================================ */ .ds-mt-1 { margin-top: var(--ds-space-1); } .ds-mt-2 { margin-top: var(--ds-space-2); } .ds-mt-3 { margin-top: var(--ds-space-3); } .ds-mt-4 { margin-top: var(--ds-space-4); } .ds-mt-5 { margin-top: var(--ds-space-5); } .ds-mt-6 { margin-top: var(--ds-space-6); } .ds-mt-7 { margin-top: var(--ds-space-7); } .ds-mt-8 { margin-top: var(--ds-space-8); } .ds-mb-1 { margin-bottom: var(--ds-space-1); } .ds-mb-2 { margin-bottom: var(--ds-space-2); } .ds-mb-3 { margin-bottom: var(--ds-space-3); } .ds-mb-4 { margin-bottom: var(--ds-space-4); } .ds-mb-5 { margin-bottom: var(--ds-space-5); } .ds-mb-6 { margin-bottom: var(--ds-space-6); } .ds-mb-7 { margin-bottom: var(--ds-space-7); } .ds-mb-8 { margin-bottom: var(--ds-space-8); } .ds-py-4 { padding-top: var(--ds-space-4); padding-bottom: var(--ds-space-4); } .ds-py-5 { padding-top: var(--ds-space-5); padding-bottom: var(--ds-space-5); } .ds-py-6 { padding-top: var(--ds-space-6); padding-bottom: var(--ds-space-6); } .ds-py-7 { padding-top: var(--ds-space-7); padding-bottom: var(--ds-space-7); } .ds-py-8 { padding-top: var(--ds-space-8); padding-bottom: var(--ds-space-8); } /* ============================================================ FIN DESIGN SYSTEM v90.1 ============================================================ */ /* ============================================================ v90.21 · REGLE GLYPHES (10 juin 2026) : tout symbole a double presentation (zodiaque, etoiles) est rendu en glyphe TEXTE, jamais en emoji colore. Complement du variation selector U+FE0E insere dans le HTML. ============================================================ */ body { font-variant-emoji: text; } /* ============================================================ v90.25.28 / v90.25.29 · SCROLLBAR DORÉE GLOBALE Harmonisation visuelle site-wide : remplace la scrollbar navigateur basique par une fine barre or, cohérente avec le cadre baroque et le design system. v90.25.29 BUGFIX : - Le ::-webkit-scrollbar global avec height:8px ajoutait une piste horizontale visible même sur les conteneurs sans débordement (sidebar) + une piste verticale sur les textareas de saisie. On scope désormais le styling. ============================================================ */ html { scrollbar-width: thin; scrollbar-color: rgba(212, 162, 74, 0.45) transparent; } /* Verticales : tous les conteneurs scrollables */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar:horizontal { height: 8px; } ::-webkit-scrollbar-track { background: rgba(11, 13, 26, 0.4); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(212, 162, 74, 0.55) 0%, rgba(244, 213, 138, 0.65) 50%, rgba(182, 138, 62, 0.55) 100%); border-radius: 0; border: 1px solid rgba(11, 13, 26, 0.3); } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(228, 192, 126, 0.75) 0%, rgba(244, 213, 138, 0.85) 50%, rgba(212, 162, 74, 0.75) 100%); } ::-webkit-scrollbar-corner { background: transparent; } /* v90.25.29 — Masquer les pistes parasites : 1) Textarea, input : pas de scrollbar visible (l'auto-grow JS gère la hauteur, on n'a jamais besoin d'une piste). */ textarea::-webkit-scrollbar, input::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } textarea, input { scrollbar-width: none; -ms-overflow-style: none; } /* 2) Sidebar Palazzo : interdire débordement horizontal pour qu'aucune piste horizontale n'apparaisse en bas. */ .palazzo-sidebar { overflow-x: hidden !important; } .palazzo-sidebar::-webkit-scrollbar:horizontal { display: none !important; height: 0 !important; }