/* ============================================================ DESIGN SYSTEM — QuantCareers Les polices --font-serif/sans/mono sont injectées par next/font dans layout.tsx via des variables CSS sur . ============================================================ */ :root { --bg: #F4F5F7; --surface: #FFFFFF; --navy: #0C1E35; --navy-mid: #1A3558; --navy-light: #EBF0F7; --gold: #0A5AD6; --gold-mid: #2E75E6; --gold-bg: #EAF1FE; --gold-border: #BBD6FB; --green: #1A6B45; --green-bg: #EAF7F1; --green-border: #7ECFAA; --red: #B33A3A; --red-bg: #FDF0F0; --text: #0C1E35; --text-body: #3A4E60; --muted: #7A8FA0; --border: #E1E4EA; --border-light: #ECEEF2; /* Radius scale — légèrement augmentée pour un rendu plus arrondi */ --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(12,30,53,0.05), 0 2px 8px rgba(12,30,53,0.04); --shadow-md: 0 2px 8px rgba(12,30,53,0.07), 0 8px 24px rgba(12,30,53,0.05); --shadow-lg: 0 4px 24px rgba(12,30,53,0.09), 0 20px 56px rgba(12,30,53,0.07); /* Les valeurs sont les fallbacks ; next/font injecte --font-serif/sans/mono (voir layout.tsx — le slot "serif" charge désormais Plus Jakarta Sans, une sans arrondie, à la place de l'ancienne serif Crimson Pro). */ --serif: var(--font-serif, 'Plus Jakarta Sans'), system-ui, sans-serif; --sans: var(--font-sans, 'Manrope'), system-ui, sans-serif; --mono: var(--font-mono, 'DM Mono'), monospace; /* Note : --gold* est l'unique accent du site (anciennement doré, devenu bleu). Le nom de variable est conservé pour ne pas devoir toucher aux ~40 usages dans ce fichier — seule la valeur a changé. */ } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--sans); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* =========================== NAVIGATION =========================== */ nav { position: sticky; top: 0; z-index: 100; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); } .nav-inner { max-width: 1160px; margin: 0 auto; padding: 0 2rem; height: 60px; display: flex; align-items: center; gap: 3rem; } .nav-logo { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; flex-shrink: 0; } .logo-badge { background: var(--navy); color: white; font-family: var(--mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.08em; padding: 0.3rem 0.5rem; border-radius: var(--r-xs); } .logo-text { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--navy); letter-spacing: 0.01em; } .nav-links { display: flex; gap: 2rem; list-style: none; flex: 1; } .nav-links a { font-size: 0.8rem; font-weight: 500; color: var(--text-body); text-decoration: none; letter-spacing: 0.01em; transition: color 0.15s; } .nav-links a:hover { color: var(--navy); } .nav-links a.active { color: var(--navy); border-bottom: 2px solid var(--gold-mid); padding-bottom: 2px; } .nav-right { display: flex; align-items: center; gap: 1rem; margin-left: auto; } .btn-nav-login { font-size: 0.8rem; font-weight: 500; color: var(--text-body); text-decoration: none; transition: color 0.15s; } .btn-nav-login:hover { color: var(--navy); } .btn-nav-cta { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; color: var(--surface); background: var(--navy); border: 1.5px solid var(--navy); padding: 0.45rem 1.1rem; text-decoration: none; transition: background 0.2s, box-shadow 0.2s; white-space: nowrap; border-radius: var(--r-full); } .btn-nav-cta:hover { background: var(--navy-mid); box-shadow: 0 2px 8px rgba(12,30,53,0.18); } /* =========================== HERO =========================== */ .hero { background: linear-gradient(155deg, var(--surface) 50%, #EBF2FB 100%); border-bottom: 1px solid var(--border); padding: 4rem 2rem 3.5rem; } .hero-inner { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.05fr; gap: 5rem; align-items: center; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.62rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); background: var(--gold-bg); border: 1px solid var(--gold-border); padding: 0.25rem 0.75rem; margin-bottom: 1.5rem; border-radius: var(--r-full); } .hero-title { font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 400; line-height: 1.18; color: var(--navy); margin-bottom: 1.25rem; letter-spacing: -0.01em; } .hero-title em { font-style: italic; color: var(--gold); } .hero-desc { font-size: 0.95rem; color: var(--text-body); line-height: 1.75; max-width: 460px; margin-bottom: 2rem; } .hero-stats { display: flex; gap: 2rem; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border-light); } .hero-stat-val { font-family: var(--mono); font-size: 1.4rem; font-weight: 500; color: var(--navy); display: block; line-height: 1; margin-bottom: 0.3rem; } .hero-stat-label { font-size: 0.7rem; color: var(--muted); letter-spacing: 0.03em; } .hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; } .btn-primary { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em; color: var(--surface); background: var(--navy); border: 1.5px solid var(--navy); padding: 0.7rem 1.6rem; text-decoration: none; transition: background 0.2s, box-shadow 0.2s; cursor: pointer; display: inline-block; border-radius: var(--r-sm); } .btn-primary:hover { background: var(--navy-mid); box-shadow: 0 4px 12px rgba(12,30,53,0.2); } .btn-secondary { font-size: 0.8rem; font-weight: 500; color: var(--navy); background: transparent; border: 1.5px solid var(--border); padding: 0.7rem 1.6rem; text-decoration: none; transition: border-color 0.2s, color 0.2s, background 0.2s; cursor: pointer; display: inline-block; border-radius: var(--r-sm); } .btn-secondary:hover { border-color: var(--navy); background: var(--navy-light); } /* ===== HERO TABLE (preview) ===== */ .hero-table-wrap { background: var(--surface); border: 1.5px solid var(--border); overflow: hidden; box-shadow: var(--shadow-lg); border-radius: var(--r-md); } .hero-table-header { background: var(--navy); padding: 1rem 1.25rem; display: flex; justify-content: space-between; align-items: center; } .hero-table-header-title { font-family: var(--serif); font-size: 0.95rem; font-weight: 500; color: white; letter-spacing: 0.01em; } .hero-table-header-badge { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); } .hero-ranking-table { width: 100%; border-collapse: collapse; } .hero-ranking-table thead th { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: var(--bg); padding: 0.7rem 1rem; text-align: left; border-bottom: 1px solid var(--border); font-weight: 400; } .hero-ranking-table tbody tr { border-bottom: 1px solid var(--border-light); transition: background 0.15s; cursor: pointer; } .hero-ranking-table tbody tr:last-child { border-bottom: none; } .hero-ranking-table tbody tr:hover { background: var(--navy-light); } .hero-ranking-table td { padding: 0.9rem 1rem; font-size: 0.82rem; } .rank-badge { font-family: var(--mono); font-size: 0.62rem; font-weight: 500; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-xs); } .rank-badge-1 { background: #B8860B; color: white; } .rank-badge-2 { background: #8A8A8A; color: white; } .rank-badge-3 { background: #8B6340; color: white; } .rank-badge-n { background: var(--border); color: var(--muted); } .master-name-cell { font-family: var(--serif); font-size: 0.9rem; font-weight: 500; color: var(--navy); display: block; line-height: 1.2; } .master-school-cell { font-size: 0.68rem; color: var(--muted); display: block; margin-top: 0.15rem; } .score-pill { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; padding: 0.2rem 0.6rem; border: 1px solid; display: inline-block; border-radius: var(--r-full); } .score-aaa { color: var(--green); border-color: var(--green-border); background: var(--green-bg); } .score-aa { color: var(--gold); border-color: var(--gold-border); background: var(--gold-bg); } .score-a { color: var(--navy); border-color: var(--border); background: var(--bg); } .pct-bar { display: flex; align-items: center; gap: 0.5rem; } .pct-track { width: 50px; height: 3px; background: var(--border); position: relative; overflow: hidden; flex-shrink: 0; border-radius: var(--r-full); } .pct-fill { position: absolute; top: 0; left: 0; bottom: 0; background: var(--navy); } .pct-val { font-family: var(--mono); font-size: 0.68rem; color: var(--text-body); white-space: nowrap; } .hero-table-footer { padding: 0.75rem 1rem; background: var(--bg); border-top: 1px solid var(--border); text-align: center; font-size: 0.72rem; color: var(--muted); font-family: var(--mono); letter-spacing: 0.05em; } .hero-table-footer a { color: var(--navy); text-decoration: underline; cursor: pointer; } /* =========================== SOCIAL PROOF BAND (marquee) =========================== */ .band-logos { background: var(--surface); border-bottom: 1px solid var(--border); padding: 1.1rem 0; overflow: hidden; } .band-logos-inner { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; gap: 1.5rem; padding: 0 2rem; } .band-label { font-size: 0.68rem; color: var(--muted); letter-spacing: 0.05em; white-space: nowrap; flex-shrink: 0; } .band-divider { width: 1px; height: 18px; background: var(--border); flex-shrink: 0; } .band-scroll-track { overflow: hidden; flex: 1; -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%); } .band-scroll-inner { display: flex; align-items: center; width: max-content; animation: band-marquee 28s linear infinite; } .band-scroll-track:hover .band-scroll-inner { animation-play-state: paused; } @keyframes band-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .band-school { font-family: var(--serif); font-size: 0.88rem; font-weight: 500; color: var(--muted); letter-spacing: 0.01em; white-space: nowrap; padding: 0 1.5rem; } .band-sep { color: var(--border); font-size: 0.7rem; flex-shrink: 0; user-select: none; } /* =========================== SECTION COMMONS =========================== */ .section-wrap { max-width: 1160px; margin: 0 auto; padding: 0 2rem; } .section-head { padding: 4rem 0 2.5rem; } .eyebrow { font-family: var(--mono); font-size: 0.6rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; } .eyebrow::before { content: ''; width: 18px; height: 1.5px; background: var(--gold); flex-shrink: 0; } .section-title { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 400; color: var(--navy); line-height: 1.2; letter-spacing: -0.01em; } .section-title em { font-style: italic; color: var(--gold); } .section-desc { font-size: 0.875rem; color: var(--text-body); line-height: 1.75; margin-top: 0.75rem; max-width: 560px; } /* =========================== FULL RANKING TABLE =========================== */ .section-ranking { padding-bottom: 5rem; border-bottom: 1px solid var(--border-light); } .ranking-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 1rem; } .filter-tabs { display: flex; gap: 0; border: 1px solid var(--border); overflow: hidden; border-radius: var(--r-sm); } .filter-tab { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em; color: var(--text-body); background: var(--surface); border: none; border-right: 1px solid var(--border); padding: 0.5rem 1rem; cursor: pointer; transition: background 0.15s, color 0.15s; } .filter-tab:last-child { border-right: none; } .filter-tab:hover { background: var(--navy-light); } .filter-tab.active { background: var(--navy); color: white; } .ranking-count { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); letter-spacing: 0.06em; } .ranking-table-full { width: 100%; border-collapse: collapse; background: var(--surface); } .ranking-table-full thead th { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: var(--bg); padding: 0.85rem 1.25rem; text-align: left; border-bottom: 1.5px solid var(--border); font-weight: 400; white-space: nowrap; } .ranking-table-full thead th:not(:first-child) { border-left: 1px solid var(--border-light); } .ranking-table-full tbody tr { border-bottom: 1px solid var(--border-light); transition: background 0.12s; cursor: pointer; } .ranking-table-full tbody tr:last-child { border-bottom: none; } .ranking-table-full tbody tr:hover { background: var(--navy-light); } .ranking-table-full tbody tr.top-3 { background: var(--gold-bg); } .ranking-table-full tbody tr.top-3:hover { background: var(--navy-light); } .ranking-table-full td { padding: 1.05rem 1.25rem; font-size: 0.83rem; vertical-align: middle; } .ranking-table-full td:not(:first-child) { border-left: 1px solid var(--border-light); } .score-global { font-family: var(--mono); font-size: 1.1rem; font-weight: 500; color: var(--navy); } .criteria-bars { display: flex; gap: 2px; align-items: flex-end; height: 20px; } .crit-bar { width: 8px; background: var(--navy); opacity: 0.2; border-radius: 1px; transition: opacity 0.2s; } .crit-bar.filled { opacity: 0.8; } tr:hover .crit-bar.filled { opacity: 1; } .ranking-table-full tfoot td { padding: 1.25rem; font-size: 0.78rem; color: var(--muted); text-align: center; background: var(--bg); border-top: 1.5px solid var(--border); font-style: italic; } .rank-n { font-family: var(--mono); font-size: 0.65rem; color: var(--muted); font-weight: 400; } .selectivity-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; vertical-align: middle; } /* =========================== METHODOLOGY =========================== */ .section-method { padding: 5rem 0; border-bottom: 1px solid var(--border-light); background: var(--surface); } .method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; } .method-text p { font-size: 0.875rem; color: var(--text-body); line-height: 1.8; margin-bottom: 1.25rem; } .method-table-wrap { margin-top: 1.5rem; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); } .method-criteria-table { width: 100%; border-collapse: collapse; border: none; } .method-criteria-table thead th { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); background: var(--bg); padding: 0.65rem 1rem; border-bottom: 1px solid var(--border); text-align: left; font-weight: 400; } .method-criteria-table tbody tr { border-bottom: 1px solid var(--border-light); } .method-criteria-table tbody tr:last-child { border-bottom: none; } .method-criteria-table td { padding: 0.75rem 1rem; font-size: 0.8rem; color: var(--text-body); } .method-criteria-table td:first-child { font-family: var(--mono); font-size: 0.6rem; color: var(--gold); letter-spacing: 0.08em; width: 36px; } .method-criteria-table td:last-child { font-family: var(--mono); font-size: 0.65rem; color: var(--muted); text-align: right; } .method-source { margin-top: 1.5rem; padding: 1.25rem; background: var(--navy-light); border-left: 3px solid var(--navy); font-size: 0.8rem; color: var(--text-body); line-height: 1.7; border-radius: var(--r-sm); } .method-source strong { color: var(--navy); font-weight: 600; } /* =========================== MODULES / FEATURES =========================== */ .section-modules { padding: 5rem 0; border-bottom: 1px solid var(--border-light); } .modules-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2.5rem; flex-wrap: wrap; gap: 1rem; } .modules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; background: none; border: none; } .module-card { background: var(--surface); padding: 2rem; border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); transition: background 0.2s, box-shadow 0.2s, transform 0.2s; cursor: default; } .module-card:hover { background: var(--navy-light); box-shadow: var(--shadow-md); transform: translateY(-2px); } .module-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.25rem; } .module-num { font-family: var(--mono); font-size: 0.6rem; color: var(--muted); letter-spacing: 0.1em; } .module-status { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.18rem 0.6rem; border: 1px solid; border-radius: var(--r-full); } .status-live { color: var(--green); border-color: var(--green-border); background: var(--green-bg); } .status-beta { color: var(--gold); border-color: var(--gold-border); background: var(--gold-bg); } .status-soon { color: var(--muted); border-color: var(--border); background: var(--bg); } .module-title { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; color: var(--navy); margin-bottom: 0.6rem; line-height: 1.25; } .module-desc { font-size: 0.8rem; color: var(--text-body); line-height: 1.7; } /* =========================== AGENT IA =========================== */ .section-agent { padding: 5rem 0; border-bottom: 1px solid var(--border-light); background: var(--surface); } .agent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .agent-form-demo { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-md); } .agent-form-header { background: var(--navy); padding: 1rem 1.25rem; } .agent-form-header-title { font-family: var(--mono); font-size: 0.6rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.6); } .agent-form-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; } .agent-field { display: flex; flex-direction: column; gap: 0.3rem; } .agent-field label { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .agent-field select, .agent-field input { background: var(--surface); border: 1px solid var(--border); padding: 0.6rem 0.85rem; font-family: var(--sans); font-size: 0.82rem; color: var(--text); outline: none; transition: border-color 0.15s; appearance: none; width: 100%; border-radius: var(--r-sm); } .agent-field select:focus, .agent-field input:focus { border-color: var(--navy); } .agent-submit { margin-top: 0.5rem; width: 100%; background: var(--navy); color: white; border: none; padding: 0.8rem; font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; transition: background 0.2s, box-shadow 0.2s; border-radius: var(--r-sm); } .agent-submit:hover { background: var(--navy-mid); box-shadow: 0 4px 12px rgba(12,30,53,0.2); } .agent-result { background: var(--surface); border: 1.5px solid var(--border); overflow: hidden; margin-top: 1rem; border-radius: var(--r-sm); box-shadow: var(--shadow-sm); } .agent-result-header { background: var(--green-bg); border-bottom: 1px solid var(--green-border); padding: 0.6rem 1rem; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); } .agent-result-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; } .result-row { display: grid; grid-template-columns: 110px 1fr; gap: 0.5rem; font-size: 0.78rem; line-height: 1.5; } .result-key { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); padding-top: 0.05rem; } .result-val { color: var(--text-body); } .result-val strong { color: var(--navy); font-weight: 600; } .agent-footer { padding: 0.75rem 1.25rem; border-top: 1px solid var(--border); background: var(--bg); font-family: var(--mono); font-size: 0.58rem; color: var(--muted); letter-spacing: 0.06em; } /* =========================== CTA =========================== */ .section-cta { padding: 5rem 0; background: var(--navy); } .cta-inner { max-width: 1160px; margin: 0 auto; padding: 0 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .cta-title { font-family: var(--serif); font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 300; color: white; line-height: 1.2; margin-bottom: 1rem; } .cta-title em { font-style: italic; color: var(--gold-mid); } .cta-desc { font-size: 0.875rem; color: rgba(255,255,255,0.55); line-height: 1.75; } .cta-form-wrap { display: flex; flex-direction: column; gap: 0.75rem; } .cta-form { display: flex; } .cta-email { flex: 1; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-right: none; padding: 0.75rem 1rem; font-family: var(--sans); font-size: 0.85rem; color: white; outline: none; transition: background 0.2s; border-radius: var(--r-sm) 0 0 var(--r-sm); } .cta-email::placeholder { color: rgba(255,255,255,0.3); } .cta-email:focus { background: rgba(255,255,255,0.12); } .cta-btn { background: var(--gold-mid); color: var(--navy); border: 1px solid var(--gold-mid); padding: 0.75rem 1.5rem; font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; transition: background 0.2s; white-space: nowrap; border-radius: 0 var(--r-sm) var(--r-sm) 0; } .cta-btn:hover { background: var(--gold); } .cta-note { font-family: var(--mono); font-size: 0.58rem; color: rgba(255,255,255,0.3); letter-spacing: 0.06em; } .cta-includes { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.5rem; } .cta-include-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: rgba(255,255,255,0.65); } .cta-include-item::before { content: '✓'; color: var(--gold-mid); font-weight: 700; flex-shrink: 0; } /* =========================== FOOTER =========================== */ footer { background: var(--surface); border-top: 1px solid var(--border); padding: 2rem; } .footer-inner { max-width: 1160px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .footer-brand { font-family: var(--serif); font-size: 1rem; font-weight: 500; color: var(--navy); } .footer-meta { font-family: var(--mono); font-size: 0.58rem; color: var(--muted); letter-spacing: 0.08em; text-align: center; } .footer-links { display: flex; gap: 1.5rem; list-style: none; } .footer-links a { font-size: 0.75rem; color: var(--muted); text-decoration: none; transition: color 0.15s; } .footer-links a:hover { color: var(--navy); } /* =========================== ANIMATIONS =========================== */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.shown { opacity: 1; transform: none; } .school-badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--mono); font-weight: 500; color: white; letter-spacing: 0; font-size: 0.58rem; } .master-cell-inner { display: flex; align-items: center; gap: 0.65rem; } /* =========================== HAMBURGER MENU =========================== */ .nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; background: none; border: none; cursor: pointer; padding: 4px; margin-left: auto; flex-shrink: 0; } .nav-hamburger span { display: block; height: 1.5px; background: var(--navy); transition: transform 0.2s, opacity 0.2s; transform-origin: center; } .nav-hamburger--open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-hamburger--open span:nth-child(2) { opacity: 0; } .nav-hamburger--open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .nav-mobile-menu { display: none; flex-direction: column; background: var(--surface); border-top: 1px solid var(--border); padding: 0.5rem 0 1rem; } .nav-mobile-link { font-size: 0.875rem; font-weight: 500; color: var(--text-body); text-decoration: none; padding: 0.75rem 2rem; border-bottom: 1px solid var(--border-light); transition: background 0.15s; } .nav-mobile-link:hover, .nav-mobile-link.active { background: var(--navy-light); color: var(--navy); } .nav-mobile-link.active { border-left: 3px solid var(--gold-mid); padding-left: calc(2rem - 3px); } .nav-mobile-actions { display: flex; gap: 0.75rem; padding: 1rem 2rem 0; } /* =========================== MASTER NAME LINK =========================== */ a.master-name-cell { text-decoration: none; transition: color 0.15s; } a.master-name-cell:hover { color: var(--gold); } /* =========================== FICHE MASTER DÉTAIL =========================== */ .master-detail-wrap { max-width: 1160px; margin: 0 auto; padding: 3rem 2rem 5rem; } .master-detail-breadcrumb { display: flex; align-items: center; gap: 0.75rem; font-family: var(--mono); font-size: 0.62rem; color: var(--muted); letter-spacing: 0.06em; margin-bottom: 2.5rem; } .master-detail-breadcrumb a { color: var(--navy); text-decoration: none; transition: color 0.15s; } .master-detail-breadcrumb a:hover { color: var(--gold); } .master-detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; padding-bottom: 2rem; border-bottom: 1.5px solid var(--border); margin-bottom: 2rem; flex-wrap: wrap; } .master-detail-header-left { display: flex; align-items: center; gap: 1.25rem; } .master-detail-rank { font-family: var(--mono); font-size: 0.65rem; color: var(--muted); letter-spacing: 0.1em; align-self: flex-start; padding-top: 0.2rem; } .master-detail-title { font-family: var(--serif); font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 400; color: var(--navy); line-height: 1.2; margin-bottom: 0.35rem; } .master-detail-school { font-size: 0.8rem; color: var(--muted); letter-spacing: 0.01em; } .master-detail-score { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; } .master-detail-score-val { font-family: var(--mono); font-size: 1.1rem; font-weight: 500; color: var(--navy); } /* Métriques clés */ .master-detail-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; background: none; border: none; margin-bottom: 3rem; } .master-detail-metric { background: var(--surface); padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.35rem; border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: var(--shadow-sm); } .master-detail-metric-val { font-family: var(--mono); font-size: 1rem; font-weight: 500; color: var(--navy); line-height: 1; } .master-detail-metric-label { font-size: 0.68rem; color: var(--muted); letter-spacing: 0.03em; } /* Corps de la fiche */ .master-detail-body { display: grid; grid-template-columns: 1fr 300px; gap: 4rem; align-items: start; } .master-detail-section { margin-bottom: 2.5rem; } .master-detail-section .eyebrow { margin-bottom: 1rem; } .master-detail-desc { font-size: 0.9rem; color: var(--text-body); line-height: 1.85; } .master-detail-courses { list-style: none; display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; } .master-detail-courses li { font-size: 0.85rem; color: var(--text-body); padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--border-light); display: flex; align-items: center; gap: 0.75rem; line-height: 1.5; } .master-detail-courses li:last-child { border-bottom: none; } .master-detail-courses li::before { content: ''; width: 5px; height: 5px; background: var(--gold); border-radius: 50%; flex-shrink: 0; } /* Colonne latérale */ .master-detail-aside { position: sticky; top: 80px; } .master-detail-infocard { background: var(--surface); border: 1px solid var(--border); overflow: hidden; border-radius: var(--r-md); box-shadow: var(--shadow-md); } .master-detail-infocard-title { background: var(--navy); color: white; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.75rem 1.25rem; } .master-detail-inforow { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--border-light); } .master-detail-inforow:last-child { border-bottom: none; } .master-detail-infokey { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .master-detail-infoval { font-size: 0.85rem; color: var(--text-body); line-height: 1.5; } .master-detail-link { font-size: 0.82rem; color: var(--navy); text-decoration: none; font-weight: 500; transition: color 0.15s; } .master-detail-link:hover { color: var(--gold); } /* Responsive fiche */ @media (max-width: 860px) { .master-detail-body { grid-template-columns: 1fr; gap: 2rem; } .master-detail-aside { position: static; } .master-detail-metrics { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .master-detail-header-left { flex-wrap: wrap; } .master-detail-metrics { grid-template-columns: 1fr 1fr; } .master-detail-wrap { padding: 2rem 1.25rem 4rem; } } /* =========================== BLOG — LISTING =========================== */ .section-blog-listing { padding-bottom: 5rem; } .blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; background: none; border: none; } .blog-card { background: var(--surface); padding: 2rem; text-decoration: none; display: flex; flex-direction: column; gap: 0.75rem; transition: background 0.2s, box-shadow 0.2s, transform 0.2s; border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); } .blog-card:hover { background: var(--navy-light); box-shadow: var(--shadow-md); transform: translateY(-2px); } .blog-card-top { display: flex; justify-content: space-between; align-items: center; } .blog-card-read { font-family: var(--mono); font-size: 0.58rem; color: var(--muted); letter-spacing: 0.06em; } .blog-card-title { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; color: var(--navy); line-height: 1.25; } .blog-card-excerpt { font-size: 0.82rem; color: var(--text-body); line-height: 1.7; flex: 1; } .blog-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 0.75rem; border-top: 1px solid var(--border-light); margin-top: auto; } .blog-card-author { font-family: var(--mono); font-size: 0.6rem; color: var(--muted); letter-spacing: 0.06em; } .blog-card-date { font-family: var(--mono); font-size: 0.6rem; color: var(--muted); letter-spacing: 0.04em; } /* =========================== ARTICLE INDIVIDUEL =========================== */ .article-wrap { max-width: 1160px; margin: 0 auto; padding: 3rem 2rem 5rem; } .article-layout { display: grid; grid-template-columns: 1fr 280px; gap: 5rem; align-items: start; } .article-header { padding-bottom: 2rem; border-bottom: 1.5px solid var(--border); margin-bottom: 2.5rem; } .article-title { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 400; color: var(--navy); line-height: 1.18; letter-spacing: -0.01em; margin-bottom: 1rem; } .article-excerpt { font-size: 1rem; color: var(--text-body); line-height: 1.75; font-style: italic; margin-bottom: 1.25rem; } .article-meta { display: flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.62rem; color: var(--muted); letter-spacing: 0.05em; } .article-meta-sep { color: var(--border); } .article-body { } .article-section { margin-bottom: 2rem; } .article-section-title { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; color: var(--navy); margin-bottom: 0.85rem; line-height: 1.25; padding-top: 0.5rem; border-top: 1px solid var(--border-light); } .article-paragraph { font-size: 0.925rem; color: var(--text-body); line-height: 1.9; margin-bottom: 1rem; } .article-paragraph:last-child { margin-bottom: 0; } /* Sidebar article */ .article-aside { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 1.5rem; } .article-related { background: var(--surface); border: 1px solid var(--border); overflow: hidden; border-radius: var(--r-md); box-shadow: var(--shadow-sm); } .article-related-title { background: var(--navy); color: white; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.75rem 1.25rem; } .article-related-item { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--border-light); text-decoration: none; transition: background 0.15s; } .article-related-item:last-child { border-bottom: none; } .article-related-item:hover { background: var(--navy-light); } .article-related-name { font-family: var(--serif); font-size: 0.9rem; font-weight: 500; color: var(--navy); line-height: 1.3; } .article-related-read { font-family: var(--mono); font-size: 0.58rem; color: var(--muted); letter-spacing: 0.05em; } .article-aside-cta { background: var(--navy); padding: 1.5rem; border-radius: var(--r-md); } .article-aside-cta-title { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; color: white; margin-bottom: 0.5rem; } .article-aside-cta-desc { font-size: 0.78rem; color: rgba(255,255,255,0.55); line-height: 1.65; margin-bottom: 1rem; } /* Responsive blog */ @media (max-width: 860px) { .article-layout { grid-template-columns: 1fr; gap: 3rem; } .article-aside { position: static; } .blog-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .article-wrap { padding: 2rem 1.25rem 4rem; } .blog-grid { grid-template-columns: 1fr; } } /* =========================== PAGE CONTACT =========================== */ .section-contact { padding: 5rem 0 6rem; } .contact-layout { display: grid; grid-template-columns: 1fr 340px; gap: 3rem; align-items: start; margin-top: 3rem; } .contact-form-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; padding: 2.5rem; } .contact-form { display: flex; flex-direction: column; gap: 1.25rem; } .contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .contact-field { display: flex; flex-direction: column; gap: 0.4rem; } .contact-label { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .contact-input { font-family: var(--sans); font-size: 0.875rem; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.65rem 0.875rem; outline: none; transition: border-color 0.15s; width: 100%; } .contact-input:focus { border-color: var(--navy-mid); } .contact-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237A8FA0' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.875rem center; padding-right: 2.5rem; cursor: pointer; } .contact-textarea { resize: vertical; min-height: 140px; } .contact-error { font-size: 0.8rem; color: var(--red); background: var(--red-bg); border: 1px solid #e9b0b0; border-radius: 0.5rem; padding: 0.65rem 0.875rem; } .contact-error a { color: var(--red); font-weight: 600; } /* État succès */ .contact-success { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 3rem 2rem; } .contact-success-icon { width: 3rem; height: 3rem; border-radius: 50%; background: var(--green-bg); border: 2px solid var(--green-border); color: var(--green); font-size: 1.25rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; } .contact-success-title { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--navy); margin-bottom: 0.5rem; } .contact-success-desc { font-size: 0.9rem; color: var(--text-body); } /* Colonne latérale */ .contact-aside { position: sticky; top: 80px; } .contact-info-card { background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; padding: 1.75rem; display: flex; flex-direction: column; gap: 0.5rem; } .contact-info-title { font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-top: 0.25rem; } .contact-info-email { font-family: var(--mono); font-size: 0.82rem; color: var(--navy); font-weight: 500; text-decoration: none; } .contact-info-email:hover { text-decoration: underline; } .contact-info-sep { height: 1px; background: var(--border-light); margin: 0.5rem 0; } .contact-info-text { font-size: 0.82rem; color: var(--text-body); line-height: 1.55; } /* =========================== TABLEAU SCROLLABLE =========================== */ .table-scroll-wrap { width: 100%; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-md); } /* =========================== RESPONSIVE =========================== */ @media (max-width: 960px) { .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; } .method-grid { grid-template-columns: 1fr; gap: 2.5rem; } .agent-grid { grid-template-columns: 1fr; gap: 2.5rem; } .cta-inner { grid-template-columns: 1fr; gap: 2rem; } .modules-grid { grid-template-columns: 1fr 1fr; } /* Masquer les colonnes secondaires sur tablette */ .col-hide-md { display: none; } } @media (max-width: 640px) { /* Navigation : afficher le hamburger, masquer les liens desktop */ .nav-links { display: none; } .nav-right { display: none; } .nav-hamburger { display: flex; } .nav-mobile-menu { display: flex; } .nav-inner { padding: 0 1.25rem; } /* Paddings latéraux réduits */ .section-wrap { padding: 0 1.25rem; } .hero { padding: 2.5rem 1.25rem 2rem; } /* Paddings verticaux de sections réduits */ .section-head { padding: 2.5rem 0 1.75rem; } .section-modules, .section-method, .section-agent { padding: 3rem 0; } .section-cta { padding: 3rem 0; } .section-ranking { padding-bottom: 3rem; } .section-blog-listing{ padding-bottom: 3rem; } .modules-grid { grid-template-columns: 1fr; } .hero-stats { flex-wrap: wrap; gap: 1.25rem; } .ranking-controls { flex-direction: column; align-items: flex-start; } /* Logo band : masquer label + séparateur, garder le défilement seul */ .band-label { display: none; } .band-divider { display: none; } .band-logos-inner { gap: 0; padding: 0; } .ranking-table-full { font-size: 0.78rem; } .ranking-table-full th, .ranking-table-full td { padding: 0.75rem; } /* Masquer colonnes secondaires sur mobile */ .col-hide-sm { display: none; } /* Footer : colonne sur mobile, liens qui wrappent */ .footer-inner { flex-direction: column; align-items: flex-start; gap: 1.25rem; } .footer-meta { text-align: left; } .footer-links { flex-wrap: wrap; gap: 0.5rem 1rem; } /* Contact : colonne unique, padding réduit */ .contact-layout { grid-template-columns: 1fr; } .contact-row { grid-template-columns: 1fr; } .contact-form-wrap { padding: 1.5rem 1.25rem; } /* CTA : formulaire en colonne */ .cta-form { flex-direction: column; } .cta-btn { width: 100%; } /* Agent résultat : colonne clé réduite */ .result-row { grid-template-columns: 85px 1fr; } } @media (max-width: 480px) { /* Hero table : permettre le scroll horizontal sur les très petits écrans */ .hero-table-wrap { overflow-x: auto; } /* Fiche master : score passe sous le titre si manque de place */ .master-detail-header { flex-direction: column; align-items: flex-start; gap: 1rem; } }