:root {
  --bg-primary: #0f1219;
  --bg-secondary: #161b26;
  --bg-card: #1a2030;
  --orange: #e88a2d;
  --orange-dark: #c06d1a;
  --orange-light: #f4a54a;
  --amber-glow: rgba(232, 138, 45, 0.12);
  --text-primary: #f0ece4;
  --text-secondary: #8b919e;
  --text-muted: #555d6e;
  --border: rgba(232, 138, 45, 0.15);
  --font-display: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  line-height: 1.6;
}

/* ═══════ GEOMETRIC BACKGROUND ═══════ */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(circle at 15% 25%, rgba(232,138,45,0.06) 0%, transparent 50%),
    radial-gradient(circle at 85% 75%, rgba(232,138,45,0.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* ═══════ GRID PATTERN ═══════ */
.grid-pattern {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    linear-gradient(rgba(232,138,45,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,138,45,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* ═══════ NAV ═══════ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(15,18,25,0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}

.nav-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--orange);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.nav-logo-img {
  height: 152px;
  width: auto;
  margin: -55px 0;
}

.nav-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 1px;
  margin: 0;
}

.nav-links { display: flex; gap: 2rem; list-style: none; }

.nav-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color 0.3s;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: var(--orange);
  transition: width 0.3s;
}

.nav-links a:hover { color: var(--orange); }
.nav-links a:hover::after { width: 100%; }

/* ═══════ HERO ═══════ */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem 4rem 4rem;
  max-width: 1400px;
  margin: 0 auto;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--amber-glow);
  border: 1px solid var(--border);
  padding: 0.5rem 1.2rem;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--orange);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 2rem;
  width: fit-content;
  animation: fadeSlideUp 0.8s ease-out;
}

.hero-badge::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--orange);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 800;
  line-height: 0.95;
  margin-bottom: 1.5rem;
  animation: fadeSlideUp 0.8s ease-out 0.1s both;
}

.hero h1 .accent {
  color: var(--orange);
  position: relative;
  display: inline-block;
}

.hero h1 .accent::after {
  content: '';
  position: absolute;
  bottom: 0.1em; left: 0; right: 0;
  height: 0.12em;
  background: var(--orange);
  opacity: 0.3;
  transform: skewX(-12deg);
}

.hero-desc {
  max-width: 600px;
  font-size: 1.15rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 2.5rem;
  animation: fadeSlideUp 0.8s ease-out 0.2s both;
}

.hero-cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  animation: fadeSlideUp 0.8s ease-out 0.3s both;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 2rem;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s;
  letter-spacing: 0.5px;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--orange);
  color: var(--bg-primary);
}
.btn-primary:hover {
  background: var(--orange-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(232,138,45,0.3);
}

.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.btn-outline:hover {
  border-color: var(--orange);
  color: var(--orange);
}

/* ═══════ HERO AVATAR ═══════ */
.hero-intro {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  animation: fadeSlideUp 0.8s ease-out 0.2s both;
}

.hero-intro .hero-desc {
  margin-bottom: 0;
  animation: none;
}

.hero-avatar {
  width: 90px;
  height: auto;
  border-radius: 50%;
  border: 2px solid var(--border);
  box-shadow: 0 0 20px rgba(232,138,45,0.15);
  object-fit: cover;
  flex-shrink: 0;
  filter: grayscale(20%) contrast(1.05);
}

/* ═══════ SECTION BACKGROUND IMAGE ═══════ */
.section-with-bg {
  position: relative;
  overflow: hidden;
}

.section-bg-image {
  position: absolute;
  top: 0; right: 0;
  width: 45%;
  height: 100%;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0.06;
  mask-image: linear-gradient(to left, rgba(0,0,0,0.8), transparent 80%);
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.8), transparent 80%);
  pointer-events: none;
  z-index: 0;
}

.section-with-bg > *:not(.section-bg-image) {
  position: relative;
  z-index: 1;
}

/* ═══════ GEOMETRIC ACCENTS ═══════ */
.geo-line {
  position: absolute;
  background: var(--orange);
  opacity: 0.08;
}

.hero .geo-line-1 {
  width: 200px; height: 1px;
  top: 30%; right: 8%;
  transform: rotate(-45deg);
}
.hero .geo-line-2 {
  width: 1px; height: 150px;
  top: 20%; right: 15%;
}
.hero .geo-line-3 {
  width: 80px; height: 80px;
  border: 1px solid var(--orange);
  background: transparent;
  top: 55%; right: 10%;
  transform: rotate(15deg);
}

