:root{--topbar-h:72px;
  --blue:#2f3af7;
  --blue-600:#2340ff;
  --blue-300:#9db0ff;
  --white:#ffffff;
  --ink:#151515;
  --paper:#f7f8fc;
  --muted:#6b7280;
  --card:#fff;
  --accent:#ff3b2e;
  --green:#2ecc71;
  --orange:#ff8a39;
  --radius:18px;
  --shadow:0 12px 30px rgba(0,0,0,.08);
  --maxw:1140px;
  --space: clamp(16px, 3vw, 28px);
  --space-lg: clamp(28px, 5vw, 56px);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--paper);color:var(--ink);line-height:1.6}

/* Layout helpers */
.container{width:min(100%,var(--maxw));margin:auto;padding:0 var(--space)}
section{padding: calc(var(--space-lg) + 48px) 0;}
h1,h2,h3{font-family:Poppins,Inter,system-ui,Arial,sans-serif}
h2{font-weight:700;font-size:clamp(1.6rem, 1.1rem + 1.5vw, 2rem);margin-top:20px}
p.lead{font-size:clamp(1rem, .9rem + .5vw, 1.15rem);color:#222;/*margin-bottom:10px*/}
.section-sub{color:var(--muted);margin-bottom:16px}

/* Blue / white checkerboard background (accessible) */
.checker{
  --s: 34px; /* size of the squares */
  background:
    linear-gradient(45deg, var(--blue) 25%, transparent 25%) 0 0/var(--s) var(--s),
    linear-gradient(-45deg, var(--blue) 25%, transparent 25%) 0 var(--s)/var(--s) var(--s),
    linear-gradient(45deg, transparent 75%, var(--blue) 75%) 0 0/var(--s) var(--s),
    linear-gradient(-45deg, transparent 75%, var(--blue) 75%) 0 var(--s)/var(--s) var(--s),
    var(--white);
}
/* Animation damier en diagonale */
@keyframes checkerMove {
  0%   { background-position: 0 0, 0 34px, 0 0, 0 34px; }
  100% { background-position: 34px 34px, 34px 68px, 34px 34px, 34px 68px; }
}

.checker {
  animation: checkerMove 8s linear infinite;
}
/* Sticky, readable topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px var(--space);
  background:rgba(255,255,255,.7);
  backdrop-filter:saturate(130%) blur(8px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.logo{display:inline-grid;place-content:center;width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,var(--blue),var(--accent));color:#fff;font-weight:700}
.wordmark{font-family:Poppins,sans-serif;letter-spacing:.3px}
.hamburger{display:none;gap:6px;flex-direction:column;background:none;border:none;padding:8px}
.hamburger span{width:24px;height:2px;background:#111;border-radius:2px}
.nav{display:flex;gap:16px}
.nav a{padding:10px 12px;border-radius:10px;font-weight:600;color:#111;text-decoration:none}
.nav a.active, .nav a:focus-visible{outline: none;background:#111;color:#fff}

/* Hero */
.hero{color:#111;position:relative;overflow:hidden}
.hero-inner{display:grid;gap:var(--space);grid-template-columns:1.2fr .8fr;align-items:center;padding:var(--space-lg) 0}
.card{background:var(--card);padding:18px;border-radius:var(--radius);box-shadow:var(--shadow)}
.glass{background:rgba(255,255,255,.9)}
.title{font-size:clamp(1.3rem, 1.1rem + 1.2vw, 2rem);margin-bottom:8px}
.hook{font-size:clamp(1rem, .9rem + .5vw, 1.15rem);margin-bottom:12px}
.quick-meta{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 14px 0;color:#222;list-style:none;padding-left:0;}
.quick-meta a{color:inherit}
.quick-meta li::marker {content: "";}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.85rem 1.1rem;border-radius:12px;
  border:1px solid #111;color:#111;font-weight:700;text-decoration:none;box-shadow:var(--shadow);transition:transform .06s ease}
.btn:active{transform:translateY(1px)}
.btn.primary{background:#111;color:#fff;border-color:#111}
.btn.tiny{padding:.55rem .8rem;font-size:.9rem}
/* --- Galerie colorée : images plein cadre --- */
.thumb { position: relative; overflow: hidden; background: #f3f4f6; }
.thumb-img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease, filter .4s ease;
}
.thumb:hover .thumb-img{ transform: scale(1.04); filter: saturate(1.1) }

/* Variante pour les miniatures sites (SVG, logos, captures) */
.thumb--site .thumb-img.contain{ object-fit: contain; padding: 10px; background: linear-gradient(135deg, #eef2ff, #f5f3ff); }

/* Bordure lumineuse au survol */
.mini-card{
  position: relative;
  border: 1px solid #eee;
  box-shadow: var(--shadow);
}
.mini-card:hover{
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  border-color: rgba(0,0,0,.06);
}
/* Zoom modal (lightbox) */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,.8);
  z-index: 2000;
}
.lightbox.open { display: flex; }

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
  animation: zoomIn .3s ease;
}

@keyframes zoomIn {
  from { transform: scale(.85); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
/* Tags plus colorés */
.tag{
  border: none; color: #111; background: #fff; font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.tags .tag:nth-child(4n+1){ background: linear-gradient(135deg,#dbeafe,#eef2ff); }
.tags .tag:nth-child(4n+2){ background: linear-gradient(135deg,#dcfce7,#f0fdf4); }
.tags .tag:nth-child(4n+3){ background: linear-gradient(135deg,#fee2e2,#fff1f2); }
.tags .tag:nth-child(4n+4){ background: linear-gradient(135deg,#ffedd5,#fef3c7); }

/* Petites retouches d’alignement pour la grille */
.reali-list .mini-card{ grid-template-rows: 180px auto; } /* vignettes un peu plus hautes */

/* === Réalisations === */
.reali-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.reali-filter{border:1px solid #d1d5db;background:#fff;padding:8px 12px;border-radius:999px;font-weight:600;cursor:pointer;transition:background .2s ease, color .2s ease, transform .2s ease}
.reali-filter.is-active{background:#111;color:#fff}

.realisations-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.reali-card{background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;transition:opacity .2s ease, transform .2s ease}
.reali-card.is-hidden{opacity:0;transform: scale(.98);display:none}
.reali-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}




.mini-card{display:grid;grid-template-rows:120px auto;border:1px solid #eee;border-radius:14px;overflow:hidden;background:#fff}
.thumb{background:#f3f4f6}
.thumb--ph{background-image:linear-gradient(120deg,#ffd6e7,#f7f7ff)}
.thumb--ph2{background-image:linear-gradient(120deg,#c7f5ff,#e7faff)}
.thumb--ph3{background-image:linear-gradient(120deg,#ffe6c7,#fff3e6)}
.thumb--ph4{background-image:linear-gradient(120deg,#e0ffe0,#f1fff1)}
.thumb--web{background-image:linear-gradient(120deg,#f7ffd5,#e6ffdd)}
.thumb--web2{background-image:linear-gradient(120deg,#ffe7d1,#fff5e8)}
.thumb--web3{background-image:linear-gradient(120deg,#e0eaff,#eef2ff)}
.thumb--web4{background-image:linear-gradient(120deg,#e5fff8,#f4fffd)}
.thumb--aff{background-image:linear-gradient(120deg,#e3d1ff,#f5edff)}
.thumb--aff2{background-image:linear-gradient(120deg,#d1ffe6,#ecfff7)}
.thumb--aff3{background-image:linear-gradient(120deg,#fff0d6,#fff7e8)}
.thumb--aff4{background-image:linear-gradient(120deg,#ffd6e3,#fff0f6)}
.thumb--inv{background-image:linear-gradient(120deg,#ffd1d1,#fff0f0)}
.thumb--inv2{background-image:linear-gradient(120deg,#d1e4ff,#eef5ff)}
.thumb--inv3{background-image:linear-gradient(120deg,#fff5d1,#fffbeb)}
.thumb--inv4{background-image:linear-gradient(120deg,#e5d1ff,#f1eaff)}
.mini-card figcaption{padding:10px}
.mc-title{font-weight:700;margin-bottom:4px}
.mc-desc{font-size:.95rem;color:#374151;margin-bottom:6px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.tag{font-size:.8rem;border:1px solid #e5e7eb;border-radius:999px;padding:3px 8px;color:#374151;background:#fff}

/* Timeline tree (Parcours) */
.timeline{position:relative;padding:8px 0 0 0}
.timeline .root{display:inline-block;padding:.35rem .7rem;border-radius:999px;background:#111;color:#fff;font-weight:700;margin:6px 0}
.timeline .end{background:#444}
.branch{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:10px 0 0 0;position:relative}
.node{position:relative;padding-left:18px}
.node-line{position:absolute;left:8px;top:18px;bottom:-18px;width:2px;background:linear-gradient(var(--blue),transparent)}
.node-dot{position:absolute;left:2px;top:10px;width:12px;height:12px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(47,58,247,.15)}
.node-card{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:14px}
.node-year{font-weight:800;color:#111}
.node-title{font-weight:700}
.node-meta{color:var(--muted);margin-bottom:6px}
.node-list{margin:6px 0 0 18px}
.node--primary .node-dot{background:var(--accent)}
.node--primary .node-line{background:linear-gradient(var(--accent),transparent)}
.node--brand .node-dot{background:var(--orange)}
.node--brand .node-line{background:linear-gradient(var(--orange),transparent)}
.node--ecom .node-dot{background:var(--blue)}
.node--email .node-dot{background:#6b46ff}
.node--edu .node-dot{background:var(--green)}

.edu{margin-top:8px}

/* Portrait */
.hero-visual{display:grid;place-items:center}
.portrait{width:min(100%,300px);height:auto;display:block;border-radius:16px}

/* Footer */
.site-footer{padding:40px 0;color:var(--muted);text-align:center}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(10px);transition:.5s ease}
.reveal.is-visible{opacity:1;transform:none}

/* Modals */
.modal{position:fixed;inset:0;display:none}
.modal[aria-hidden="false"]{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.modal-content{position:relative;z-index:1;max-width:min(920px, 92vw);margin:6vh auto;padding:20px;border-radius:18px;background:#fff}
.modal-close{position:absolute;right:12px;top:8px;border:none;background:none;font-size:1.6rem;line-height:1;cursor:pointer}
.modal-grid{display:grid;gap:12px;grid-template-columns:1fr 1fr;margin-top:8px}
@media (max-width: 800px){
  .modal-grid{grid-template-columns:1fr}
}

/* Responsive */
@media (max-width: 960px){
  .hero-inner{grid-template-columns:1fr;align-items:stretch}
  .nav{position:fixed;inset:56px 10px auto 10px;display:none;flex-direction:column;gap:4px;padding:8px;background:#fff;border-radius:12px;box-shadow:var(--shadow)}
  .nav.open{display:flex}
  .hamburger{display:flex}
}


/* === Sticky top navigation === */
.topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  min-height: var(--topbar-h);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
body{ padding-top: var(--topbar-h); }

/* === Make portrait stand out === */
.hero-visual{ position: relative; isolation: isolate; }
.hero-visual::before{content:"";position:absolute;inset:-2% -3% -1% -3%;z-index:0;pointer-events:none;background:radial-gradient(circle at 50% 38%,color-mix(in oklab, var(--blue, #3a86ff) 50%, white 0%) 0%,color-mix(in oklab, var(--blue, #3a86ff) 25%, transparent 0%) 18%,transparent 40%);filter:blur(12px);opacity:.42;}
.portrait{ width: clamp(240px, 32vw, 380px); }
.portrait--masked{
  clip-path: circle(48% at 50% 45%);
  border-radius: 999px;
  background: transparent;
  position: relative;
  z-index: 1;
  /* Layered soft ring + depth */
  filter:
    drop-shadow(0 1px 0 rgba(0,0,0,.04))
    drop-shadow(0 10px 24px rgba(0,0,0,.18))
    drop-shadow(0 24px 60px rgba(0,0,0,.22))
    drop-shadow(0 0 0 8px rgba(255,255,255,.95))
    drop-shadow(0 0 0 12px color-mix(in oklab, var(--blue, #3a86ff) 30%, transparent));
  transition: transform .25s ease, filter .25s ease;
}
.portrait--masked:hover{
  transform: translateY(-2px) scale(1.02);
  filter:
    drop-shadow(0 2px 0 rgba(0,0,0,.05))
    drop-shadow(0 16px 32px rgba(0,0,0,.22))
    drop-shadow(0 36px 72px rgba(0,0,0,.26))
    drop-shadow(0 0 0 8px rgba(255,255,255,.98))
    drop-shadow(0 0 0 14px color-mix(in oklab, var(--blue, #3a86ff) 40%, transparent));
}


.nav a{ color: inherit; text-shadow: 0 1px 0 rgba(255,255,255,.35); }

section + section{margin-top: clamp(40px, 6vw, 96px);}

.container > * + *{margin-top: clamp(18px, 2.5vw, 20px);}


#competences .chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;}
#competences .chip{
  display:inline-flex;align-items:center;
  padding:10px 14px;border-radius:999px;
  font-weight:600;color:#fff;border:none;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  line-height:1; white-space:nowrap;
}
#competences .chip:nth-child(12n+1){background:linear-gradient(135deg,#6a5af9,#49a7ff);}
#competences .chip:nth-child(12n+2){background:linear-gradient(135deg,#ff7a59,#ffb457);}
#competences .chip:nth-child(12n+3){background:linear-gradient(135deg,#00c2a8,#3de0a3);}
#competences .chip:nth-child(12n+4){background:linear-gradient(135deg,#ea4d77,#ff86a5);}
#competences .chip:nth-child(12n+5){background:linear-gradient(135deg,#9b5de5,#f15bb5);}
#competences .chip:nth-child(12n+6){background:linear-gradient(135deg,#4361ee,#48bfe3);}
#competences .chip:nth-child(12n+7){background:linear-gradient(135deg,#00b4d8,#90e0ef);}
#competences .chip:nth-child(12n+8){background:linear-gradient(135deg,#f77f00,#fcbf49);}
#competences .chip:nth-child(12n+9){background:linear-gradient(135deg,#2ec4b6,#55d6be);}
#competences .chip:nth-child(12n+10){background:linear-gradient(135deg,#ef476f,#ffd166);}
#competences .chip:nth-child(12n+11){background:linear-gradient(135deg,#8338ec,#3a86ff);}
#competences .chip:nth-child(12n+12){background:linear-gradient(135deg,#06d6a0,#118ab2);}
#competences .chip:hover{filter:saturate(1.1) brightness(1.05);}