:root {
  --bg:        #141210;
  --bg-2:      #1c1a17;
  --bg-3:      #242119;
  --border:    #2c2924;
  --border-2:  #3a352d;

  --text:      #f4f0ea;
  --text-2:    #c8c0b4;
  --text-3:    #7a7060;

  --gold:      #c9a84c;
  --gold-light:#e2c278;
  --gold-dim:  rgba(201,168,76,0.10);

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-body:  'Outfit', sans-serif;
  --font-mono:  'Space Mono', monospace;

  --radius: 8px;
  --tr: 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-weight:300;line-height:1.7;overflow-x:hidden;}

h1,h2,h3,h4{font-family:var(--font-serif);font-weight:600;line-height:1.1;}
h1{font-size:clamp(3.5rem,8vw,7.5rem);}
h2{font-size:clamp(2rem,4vw,2.8rem);}
h3{font-size:1.3rem;}
h4{font-size:1rem;font-family:var(--font-body);font-weight:500;color:var(--text);}

p{color:var(--text-2);font-size:0.95rem;line-height:1.85;}
p.lead{font-size:1.08rem;color:var(--text);font-weight:400;margin-bottom:1.2rem;}
a{color:inherit;text-decoration:none;}
strong{color:var(--text);font-weight:500;}

/* SECTION */
.section{padding:110px 5%;position:relative;border-top:1px solid var(--border);}
.section-body{max-width:1260px;margin:0 auto;}
.section-num{position:absolute;top:110px;right:5%;font-family:var(--font-mono);font-size:5rem;font-weight:700;color:var(--bg-3);user-select:none;letter-spacing:-0.04em;line-height:1;}

.section-title{font-size:clamp(1.9rem,3vw,2.6rem);margin-bottom:52px;position:relative;display:inline-block;}
.section-title::after{content:'';position:absolute;bottom:-12px;left:0;width:36px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 0.7s 0.3s ease;}
.section.visible .section-title::after{transform:scaleX(1);}
.section-title--sub{margin-top:72px;font-size:clamp(1.5rem,2.5vw,2rem);}

/* BUTTONS */
.btn-primary{display:inline-block;padding:14px 32px;background:var(--gold);color:var(--bg);font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;border:1px solid var(--gold);transition:var(--tr);position:relative;overflow:hidden;}
.btn-primary::before{content:'';position:absolute;inset:0;background:var(--gold-light);transform:scaleX(0);transform-origin:left;transition:transform var(--tr);}
.btn-primary:hover::before{transform:scaleX(1);}
.btn-primary.btn-large{padding:18px 48px;font-size:0.78rem;margin-top:44px;}
.btn-secondary{display:inline-block;padding:14px 32px;background:transparent;color:var(--text);font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;border:1px solid var(--border-2);transition:var(--tr);}
.btn-secondary:hover{border-color:var(--gold);color:var(--gold);}
.btn-cv{display:inline-block;padding:8px 16px;border:1px solid var(--border-2);font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.1em;color:var(--text-2);transition:var(--tr);}
.btn-cv:hover{border-color:var(--gold);color:var(--gold);}

/* INTERESTS */
.interests{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;}
.interests span{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.06em;padding:6px 14px;border:1px solid var(--border);color:var(--text-3);background:var(--bg-2);border-radius:var(--radius);}

::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border-2);}
::-webkit-scrollbar-thumb:hover{background:var(--gold);}
::selection{background:var(--gold-dim);color:var(--gold-light);}

.nav-links-center a {
  font-size: 0.8rem;
  color: #eae4db;
}
.nav-socials svg {
  width: 22px;
  height: 22px;
}
.btn-cv {
  font-size: 0.75rem;
  padding: 10px 18px;
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
  font-weight: 500;
}
.btn-cv:hover {
  background: var(--gold);
  color: #0a0a0a;
  border-color: var(--gold);
}
p {
  color: #d6d0c7;
}
.nav-icon:hover {
  color: var(--gold);
  transform: scale(1.15);
}

/* ===== PROJECT MODAL ===== */
.project-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.project-modal.open {
  opacity: 1;
  pointer-events: all;
}
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 6, 4, 0.82);
  backdrop-filter: blur(8px);
  cursor: pointer;
}
.modal-container {
  position: relative;
  z-index: 1;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  width: 100%;
  max-width: 680px;
  max-height: 88vh;
  overflow-y: auto;
  transform: translateY(28px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
}
.project-modal.open .modal-container {
  transform: translateY(0) scale(1);
}
.modal-close {
  position: absolute;
  top: 18px;
  right: 20px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-3);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--tr);
  z-index: 2;
}
.modal-close:hover { color: var(--text); border-color: var(--gold); }

.modal-header {
  position: relative;
  padding: 36px 32px 28px;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.modal-header-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.7;
}
.modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  position: relative;
}
.modal-tags span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border: 1px solid var(--border);
  color: var(--text-3);
  background: var(--bg);
  border-radius: 4px;
}
.modal-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--text);
  margin-bottom: 6px;
  position: relative;
}
.modal-where {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
}

.modal-body {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.modal-section h4 {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.modal-section p {
  font-size: 0.95rem;
  color: var(--text-2);
  line-height: 1.85;
}
.modal-section ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modal-section ul li {
  font-size: 0.9rem;
  color: var(--text-2);
  padding-left: 18px;
  position: relative;
  line-height: 1.65;
}
.modal-section ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 0.7rem;
  top: 5px;
}
.modal-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.modal-stack span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 6px 14px;
  border: 1px solid var(--border);
  color: var(--text-2);
  background: var(--bg-3);
  border-radius: 6px;
}
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.modal-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-3);
}
.modal-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

/* Project card clickable */
.project-card[data-modal] {
  cursor: pointer;
}

/* Élargissement des cadres */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); /* 360px au lieu de 320px */
  gap: 2rem;
}

/* Force l'alignement du footer en bas du cadre */
.project-body {
  display: flex;
  flex-direction: column;
  height: 100%; /* Important */
}

.project-footer {
  margin-top: auto; /* Pousse le bouton vers le bas */
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}