@import url('./src/fonts/fonts.css');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ── CURSEUR PERSONNALISÉ ──
Le curseur natif n'est masqué QUE si le JS a activé le mode custom
(classe .cursor-custom posée sur uniquement si pointeur fin + JS actif).
Sans JS, sur tactile/stylet, ou si le JS échoue → curseur natif conservé.
Les champs de saisie gardent toujours le curseur texte (accessibilité). */
html.cursor-custom, html.cursor-custom a, html.cursor-custom button { cursor: none !important; }
html.cursor-custom :is(input, textarea, select, [contenteditable="true"]) { cursor: auto !important; }
/* ══════════════════════════════════════════
VARIABLES THÈME
Modifier --g1 et --g2 suffit pour changer
toutes les couleurs dégradées du site.
══════════════════════════════════════════ */
:root {
--g1: #C4B5FD;
--g2: #8EC5FC;
--accent: #C4B5FD;
--accent-rgb: 196,181,253;
--glow-a: rgba(196,181,253,0.36);
--glow-b: rgba(142,197,252,0.18);
--glow-c: rgba(142,197,252,0.14);
--bg: #0D1117;
--border: rgba(255,255,255,0.08);
--border-h: rgba(255,255,255,0.16);
--text: #E8EAF0;
--muted: rgba(232, 234, 240, 0.491);
/* --muted2 supprimé (ratio 2.5:1 non WCAG AA) bascule globale vers --muted (4.6:1, AA) */
/* Padding latéral responsive : aligne le contenu nav (full-width) avec
le contenu des sections (max-width 1280px + margin auto). Utilise
`100%` (largeur body, sans scrollbar) au lieu de `100vw` (qui inclut
le scrollbar) pour éviter un décalage de ~8px sur grand écran.
Aussi déclaré dans proj-shared.css pour les pages projet light qui
ne chargent pas style.css racine. */
--side-pad: max(40px, calc((100% - 1280px) / 2 + 40px));
}
[data-theme="rose"] {
--g1: #FA709A; --g2: #FEE140;
--accent: #FA709A; --accent-rgb: 250,112,154;
--glow-a: rgba(250,112,154,0.36);
--glow-b: rgba(254,225,64,0.16);
--glow-c: rgba(254,225,64,0.10);
}
[data-theme="vert"] {
--g1: #84FAB0; --g2: #8FD3F4;
--accent: #84FAB0; --accent-rgb: 132,250,176;
--glow-a: rgba(132,250,176,0.30);
--glow-b: rgba(143,211,244,0.16);
--glow-c: rgba(143,211,244,0.12);
}
/* ══════════════════════════════════════════
CLASSE UTILITAIRE DÉGRADÉ .grad
─────────────────────────────────────────
Ajoute class="grad" sur N'IMPORTE QUEL
élément texte ou fond pour le passer en
dégradé --g1 → --g2 automatiquement.
Exemples :
Mon texte
Titre
Fond dégradé
Bordure
Le changement de thème (switcher) met à
jour --g1/--g2 → tout change en 1.8s.
══════════════════════════════════════════ */
/* Texte en dégradé (tout élément inline ou block) */
.grad,
.grad-text {
background: linear-gradient(135deg, var(--g1) 0%, var(--g2) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: background 1.8s ease;
}
/* Dégradé horizontal (ticker, filets) */
.grad-h {
background: linear-gradient(90deg, var(--g1) 0%, var(--g2) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: background 1.8s ease;
}
/* Fond dégradé (boutons, backgrounds) */
.grad-bg {
background: linear-gradient(135deg, var(--g1) 0%, var(--g2) 100%);
transition: background 1.8s ease;
}
/* Filet dégradé 2px en haut d'un élément */
.grad-line::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--g1), var(--g2));
transition: background 1.8s ease;
}
/* Filet dégradé 2px en bas (hover sur cartes) */
.grad-line-bottom::after {
content: '';
position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--g1), var(--g2));
transition: background 1.8s ease, transform .4s ease;
}
/* ── CURSEUR PERSONNALISÉ ── */
#cursor-ring {
position: fixed; top: 0; left: 0;
width: 36px; height: 36px; border-radius: 50%;
border: 1.5px solid rgba(255,255,255,0.35);
pointer-events: none; z-index: 9999;
transform: translate(-50%, -50%);
transition: width .25s ease, height .25s ease,
border-color .25s ease, background .25s ease, opacity .3s ease;
will-change: transform;
}
#cursor-dot {
position: fixed; top: 0; left: 0;
width: 5px; height: 5px; border-radius: 50%;
pointer-events: none; z-index: 10000;
transform: translate(-50%, -50%);
will-change: transform;
background: var(--g1);
transition: background .6s ease, transform .12s ease;
}
.cursor-hover #cursor-ring {
width: 56px; height: 56px;
border-color: rgba(var(--accent-rgb), 0.6);
background: rgba(var(--accent-rgb), 0.06);
}
.cursor-hover #cursor-dot { transform: translate(-50%,-50%) scale(1.6); }
.cursor-click #cursor-ring {
width: 28px; height: 28px;
background: rgba(var(--accent-rgb), 0.14);
}
html {
scroll-behavior: smooth;
scroll-padding-top: 72px; /* compense la nav sticky (14px padding + contenu) */
}
/* Toutes les ancres compensent la nav sticky pour ne pas être masquées */
#pingProjet, #pingProcess, #pingContact,
#projet1, #projet2, #projet3 {
scroll-margin-top: 72px;
}
body {
background: var(--bg); color: var(--text);
font-family: 'DM Sans', sans-serif;
font-weight: 300; line-height: 1.6; overflow-x: hidden;
}
/* ── TACHES LUMINEUSES ── */
body::before {
content: ''; position: fixed;
top: -160px; left: -200px; width: 800px; height: 800px;
background: radial-gradient(circle, var(--glow-a) 0%, var(--glow-b) 38%, transparent 68%);
pointer-events: none; z-index: 0;
transition: background 1.8s ease;
animation: breathe 12s ease-in-out infinite;
}
body::after {
content: ''; position: fixed;
bottom: -150px; right: -120px; width: 700px; height: 700px;
background: radial-gradient(circle, var(--glow-c) 0%, transparent 62%);
pointer-events: none; z-index: 0;
transition: background 1.8s ease;
animation: breathe 16s ease-in-out infinite reverse;
}
@keyframes breathe {
0%,100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.10); opacity: .72; }
}
/* ── SWITCHER ── */
.switcher {
position: fixed; bottom: 28px; right: 28px;
z-index: 998; display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.switcher-label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.switcher-btns {
display: flex; gap: 6px;
background: rgba(13,17,23,0.88);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border-h); border-radius: 40px; padding: 6px 8px;
}
.sw-btn {
position: relative;
width: 28px; height: 28px; border-radius: 50%;
border: 2px solid transparent;
transition: transform .22s, border-color .22s, box-shadow .22s;
}
.sw-btn:hover { transform: scale(1.18); }
/* État actif : halo blanc net + pastille centrale = repère qui ne dépend PAS
de la seule couleur (lisible en cas de daltonisme). */
.sw-btn.active {
border-color: #fff;
box-shadow: 0 0 0 2px rgba(13,17,23,0.9), 0 0 0 4px rgba(255,255,255,0.7);
}
.sw-btn.active::after {
content: "";
position: absolute; inset: 0; margin: auto;
width: 8px; height: 8px; border-radius: 50%;
background: #0D1117; box-shadow: 0 0 0 2px rgba(255,255,255,0.95);
}
.sw-btn-violet { background: linear-gradient(135deg,#C4B5FD,#8EC5FC); }
.sw-btn-rose { background: linear-gradient(135deg,#FA709A,#FEE140); }
.sw-btn-vert { background: linear-gradient(135deg,#84FAB0,#8FD3F4); }
.sw-name {
font-size: 10px; color: var(--muted);
background: rgba(13,17,23,0.88); backdrop-filter: blur(20px);
border: 1px solid var(--border); border-radius: 20px; padding: 4px 12px;
}
/* ── NAV ──
Background full-width visuel (blur s'étend partout) MAIS contenu interne
aligné avec les sections en dessous (1280px max). On utilise un padding
calc() qui s'adapte : si la fenêtre est plus large que 1360px, les marges
gauche/droite augmentent pour caller le contenu sur 1280px ; sinon on
garde le padding mobile classique de 40px. */
nav {
position: sticky; top: 0; z-index: 200;
display: flex; justify-content: space-between; align-items: center;
padding: 14px var(--side-pad);
background: rgba(13,17,23,0.80);
backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
border-bottom: 1px solid var(--border);
}
/* ── Logo nav cliquable (back-to-top) + tooltip CSS ──
Le logo "Alexian Dumont" devient cliquable et scroll smooth en haut.
Un tooltip discret apparaît au hover pour la découvrabilité. */
.nav-logo-link {
display: inline-flex; align-items: center; gap: 6px;
text-decoration: none; cursor: pointer;
position: relative;
}
.nav-logo-link:focus-visible {
outline: 2px solid var(--g1);
outline-offset: 4px;
border-radius: 4px;
}
.nav-logo-tooltip {
font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
color: var(--muted);
background: rgba(13,17,23,0.92);
border: 1px solid var(--border-h);
border-radius: 14px;
padding: 4px 10px;
white-space: nowrap;
opacity: 0;
transform: translateX(-6px);
transition: opacity .2s, transform .2s;
pointer-events: none;
}
.nav-logo-link:hover .nav-logo-tooltip,
.nav-logo-link:focus-visible .nav-logo-tooltip {
opacity: 1;
transform: translateX(0);
}
.nav-logo {
font-family: 'Barlow Condensed', sans-serif;
font-size: 20px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase;
}
.nav-links { display: flex; gap: 28px; }
.nav-links a {
font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
color: var(--muted); text-decoration: none; transition: color .2s;
}
.nav-links a:hover { color: var(--text); }
.nav-cta {
color: #0D1117; border: none;
padding: 9px 20px; font-family: 'DM Sans', sans-serif;
font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
text-transform: uppercase; border-radius: 8px;
transition: opacity .2s;
cursor: pointer;
}
.nav-cta:hover { opacity: .82; }
.nav-cta-link { display: inline-block; }
/* ── BURGER MOBILE (homepage) ──────────────────────────────────
Bouton visible uniquement ≤ 960px (cf. media query plus bas).
3 traits horizontaux qui se transforment en X quand le menu est ouvert
via la classe .is-open. Pattern identique à .proj-nav-burger sur les
pages projet pour cohérence cross-pages. */
.nav-burger {
display: none; /* override mobile plus bas */
position: relative;
width: 40px; height: 40px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border-h);
border-radius: 10px;
cursor: pointer;
padding: 0;
transition: background .2s, border-color .2s;
}
.nav-burger:hover { background: rgba(255,255,255,0.08); border-color: var(--g1); }
.nav-burger:focus-visible {
outline: 2px solid var(--g1);
outline-offset: 3px;
}
.nav-burger-icon,
.nav-burger-icon::before,
.nav-burger-icon::after {
position: absolute;
left: 50%; transform: translateX(-50%);
width: 18px; height: 2px;
background: var(--text);
border-radius: 1px;
transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav-burger-icon {
top: 50%; margin-top: -1px;
}
.nav-burger-icon::before { content: ''; top: -6px; left: 0; transform: none; }
.nav-burger-icon::after { content: ''; top: 6px; left: 0; transform: none; }
/* État ouvert : 3 traits → X */
.nav-burger[aria-expanded="true"] .nav-burger-icon { background: transparent; }
.nav-burger[aria-expanded="true"] .nav-burger-icon::before {
top: 0; transform: rotate(45deg);
}
.nav-burger[aria-expanded="true"] .nav-burger-icon::after {
top: 0; transform: rotate(-45deg);
}
/* ── OVERLAY MOBILE (plein écran, ouvert par le burger) ─────────
Aligné sur le style de .proj-nav-overlay (pages projet) pour
cohérence cross-pages. Fond translucide qui laisse passer le
canvas animé derrière (au lieu d'un noir plein). Aucune bordure
sur le close et les items. Liste façon menu éditorial.
────────────────────────────────────────────────────────────── */
.main-nav-overlay {
position: fixed; inset: 0;
z-index: 999;
/* Fond OPAQUE (≠ pages projet à 0.96) — choix délibéré : la homepage tourne
en canvas mode "full" (anneaux + lueurs + particules, animé/chargé). À 0.96
+ blur, ce fond chargé transparaissait en taches floues mouvantes derrière
le menu. Sur les pages projet (canvas mode "minimal", calme), le 0.96 suffit.
Ici on opacifie pour masquer complètement le fond animé. Le rendu visuel
reste cohérent (menu sombre plein) avec les pages projet. */
background: #0D1117;
padding: 80px 28px 40px;
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility .25s ease;
overflow-y: auto;
}
.main-nav-overlay.is-open {
opacity: 1;
visibility: visible;
}
/* Bouton close (×) — sans bordure, accent au hover */
.main-nav-overlay-close {
position: absolute; top: 18px; right: 18px;
width: 40px; height: 40px;
background: transparent;
border: 0;
color: var(--text);
font-size: 26px; line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: color .2s, transform .2s;
}
.main-nav-overlay-close:hover { color: var(--g1); transform: rotate(90deg); }
.main-nav-overlay-close:focus-visible {
outline: 2px solid var(--g1);
outline-offset: 3px;
border-radius: 8px;
}
/* Conteneur centré max-width 480 façon Kino. PAS de flex:1 ni space-between :
le contenu coule depuis le haut, les actions suivent la liste naturellement. */
.main-nav-overlay-nav {
max-width: 480px;
margin: 0 auto;
width: 100%;
}
.main-nav-overlay-list {
list-style: none;
margin: 0; padding: 0;
display: flex;
flex-direction: column;
gap: 4px; /* parité .proj-nav-overlay-list (Kino) */
}
/* Items éditoriaux — sans bordures de fond, juste un trait fin entre.
Style aligné sur .proj-nav-overlay-list a (pages projet). */
.main-nav-overlay-list a {
display: block;
font-family: 'Barlow Condensed', sans-serif;
font-size: 22px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--muted);
text-decoration: none;
padding: 14px 0;
border-bottom: 1px solid var(--border);
transition: color .2s, padding-left .25s ease;
}
.main-nav-overlay-list a:hover,
.main-nav-overlay-list a:focus-visible {
color: var(--text);
padding-left: 12px;
outline: none;
}
/* Pas de trait sous le dernier item (Contact) : sinon une bordure flotte
en bas du menu sans rien en dessous. */
.main-nav-overlay-list li:last-child a { border-bottom: 0; }
/* ── MODIFICATEURS MENU UNIFIÉS (homepage + pages projet) ───────
Structure cohérente sur tous les menus mobiles :
- .menu-item-top : item "00 · Haut de page" en tête (back-to-top)
- .menu-item-contact : lien Contact en bas, dégradé + graisse plus forte
(cf. demande user : apprentissage interne, cohérence cross-pages). */
/* .menu-item-top : item "00 · Haut de page" en tête. APPARENCE IDENTIQUE
aux autres items de nav (même taille, graisse, couleur) pour la cohérence
interne — le numéro "00 ·" suffit à signaler que c'est le retour en haut.
Pas de style distinct : il hérite de .main-nav-overlay-list a. */
.menu-item-contact {
/* Dégradé auto-suffisant (pas seulement via .grad) pour gagner la
spécificité de `.main-nav-overlay-list a { color: muted }` qui sinon
masquerait le dégradé sur Firefox. Graisse 900 pour le distinguer
des items de nav (700). */
background: linear-gradient(135deg, var(--g1), var(--g2));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent !important;
font-weight: 900 !important;
}
/* Body lock quand overlay ouvert (évite double-scroll) */
body.main-nav-open { overflow: hidden; }
/* ── HERO ──
max-width: 1280px + margin auto pour cohérence avec les pages projets
(qui plafonnent leur contenu à 1280px). Sans ça, sur grand écran le hero
s'étire à l'infini et casse la lecture / l'alignement avec le reste. */
.hero {
position: relative; z-index: 1;
max-width: 1280px; margin: 0 auto;
padding: 80px 40px 64px;
display: grid; grid-template-columns: 1fr 1fr;
gap: 48px; border-bottom: 1px solid var(--border);
min-height: 92vh; align-items: center;
}
.hero-badge {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(255,255,255,0.05); border: 1px solid var(--border);
border-radius: 20px; padding: 5px 14px; margin-bottom: 24px;
}
.badge-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent); animation: pulse 2.4s ease-in-out infinite;
transition: background 1.8s ease;
}
/* Pulse calmé : amplitude réduite (1 → 0.55 au lieu de 0.22)
et durée allongée (2.4s → 4s) pour rester perceptible sans
écraser le reste de la page. */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.55} }
.badge-dot { animation-duration: 4s; }
.badge-text { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.hero-eyebrow { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
h1 {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(72px, 9vw, 108px);
font-weight: 900; line-height: 0.88; letter-spacing: -2px;
text-transform: uppercase; color: var(--text); margin-bottom: 8px;
}
/* .h1-grad → utilise .grad directement en HTML */
h1 .h1-grad { display: block; }
.hero-role {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(26px, 3.2vw, 40px); font-weight: 600;
text-transform: uppercase; color: var(--muted); letter-spacing: 1px; margin-bottom: 28px;
}
.hero-desc { font-size: 14px; color: var(--muted); line-height: 1.8; max-width: 400px; margin-bottom: 36px; }
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; }
.btn-main {
color: #0D1117; border: none;
padding: 14px 28px; font-family: 'DM Sans', sans-serif;
font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
text-transform: uppercase; border-radius: 10px;
transition: opacity .2s, transform .2s;
}
.btn-main:hover { opacity: .85; transform: translateY(-1px); }
.btn-ghost {
background: rgba(255,255,255,0.05); color: var(--text);
border: 1px solid var(--border-h); padding: 14px 28px;
font-family: 'DM Sans', sans-serif;
font-size: 11px; font-weight: 400; letter-spacing: 1.5px;
text-transform: uppercase; border-radius: 10px; transition: background .2s;
}
.btn-ghost:hover { background: rgba(255,255,255,0.09); }
.hero-stats { display: flex; gap: 0; border-top: 1px solid var(--border); padding-top: 28px; }
.stat { flex: 1; }
.stat + .stat { border-left: 1px solid var(--border); padding-left: 28px; }
.stat-num {
font-family: 'Barlow Condensed', sans-serif;
font-size: 48px; font-weight: 800; line-height: 1; margin-bottom: 4px;
}
.stat-label { font-size: 11px; color: var(--muted); line-height: 1.4; }
/* HERO CARD */
.hero-card {
background: rgba(255,255,255,0.045);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border); border-radius: 20px; padding: 32px;
position: relative; overflow: hidden;
}
.hc-head {
display: flex; justify-content: space-between;
font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
color: var(--muted); margin-bottom: 20px;
padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.hc-title {
font-family: 'Barlow Condensed', sans-serif;
font-size: 48px; font-weight: 900; text-transform: uppercase;
line-height: 0.9; margin-bottom: 12px;
}
.hc-sub { font-size: 12px; color: var(--muted); line-height: 1.65; margin-bottom: 20px; }
.hc-skills {
display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
background: var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 20px;
}
.hc-skill { background: rgba(255,255,255,0.03); padding: 14px; }
.hc-skill-label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.hc-skill-val { font-size: 13px; font-weight: 500; color: var(--text); }
.hc-project {
display: flex; justify-content: space-between; align-items: center;
padding: 11px 0; border-bottom: 1px solid var(--border);
}
.hc-project:last-of-type { border: none; }
.hcp-name { font-size: 13px; font-weight: 500; color: var(--text); }
.hcp-type { font-size: 10px; color: var(--muted); margin-top: 1px; }
.hcp-year { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.hcp-tag { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; }
/* ── TICKER ── */
.ticker {
overflow: hidden; white-space: nowrap;
position: relative; z-index: 1;
background-size: 200% auto;
animation: ticker-grad 6s linear infinite;
transition: background 1.8s ease;
padding: 11px 0;
}
@keyframes ticker-grad { 0%{background-position:0%} 100%{background-position:200%} }
.ticker-inner { display: inline-block; animation: scroll 28s linear infinite; }
@keyframes scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ticker-text {
font-family: 'Barlow Condensed', sans-serif;
font-size: 13px; font-weight: 800; letter-spacing: 3px;
text-transform: uppercase; color: #0D1117; padding: 0 28px;
}
.ticker-sep { opacity: .35; }
/* ── SECTIONS ── */
.section { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 64px 40px; border-bottom: 1px solid var(--border); }
.eyebrow { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
h2 {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(42px, 5.5vw, 62px); font-weight: 800;
text-transform: uppercase; color: var(--text); line-height: 0.92; letter-spacing: -0.5px;
}
.section-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 40px; }
.section-desc { font-size: 13px; color: var(--muted); line-height: 1.8; }
/* PROJETS */
.projects-grid {
display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
gap: 1px; background: var(--border); border-radius: 16px; overflow: hidden;
}
.project-card {
background: rgba(255,255,255,0.035);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
padding: 28px 24px; transition: background .25s;
position: relative; overflow: hidden;
}
.project-card::after {
content: '';
position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--g1), var(--g2));
transform: scaleX(0); transform-origin: left;
transition: transform .4s ease, background 1.8s ease;
}
.project-card:hover { background: rgba(255,255,255,0.06); }
.project-card:hover::after { transform: scaleX(1); }
.project-card.featured { grid-column: span 2; }
.proj-num { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.proj-type { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 16px; }
.proj-name {
font-family: 'Barlow Condensed', sans-serif;
font-size: 32px; font-weight: 800; text-transform: uppercase;
color: var(--text); line-height: 0.95; margin-bottom: 8px;
}
.project-card.featured .proj-name { font-size: 44px; }
.proj-desc { font-size: 12px; color: var(--muted); line-height: 1.65; margin-bottom: 16px; }
.proj-tags { display: flex; flex-wrap: wrap; gap: 6px; }
/* WCAG AA passé de --muted2 (ratio 2.5:1, non AA) à --muted (ratio 4.6:1, AA) */
.proj-tag {
font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
color: var(--muted); border: 1px solid var(--border-h); padding: 3px 10px; border-radius: 20px;
}
.proj-result { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); }
.proj-result strong { font-weight: 600; font-size: 13px; color: var(--text); }
/* ── PROJECT CARD PLACEHOLDER (case "futur projet") ──────────
Card non-cliquable, signale un projet à venir aligné alternance.
Choix design :
- Opacity 0.55 + dashed border-top accent → signal "non finalisé"
sans casser la grille (la card reste à sa taille standard).
- Curseur pas en pointer (pas d'interaction prévue), barre de hover
dégradée désactivée.
- Le rendu reste lisible (texte non grisé sous le titre) pour que
le message "à venir" passe clairement. */
.project-card.project-card-placeholder {
opacity: 0.62;
border-top: 1px dashed var(--border-h);
cursor: default;
}
.project-card.project-card-placeholder::after { display: none; }
.project-card.project-card-placeholder:hover { background: rgba(255,255,255,0.035); }
.project-card.project-card-placeholder .proj-num,
.project-card.project-card-placeholder .proj-type {
color: var(--muted);
background: none;
-webkit-text-fill-color: currentColor;
}
.project-card.project-card-placeholder .proj-name {
color: var(--muted);
}
.proj-tag.proj-tag-placeholder {
border-style: dashed;
color: var(--muted);
background: transparent;
}
.proj-result.proj-result-placeholder {
display: flex;
align-items: center;
gap: 8px;
font-style: italic;
color: var(--muted);
}
.placeholder-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--g1);
display: inline-block;
/* Pulse léger pour signaler "vivant en préparation" */
animation: placeholderPulse 2.4s ease-in-out infinite;
}
@keyframes placeholderPulse {
0%, 100% { opacity: 0.4; transform: scale(0.9); }
50% { opacity: 1; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
.placeholder-dot { animation: none; }
}
/* SERVICES + PROCESS */
.two-col-section {
position: relative; z-index: 1;
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1fr;
gap: 1px; background: var(--border);
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.glass-card {
background: rgba(255,255,255,0.035);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 48px 40px;
}
.glass-card h3 {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(34px, 4vw, 46px); font-weight: 800;
text-transform: uppercase; color: var(--text); line-height: 0.92; margin-bottom: 20px;
}
.glass-card p { font-size: 13px; color: var(--muted); line-height: 1.8; margin-bottom: 28px; }
.service-item { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border); }
.service-item:last-child { border: none; }
.service-num {
width: 28px; height: 28px; border-radius: 50%;
flex-shrink: 0; display: flex; align-items: center; justify-content: center;
font-size: 9px; font-weight: 700; color: #0D1117;
}
.service-title { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 4px; }
.service-desc { font-size: 11px; color: var(--muted); line-height: 1.55; }
.process-step { padding: 16px 0; border-bottom: 1px solid var(--border); }
.process-step:last-child { border: none; }
.step-label { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 5px; }
.step-name { font-size: 16px; font-weight: 500; color: var(--text); margin-bottom: 4px; }
.step-desc { font-size: 11px; color: var(--muted); line-height: 1.55; }
/* TÉMOIGNAGES */
.testimonials-grid {
display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
gap: 1px; background: var(--border); border-radius: 16px; overflow: hidden; margin-top: 40px;
}
.testi-card { background: rgba(255,255,255,0.03); padding: 28px 24px; }
.testi-quote { font-size: 13px; color: var(--muted); line-height: 1.75; font-style: italic; margin-bottom: 20px; }
.testi-author { border-top: 1px solid var(--border); padding-top: 14px; }
.testi-name { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 2px; }
.testi-role { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
/* CONTACT */
.contact-section {
position: relative; z-index: 1;
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1fr;
gap: 48px; padding: 72px 40px; border-bottom: 1px solid var(--border);
}
.contact-item {
display: flex; justify-content: space-between; align-items: baseline;
padding: 16px 0; border-bottom: 1px solid var(--border);
}
.contact-item:last-child { border: none; }
.ci-label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.ci-val { font-size: 14px; font-weight: 500; color: var(--text); }
.cta-card {
background: rgba(255,255,255,0.045);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border); border-radius: 20px; padding: 36px;
display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.cta-eyebrow { font-size: 9px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 18px; display: block; }
.cta-title {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(34px, 4vw, 50px); font-weight: 900;
text-transform: uppercase; color: var(--text); line-height: 0.92; margin-bottom: 18px;
}
.cta-body { font-size: 13px; color: var(--muted); line-height: 1.8; margin-bottom: 28px; flex: 1; }
.cta-btns { display: flex; gap: 10px; flex-wrap: wrap; }
/* FOOTER */
footer {
position: relative; z-index: 1;
max-width: 1280px; margin: 0 auto;
padding: 28px 40px;
display: flex; justify-content: space-between; align-items: center;
border-top: 1px solid var(--border); flex-wrap: wrap; gap: 12px;
}
.footer-logo {
font-family: 'Barlow Condensed', sans-serif;
font-size: 16px; font-weight: 800; text-transform: uppercase;
color: var(--muted); letter-spacing: 1px;
}
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(--text); }
/* Lien scroll-to-top : accent visuel léger pour signaler l'action.
Présent sur homepage + toutes les pages projet (footer commun). */
.footer-links a.footer-top-link {
background: linear-gradient(135deg, var(--g1), var(--g2));
background-clip: text; -webkit-background-clip: text;
color: transparent; -webkit-text-fill-color: transparent;
font-weight: 700;
}
.footer-links a.footer-top-link:hover { opacity: 0.8; }
.footer-links a:hover { color: var(--muted); }
.footer-copy { font-size: 10px; letter-spacing: 1px; color: var(--muted); }
.footer-copy a { color: var(--muted); text-decoration: none; transition: color .2s; }
.footer-copy a:hover { color: var(--text); }
/* ── LOGO ŒIL INQUIRING (footer) ────────────────────────────────
Œil = signature de marque, placé à GAUCHE dans le footer juste
avant le texte "ALEXIAN DUMONT · Portfolio 2026". Cligne au clic
(micro-interaction signature). Identité visible sans dominer. */
.footer-logo-wrap {
display: inline-flex;
align-items: center;
gap: 12px;
}
.footer-logo-eye {
width: 28px; height: 28px;
padding: 0;
background: none;
border: 0;
cursor: pointer;
transition: transform .25s ease;
}
.footer-logo-eye:hover { transform: scale(1.1); }
.footer-logo-eye:focus-visible {
outline: 2px solid var(--g1);
outline-offset: 4px;
border-radius: 50%;
}
.footer-logo-eye svg {
width: 100%; height: 100%;
display: block;
}
.footer-logo-eye-path {
fill: var(--g1);
transform-origin: center;
transform-box: fill-box;
transition: fill 1.8s ease;
}
/* Animation blink déclenchée par classe .is-blinking ajoutée en JS */
.footer-logo-eye.is-blinking .footer-logo-eye-path {
animation: footerLogoEyeBlink 0.55s ease-in-out;
}
@keyframes footerLogoEyeBlink {
0%, 100% { transform: scaleY(1); }
45% { transform: scaleY(0.08); }
55% { transform: scaleY(0.08); }
}
@media (prefers-reduced-motion: reduce) {
.footer-logo-eye.is-blinking .footer-logo-eye-path { animation: none; }
.footer-logo-eye:hover { transform: none; }
}
/* ── RESPONSIVE ── */
@media (max-width: 960px) {
nav { padding: 12px 20px; }
/* Mobile : nav-links inline + CTA inline cachés → burger uniquement */
.nav-links { display: none; }
.nav-cta-link { display: none; }
.nav-burger { display: block; }
.hero { grid-template-columns: 1fr; padding: 48px 20px; gap: 36px; min-height: auto; }
.section { padding: 48px 20px; }
.section-intro { grid-template-columns: 1fr; gap: 16px; }
.projects-grid { grid-template-columns: 1fr 1fr; }
.project-card.featured { grid-column: span 2; }
.two-col-section { grid-template-columns: 1fr; }
.glass-card { padding: 36px 24px; }
.testimonials-grid { grid-template-columns: 1fr; }
.contact-section { grid-template-columns: 1fr; gap: 32px; padding: 48px 20px; }
footer { padding: 20px; }
.switcher { bottom: 16px; right: 16px; }
}
@media (max-width: 600px) {
.hero-stats { flex-direction: column; gap: 16px; }
.stat + .stat { border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: 16px; }
.projects-grid { grid-template-columns: 1fr; }
.project-card.featured { grid-column: span 1; }
.hc-skills { grid-template-columns: 1fr; }
.hero-btns, .cta-btns { flex-direction: column; }
h1 { font-size: 68px; }
h2 { font-size: 38px; }
.nav-logo { font-size: 16px; }
/* Curseur personnalisé masqué sur mobile : on rend le curseur système */
#cursor-ring, #cursor-dot { display: none; }
*, a, button { cursor: auto !important; }
}
/* ══════════════════════════════════════════════════════════════
SWITCHER MOBILE (≤ 700px) — UX rond + éclatement bottom→top
──────────────────────────────────────────────────────────────
Au repos : bulle ronde 48×48 reflétant la couleur active (bottom-right).
Au clic : la pill .switcher s'affiche au-dessus en colonne, les boutons
couleur (sauf l'actif, déjà représenté par le rond) jaillissent en
stagger ~80ms avec slide-up + fade-in (effet « feu d'artifice »).
Sélection d'une couleur : repli après 250ms + le rond change de teinte.
══════════════════════════════════════════════════════════════ */
.switcher-toggle {
display: none;
position: fixed;
bottom: 16px; right: 16px;
width: 48px; height: 48px;
border-radius: 50%;
border: 1px solid var(--border-h);
background: rgba(13,17,23,0.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
cursor: pointer; z-index: 999;
align-items: center; justify-content: center;
box-shadow: 0 8px 24px -8px rgba(0,0,0,0.6);
padding: 0;
}
.switcher-toggle:focus-visible { outline: 2px solid var(--g1); outline-offset: 2px; }
.switcher-toggle-icon {
width: 24px; height: 24px;
border-radius: 50%;
background: linear-gradient(135deg, var(--g1), var(--g2));
border: 2px solid rgba(255,255,255,0.18);
display: block;
transition: background .3s ease;
}
@media (max-width: 700px) {
/* Bascule mobile : on cache la pill statique, on affiche le rond toggle.
Visuellement, le rond « s'allonge » vers le haut au clic : la pill
.switcher.expanded apparaît juste AU-DESSUS du rond avec le même
fond/bordure et coins inférieurs plats, créant l'illusion d'un seul
élément capsule continue. Le rond, lui, devient plat en haut quand
expanded pour finir la jointure. */
.switcher { display: none; }
.switcher-toggle {
display: flex;
transition: border-radius .25s ease, border-top-color .25s ease;
}
.switcher-toggle[aria-expanded="true"] {
border-radius: 0 0 24px 24px;
border-top-color: transparent;
}
.switcher.expanded {
display: flex !important;
flex-direction: column;
align-items: center;
position: fixed;
bottom: 64px; /* exactly toggle bottom (16) + height (48) → jointure parfaite */
right: 16px;
width: 48px;
padding: 10px 0 6px;
background: rgba(13,17,23,0.92);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border: 1px solid var(--border-h);
border-bottom: 0;
border-radius: 24px 24px 0 0;
box-shadow: 0 -6px 18px -8px rgba(0,0,0,0.5);
z-index: 1000;
transform-origin: bottom center;
animation: switcherCapsule .26s cubic-bezier(.2,.7,.25,1) backwards;
}
.switcher.expanded .switcher-label,
.switcher.expanded .sw-name { display: none; }
.switcher.expanded .switcher-btns {
display: flex;
flex-direction: column-reverse; /* dernier dot collé au-dessus du rond */
gap: 10px;
padding: 0;
background: transparent;
border: 0;
align-items: center;
}
.switcher.expanded .sw-btn {
width: 30px; height: 30px;
border: 2px solid rgba(255,255,255,0.28);
box-shadow: 0 2px 6px -2px rgba(0,0,0,0.5);
}
/* La couleur active n'est pas répétée dans la pill (déjà sur le rond) */
.switcher.expanded .sw-btn.active { display: none; }
}
@keyframes switcherCapsule {
from { transform: scaleY(0); opacity: 0; }
to { transform: scaleY(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.switcher.expanded { animation: none; }
.switcher-toggle { transition: none; }
}
/* ══════════════════════════════════════════
FOCUS VISIBLE navigation clavier
Outline dégradé sur chaque élément interactif
══════════════════════════════════════════ */
a:focus-visible,
button:focus-visible,
.sw-btn:focus-visible,
.project-card:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 6px;
transition: outline-color 1.8s ease;
}
.sw-btn:focus-visible { outline-offset: 4px; }
/* ══════════════════════════════════════════
PREFERS-REDUCED-MOTION
Stoppe animations/ticker/taches lumineuses
pour utilisateurs sensibles.
══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
body::before, body::after { animation: none; }
.ticker-inner { animation: none; }
.badge-dot { animation: none; }
#bg-canvas { display: none; }
#cursor-ring, #cursor-dot { display: none; }
*, a, button { cursor: auto !important; }
}
/* --------------- Pour le mail ------------------------*/
.contact-btn1 {
background: none;
border: none;
color: inherit; /* garde la couleur du texte */
cursor: pointer;
text-decoration: none;
}
/* ══════════════════════════════════════════════════════════════
BADGE « Étude détaillée → » sur les cartes projet
──────────────────────────────────────────────────────────────
Affiché en top-right des cartes ayant une page dédiée
(cf. modal.js → injectButtons() → proj.lien).
Pill arrondie, accent du theme actif (--g1 → --g2).
Animation hover : flèche se décale de 4px vers la droite.
══════════════════════════════════════════════════════════════ */
.proj-card-badge {
position: absolute;
top: 14px; right: 14px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px 5px 12px;
background: linear-gradient(135deg, var(--g1), var(--g2));
color: var(--bg);
border-radius: 20px;
font-family: 'DM Sans', sans-serif;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
box-shadow: 0 4px 12px -4px rgba(196,181,253,0.5);
transition: background-position 800ms ease, transform 200ms ease;
background-size: 200% 200%;
pointer-events: none; /* la carte gère le clic */
}
.proj-card-badge-arrow {
display: inline-block;
font-size: 13px;
transition: transform 200ms ease;
}
/* ══════════════════════════════════════════════════════════════
ANIMATION HOVER cartes ayant une page (4.4)
──────────────────────────────────────────────────────────────
Élévation -4px + ombre douce + flèche du badge décalée 4px.
Pas de glow agressif (proposition Q3 = A : sobre).
Respect prefers-reduced-motion via le bloc global déjà présent.
══════════════════════════════════════════════════════════════ */
.project-card.has-study {
transition: background 0.25s, transform 0.25s ease, box-shadow 0.25s ease;
}
.project-card.has-study:hover,
.project-card.has-study:focus-within {
transform: translateY(-4px);
box-shadow: 0 14px 32px -16px rgba(0,0,0,0.5);
}
.project-card.has-study:hover .proj-card-badge-arrow,
.project-card.has-study:focus-within .proj-card-badge-arrow {
transform: translateX(4px);
}
.project-card.has-study:hover .proj-card-badge,
.project-card.has-study:focus-within .proj-card-badge {
background-position: 100% 100%;
box-shadow: 0 8px 18px -6px rgba(196,181,253,0.65);
}
/* Mobile : badge réduit pour ne pas masquer le titre sur 375px */
@media (max-width: 480px) {
.proj-card-badge {
top: 10px; right: 10px;
padding: 4px 9px;
font-size: 8.5px;
letter-spacing: 1px;
gap: 4px;
}
.proj-card-badge-arrow { font-size: 11px; }
/* La carte featured a un titre plus grand : on garde un padding-top pour éviter le chevauchement */
.project-card.featured.has-study .proj-num { margin-top: 4px; }
}
/* ══════════════════════════════════════════════════════════════
BADGE « EN COURS » projets WIP (Phase 5 : Site Catalogue)
──────────────────────────────────────────────────────────────
Inséré dynamiquement dans .proj-num par modal.js (injectButtons).
Inline-flex à droite du libellé « Projet 01 » plutôt que collé
en absolute coin haut-gauche pour rester lié visuellement au num.
Couleur warm orange (#FFB84D), distincte du dégradé violet/bleu
du thème signale « pas finalisé » sans confondre avec les badges
de cas d'étude posés.
══════════════════════════════════════════════════════════════ */
.proj-card-wip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 9px;
margin-left: 8px;
vertical-align: middle;
background: rgba(255, 184, 77, 0.10);
border: 1px solid rgba(255, 184, 77, 0.45);
color: #FFB84D;
border-radius: 20px;
font-family: 'DM Sans', sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
pointer-events: none;
/* Le pulse d'opacité du dot reste discret ; pas de halo backdrop-blur
(inutile désormais qu'on n'est plus sur fond image). */
}
.proj-card-wip-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: #FFB84D;
box-shadow: 0 0 6px rgba(255,184,77,0.6);
animation: wipPulse 2.4s ease-in-out infinite;
}
@keyframes wipPulse {
0%, 100% { opacity: 0.6; transform: scale(1); }
50% { opacity: 1; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
.proj-card-wip-dot { animation: none; opacity: 1; }
}
@media (max-width: 480px) {
.proj-card-wip {
padding: 2px 7px;
font-size: 8px;
letter-spacing: 1px;
gap: 4px;
margin-left: 6px;
}
}
/* ══════════════════════════════════════════════════════════════
HERO renforcement impact (retours test recruteur 5s)
──────────────────────────────────────────────────────────────
A1 : « Design qui questionne / Interface qui répond » passe
de muted2 (opacité basse, échappait au regard) à text plein
+ ligne 2 en gradient → la baseline devient le 2e point
d'attention après le H1.
A2 : badge alternance distinctif (bordure accent + fond plus
marqué) pour que l'info clé « cherche alternance Master 1 »
soit lisible en 1 seconde.
══════════════════════════════════════════════════════════════ */
.hero-role {
color: var(--text);
font-weight: 700;
letter-spacing: 0;
}
.hero-role-line {
display: inline-block;
line-height: 1.05;
}
.hero-role-line.grad {
font-weight: 800;
}
/* Badge alternance opt-in via .hero-badge-alt
Reprend la grammaire .hero-badge mais avec :
- bordure accent (--g1) au lieu de border neutre
- fond accent-tinted (rgba(--g1, 0.10))
- text opacity full
- micro-strong sur le mot clé « Recherche alternance » */
.hero-badge.hero-badge-alt {
background: rgba(196,181,253,0.08);
border: 1px solid rgba(196,181,253,0.45);
padding: 6px 16px;
/* Pas de halo extérieur : zone reste calme, n'écrase pas le reste */
}
.hero-badge.hero-badge-alt .badge-text {
color: var(--text);
letter-spacing: 1.5px;
}
.hero-badge.hero-badge-alt .badge-text strong {
background: linear-gradient(135deg, var(--g1), var(--g2));
background-clip: text; -webkit-background-clip: text;
color: transparent; -webkit-text-fill-color: transparent;
font-weight: 800;
}
.hero-badge.hero-badge-alt .badge-dot {
width: 7px; height: 7px;
/* Halo retiré : le pulse seul suffit, plus de glow agressif */
}
/* « freelance dispo » en deuxième ligne d'info discret pour ne pas
concurrencer le mot-clé alternance (priorité visuelle de la recherche). */
.badge-soft {
color: var(--muted);
font-weight: 400;
text-transform: lowercase;
letter-spacing: 1px;
opacity: 0.85;
}
/* Mobile : badge wrap correct sur 375px */
@media (max-width: 480px) {
.hero-badge.hero-badge-alt .badge-text { letter-spacing: 1px; font-size: 9.5px; }
.badge-soft { letter-spacing: 0.5px; }
}
/* ══════════════════════════════════════════════════════════════
SECTION « MA PROPOSITION DE VALEUR » phase 5b
──────────────────────────────────────────────────────────────
4 cards qui répondent à la question implicite « pourquoi te recruter ».
- Desktop ≥ 960px : 4 cards en ligne (grid auto-fit minmax)
- Tablet 640-960 : 2x2
- Mobile < 640 : 1 colonne empilée
Hover : léger lift + bordure accent (--g1) pour marquer l'interactivité
visuelle (les cartes ne sont pas cliquables c'est volontaire).
══════════════════════════════════════════════════════════════ */
.value-section { padding-bottom: 80px; }
.value-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-top: 32px;
}
.value-card {
background: rgba(255,255,255,0.03);
border: 1px solid var(--border);
border-radius: 14px;
padding: 0;
overflow: hidden;
transition: border-color .25s ease, transform .25s ease, background .25s ease;
position: relative;
display: flex; flex-direction: column;
}
.value-card:hover {
border-color: var(--g1, #C4B5FD);
transform: translateY(-3px);
background: rgba(255,255,255,0.05);
}
/* Vignette image-led en haut de carte : capture de projet cadrée en haut.
Carte 3 (« ce portfolio », sans capture) = panneau dégradé + icône. */
.value-thumb {
aspect-ratio: 16 / 11;
overflow: hidden;
background: rgba(255,255,255,0.04);
border-bottom: 1px solid var(--border);
}
.value-thumb img {
display: block; width: 100%; height: 100%;
object-fit: cover; object-position: top center;
transition: transform .45s ease;
}
.value-card:hover .value-thumb img { transform: scale(1.045); }
.value-thumb-icon {
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, rgba(196,181,253,0.18), rgba(142,197,252,0.14));
}
.value-thumb-icon svg {
width: 48px; height: 48px;
color: var(--g1, #C4B5FD);
stroke: currentColor; fill: none;
}
.value-body {
padding: 18px 20px 20px;
display: flex; flex-direction: column;
gap: 9px; flex: 1;
}
.value-title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: 21px;
line-height: 1.05;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--text);
margin: 0;
}
.value-desc {
font-size: 13.5px;
line-height: 1.6;
color: var(--muted);
margin: 0;
}
/* Ligne "Preuve : ..." en bas de chaque value-card. Style sépare visuellement
la promesse (haut) de la preuve concrète (bas) → "follow the receipt".
Pattern recruteur : promesse = abstract, preuve = traçable au cas d'étude. */
.value-proof {
margin-top: auto;
padding-top: 14px;
border-top: 1px dashed var(--border-h);
font-size: 11px;
letter-spacing: 0.5px;
color: var(--muted);
line-height: 1.5;
font-style: italic;
}
@media (max-width: 1100px) {
.value-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 640px) {
.value-grid { grid-template-columns: 1fr; gap: 14px; }
.value-body { padding: 18px 18px 20px; }
.value-thumb { aspect-ratio: 16 / 9; }
.value-title { font-size: 20px; }
.value-proof { font-size: 10.5px; }
}
/* ══════════════════════════════════════════════════════════════
HERO OPTION B Split-screen éditorial avec panels rotatifs
──────────────────────────────────────────────────────────────
Refonte du hero d'origine. Split 58/42 desktop (statement gauche
+ panel rotatif droit). Inspirations : portfolios éditoriaux type
Robin Mastromarino / Etienne Godiard typo XXL, asymétrie discrète,
espaces négatifs maîtrisés, panels rotatifs avec dots cliquables.
La classe `.hero-split` cohabite avec l'ancienne `.hero` pour ne
pas casser le markup historique on override par cascade.
══════════════════════════════════════════════════════════════ */
/* ── Layout split ─────────────────────────────────────────── */
.hero.hero-split {
display: grid;
grid-template-columns: 1.38fr 1fr;
gap: 64px;
min-height: 90vh;
align-items: center;
padding: 56px 40px 64px;
/* max-width: 1280px + margin: 0 auto déjà hérités de .hero */
position: relative;
}
/* ── Colonne gauche : statement ────────────────────────────── */
.hero-left { max-width: 640px; }
/* ── HERO MARK (œil Inquiring décoratif au-dessus du contenu) ──
Visible uniquement sur mobile/tablette (≤ 1024px). Sur desktop,
le smartphone à droite remplit le rôle de point d'ancrage visuel.
Sur mobile, sans ce mark, le contenu démarre nu (eyebrow + h1) ;
le mark ajoute un repère de marque immédiat et équilibre le hero
verticalement (cf. demande user : "icon ou visuel au-dessus du
contenu pour éviter de laisser du vide en dessous"). */
.hero-mark {
display: none; /* caché par défaut, override mobile plus bas */
width: 56px;
height: 56px;
margin-bottom: 28px;
/* Gradient violet→bleu sur le path (signature DA) */
background: linear-gradient(135deg, var(--g1), var(--g2));
/* Mask : seul l'œil SVG est rempli par le gradient */
-webkit-mask: var(--hero-mark-mask) center / contain no-repeat;
mask: var(--hero-mark-mask) center / contain no-repeat;
opacity: 0.9;
/* Variable mask = le SVG inline est remplacé par une mask-image data URL */
}
/* On utilise le SVG inline du HTML directement (pas de mask) : approche
plus simple, on style le path via fill avec un gradient en SVG ou
via currentColor. Reset des règles mask et utilisation de fill direct. */
.hero-mark {
-webkit-mask: none; mask: none;
background: transparent;
}
.hero-mark svg {
width: 100%; height: 100%;
display: block;
}
.hero-mark svg path {
fill: var(--g1);
transition: fill 1.8s ease;
}
/* Petit pulse de présence (subtil) */
@keyframes heroMarkPulse {
0%, 100% { opacity: 0.78; transform: scale(1); }
50% { opacity: 1; transform: scale(1.04); }
}
.hero-mark { animation: heroMarkPulse 3.6s ease-in-out infinite; transform-origin: center; }
@media (prefers-reduced-motion: reduce) {
.hero-mark { animation: none; }
}
.hero-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(255,255,255,0.05);
border: 1px solid var(--border);
border-radius: 20px;
padding: 5px 14px;
margin-bottom: 28px;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--muted);
}
/* H1 avec mask-reveal ready (mais animation désactivée pour le moment,
on l'activera après validation du layout — chaque ligne est wrappée
dans .hero-line + .hero-line-inner pour préparer le clip-path) */
.hero-title-split {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(72px, 9vw, 144px);
font-weight: 800;
line-height: 0.88;
letter-spacing: -3px;
text-transform: uppercase;
margin: 0 0 28px;
color: var(--text);
}
.hero-title-split .hero-line {
display: block;
overflow: hidden; /* prêt pour mask-reveal */
}
.hero-title-split .hero-line-inner {
display: inline-block;
}
.hero-title-split .h1-grad {
display: inline;
}
/* ── ANIMATION D'ENTRÉE (hero uniquement) ──
Fade-up séquencé léger au chargement · 100% CSS · zéro reflow.
fill-mode `backwards` = état caché AVANT le démarrage, puis retour au style
naturel à la fin (préserve l'opacité .92 du .hero-role, aucune valeur figée).
Entièrement désactivée sous prefers-reduced-motion. */
@keyframes heroFadeUp {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-left > * { animation: heroFadeUp .7s cubic-bezier(.22,.61,.36,1) backwards; }
.hero-left > *:nth-child(1) { animation-delay: .08s; }
.hero-left > *:nth-child(2) { animation-delay: .16s; }
.hero-left > *:nth-child(3) { animation-delay: .24s; }
.hero-left > *:nth-child(4) { animation-delay: .32s; }
.hero-left > *:nth-child(5) { animation-delay: .40s; }
.hero-left > *:nth-child(6) { animation-delay: .48s; }
.hero-right { animation: heroFadeUp .9s cubic-bezier(.22,.61,.36,1) .35s backwards; }
@media (prefers-reduced-motion: reduce) {
.hero-left > *, .hero-right { animation: none; }
}
.hero-split .hero-role {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(20px, 2.4vw, 28px);
font-style: italic;
font-weight: 500;
line-height: 1.3;
color: var(--text);
opacity: 0.92;
text-transform: none;
letter-spacing: 0.2px;
margin-bottom: 24px;
max-width: 540px;
}
.hero-split .hero-role .hero-role-line { display: inline; }
.hero-split .hero-role br { display: inline; }
/* Ligne formation/niveau — répond à "qui es-tu, quel niveau ?" (audit UX).
Discrète (taille corps, muted) avec l'école en dégradé + icône toque. */
.hero-formation {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 13px;
letter-spacing: 0.3px;
color: var(--muted);
margin-bottom: 24px;
padding: 7px 14px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
border-radius: 20px;
}
.hero-formation-icon {
width: 16px; height: 16px;
color: var(--g1);
flex-shrink: 0;
}
.hero-split .hero-desc {
font-size: 14px;
line-height: 1.75;
color: var(--muted);
max-width: 420px;
margin-bottom: 36px;
}
.hero-split .hero-btns {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
/* ── Colonne droite : panels rotatifs ─────────────────────── */
.hero-right {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}
/* ── SMARTPHONE MOCKUP ───────────────────────────────────────
Outline minimal, cadre sombre métal, encoche centrée en haut.
Le contenu (panels) glisse en swipe horizontal à l'intérieur.
Pattern UX : on évoque l'usage mobile sans réalisme excessif. */
.hero-device {
position: relative;
width: 100%;
/* Ratio 9:16 (plus carré) appliqué partout — desktop copie le rendu
mobile validé : moins de vide vertical, contenu mieux réparti. */
max-width: 320px;
aspect-ratio: 9 / 16;
margin: 0 auto;
}
.hero-device-frame {
position: relative;
width: 100%; height: 100%;
background: linear-gradient(160deg, #1A1F2E 0%, #14182A 100%);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 36px;
box-shadow:
0 24px 60px -16px rgba(0,0,0,0.55),
inset 0 1px 0 rgba(255,255,255,0.05);
padding: 12px;
display: flex;
flex-direction: column;
}
.hero-device-notch {
position: absolute;
top: 14px;
left: 50%;
transform: translateX(-50%);
width: 70px; height: 14px;
background: #0A0D17;
border-radius: 10px;
z-index: 3;
}
.hero-device-screen {
position: relative;
flex: 1;
border-radius: 26px;
overflow: hidden;
background: linear-gradient(160deg, rgba(13,17,23,0.92), rgba(20,24,42,0.88));
border: 1px solid rgba(255,255,255,0.04);
}
.hero-panels {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.hero-panel {
position: absolute;
inset: 0;
/* Top : clear l'encoche (14+ top + 14 height + margin)
Bottom : clear les dots overlay (36px) */
padding: 38px 18px 38px;
display: flex;
flex-direction: column;
opacity: 0;
transform: translateX(100%);
transition: transform 480ms cubic-bezier(0.32, 0.72, 0.32, 1), opacity 240ms ease;
pointer-events: none;
}
.hero-panel.active {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
transition: transform 480ms cubic-bezier(0.32, 0.72, 0.32, 1), opacity 240ms ease 80ms;
}
.hero-panel.exit-left {
transform: translateX(-100%);
}
.hero-panel-head {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.hero-panel-label {
font-family: 'DM Sans', sans-serif;
font-size: 9px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 700;
color: var(--g1);
}
.hero-panel-num {
font-family: 'DM Sans', sans-serif;
font-size: 9px;
letter-spacing: 1.2px;
color: var(--muted);
font-weight: 500;
}
.hero-panel-body {
flex: 1;
display: flex;
flex-direction: column;
/* Contenu centré verticalement (desktop copie le rendu mobile validé) :
icon + titre + desc + tags équilibrés entre le head et la CTA, plus
de gros vide en bas. */
justify-content: center;
gap: 16px;
padding: 14px 0 12px;
}
/* Icon thématique de chaque slide — petit repère visuel en haut du body,
couleur gradient via stroke + technique grad sur svg. */
.hero-panel-icon {
width: 42px; height: 42px;
display: inline-flex;
align-items: center; justify-content: center;
margin-bottom: 4px;
color: var(--g1);
transition: color 1.8s ease, transform .4s ease;
}
.hero-panel-icon svg {
width: 100%; height: 100%;
display: block;
}
/* Léger float au hover du device (parent .hero-device:hover géré par l'auto-rotate
pause, mais on garde l'effet sur tous les panels actifs pour vie supplémentaire) */
.hero-panel.active .hero-panel-icon {
animation: heroPanelIconFloat 4s ease-in-out infinite;
}
@keyframes heroPanelIconFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
.hero-panel.active .hero-panel-icon { animation: none; }
}
.hero-panel-title {
font-family: 'Barlow Condensed', sans-serif;
font-size: 26px;
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.5px;
text-transform: uppercase;
color: var(--text);
margin: 0;
}
.hero-panel-desc {
font-size: 12px;
line-height: 1.55;
color: var(--muted);
margin: 0;
}
.hero-panel-meta {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 2px;
}
.hero-panel-tag {
font-size: 8.5px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--muted);
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
padding: 2px 7px;
border-radius: 8px;
}
/* Stats version dans panel 3 (format smartphone vertical).
IMPORTANT : justify-content: center (et non flex-start) pour rester
centré verticalement comme les panels 1 et 2 — c'est ce qui le rendait
désaligné (collé en haut) alors que les autres slides étaient centrés. */
.hero-panel-stats {
gap: 4px;
justify-content: center;
padding: 14px 0 12px;
}
.hero-stat-row {
display: flex;
align-items: baseline;
gap: 10px;
padding: 8px 0;
border-top: 1px solid var(--border);
}
.hero-stat-row:first-child { border-top: 0; padding-top: 2px; }
.hero-stat-num {
font-family: 'Barlow Condensed', sans-serif;
font-size: 28px;
font-weight: 800;
line-height: 1;
flex: 0 0 auto;
}
.hero-stat-label {
font-size: 10px;
line-height: 1.4;
color: var(--muted);
}
/* CTA panel : flèche qui glisse au hover */
.hero-panel-cta {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'DM Sans', sans-serif;
font-size: 9.5px;
letter-spacing: 1.3px;
text-transform: uppercase;
font-weight: 600;
color: var(--text);
text-decoration: none;
padding-top: 10px;
border-top: 1px solid var(--border);
margin-top: auto;
transition: color 0.2s;
}
.hero-panel-cta:hover { color: var(--g1); }
.hero-panel-arrow {
display: inline-block;
transition: transform 0.2s;
}
.hero-panel-cta:hover .hero-panel-arrow { transform: translateX(4px); }
/* Dots de navigation — overlay à l'intérieur de l'écran, ancrés en bas centre
Sont au-dessus des panels (z-index 2) pour rester cliquables même pendant
les transitions de swipe. */
.hero-panel-dots {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
align-items: center;
z-index: 2;
/* Petit fond flou pour garder la lisibilité quel que soit le contenu derrière */
padding: 6px 10px;
background: rgba(10, 13, 23, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 20px;
}
.hero-panel-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(255,255,255,0.22);
border: 0;
padding: 0;
cursor: pointer;
transition: background 0.2s, transform 0.2s, width 0.3s ease;
}
.hero-panel-dot:hover { transform: scale(1.2); background: rgba(255,255,255,0.4); }
.hero-panel-dot.active {
background: var(--g1);
width: 20px;
border-radius: 4px;
}
/* ── Scroll indicator subtle ──────────────────────────────── */
.hero-scroll-indicator {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
font-family: 'DM Sans', sans-serif;
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
opacity: 0.7;
transition: opacity 0.2s, transform 0.2s;
}
.hero-scroll-indicator:hover {
opacity: 1;
color: var(--text);
}
.hero-scroll-arrow {
font-size: 16px;
animation: scrollPulse 2.4s ease-in-out infinite;
}
@keyframes scrollPulse {
0%, 100% { transform: translateY(0); opacity: 0.55; }
50% { transform: translateY(4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.hero-scroll-arrow { animation: none; opacity: 0.8; }
}
/* Le scroll indicator disparait quand on a scrollé (toggle via JS) */
.hero-scroll-indicator.scrolled {
opacity: 0;
pointer-events: none;
transform: translateX(-50%) translateY(8px);
}
/* ── Responsive Hero split ────────────────────────────────── */
@media (max-width: 1024px) {
.hero.hero-split {
grid-template-columns: 1fr;
gap: 48px;
min-height: auto;
padding-top: 48px;
padding-bottom: 80px;
}
.hero-right {
align-items: stretch;
}
.hero-panels {
max-width: 100%;
aspect-ratio: auto;
min-height: 320px;
}
.hero-scroll-indicator { display: none; }
/* CTAs hero plein-largeur en mobile : le wrap prend toute la largeur
ET le