/* ============================================== UTILITIES.CSS — Helpers, états dark mode, animations préparées, print ============================================== */ /* ----------------------------------------------- Accessibilité ----------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } .hidden { display: none !important; } .invisible { visibility: hidden; opacity: 0; } /* ----------------------------------------------- Texte ----------------------------------------------- */ .text-gold { color: var(--color-gold); } .text-lavender{ color: var(--color-lavender); } .text-accent { color: var(--color-gold); } .text-muted { color: var(--color-text-muted); } .text-subtle { color: var(--color-text-subtle); } .text-mono { font-family: var(--font-mono); } .text-display { font-family: var(--font-display); } .text-center { text-align: center; } .text-right { text-align: right; } .text-bold { font-weight: var(--weight-bold); } .text-semi { font-weight: var(--weight-semi); } /* ----------------------------------------------- Layout ----------------------------------------------- */ .flex { display: flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); } .mt-auto { margin-top: auto; } .mx-auto { margin-inline: auto; } .overflow-hidden { overflow: hidden; } .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ----------------------------------------------- Badges / Tags génériques ----------------------------------------------- */ .badge { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); border-radius: var(--radius-full); border: 1px solid var(--color-border-mid); background: var(--color-surface); color: var(--color-text-muted); } .badge--gold { border-color: var(--color-gold-border); background: var(--color-gold-dim); color: var(--color-gold-light); } .badge--lavender { border-color: var(--color-lavender-border); background: var(--color-lavender-dim); color: var(--color-lavender); } /* ----------------------------------------------- Séparateur ----------------------------------------------- */ .divider { width: 100%; height: 1px; background: var(--color-border); margin-block: var(--space-8); } .divider--gold { background: linear-gradient( 90deg, transparent, var(--color-gold-border), transparent ); } /* ----------------------------------------------- Fonds ----------------------------------------------- */ .bg-alt { background-color: var(--color-bg-alt); } .bg-card { background-color: var(--color-bg-card); } .bg-surface { background-color: var(--color-surface); } /* ----------------------------------------------- Aspect ratio ----------------------------------------------- */ .ratio-16-9 { aspect-ratio: 16/9; } .ratio-4-3 { aspect-ratio: 4/3; } .ratio-square { aspect-ratio: 1; } /* ----------------------------------------------- Animations d'entrée — préparées, désactivées Activer en phase 2 : décommenter + ajouter la classe .animated au ou par section ----------------------------------------------- */ /* .animate-fade-up { opacity: 0; transform: translateY(20px); transition: opacity var(--transition-slow), transform var(--transition-slow); } .animate-fade-up.is-visible { opacity: 1; transform: translateY(0); } .animate-fade-in { opacity: 0; transition: opacity var(--transition-slow); } .animate-fade-in.is-visible { opacity: 1; } */ /* ----------------------------------------------- Glow or — classe utilitaire ----------------------------------------------- */ .glow-gold { box-shadow: var(--shadow-gold); } /* ----------------------------------------------- Responsive helpers ----------------------------------------------- */ @media (max-width: 768px) { .hide-mobile { display: none !important; } } @media (min-width: 769px) { .hide-desktop { display: none !important; } } /* ----------------------------------------------- Mode clair — DÉSACTIVÉ Activer : data-theme="light" sur ----------------------------------------------- */ /* [data-theme="light"] { --color-bg: #f8f6f0; --color-bg-alt: #f0ede3; --color-bg-card: #ffffff; --color-surface: #ebe8de; --color-surface-2: #e0dcd0; --color-text: #1a1410; --color-text-muted: #4a4030; --color-text-subtle: #9a9080; --color-border: rgba(60, 45, 15, 0.08); --color-border-mid: rgba(60, 45, 15, 0.14); --color-border-hover: rgba(188, 156, 34, 0.35); } */ /* ----------------------------------------------- Impression ----------------------------------------------- */ @media print { .nav, .hero__actions, .projects__filters, .contact__links, .footer__nav { display: none !important; } body { background: white; color: black; font-size: 11pt; } .section { padding-block: 2rem; } a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; } }