/* ═══════════════════════════════════════════════════════════════
   ATELIER PERF — V3 Fullpage scroll
   ═══════════════════════════════════════════════════════════════ */

/* ── Scroll container ──────────────────────────────────────────── */
body.fp-mode {
  overflow: hidden;
  height: 100vh;
}

.fp-root {
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.fp-root::-webkit-scrollbar { display: none; }

/* ── Slides ────────────────────────────────────────────────────── */
.fp-slide {
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  position: relative;
  /* Entrée fade */
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.fp-slide::-webkit-scrollbar { display: none; }

.fp-slide.fp-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slide auto-height (HomeCards, Contact) — toujours visible */
.fp-slide.fp-auto {
  height: auto;
  min-height: 100vh;
  overflow: visible;
  opacity: 1 !important;
  transform: none !important;
}

/* ── Padding fp-slides : clearance Nav fixe (bottom ~68px) + respiration ── */
.fp-slide > section,
.fp-slide .fp-center > section {
  padding-top:    clamp(80px, 10vh, 140px) !important;
  padding-bottom: clamp(32px, 4vh, 56px) !important;
}

/* Display h1/h2 réduits pour tenir dans 100vh */
.fp-slide h1.display,
.fp-slide h2.display {
  font-size:     clamp(26px, 3.4vw, 50px) !important;
  line-height:   1.06 !important;
  margin-bottom: clamp(10px, 1.5vh, 20px) !important;
  margin-top:    0 !important;
}

/* Paragraphes intro */
.fp-slide p.lead, .fp-slide .hero-lead {
  font-size:     clamp(13px, 1.3vw, 16px) !important;
  margin-bottom: clamp(14px, 2vh, 24px) !important;
}

/* Grille des stats — réduit vertical gap */
.fp-slide .stats-grid,
.fp-slide [class*="stat"] {
  gap: clamp(12px, 2vh, 24px) !important;
}

/* Pas de margin-top sur les titres display-l en fp */
.fp-slide .display-l {
  font-size: clamp(28px, 3.8vw, 52px) !important;
}

/* ── Centering helper ──────────────────────────────────────────── */
.fp-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}

/* ── Nav latérale gauche avec labels (scrollspy) ─────────────── */
.fp-nav {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(6, 11, 69, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 10px 12px;
}

.fp-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 5px 4px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  transition: color 200ms;
  text-align: left;
}
.fp-nav-item:hover { color: rgba(255,255,255,0.85); }
.fp-nav-active     { color: #fff !important; }

.fp-nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  flex-shrink: 0;
  transition: background 200ms, border-color 200ms, transform 220ms, width 220ms;
}
.fp-nav-active .fp-nav-dot {
  background: var(--electric);
  border-color: var(--electric);
  width: 20px;
  border-radius: 3px;  /* pill quand actif */
}

.fp-nav-label {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

/* ── Curseur : annule cursor:none de styles.css en v3 ────────── */
@media (hover: hover) and (pointer: fine) {
  body, body * { cursor: auto !important; }
  a, button, [role="button"], [data-cursor="hover"] { cursor: pointer !important; }
}

/* Masquer sur mobile */
@media (max-width: 900px) { .fp-nav { display: none; } }

/* ── Barre de progression ─────────────────────────────────────── */
.fp-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: calc(var(--fp-p, 0) * 100%);
  background: linear-gradient(90deg, var(--electric), var(--gold));
  z-index: 1000;
  transition: width 200ms ease;
  pointer-events: none;
}

/* ── Flèches bas (hint scroll) ───────────────────────────────── */
.fp-arrow {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0.45;
  animation: fp-bounce 2s ease-in-out infinite;
  pointer-events: none;
  z-index: 10;
}
@keyframes fp-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* Masquer flèche sur la dernière slide */
.fp-slide:last-child .fp-arrow { display: none; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .fp-dots { display: none; }
}

/* ── V3 Nav : logo flottant + hamburger + overlay ───────────── */
.v3-logo {
  position: fixed;
  top: 14px;
  left: 18px;
  z-index: 600;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  background: rgba(6, 11, 69, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(94, 76, 255, 0.35);
  padding: 8px 16px 8px 10px;
  border-radius: 12px;
  transition: background 220ms, border-color 220ms;
  box-shadow: 0 4px 20px rgba(6,11,69,0.4);
}
.v3-logo:hover {
  background: rgba(6, 11, 69, 1);
  border-color: rgba(94, 76, 255, 0.6);
}

.v3-logo-badge {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
}

.v3-logo-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.v3-logo-name {
  font-family: var(--f-display);
  font-weight: 700;
  font-style: italic;
  font-size: 28px;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1;
}

.v3-logo-dot {
  color: #f7c948;
  font-style: normal;
}

.v3-logo-base {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  line-height: 1;
}

.v3-burger {
  position: fixed;
  top: 14px;
  right: 44px; /* décalé pour laisser place aux dots */
  z-index: 600;
  background: rgba(6, 11, 69, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background 220ms;
  color: #fff;
  padding: 0;
}
.v3-burger:hover { background: rgba(6, 11, 69, 0.6); }

.v3-burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: #fff;
  border-radius: 2px;
  transition: transform 220ms, opacity 220ms;
}
.v3-burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.v3-burger.is-open span:nth-child(2) { opacity: 0; }
.v3-burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Overlay menu plein écran */
.v3-overlay {
  position: fixed;
  inset: 0;
  z-index: 550;
  background: rgba(6, 11, 69, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  animation: v3-ov-in 0.28s cubic-bezier(0.22,1,0.36,1);
}
@keyframes v3-ov-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.v3-overlay-link {
  font-family: var(--f-display);
  font-size: clamp(32px, 5.5vw, 64px);
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.03em;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px 0;
  transition: color 180ms, transform 200ms;
  line-height: 1.1;
  display: block;
}
.v3-overlay-link:hover {
  color: #f7c948;
  transform: translateX(10px);
}
.v3-overlay-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: background 180ms;
}
.v3-overlay-close:hover { background: rgba(255,255,255,0.18); }

.v3-overlay-cta {
  margin-top: 32px;
  padding: 14px 36px;
  background: var(--electric);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms, transform 200ms;
}
.v3-overlay-cta:hover {
  background: var(--deep);
  transform: translateY(-2px);
}

/* ── Pages secondaires : sections → panels snap ─────────────── */
.fp-page-root {
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.fp-page-root::-webkit-scrollbar { display: none; }

.fp-page-root section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 100vh;
  overflow: hidden auto !important; /* override inline overflow:hidden */
  scrollbar-width: none;
  position: relative;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1),
              transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.fp-page-root section::-webkit-scrollbar { display: none; }

.fp-page-root section.fp-visible {
  opacity: 1;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════
   OVERRIDES 100vh — Pages secondaires (FpPageRoot)
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Sections intermédiaires : compresser section-pad ─────── */
.fp-page-root .section-pad {
  padding-top:    clamp(48px, 6vh, 90px) !important;
  padding-bottom: clamp(40px, 5vh, 72px) !important;
}
.fp-page-root .section-pad-sm {
  padding-top:    clamp(40px, 5vh, 72px) !important;
  padding-bottom: clamp(32px, 4vh, 56px) !important;
}

/* ── 3. h1/h2 display dans pages secondaires ─────────────────── */
.fp-page-root h1.display,
.fp-page-root h2.display {
  font-size:     clamp(26px, 3.4vw, 50px) !important;
  line-height:   1.06 !important;
  margin-top:    0 !important;
  margin-bottom: clamp(10px, 1.5vh, 20px) !important;
}

/* ── 4. About s1 (bio+photo) : cap hauteur photo ────────────── */
/* Viewport < 820px : aspect-ratio 4/5 déborde (645px > vh)      */
@media (max-height: 820px) {
  .fp-page-root .about-grid > *:first-child {
    max-height: 45vh;
    overflow:   hidden;
  }
}

/* ── 5. About s3 (timeline) : compacter entrées ─────────────── */
.fp-page-root .timeline-row {
  padding-top:    clamp(10px, 1.5vh, 20px) !important;
  padding-bottom: clamp(10px, 1.5vh, 20px) !important;
}

/* ── CTA+Footer combo — dernière section des pages secondaires ── */
.fp-page-root .fp-cta-footer {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1),
              transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.fp-page-root .fp-cta-footer.fp-visible {
  opacity: 1;
  transform: none;
}
/* Désactiver le re-snap sur la section interne du CTABanner */
.fp-page-root .fp-cta-footer section {
  scroll-snap-align: none !important;
  min-height: auto !important;
  overflow: visible !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ── FpNav compact (> 6 items) ───────────────────────────────── */
.fp-nav-compact { padding: 6px 8px !important; }
.fp-nav-compact .fp-nav-item { padding: 3px 2px; }
.fp-nav-compact .fp-nav-dot  { width: 5px; height: 5px; }
.fp-nav-compact .fp-nav-active .fp-nav-dot { width: 14px; }

/* ── Hero HOME : restaurer la taille du H1 ──────────────────── */
/* Le sélecteur .fp-slide h1.display écrase le clamp inline JSX  */
#fp-hero h1.display {
  font-size:     clamp(48px, 6.2vw, 92px) !important;
  margin-bottom: clamp(20px, 2.5vh, 36px) !important;
}

/* ── fp-chiffres : Stats + Marquee centrés verticalement ────── */
#fp-chiffres {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#fp-chiffres > section {
  padding-top:    clamp(24px, 3vh, 40px) !important;
  padding-bottom: clamp(24px, 3vh, 40px) !important;
}

/* ── prefers-reduced-motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fp-root          { scroll-snap-type: none; scroll-behavior: auto; }
  .fp-slide         { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fp-arrow         { animation: none; }
}