/* ─── RESET & VARIABLES ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:            #071526;
  --surface:       #1a3560;
  --surface-hover: #224272;
  --border:        #2e5490;
  --border-bright: #3f6fbb;
  --blue:          #4f9cf9;
  --blue-dim:      #122244;
  --blue-glow:     rgba(79,156,249,.18);
  --text:          #ffffff;
  --muted:         #9ab8d8;
  --accent:        #7eb4ff;
  --radius:        12px;
  --gradient:      linear-gradient(135deg, #4facfe 0%, #8b5cf6 100%);
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  background-image: radial-gradient(rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--text);
  font-family: 'Syne', sans-serif;
  font-size: 18px;
  overflow-x: hidden;
  line-height: 1.65;
  position: relative;
}


/* ─── TYPOGRAPHIE ─── */
h1, h2, h3 { font-family: 'DM Serif Display', serif; font-weight: 400; }
.mono { font-family: 'DM Mono', monospace; font-size: 0.88rem; }

a { color: var(--accent); text-decoration: none; transition: color 0.25s ease; }
a:hover { color: #fff; }

/* ─── LAYOUT ─── */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

section {
  padding: 8rem 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}

/* Retire les chiffres en filigrane */
section[data-num]::before { content: none; }

.section-title {
  font-size: clamp(2.2rem, 3.5vw, 3rem);
  margin-bottom: 3rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ─── ICÔNES SVG GRADIENT ─── */
.competence-icon path, .competence-icon rect, .competence-icon circle,
.competence-icon polyline, .competence-icon line, .competence-icon ellipse,
.comp-icon-big path, .comp-icon-big rect, .comp-icon-big circle,
.comp-icon-big polyline, .comp-icon-big line, .comp-icon-big ellipse {
  stroke: url(#iconGrad) var(--blue);
}

/* ─── CURSEUR ─── */
.cursor {
  position: fixed;
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #4facfe 0%, #8b5cf6 100%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
  animation: cursor-gradient 4s linear infinite;
}

.cursor.grow {
  width: 30px;
  height: 30px;
  opacity: 0.6;
}

.cursor.mid-scroll {
  width: 26px;
  height: 26px;
  opacity: 0.85;
  border: 2px solid rgba(255,255,255,0.4);
}

@keyframes cursor-gradient {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* ─── INDICATEUR SCROLL MOLETTE ─── */
.mid-scroll-origin {
  position: fixed;
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #4facfe, #8b5cf6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99997;
  transform: translate(-50%, -50%);
  animation: cursor-gradient 3s linear infinite;
  box-shadow: 0 0 0 5px rgba(79,172,254,0.15);
}

.mid-scroll-origin::before,
.mid-scroll-origin::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

.mid-scroll-origin::before {
  top: -9px;
  border-bottom: 5px solid rgba(255,255,255,0.8);
}

.mid-scroll-origin::after {
  bottom: -9px;
  border-top: 5px solid rgba(255,255,255,0.8);
}

.has-cursor,
.has-cursor *,
html:has(.has-cursor),
html:has(.has-cursor) * { cursor: none !important; }

/* ─── ANIMATIONS ─── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
  .container { padding: 0 1.25rem; }
  section { padding: 4.5rem 0; }
  .section-title { font-size: 1.9rem; margin-bottom: 2.25rem; }
}

@media (max-width: 480px) {
  .container { padding: 0 1rem; }
  section { padding: 3.5rem 0; }
  .section-title { font-size: 1.6rem; }
}