/* ============================================ VARIABLES ============================================ */ :root { --bg: #0A0C10; --surface: #12161D; --border: #1E2229; --border-strong: #2A2F38; --text: #E8E8E5; --text-muted: #8A8F98; --text-dim: #5C6068; --accent: #5EEAD4; --accent-dim: rgba(94, 234, 212, 0.15); --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; --container-max: 760px; --pad-x: 24px; } /* ============================================ RESET & BASE ============================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; min-height: 100vh; } a { color: inherit; text-decoration: none; } /* Justify multi-line prose for cleaner visual blocks. Single-line texts (titles, codes, labels) are visually unaffected since text-align: justify doesn't stretch the last/only line. `hyphens: auto` uses French hyphenation rules (lang="fr" on ) to avoid large word-spacing gaps. */ p, .exp-missions li { text-align: justify; hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; } ::selection { background: var(--accent-dim); color: var(--text); } /* ============================================ LAYOUT ============================================ */ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--pad-x); width: 100%; } /* ============================================ TOP BAR (sticky) ============================================ */ .topbar { position: sticky; top: 0; z-index: 10; background: rgba(10, 12, 16, 0.82); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--border); } .topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 56px; } .brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; color: var(--text); } .brand-mark { color: var(--accent); font-weight: 500; } .brand-name { font-weight: 500; } .status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.1em; white-space: nowrap; } /* Quick-nav menu: inline row on desktop, dropdown panel on mobile */ .topnav { display: none; } .topnav a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--text-dim); white-space: nowrap; transition: color 0.18s ease; } .topnav a:hover { color: var(--accent); } /* Hamburger button: hidden by default, shown only on mobile (below) so a missing media query can never leak it onto desktop */ .menu-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: -9px; padding: 0; background: none; border: none; color: var(--text-muted); cursor: pointer; transition: color 0.18s ease; } .menu-toggle:hover { color: var(--accent); } .menu-icon line { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transform-origin: center; transition: transform 0.25s ease, opacity 0.2s ease; } /* Animate hamburger into an X when the menu is open */ .menu-toggle[aria-expanded="true"] .l1 { transform: translateY(5px) rotate(45deg); } .menu-toggle[aria-expanded="true"] .l2 { opacity: 0; } .menu-toggle[aria-expanded="true"] .l3 { transform: translateY(-5px) rotate(-45deg); } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-dim); animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.9); } } /* ============================================ HERO ============================================ */ .hero { padding: 72px 0 88px; border-bottom: 1px solid var(--border); } .section-code { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: 0.12em; font-weight: 500; white-space: nowrap; } .name { font-size: clamp(40px, 9vw, 64px); line-height: 1.05; font-weight: 600; letter-spacing: -0.025em; margin-top: 16px; color: var(--text); } .prompt { color: var(--accent); margin-right: 10px; font-weight: 500; font-family: var(--font-mono); } .cursor { display: inline-block; width: 0.5em; height: 0.85em; background: var(--accent); vertical-align: -0.05em; margin-left: 0.12em; animation: blink 0.8s infinite; } @keyframes blink { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } } .role { font-size: clamp(18px, 4vw, 22px); color: var(--text-muted); margin-top: 14px; font-weight: 400; } .tagline { font-size: 17px; line-height: 1.65; color: var(--text-muted); margin-top: 32px; max-width: 56ch; } .meta { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); } .meta > div { display: flex; align-items: baseline; gap: 14px; font-family: var(--font-mono); font-size: 13px; } .meta dt { color: var(--text-dim); letter-spacing: 0.1em; min-width: 64px; font-weight: 500; } .meta dd { color: var(--text); } /* ============================================ SECTIONS ============================================ */ .section { padding: 64px 0; border-bottom: 1px solid var(--border); } .section-last { border-bottom: none; } .section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; } .section-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; padding: 5px 10px; border: 1px solid var(--border-strong); color: var(--text-muted); } .section-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); } .section-status.ready .dot { background: var(--accent); } .section-title { font-size: clamp(28px, 6vw, 40px); line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 32px; color: var(--text); } /* ============================================ BIO ============================================ */ .bio { display: flex; flex-direction: column; gap: 18px; } .bio p { font-size: 17px; line-height: 1.65; color: var(--text-muted); } /* ============================================ EXPERIENCE LIST ============================================ */ .exp-list { list-style: none; display: flex; flex-direction: column; } .exp-item { padding: 28px 0; border-bottom: 1px solid var(--border); } .exp-item:first-child { padding-top: 0; } .exp-item:last-child { border-bottom: none; padding-bottom: 0; } .exp-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 6px; } .exp-title { font-size: 19px; font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; color: var(--text); margin: 0; } .exp-date { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); letter-spacing: 0.06em; white-space: nowrap; } .exp-company { font-size: 15px; line-height: 1.5; color: var(--text-muted); } .exp-tag { color: var(--accent); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; } /* Accordion: details / summary */ .exp-item summary { cursor: pointer; list-style: none; transition: opacity 0.2s ease; } .exp-item summary::-webkit-details-marker { display: none; } .exp-item summary:hover { opacity: 0.85; } .exp-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; } /* Animated expand/collapse via grid-template-rows */ .exp-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; } .exp-item details[open] .exp-content { grid-template-rows: 1fr; } .exp-content > div { overflow: hidden; min-height: 0; } /* Chevron affordance at the bottom of each experience summary. Rotates 180° when the item is open to indicate the expanded state. */ .exp-chevron { display: flex; justify-content: center; margin-top: 18px; color: var(--text-dim); transition: transform 0.3s ease, color 0.2s ease; } .exp-chevron svg { display: block; } .exp-item:hover .exp-chevron { color: var(--accent); } /* Chevron rotation is tied to a JS-managed class (`.is-open`) rather than the [open] attribute, because [open] is only removed AFTER the close animation completes (300ms timeout). Using a class lets us rotate the chevron in sync with the content animation in both directions. */ .exp-item details.is-open .exp-chevron { transform: rotate(180deg); color: var(--accent); } /* Missions list */ .exp-missions { list-style: none; margin: 16px 0 0; padding: 0; } .exp-missions > li { position: relative; padding-left: 22px; margin-bottom: 8px; color: var(--text-muted); font-size: 15px; line-height: 1.6; } .exp-missions > li:last-child { margin-bottom: 0; } .exp-missions > li::before { content: '›'; position: absolute; left: 0; top: 0; color: var(--accent); font-family: var(--font-mono); line-height: 1.6; } /* ============================================ FORMATION / EDU ============================================ */ .edu-list { list-style: none; display: flex; flex-direction: column; gap: 28px; } .edu-item { padding-top: 24px; border-top: 1px solid var(--border); } .edu-item:first-child { border-top: 0; padding-top: 0; } .edu-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; } .edu-degree { font-size: 19px; font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; color: var(--text); margin: 0; } .edu-date { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); letter-spacing: 0.06em; white-space: nowrap; } .edu-spec { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } .edu-school { color: var(--text-muted); font-size: 14px; } /* ============================================ STACK / SKILLS ============================================ */ .stack-list { columns: 1; column-gap: 16px; } @media (min-width: 640px) { .stack-list { columns: 2; } } .stack-group { display: block; break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 16px; border: 1px solid var(--border); background: var(--surface); padding: 24px 22px 20px; } .stack-group:last-child { margin-bottom: 0; } .stack-cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; font-weight: 500; color: var(--text-dim); margin-bottom: 18px; } .stack-skills { list-style: none; padding: 0; margin: 0; } .stack-skills > li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); } .stack-skills > li:first-child { padding-top: 0; } .stack-skills > li:last-child { border-bottom: none; padding-bottom: 2px; } .stack-skill-name { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.01em; color: var(--text); line-height: 1.4; transition: color 0.2s ease; } .stack-skills > li:hover .stack-skill-name { color: var(--accent); } .stack-skill-level { flex-shrink: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; font-weight: 500; padding: 4px 9px; border: 1px solid transparent; white-space: nowrap; /* Equal width for all three badges regardless of label length ("Notions" is 7 chars vs "Maîtrisé"/"Pratiqué" 8 chars) */ min-width: 88px; text-align: center; box-sizing: border-box; } .stack-skill-level.level-maitrise { background: var(--accent); color: var(--bg); border-color: var(--accent); } .stack-skill-level.level-pratique { color: var(--accent); border-color: var(--accent); } .stack-skill-level.level-notions { color: var(--text-muted); border-color: var(--border-strong); } /* ============================================ CONTACT ============================================ */ .contact-list { list-style: none; display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 640px) { .contact-list { grid-template-columns: repeat(2, 1fr); } } .contact-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px; border: 1px solid var(--border); background: var(--surface); text-decoration: none; color: var(--text); font-family: var(--font-mono); font-size: 16px; transition: border-color 0.2s ease; } .contact-item:hover { border-color: var(--accent-dim); } .contact-value { transition: color 0.15s ease; } .contact-item:hover .contact-value { color: var(--accent); } .contact-arrow { font-size: 14px; color: var(--text-dim); transition: transform 0.2s ease, color 0.15s ease; } .contact-item:hover .contact-arrow { color: var(--accent); transform: translate(2px, -2px); } /* ============================================ FOOTER ============================================ */ .footer { border-top: 1px solid var(--border); padding: 28px 0; } .footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); letter-spacing: 0.06em; } /* ============================================ FOCUS ============================================ */ a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* ============================================ TABLET+ ============================================ */ @media (min-width: 768px) { :root { --pad-x: 48px; } .topbar-inner { height: 64px; } .hero { padding: 112px 0 120px; } .section { padding: 96px 0; } .meta { grid-template-columns: repeat(2, 1fr); gap: 24px; } .meta > div { flex-direction: column; gap: 6px; } .meta dt { font-size: 11px; min-width: 0; } } /* ============================================ REDUCED MOTION ============================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* ============================================ MOBILE TOPBAR (below 1100px) Status centered, quick-nav becomes a dropdown opened by the hamburger. ============================================ */ @media (max-width: 1099px) { .topbar-inner { position: relative; } /* Hamburger appears only here */ .menu-toggle { display: inline-flex; } /* OPEN TO WORK centered at the top */ .status { position: absolute; left: 50%; transform: translateX(-50%); } /* Quick-nav as a full-width dropdown panel under the bar */ .topnav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: 6px 0; background: var(--surface); border-bottom: 1px solid var(--border-strong); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45); } .topnav.is-open { display: flex; } .topnav a { padding: 14px var(--pad-x); font-size: 13px; letter-spacing: 0.1em; color: var(--text-muted); } .topnav a:active { color: var(--accent); } } /* ============================================ DESKTOP MARGINALIA (1100px+) Three-column grid: codes/status sit in the side margins, content fills the wider central column. Container max bumped to 1280px to give the central column 900px so skill cards have room for long names. ============================================ */ @media (min-width: 1100px) { :root { --container-max: 1280px; } /* Three-column grid: left margin, wider central column, right margin */ .hero > .container, .section > .container { display: grid; grid-template-columns: 1fr minmax(0, 900px) 1fr; column-gap: 40px; align-items: start; } /* Default placement: central column (sections fill the available width) */ .hero > .container > *, .section > .container > *, .section > .container > .section-head > * { grid-column: 2; } /* Dissolve section-head so its children join the main grid */ .section-head { display: contents; } /* Section codes in the left margin, anchored to its inner edge (adjacent to the central column) */ .hero > .container > .section-code, .section > .container > .section-head > .section-code { grid-column: 1; justify-self: end; } /* Section status pills in the right margin, anchored to its inner edge */ .section > .container > .section-head > .section-status { grid-column: 3; justify-self: start; } /* Topbar keeps its flex layout (brand left, nav centered, status right) so the longer labels never get squeezed into the narrow margins */ .topnav { display: flex; align-items: center; } .topnav a:not(:last-child)::after { content: ">"; color: var(--border-strong); margin: 0 10px; } /* Hero meta fills the central column so its border-top aligns with the section divider below — gives the hero the same visual width as other sections */ .meta { gap: 48px; } /* Long mission lists become two-column at desktop for better visual cohesion within the wider central column */ .exp-missions { columns: 2; column-gap: 40px; } .exp-missions > li { break-inside: avoid; } }