/* ═══════ SECTION BASE ═══════ */
section {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 6rem 4rem;
}

.section-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.section-label::before {
  content: '';
  width: 30px; height: 1px;
  background: var(--orange);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  margin-bottom: 3rem;
  line-height: 1.1;
}

/* ═══════ PROJECTS GRID ═══════ */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 2rem;
}

.project-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
}

.project-card:hover {
  transform: translateY(-6px);
  border-color: rgba(232,138,45,0.4);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 40px rgba(232,138,45,0.08);
}

.project-thumbnail {
  width: 100%;
  height: 220px;
  overflow: hidden;
  position: relative;
}

.project-thumbnail::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(to top, var(--bg-card), transparent);
}

.project-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s;
}

.project-card:hover .project-thumbnail img {
  transform: scale(1.05);
}

.project-info { padding: 1.5rem; }

.project-type {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--orange);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.project-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.project-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.2rem;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}

.tag {
  padding: 0.3rem 0.7rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 500;
  background: rgba(232,138,45,0.08);
  color: var(--orange-light);
  border: 1px solid rgba(232,138,45,0.12);
  letter-spacing: 0.5px;
}

.project-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--orange);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: gap 0.3s;
}
.project-link:hover { gap: 0.8rem; }
.project-link svg { width: 16px; height: 16px; }

/* ═══════ SKILLS ═══════ */
.skills-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.skill-group {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2rem;
  transition: border-color 0.3s;
}

.skill-group:hover {
  border-color: rgba(232,138,45,0.35);
}

.skill-group-icon {
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--amber-glow);
  border-radius: 8px;
  margin-bottom: 1rem;
  color: var(--orange);
  font-size: 1.2rem;
}

.skill-group h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.skill-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.skill-list li {
  font-size: 0.82rem;
  color: var(--text-secondary);
  padding: 0.3rem 0.8rem;
  background: rgba(255,255,255,0.03);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.05);
}

/* ═══════ PARCOURS ═══════ */
.timeline-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 4rem;
}

.timeline {
  position: relative;
  padding-left: 2rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, var(--orange), transparent);
}

.timeline-item {
  position: relative;
  margin-bottom: 2.5rem;
  padding-left: 1.5rem;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -2.35rem; top: 0.4rem;
  width: 10px; height: 10px;
  background: var(--orange);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(232,138,45,0.4);
}

.timeline-date {
  font-size: 0.78rem;
  color: var(--orange);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.timeline-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.timeline-sub {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

/* ═══════ CONTACT ═══════ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.contact-info h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.contact-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-links a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.3s;
}
.contact-links a:hover { color: var(--orange); }

.contact-links svg {
  width: 20px; height: 20px;
  color: var(--orange);
  flex-shrink: 0;
}

/* ── Formulaire de contact ── */
.contact-form-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2.5rem;
}

.contact-form-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* Honeypot — invisible pour les humains */
.form-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
  pointer-events: none;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 768px) {
  .form-row { grid-template-columns: 1fr; }
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.92rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-muted);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(232,138,45,0.15);
}

