/* === View Transitions API (fluides entre pages) === */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 200ms cubic-bezier(.4,0,.2,1) both fade-out; }
::view-transition-new(root) { animation: 300ms cubic-bezier(.4,0,.2,1) both fade-in; }
@keyframes fade-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } }

/* === Scroll-driven animations (natif) === */
@supports (animation-timeline: view()) {
  .reveal {
    animation: reveal-slide linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 20%;
  }
  @keyframes reveal-slide {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .bento { animation: fade-up linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
  @keyframes fade-up { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
}

/* === Custom cursor (subtil, desktop only) === */
@media (hover: hover) and (pointer: fine) {
  html.custom-cursor, html.custom-cursor * { cursor: none !important; }
  .ab-cursor {
    position: fixed; top: 0; left: 0; width: 18px; height: 18px;
    border: 1.5px solid #0a0a0b; border-radius: 50%;
    pointer-events: none; z-index: 9998;
    transition: transform .15s ease-out, width .2s, height .2s, background .2s, border-color .2s;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
    background: transparent;
  }
  html.dark .ab-cursor { border-color: #f5f1ea; }
  .ab-cursor.hover { width: 42px; height: 42px; background: #0a0a0b20; }
}

/* === Skeleton loaders === */
.skeleton {
  background: linear-gradient(90deg, rgba(10,10,11,.05) 25%, rgba(10,10,11,.1) 37%, rgba(10,10,11,.05) 63%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  border-radius: 1rem;
}
html.dark .skeleton { background: linear-gradient(90deg, rgba(245,241,234,.05) 25%, rgba(245,241,234,.1) 37%, rgba(245,241,234,.05) 63%); background-size: 200% 100%; }
@keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* === Mode recruteur === */
html.mode-recruiter [data-hide-recruiter] { display: none !important; }
html.mode-recruiter [data-recruiter-only] { display: block !important; }
[data-recruiter-only] { display: none; }
html.mode-recruiter .marquee { animation-play-state: paused; }

/* === Motion signature · subtle hero hover effect === */
@media (prefers-reduced-motion: no-preference) {
  h1 { transition: letter-spacing .6s ease; }
  section:hover > div > h1:first-of-type { letter-spacing: -0.05em; }
  .serif { transition: font-variation-settings .4s; }
}

/* === Lighthouse-like badge === */
.lh-badge { display: inline-flex; align-items: center; gap: .4rem; background: rgba(143,170,136,.15); color: #377845; padding: .25rem .75rem; border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 11px; border: 1px solid rgba(143,170,136,.3); }
html.dark .lh-badge { background: rgba(143,170,136,.15); color: #9ccea4; }

/* === Mobile-first fixes === */
@media (max-width: 640px) {
  /* Nav : cacher À propos / Travaux / Contact texte, garder seulement les initiales */
  nav.bg-ink\/90 a.nav-link,
  nav.bg-ink\/90 > a[href="/about"],
  nav.bg-ink\/90 > a[href="/work"],
  nav.bg-ink\/90 > a[href="/contact"],
  nav.bg-ink\/90 > a[href="/en/about"],
  nav.bg-ink\/90 > a[href="/en/work"],
  nav.bg-ink\/90 > a[href="/en/contact"],
  nav.bg-ink\/90 > a[href="about.html"],
  nav.bg-ink\/90 > a[href="work.html"],
  nav.bg-ink\/90 > a[href="contact.html"],
  nav.bg-ink\/90 a[href="/about.html"],
  nav.bg-ink\/90 a[href="/work.html"],
  nav.bg-ink\/90 a[href="/contact.html"] {
    padding-left: .6rem !important;
    padding-right: .6rem !important;
    font-size: 0;
  }
  nav.bg-ink\/90 a[href*="about"]::before { content: "◉"; font-size: 14px; }
  nav.bg-ink\/90 a[href*="work"]::before { content: "▤"; font-size: 14px; }
  nav.bg-ink\/90 a[href*="contact"]::before { content: "✉"; font-size: 14px; }

  /* Hero : cap la taille du h1 pour pas déborder */
  h1.serif { font-size: clamp(3rem, 18vw, 7rem) !important; }

  /* Nav : plus compact */
  header nav { padding: .25rem !important; gap: .1rem !important; }
  header nav a, header nav button { padding-left: .55rem !important; padding-right: .55rem !important; }
  .fixed.top-6.inset-x-6 { top: .75rem !important; left: .5rem !important; right: .5rem !important; }

  /* Bento : reduce gaps sur mobile */
  .grid.gap-4 { gap: .75rem !important; }
  .rounded-3xl { border-radius: 1.25rem !important; }

  /* Padding global reduced */
  section.px-6, section.md\:px-10 { padding-left: 1rem !important; padding-right: 1rem !important; }

  /* CTA palette ⌘K hint caché */
  kbd { font-size: 10px; }

  /* Legend OG overlay : éviter débordement */
  .overlay.legend { max-width: 90vw !important; font-size: .7rem !important; }
}

/* === Touch targets accessibilité === */
@media (pointer: coarse) {
  a, button { min-height: 44px; }
}

/* ============================================
   RESPONSIVE OVERHAUL
   ============================================ */

/* Small tablets et phones */
@media (max-width: 768px) {
  /* Hero h1 tailles adaptatives */
  h1.serif {
    font-size: clamp(3rem, 14vw, 6rem) !important;
    line-height: 0.88 !important;
  }
  h2.serif { font-size: clamp(2.25rem, 9vw, 4rem) !important; line-height: 0.95 !important; }
  h3.serif { font-size: clamp(1.5rem, 6vw, 2.5rem) !important; }

  /* Bento : tous single-column */
  .grid.md\:grid-cols-6,
  .grid.md\:grid-cols-4,
  .grid.md\:grid-cols-3,
  .grid.md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
  [class*="md:col-span"] { grid-column: span 1 / span 1 !important; }

  /* Min-heights bento réduits */
  [class*="min-h-\[340px\]"], [class*="min-h-\[280px\]"], [class*="min-h-\[260px\]"], [class*="min-h-\[240px\]"], [class*="min-h-\[220px\]"], [class*="min-h-\[200px\]"] {
    min-height: auto !important;
  }

  /* Bento padding réduit */
  .bento.p-8, .bento.p-6 { padding: 1.5rem !important; }

  /* Sections padding */
  section { padding-left: 1rem !important; padding-right: 1rem !important; }
  section.py-24, section.py-32, section.py-28 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

  /* Marquee vitesse ajustée */
  .marquee { font-size: 1.5rem !important; }

  /* Sous-titres + paragraphes */
  p.text-xl, p.text-2xl { font-size: 1rem !important; line-height: 1.5 !important; }

  /* CTA stack sur mobile */
  .flex.flex-wrap.gap-3, .flex.flex-wrap.gap-4 { flex-direction: column; align-items: stretch; }
  .flex.flex-wrap.gap-3 > a, .flex.flex-wrap.gap-3 > button { width: 100%; text-align: center; justify-content: center; }

  /* Grid stats 2x2 forcé */
  .grid.grid-cols-2.md\:grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Heatmap 90j : scale down cells */
  #gh-heatmap [style*="grid-template-columns"] { grid-template-columns: repeat(13, minmax(0, 1fr)) !important; }

  /* Nav : collapse mais garder touch targets */
  header nav {
    overflow-x: auto;
    max-width: calc(100vw - 1rem);
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  header nav::-webkit-scrollbar { display: none; }
  .fixed.top-6.inset-x-6 { top: 1rem !important; left: .5rem !important; right: .5rem !important; }

  /* Fonts plus petits mais lisibles */
  .text-lg { font-size: .95rem !important; }
  .text-xl { font-size: 1.05rem !important; }
  .text-2xl { font-size: 1.3rem !important; }
  .text-3xl { font-size: 1.6rem !important; }
  .text-4xl { font-size: 2rem !important; }
  .text-5xl { font-size: 2.5rem !important; }
  .text-6xl { font-size: 3rem !important; }
  .text-7xl { font-size: 3.5rem !important; }
  .text-8xl { font-size: 4rem !important; }
  .text-9xl { font-size: 4.5rem !important; }

  /* Tag / badges */
  .tag { font-size: 10px; padding: 2px 8px; }

  /* Timeline /about : indent réduit */
  ol.pl-8 { padding-left: 1.5rem !important; }
  ol.pl-8 .absolute { left: -1.75rem !important; }

  /* Forms : stack */
  form.grid.md\:grid-cols-2 { grid-template-columns: 1fr !important; gap: .75rem !important; }

  /* CV imprimable : réduire layout */
  .page { padding: 1.25rem !important; }
  .grid { grid-template-columns: 1fr !important; gap: 1rem !important; }

  /* Legend overlay si présent */
  .overlay { font-size: .75rem !important; padding: .75rem !important; }

  /* Command palette k fullscreen sur mobile */
  #cmdk { padding-top: 5vh !important; padding-left: .75rem; padding-right: .75rem; }
  #cmdk .box { width: 100% !important; }
}

/* Very small phones */
@media (max-width: 400px) {
  h1.serif { font-size: 3rem !important; }
  .bento { padding: 1rem !important; }
  .marquee { font-size: 1.25rem !important; gap: 1.5rem !important; }
}

/* Landscape mobile : nav plus haut */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  section.min-h-screen { min-height: auto !important; padding-top: 5rem !important; padding-bottom: 3rem !important; }
}

/* === Touch feedback === */
@media (pointer: coarse) {
  a:active, button:active { transform: scale(0.97); transition: transform .1s; }
}

/* Safe area pour iPhone notch */
@supports (padding: max(0px)) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  footer { padding-bottom: max(2rem, env(safe-area-inset-bottom)); }
}