/* ============================================================== PORTFOLIO CHRISNAËL BERDIER — CSS Principal V3 Architecture : Design tokens → Reset → Components → Layout → Pages ============================================================== */ /* ═══════════════════════════════════════════════════════════════ DESIGN TOKENS — Système de variables CSS ───────────────────────────────────────── RÔLE : Centralise toutes les valeurs réutilisables du design (espacements, typographie, couleurs, ombres, durées). Définies sur :root = disponibles partout dans le CSS comme variables CSS custom (var(--nom)). EFFET DOMINO : → Changer --accent: #E8552E en #0066FF = TOUTES les couleurs d'accentuation (boutons, liens, barres, tags...) deviennent bleues en une seule modification. → Changer --text-hero: clamp(3rem, 2rem + 4.5vw, 7rem) = la taille du titre hero change sur tous les écrans. clamp(min, préféré, max) = min sur petits écrans, max sur grands. → Changer --z-modal: 200 en 50 = les modales passeraient DERRIÈRE la navigation (z-index: 100). Toujours garder z-modal > z-nav. → --ease-spring (cubic-bezier avec valeur > 1) produit un effet de rebond (overshoot). Remplacer par ease-out = pas de rebond. ═══════════════════════════════════════════════════════════════ */ /* ======== DESIGN TOKENS ======== */ :root { --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; --font-display: 'Syne', sans-serif; --font-body: 'DM Sans', sans-serif; --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --text-base: clamp(1rem, 0.9rem + 0.45vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.55vw, 1.35rem); --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); --text-2xl: clamp(2rem, 1.5rem + 2vw, 3rem); --text-3xl: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); --text-hero: clamp(3rem, 2rem + 4.5vw, 7rem); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 9999px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 200ms; --duration-base: 400ms; --duration-slow: 700ms; --z-particles: 1; --z-content: 10; --z-back-top: 50; --z-nav: 100; --z-modal: 200; --z-a11y: 300; --a11y-zoom: 1; } /* ═══════════════════════════════════════════════════════════════ THÈME CLAIR & SOMBRE — Système de theming par data-attribute ────────────────────────────────────────────────────────────── RÔLE : Redéfinit les tokens de couleur selon le thème actif. MÉCANISME : L'attribut data-theme="dark" ou "light" est placé sur par ThemeManager (JS). Le sélecteur [data-theme="dark"] { } redéfinit les mêmes variables CSS avec des valeurs adaptées. Tous les composants utilisent var(--bg-primary) etc., donc ils basculent automatiquement sans toucher à leur propre CSS. C'est le pattern "CSS custom properties pour le theming" : une seule source de vérité pour les couleurs, modifiable dynamiquement en JS via setAttribute(). EFFET DOMINO : → Changer --accent en mode sombre = la couleur d'accentuation sera différente selon le thème (ex: orange sombre, rouge clair). → Changer --bg-primary en mode clair = le fond de toutes les pages en mode clair changera. → Ajouter un nouveau thème = créer un sélecteur [data-theme="sepia"] { } avec ses propres valeurs. ═══════════════════════════════════════════════════════════════ */ /* ======== MODE CLAIR ======== */ [data-theme="light"], :root { --bg-primary: #F5F2EC; --bg-secondary: #EDEAE3; --bg-tertiary: #E2DFD8; --bg-card: #FFFFFF; --bg-card-hover: #FAFAF8; --bg-nav: rgba(245, 242, 236, 0.88); --text-primary: #1A1A2E; --text-secondary: #4A4A5A; --text-tertiary: #7A7A8A; --text-inverse: #F5F2EC; --accent: #E8552E; --accent-hover: #D14420; --accent-soft: rgba(232, 85, 46, 0.1); --accent-secondary: #1D7AF2; --accent-secondary-soft: rgba(29, 122, 242, 0.1); --border: rgba(26, 26, 46, 0.08); --border-strong: rgba(26, 26, 46, 0.15); --shadow-sm: 0 1px 3px rgba(0,0,0,0.04); --shadow-md: 0 4px 20px rgba(0,0,0,0.06); --shadow-lg: 0 12px 40px rgba(0,0,0,0.08); --shadow-glow: 0 0 30px rgba(232, 85, 46, 0.15); } /* ======== MODE SOMBRE ======== */ [data-theme="dark"] { --bg-primary: #0D0D11; --bg-secondary: #151519; --bg-tertiary: #1E1E24; --bg-card: #1A1A22; --bg-card-hover: #222230; --bg-nav: rgba(13, 13, 17, 0.9); --text-primary: #E8E4DE; --text-secondary: #A8A4A0; --text-tertiary: #6B6B7B; --text-inverse: #0D0D11; --accent: #FF7043; --accent-hover: #FF8A65; --accent-soft: rgba(255, 112, 67, 0.12); --accent-secondary: #5CA0FF; --accent-secondary-soft: rgba(92, 160, 255, 0.1); --border: rgba(255, 255, 255, 0.06); --border-strong: rgba(255, 255, 255, 0.12); --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 20px rgba(0,0,0,0.4); --shadow-lg: 0 12px 40px rgba(0,0,0,0.5); --shadow-glow: 0 0 40px rgba(255, 112, 67, 0.2); } /* ═══════════════════════════════════════════════════════════════ RESET & BASE — Normalisation et styles fondamentaux ──────────────────────────────────────────────────── RÔLE : Supprime les marges/paddings par défaut des navigateurs et établit les règles de base pour tout le document. box-sizing: border-box = le padding et la border sont inclus dans la largeur totale. Exemple : un div de width:200px avec padding:20px fait toujours 200px de large, pas 240px. scroll-padding-top: 80px = quand on navigue vers une ancre (#section), le scroll s'arrête 80px avant le haut de l'élément (compense la hauteur de la nav fixe de 70px + marge). font-size: calc(100% * var(--a11y-zoom)) = permet au widget accessibilité de modifier la taille globale des textes en changeant --a11y-zoom (JS injecte la valeur). -webkit-font-smoothing: antialiased = lissage des polices sur macOS/iOS pour un rendu plus propre. EFFET DOMINO : → Supprimer box-sizing: border-box = les paddings s'ajouteraient à la largeur déclarée → nombreux bugs de mise en page. → Changer scroll-padding-top: 80px en 0px = les ancres #section passeraient sous la barre de navigation. → Changer line-height: 1.7 en 1.2 = le texte sera plus compact, moins aéré (lisibilité réduite). ═══════════════════════════════════════════════════════════════ */ /* ======== RESET & BASE ======== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 80px; font-size: calc(100% * var(--a11y-zoom)); } body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.7; color: var(--text-primary); background-color: var(--bg-primary); transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ═══════════════════════════════════════════════════════════════ SKIP LINK — Lien d'évitement (accessibilité WCAG 2.4.1) ───────────────────────────────────────────────────────── RÔLE : Permet aux utilisateurs clavier/lecteur d'écran de sauter directement au contenu principal sans Tab sur tous les éléments de navigation. LOGIQUE : Le lien est positionné hors écran (top: -100%) par défaut. Quand il reçoit le focus (Tab depuis le début de la page), il apparaît visuellement (top: var(--space-md)). C'est un critère WCAG 2.4.1 niveau A (obligatoire). EFFET DOMINO : → Supprimer ce composant = violation WCAG 2.4.1, les utilisateurs clavier doivent Tab sur tous les liens nav avant d'atteindre le contenu. → Changer z-index: 9999 en 100 = le lien pourrait passer derrière d'autres éléments fixed (nav, modales). ═══════════════════════════════════════════════════════════════ */ .skip-link { position: absolute; top: -100%; left: var(--space-md); background: var(--accent); color: #fff; padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-sm); font-weight: 600; z-index: 9999; text-decoration: none; transition: top var(--duration-fast); } .skip-link:focus { top: var(--space-md); } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-decoration: none; transition: color var(--duration-fast); } a:hover { color: var(--accent-hover); } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; font-weight: 700; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: var(--space-lg); } .section { padding-block: var(--space-4xl); } .section__label { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .15em; color: var(--accent); margin-bottom: var(--space-sm); } .section__title { font-size: var(--text-2xl); margin-bottom: var(--space-2xl); } /* ═══════════════════════════════════════════════════════════════ SCROLL REVEAL — Animations d'apparition au défilement ─────────────────────────────────────────────────────── RÔLE : Masque les éléments initialement et les anime quand ils entrent dans le viewport (déclenché par JS via IntersectionObserver). LOGIQUE : .reveal = état initial : invisible (opacity:0) et décalé vers le bas. .reveal.is-visible = état final : visible et à sa position normale. La classe .is-visible est ajoutée par le module ScrollReveal (JS). Les classes .stagger-* ajoutent un délai progressif : stagger-2 = 0.15s, stagger-3 = 0.3s, stagger-4 = 0.45s. Utilisées sur des éléments groupés pour créer un effet cascade. EFFET DOMINO : → Changer translateY(30px) en translateY(0) + scale(0.95) = les éléments grossissent au lieu de monter. → Changer transition-delay de stagger-2 de 0.15s en 0.5s = le deuxième élément d'un groupe apparaît 0.5s après le premier (effet cascade plus marqué). → Supprimer opacity: 0 initial = les éléments sont visibles dès le chargement mais l'animation translateY joue quand même. ═══════════════════════════════════════════════════════════════ */ /* ======== SCROLL REVEAL ======== */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .stagger-2 { transition-delay: 0.15s; } .stagger-3 { transition-delay: 0.3s; } .stagger-4 { transition-delay: 0.45s; } /* ═══════════════════════════════════════════════════════════════ NAVIGATION — Barre fixe avec glassmorphisme et drawer mobile ───────────────────────────────────────────────────────────── RÔLE : Barre de navigation fixe en haut, avec effet de verre (glassmorphisme), auto-hide au scroll (géré par JS), et un drawer latéral pour mobile. GLASSMORPHISME : backdrop-filter: blur(12px) = flou sur le contenu derrière la nav. Nécessite background semi-transparent pour que l'effet soit visible. -webkit-backdrop-filter = préfixe pour Safari (obligatoire). AUTO-HIDE : .nav.is-hidden = transform: translateY(-100%) qui fait monter la nav hors écran. La transition (400ms) la rend fluide. DRAWER MOBILE : Position fixed + z-index: 160 (au-dessus du backdrop z:150). transform: translateX(110%) = caché à droite. .is-open retire cette transformation. min(280px, 82vw) = s'adapte aux petits écrans. IMPORTANT (règle de positionnement CSS) : Le backdrop et le drawer sont FRÈRES du