.form-group input.invalid,
.form-group textarea.invalid {
  border-color: #e05050;
  box-shadow: 0 0 0 3px rgba(224,80,80,0.15);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.required {
  color: var(--orange);
  font-weight: 700;
}

/* Checkbox RGPD */
.form-consent {
  margin-top: 0.5rem;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.checkbox-label input[type="checkbox"] {
  width: auto;
  margin-top: 0.2rem;
  accent-color: var(--orange);
  cursor: pointer;
  flex-shrink: 0;
}

.checkbox-label a {
  color: var(--orange);
  text-decoration: underline;
}
.checkbox-label a:hover {
  color: var(--orange-light);
}

/* Messages de statut */
.form-status {
  font-size: 0.88rem;
  min-height: 1.2em;
  margin-bottom: 0.5rem;
}
.form-status.success { color: #40c840; }
.form-status.error { color: #e05050; }

.btn-submit {
  width: 100%;
  text-align: center;
  margin-top: 0.5rem;
  cursor: pointer;
}
.btn-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Legacy (garde pour compatibilite) */
.contact-cta {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2.5rem;
  text-align: center;
}

.contact-cta p {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ═══════ QR CODE ═══════ */
.qrcode-container {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3rem;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 3rem;
}

.qrcode-visual {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.qrcode-visual img {
  border-radius: 8px;
  display: block;
}

.qrcode-text h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.qrcode-text p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

/* QR responsive: gere dans la section RESPONSIVE principale */

/* ═══════ FOOTER ═══════ */
footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2rem 4rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.footer-legal {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 0.8rem;
}

.footer-legal a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.78rem;
  transition: color 0.3s;
}

.footer-legal a:hover {
  color: var(--orange);
}

/* ═══════ VIDEO CARD ═══════ */
.project-card--video {
  grid-column: 1 / -1;
}

.project-card--video-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 340px;
}

.video-embed {
  position: relative;
  overflow: hidden;
}

.video-embed video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px 0 0 12px;
  min-height: 340px;
}

.project-card--video .project-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem;
}

.project-card--video .project-name {
  font-size: 1.6rem;
}

/* ═══════ ANIMATIONS ═══════ */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile & Tablette
   Breakpoints : 1024px (tablette paysage), 768px (tablette portrait), 480px (mobile)
   ═══════════════════════════════════════════════════════════════ */

/* ══ BURGER BUTTON (masque par defaut, visible < 768px) ══ */
.nav-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 110;
  flex-direction: column;
  gap: 5px;
}
.nav-burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
/* Canvas particules dans le menu mobile */
.nav-particle-canvas {
  display: none;
}

/* Animation burger -> croix */
.nav-burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.active span:nth-child(2) { opacity: 0; }
.nav-burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══ TABLETTE PAYSAGE — max 1024px ══ */
@media (max-width: 1024px) {
  /* Nav : espacement reduit */
  nav { padding: 0.8rem 1.5rem; }
  .nav-links { gap: 1.2rem; }
  .nav-links a { font-size: 0.75rem; }
  .nav-logo-img { height: 120px; margin: -42px 0; }
  .nav-title { font-size: 0.95rem; }

  /* Hero & sections : padding reduit */
  .hero { padding: 5rem 2.5rem 3rem; }
  section { padding: 4rem 2.5rem; }

  /* Projets : 2 colonnes */
  .projects-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

  /* Geo lines masquees */
  .hero .geo-line-1, .hero .geo-line-2, .hero .geo-line-3 { display: none; }

  /* Image de fond section : attenuee */
  .section-bg-image { opacity: 0.04; width: 55%; }

  /* Video card : empilee */
  .project-card--video-inner { grid-template-columns: 1fr; }
  .video-embed video { border-radius: 12px 12px 0 0; min-height: 240px; }

  /* Skills : 2 colonnes */
  .skills-container { grid-template-columns: repeat(2, 1fr); }

  /* QR code : empile */
  .qrcode-container { grid-template-columns: 1fr; text-align: center; gap: 2rem; padding: 2rem; }
  .qrcode-visual { justify-self: center; }
  .qrcode-visual img { width: 220px; height: 220px; }

  /* Footer : padding reduit */
  footer { padding: 2rem 1.5rem; }
}

/* ══ TABLETTE PORTRAIT — max 768px ══ */
@media (max-width: 768px) {
  /* Nav : burger visible, menu plein ecran */
  nav { z-index: 200; }
  .nav-burger { display: flex; position: relative; z-index: 210; }
  .nav-links {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    padding: 2rem;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 205;
  }
  .nav-links.open { opacity: 1; visibility: visible; }
  .nav-links li { padding: 1.2rem 0; border-bottom: 1px solid rgba(232,138,45,0.1); text-align: center; width: 100%; max-width: 280px; }
  .nav-links li:last-child { border-bottom: none; }
  .nav-links a { font-size: 1.15rem; letter-spacing: 2px; color: var(--text-primary); }

  /* Canvas particules dans le menu mobile */
  .nav-particle-canvas {
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
  }
  .nav-links li { position: relative; z-index: 1; }

  /* Hero */
  .hero { padding: 5rem 1.5rem 3rem; min-height: auto; }
  .hero h1 { font-size: clamp(2.2rem, 7vw, 3.5rem); }
  .hero-desc { font-size: 1rem; }
  .hero-intro { gap: 1rem; }
  .hero-avatar { width: 70px; }

  /* CTA : empiles */
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; justify-content: center; min-height: 48px; }

  /* Sections */
  section { padding: 3.5rem 1.5rem; }
  .section-title { margin-bottom: 2rem; }

  /* Projets : 1 colonne */
  .projects-grid { grid-template-columns: 1fr; gap: 1.5rem; }

  /* Contact : empile */
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .contact-cta .btn { width: 100%; text-align: center; justify-content: center; }

  /* Timeline : 1 colonne (deja gere) */
  .timeline-grid { grid-template-columns: 1fr; gap: 2rem; }

  /* Image de fond section */
  .section-bg-image { opacity: 0.03; width: 50%; }

  /* Video card */
  .project-card--video .project-name { font-size: 1.3rem; }
  .project-card--video .project-info { padding: 1.5rem; }

  /* Footer */
  footer { padding: 1.5rem 1rem; }
  .footer-legal { gap: 1rem; }
}

