/* ============================================================ portfolio.css — design « Portfolio Pro » (2 thèmes via variables) Thème par défaut = "editorial" (clair). Thème "console" (sombre/terminal) appliqué via . Le switch (assets/js/theme.js) bascule data-theme et le mémorise dans localStorage('pfpro-dir'). ============================================================ */ /* ---------- THÈME ÉDITORIAL (défaut) ---------- */ :root { --pf-bg:#FBF6F2; --pf-surface:#ffffff; --pf-ink:#191427; --pf-muted:#6b6376; --pf-soft:#9089a0; --pf-accent:#E11765; --pf-accent2:#2A45D6; --pf-line:#EFE6DE; --pf-radius:16px; --pf-shadow:0 6px 20px rgba(120,60,90,.05); --pf-chip:#FBE3EE; --pf-chip-ink:#B81259; --pf-headerbg:rgba(251,246,242,.86); --pf-display:'Bricolage Grotesque', sans-serif; --pf-body:'Hanken Grotesk', sans-serif; --pf-serif:'Newsreader', serif; --pf-mono:'JetBrains Mono', monospace; --pf-nav-font:'Hanken Grotesk', sans-serif; /* nav + badges + radar labels */ --pf-footer-bg:#191427; --pf-footer-ink:#a8a1b6; --pf-footer-strong:#ffffff; --pf-footer-link:#ff7eb0; --pf-footer-rule:rgba(255,255,255,.14); --pf-topbar:linear-gradient(90deg,#E11765 0%,#9A2BC4 50%,#2A45D6 100%); --pf-page-bg-image:none; --pf-h1-mark:'.'; } /* ---------- THÈME CONSOLE (sombre / terminal) ---------- */ html[data-theme="console"] { --pf-bg:#0A0E1A; --pf-surface:rgba(255,255,255,.035); --pf-ink:#eef2ff; --pf-muted:#8b93b0; --pf-soft:#6f7896; --pf-accent:#7CF2C9; --pf-accent2:#7CF2C9; --pf-line:rgba(255,255,255,.1); --pf-radius:12px; --pf-shadow:none; --pf-chip:rgba(124,242,201,.1); --pf-chip-ink:#7CF2C9; --pf-headerbg:rgba(8,11,22,.86); --pf-display:'Space Grotesk', sans-serif; --pf-body:'Space Grotesk', sans-serif; --pf-serif:'Space Grotesk', sans-serif; --pf-mono:'JetBrains Mono', monospace; --pf-nav-font:'JetBrains Mono', monospace; --pf-footer-bg:#06090F; --pf-footer-ink:#8b93b0; --pf-footer-strong:#eef2ff; --pf-footer-link:#7CF2C9; --pf-footer-rule:rgba(255,255,255,.1); --pf-topbar:transparent; --pf-page-bg-image:radial-gradient(60% 50% at 80% 0%,rgba(42,69,214,.16),transparent 70%),radial-gradient(50% 40% at 0% 20%,rgba(225,23,101,.12),transparent 70%); --pf-h1-mark:'_'; } /* ---------- BASE ---------- */ * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--pf-bg); background-image:var(--pf-page-bg-image); background-attachment:fixed; color:var(--pf-ink); font-family:var(--pf-body); -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,p,ul { margin:0; padding:0; } ul { list-style:none; } a { color:inherit; } ::selection { background:var(--pf-accent); color:#fff; } .pf-wrap { max-width:1180px; margin:0 auto; padding:0 30px; } /* fin liseré haut (masqué en console) */ .pf-topbar { height:4px; background:var(--pf-topbar); } html[data-theme="console"] .pf-topbar { display:none; } /* ---------- HEADER ---------- */ .pf-header { position:sticky; top:0; z-index:50; background:var(--pf-headerbg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--pf-line); } .pf-header-inner { max-width:1180px; margin:0 auto; padding:13px 30px; display:flex; align-items:center; gap:22px; } /* logo éditorial */ .pf-logo-ed { display:flex; align-items:center; gap:11px; text-decoration:none; flex:none; } .pf-logo-ed .photo { width:42px; height:42px; border-radius:50%; object-fit:cover; flex:none; background:linear-gradient(135deg,var(--pf-accent),var(--pf-accent2)); } .pf-logo-ed .name { font-family:var(--pf-display); font-weight:700; font-size:18px; letter-spacing:-.01em; color:var(--pf-ink); } .pf-logo-ed .name b { color:var(--pf-accent); font-weight:700; } .pf-logo-ed .tag { font-family:var(--pf-serif); font-style:italic; font-size:12.5px; color:var(--pf-soft); margin-top:1px; display:block; } /* logo console */ .pf-logo-co { display:none; align-items:center; gap:10px; text-decoration:none; flex:none; font-family:var(--pf-mono); } .pf-logo-co .dot { width:10px; height:10px; border-radius:50%; background:var(--pf-accent); box-shadow:0 0 10px var(--pf-accent); } .pf-logo-co .prompt { font-weight:700; font-size:14px; color:var(--pf-ink); } .pf-logo-co .prompt .at { color:var(--pf-accent); } .pf-logo-co .prompt .cwd { color:var(--pf-soft); } html[data-theme="console"] .pf-logo-ed { display:none; } html[data-theme="console"] .pf-logo-co { display:flex; } /* ---------- NAV ---------- */ .pf-nav { margin-left:auto; display:flex; align-items:center; gap:3px; font-family:var(--pf-nav-font); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .pf-nav::-webkit-scrollbar { display:none; } .pf-nav a { padding:8px 14px; border-radius:999px; text-decoration:none; font-size:14px; font-weight:600; color:var(--pf-muted); transition:all .18s ease; white-space:nowrap; } .pf-nav a.is-active { color:var(--pf-accent); background:var(--pf-chip); } /* préfixe "./" sur les liens en console */ html[data-theme="console"] .pf-nav a::before { content:"./"; } /* ---------- SWITCH DE THÈME (knob coulissant) ---------- */ .pf-theme-toggle { margin-left:9px; flex:none; position:relative; display:inline-flex; align-items:center; width:62px; height:30px; padding:0; border:1px solid var(--pf-line); border-radius:999px; background:var(--pf-chip); cursor:pointer; transition:background .2s ease; } .pf-theme-toggle .knob { position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,var(--pf-accent),var(--pf-accent2)); box-shadow:0 2px 7px rgba(0,0,0,.22); display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:700; line-height:1; font-family:'JetBrains Mono',monospace; transform:translateX(0); transition:transform .24s cubic-bezier(.4,1.3,.5,1); } .pf-theme-toggle .knob::after { content:"✎"; } html[data-theme="console"] .pf-theme-toggle .knob { transform:translateX(32px); } html[data-theme="console"] .pf-theme-toggle .knob::after { content:">_"; } .pf-theme-toggle .ed-glyph { position:absolute; left:9px; font-size:11px; opacity:0; transition:opacity .2s ease; } .pf-theme-toggle .co-glyph { position:absolute; right:8px; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; color:var(--pf-soft); opacity:.55; transition:opacity .2s ease; } html[data-theme="console"] .pf-theme-toggle .ed-glyph { opacity:.4; } html[data-theme="console"] .pf-theme-toggle .co-glyph { opacity:0; } /* ---------- GRILLE PRINCIPALE ---------- */ .pf-grid { max-width:1180px; margin:0 auto; padding:0 30px; display:grid; grid-template-columns:minmax(0,1fr) 226px; gap:52px; align-items:start; } .pf-main { padding:52px 0 120px; min-width:0; } /* ---------- EN-TÊTE DE PAGE ---------- */ .pf-eyebrow { font-size:12px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--pf-accent2); margin-bottom:13px; } .pf-prompt { font-family:var(--pf-mono); font-size:12.5px; color:var(--pf-accent); margin-bottom:13px; display:none; } html[data-theme="console"] .pf-eyebrow { display:none; } html[data-theme="console"] .pf-prompt { display:block; } .pf-h1 { font-family:var(--pf-display); font-weight:700; font-size:clamp(38px,6vw,62px); line-height:1.04; letter-spacing:-.025em; color:var(--pf-ink); margin:0 0 8px; } .pf-h1::after { content:var(--pf-h1-mark); color:var(--pf-accent); } /* ---------- SECTIONS / CARTES ---------- */ .pf-section { scroll-margin-top:88px; } .pf-section-head { display:flex; align-items:center; gap:10px; margin-bottom:18px; } .pf-section-head h2 { font-family:var(--pf-display); font-weight:600; font-size:22px; color:var(--pf-ink); margin:0; } .pf-section-head .rule { flex:1; height:1px; background:var(--pf-line); } .pf-card { padding:24px 26px; background:var(--pf-surface); border:1px solid var(--pf-line); border-radius:var(--pf-radius); box-shadow:var(--pf-shadow); } .pf-prose { font-family:var(--pf-serif); font-size:18px; line-height:1.62; color:var(--pf-ink); max-width:66ch; display:flex; flex-direction:column; gap:16px; } .pf-quote { margin:28px 0 0; padding:22px 26px; border-left:3px solid var(--pf-accent); background:var(--pf-surface); border-radius:0 var(--pf-radius) var(--pf-radius) 0; box-shadow:var(--pf-shadow); font-family:var(--pf-display); font-weight:600; font-size:18px; line-height:1.45; color:var(--pf-ink); text-wrap:pretty; } .pf-icon-pastille { width:38px; height:38px; border-radius:11px; background:var(--pf-chip); display:flex; align-items:center; justify-content:center; font-size:18px; flex:none; } /* ---------- BARRES DE COMPÉTENCE + RADAR ---------- */ .pf-skills-overview { margin-top:28px; padding:26px; background:var(--pf-surface); border:1px solid var(--pf-line); border-radius:var(--pf-radius); box-shadow:var(--pf-shadow); display:grid; grid-template-columns:1fr 320px; gap:30px; align-items:center; } .pf-bar-row { display:flex; align-items:center; gap:11px; } .pf-bar-row .label { font-size:13px; font-weight:600; color:var(--pf-ink); width:96px; flex:none; font-family:var(--pf-nav-font); } .pf-bar { flex:1; height:7px; border-radius:99px; background:var(--pf-chip); overflow:hidden; } .pf-bar > span { display:block; height:100%; background:linear-gradient(90deg,var(--pf-accent),var(--pf-accent2)); border-radius:99px; } .pf-bar-row .lvl { font-size:11.5px; font-weight:700; color:var(--pf-accent); width:64px; flex:none; text-align:right; } .pf-radar { width:100%; max-width:320px; height:auto; display:block; margin:0 auto; } .pf-radar .ring { fill:none; stroke:var(--pf-line); stroke-width:1; } .pf-radar .axis { stroke:var(--pf-line); stroke-width:1; } .pf-radar .axis-label { font-size:12px; font-weight:700; fill:var(--pf-muted); font-family:var(--pf-nav-font); } .pf-radar .shape { fill:var(--pf-accent); fill-opacity:.16; stroke:var(--pf-accent); stroke-width:2.5; stroke-linejoin:round; } /* ---------- EXPÉRIENCES : badge logo, dates, retour, regroupement ---------- */ .pf-exp-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .pf-logo-badge { width:38px; height:38px; flex:none; background:#fff; border:1px solid var(--pf-line); border-radius:9px; object-fit:contain; } .pf-exp-head h3 { font-family:var(--pf-display); font-weight:600; font-size:20px; color:var(--pf-ink); margin:0; } .pf-date-badge { margin-left:auto; font-size:12.5px; font-weight:600; color:var(--pf-accent2); background:var(--pf-chip); padding:3px 11px; border-radius:999px; white-space:nowrap; font-family:var(--pf-nav-font); } .pf-retour { margin-top:14px; padding:14px 16px; background:var(--pf-chip); border-radius:12px; } .pf-retour .k { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--pf-chip-ink); margin-bottom:5px; } /* regroupement visuel d'une sous-expérience (mission rattachée à un parent) */ .pf-exp--child { position:relative; margin-left:34px; } .pf-exp--child .rail { position:absolute; left:-18px; top:-16px; bottom:0; width:2px; background:var(--pf-line); } .pf-exp--child .tick { position:absolute; left:-18px; top:38px; width:16px; height:2px; background:var(--pf-line); } .pf-exp--child .node { position:absolute; left:-22px; top:33px; width:10px; height:10px; border-radius:50%; background:var(--pf-surface); border:2px solid var(--pf-accent2); } /* projets IN'TECH (grille texte + capture) */ .pf-project-row { padding:18px 20px; border:1px solid var(--pf-line); border-radius:14px; display:grid; grid-template-columns:1fr 180px; gap:20px; align-items:start; } .pf-project-shot { width:100%; height:120px; align-self:start; border-radius:12px; object-fit:cover; background:var(--pf-chip); border:1px solid var(--pf-line); } .pf-project-shot--empty { display:flex; align-items:center; justify-content:center; text-align:center; font-size:12.5px; color:var(--pf-soft); padding:8px; } /* listes à puces communes */ .pf-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; } .pf-list li { position:relative; padding-left:20px; font-size:14.5px; line-height:1.5; color:var(--pf-ink); text-wrap:pretty; } .pf-list li::before { content:""; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:2px; background:var(--pf-accent); } /* ---------- BLOCS DE CODE (archives) ---------- */ .pf-pre { background:var(--pf-bg); border:1px solid var(--pf-line); border-radius:12px; padding:18px 20px; overflow-x:auto; font-family:var(--pf-mono); font-size:12.5px; line-height:1.6; color:var(--pf-ink); } /* ---------- CARTES DE LIENS (Annexes) ---------- */ .pf-links-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; } .pf-link-card .title { font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--pf-accent); margin-bottom:12px; } .pf-link-card .items { display:flex; flex-direction:column; gap:9px; } .pf-link-item { display:flex; align-items:center; gap:9px; font-size:15px; font-weight:600; color:var(--pf-ink); text-decoration:none; transition:color .18s ease; } .pf-link-item:hover { color:var(--pf-accent); } .pf-link-item .dot { width:7px; height:7px; border-radius:50%; background:var(--pf-accent2); flex:none; } .pf-link-item svg { margin-left:auto; opacity:.5; flex:none; } .pf-cv-card { display:flex; align-items:center; gap:15px; padding:22px; text-decoration:none; color:var(--pf-ink); transition:transform .2s ease; } .pf-cv-card:hover { transform:translateY(-3px); } /* ---------- RAIL DROIT (scrollspy) ---------- */ .pf-aside { position:sticky; top:86px; padding:52px 0 0; display:flex; flex-direction:column; gap:7px; } .pf-aside .head { font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--pf-soft); margin-bottom:7px; font-family:var(--pf-nav-font); } .pf-toc-link { display:flex; align-items:center; gap:11px; padding:6px 4px; text-decoration:none; color:var(--pf-muted); font-size:13.5px; font-weight:500; transition:all .18s ease; line-height:1.3; } .pf-toc-link .tick { flex:none; width:12px; height:2px; border-radius:2px; background:var(--pf-soft); transition:all .2s ease; } .pf-toc-link.is-active { color:var(--pf-ink); font-weight:700; } .pf-toc-link.is-active .tick { width:22px; background:var(--pf-accent); } .pf-social { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--pf-surface); border:1px solid var(--pf-line); color:var(--pf-muted); transition:all .18s ease; } .pf-social:hover { color:var(--pf-accent); transform:translateY(-2px); } /* ---------- FOOTER ---------- */ .pf-footer { background:var(--pf-footer-bg); color:var(--pf-footer-ink); } .pf-footer a { color:var(--pf-footer-link); } .pf-footer-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:46px; margin-top:20px; } .pf-footer-link { font-size:13.5px; color:var(--pf-footer-strong); text-decoration:none; border-bottom:1px solid var(--pf-footer-rule); transition:color .18s ease; } .pf-footer-link:hover { color:var(--pf-footer-link); } /* ---------- BOUTON RETOUR EN HAUT ---------- */ .pf-totop { position:fixed; bottom:26px; right:26px; z-index:95; width:46px; height:46px; border:1px solid var(--pf-line); border-radius:50%; background:var(--pf-surface); color:var(--pf-accent); box-shadow:var(--pf-shadow); cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease; } .pf-totop:hover { border-color:var(--pf-accent); } .pf-totop.is-visible { opacity:1; pointer-events:auto; transform:translateY(0); } /* ---------- RESPONSIVE ---------- */ @media (max-width:860px) { .pf-grid { grid-template-columns:1fr; gap:0; } .pf-aside { display:none; } .pf-skills-overview { grid-template-columns:1fr; } .pf-links-grid { grid-template-columns:1fr; } .pf-footer-grid { grid-template-columns:1fr; gap:26px; } .pf-project-row { grid-template-columns:1fr; } .pf-project-shot { height:160px; } } @media (max-width:600px) { .pf-header-inner { padding:11px 18px; gap:12px; } .pf-wrap, .pf-grid { padding-left:18px; padding-right:18px; } .pf-nav { gap:0; } .pf-nav a { padding:7px 10px; font-size:13px; } .pf-logo-ed .tag { display:none; } .pf-main { padding:34px 0 90px; } }