/* ══ MOBILE — max 480px ══ */
@media (max-width: 480px) {
  /* Nav */
  nav { padding: 0.6rem 1rem; }
  .nav-logo-img { height: 90px; margin: -30px 0; }
  .nav-title { font-size: 0.8rem; letter-spacing: 0.5px; }

  /* Hero — titre tronque : forcer le retour a la ligne */
  .hero { padding: 4.5rem 1rem 2rem; }
  .hero h1 { font-size: clamp(1.8rem, 8vw, 2.5rem); margin-bottom: 1rem; word-break: break-word; overflow-wrap: break-word; }
  .hero-badge { font-size: 0.68rem; padding: 0.4rem 0.9rem; margin-bottom: 1.2rem; }
  .hero-desc { font-size: 0.9rem; line-height: 1.6; }
  .hero-intro { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .hero-avatar { width: 60px; }

  /* Boutons : taille tactile 48px min */
  .btn { padding: 0.85rem 1.5rem; font-size: 0.85rem; min-height: 48px; }

  /* Sections */
  section { padding: 3rem 1rem; }
  .section-label { font-size: 0.68rem; }
  .section-title { font-size: clamp(1.5rem, 5vw, 2rem); margin-bottom: 1.5rem; }

  /* Projets */
  .project-thumbnail { height: 180px; }
  .project-info { padding: 1rem; }
  .project-name { font-size: 1.15rem; }
  .project-desc { font-size: 0.82rem; }
  .tag { font-size: 0.65rem; padding: 0.25rem 0.55rem; }

  /* Skills : 1 colonne */
  .skills-container { grid-template-columns: 1fr; gap: 1rem; }
  .skill-group { padding: 1.5rem; }
  .skill-group h3 { font-size: 1rem; }

  /* Image de fond section : masquee */
  .section-bg-image { display: none; }

  /* Timeline : une seule ligne continue */
  .timeline-grid { display: flex; flex-direction: column; gap: 0; }
  .timeline { padding-left: 1.5rem; }
  /* Supprimer l'espace entre les 2 blocs timeline pour former 1 seule ligne */
  .timeline:not(:first-child) { padding-top: 0; }
  .timeline:not(:first-child)::before { top: 0; }
  .timeline:first-child { padding-bottom: 0; }
  .timeline-item { padding-left: 1rem; margin-bottom: 1.8rem; }
  .timeline-item::before { left: -1.85rem; width: 8px; height: 8px; }
  .timeline-title { font-size: 1rem; }
  .timeline-sub { font-size: 0.82rem; }
  .timeline-date { font-size: 0.72rem; }

  /* Contact */
  .contact-info h3 { font-size: 1.3rem; }
  .contact-links a { font-size: 0.88rem; }
  .contact-cta { padding: 1.5rem; }

  /* QR Code */
  .qrcode-container { padding: 1.5rem; gap: 1.5rem; }
  .qrcode-visual { padding: 1rem; }
  .qrcode-visual img { width: 180px; height: 180px; }
  .qrcode-text h3 { font-size: 1.15rem; }
  .qrcode-text p { font-size: 0.85rem; }

  /* Video card */
  .video-embed video { min-height: 200px; }
  .project-card--video .project-name { font-size: 1.15rem; }
  .project-card--video .project-info { padding: 1rem; }

  /* Footer */
  footer { padding: 1.2rem 1rem; }
  .footer-legal { flex-direction: column; gap: 0.5rem; align-items: center; }
  .footer-legal a { font-size: 0.72rem; }

  /* Performance : simplifier les animations sur mobile */
  .reveal { transition-duration: 0.5s; }
  .project-card.reveal { transform: translateY(30px) rotate(0deg); }
  .skill-group.reveal { transform: perspective(800px) rotateY(45deg); }
  .qrcode-visual::after { display: none; }
  .grid-pattern { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   PARTICLE FLOW — Animations JavaScript interactives
   ─────────────────���───────────────────────────────────────────
   7 animations implementees :
     1. Canvas de particules interactif (hero)
     2. Fade + slide sequentiel (hero)
     3. Cascade staggeree au scroll (cards projets)
     4. Glow pulse orange au hover (cards projets)
     5. Flip 3D reveal (competences)
     6. Anneau pulsant (QR code)
     7. Parallax subtil au scroll (titres de section)

   JS associe : <script> en bas de portfolio-studio-hlf.html
   ══════════════════════════════��═════════════════════════���══════ */


/* ── 1. HERO CANVAS ───────────────────────────���──────────────
   Canvas HTML5 en fond du hero avec ~80 particules orange
   qui flottent et reagissent au curseur (repulsion).
   Les particules proches sont connectees par des lignes.
   Le canvas est en position absolute derriere le contenu.   */

#particle-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Force le contenu du hero au-dessus du canvas */
.hero > *:not(#particle-canvas) {
  position: relative;
  z-index: 2;
}

/* --- Canvas particules dans les sections --- */
.section-with-particles {
  position: relative;
}

.section-particle-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.section-with-particles > *:not(.section-particle-canvas) {
  position: relative;
  z-index: 2;
}


/* ── 2. HERO FADE SLIDE ──────────────────────────────────────
   Les elements du hero (badge, h1, intro, CTA) apparaissent
   en sequence avec un stagger de 200ms.
   Etat initial : invisible + decale vers le bas (30px).
   Le JS ajoute .hero-visible pour declencher la transition. */

.hero-fade-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hero-fade-item.hero-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ── 3. CARDS — CASCADE STAGGEREE AU SCROLL ──────────────────
   Les project-cards entrent une par une au scroll avec
   un delai progressif de 150ms entre chaque.
   Mouvement : translateY(60px) + rotation 2deg -> position finale.
   Override le .reveal de base pour un effet plus dramatique. */

.project-card.reveal {
  opacity: 0;
  transform: translateY(60px) rotate(2deg);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s ease;
}
.project-card.reveal.visible {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}


/* ── 4. CARDS — GLOW PULSE AU HOVER ──────────────────────────
   Au survol, un halo lumineux orange pulse 2 fois depuis
   les bords de la carte puis reste stable.
   La carte s'eleve de 4px avec une bordure orange accentuee. */

@keyframes glowPulse {
  0%   { box-shadow: 0 0 0 0 rgba(232,138,45,0.4); }
  25%  { box-shadow: 0 0 20px 4px rgba(232,138,45,0.35); }
  50%  { box-shadow: 0 0 5px 1px rgba(232,138,45,0.15); }
  75%  { box-shadow: 0 0 18px 3px rgba(232,138,45,0.3); }
  100% { box-shadow: 0 0 12px 2px rgba(232,138,45,0.2), 0 20px 60px rgba(0,0,0,0.4); }
}

.project-card:hover {
  animation: glowPulse 0.8s ease forwards;
  transform: translateY(-4px);
  border-color: rgba(232,138,45,0.5);
}


/* ── 5. COMPETENCES — FLIP 3D REVEAL ─────────────────────────
   Les skill-groups se revelent avec un effet flip 3D
   (rotateY 90deg -> 0) quand ils entrent dans le viewport.
   Les icones tournent sur elles-memes (360deg) pendant le flip.
   Stagger de 120ms entre chaque groupe (gere en JS). */

.skill-group.reveal {
  opacity: 0;
  transform: perspective(800px) rotateY(90deg);
  transform-origin: center center;
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.skill-group.reveal.visible {
  opacity: 1;
  transform: perspective(800px) rotateY(0deg);
}

.skill-group.reveal .skill-group-icon {
  display: inline-flex;
  transition: transform 0.7s ease;
}
.skill-group.reveal.visible .skill-group-icon {
  animation: iconSpin 0.7s ease forwards;
}

@keyframes iconSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* ── 6. QR CODE — ANNEAU PULSANT ─────────────────────────────
   Un anneau orange s'expand et disparait en boucle (2s)
   autour du QR code pour attirer l'attention.
   Utilise un pseudo-element ::after en position absolue. */

.qrcode-visual::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  border: 2px solid var(--orange);
  border-radius: 12px;
  transform: translate(-50%, -50%);
  animation: qrPulseRing 2s ease-out infinite;
  pointer-events: none;
}

@keyframes qrPulseRing {
  0% {
    width: 100%; height: 100%;
    opacity: 0.7;
  }
  100% {
    width: 130%; height: 130%;
    opacity: 0;
  }
}


/* ── 7. PARALLAX TITRES DE SECTION ────────────────────────���──
   Les titres et labels de section se deplacent a une vitesse
   legerement differente du reste au scroll (decalage ~0.05).
   Le transform est applique dynamiquement par le JS.
   will-change optimise le rendu GPU. */

.section-title,
.section-label {
  will-change: transform;
}