/* ══════════════════════════════════════════════════════════════
   Portfolio v4 — démo des animations
   Feuille commune à index-v4.html et projet-detail-v4.html.
   Aucun changement de style ni de contenu : uniquement du mouvement.
   Courbe reprise du site : cubic-bezier(0.22, 1, 0.36, 1).
   ══════════════════════════════════════════════════════════════ */

:root { --v4-ease: cubic-bezier(0.22, 1, 0.36, 1); --v4-nav: 80px; }

/* ── Barre de progression de lecture ─────────────────────────── */
.v4-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  z-index: 200;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, #7E2EEB, var(--v2-accent), #DBB7FF);
  pointer-events: none;
}

/* ── Curseur ─────────────────────────────────────────────────── */
html.v4-cursor, html.v4-cursor * { cursor: none !important; }
html.v4-cursor input, html.v4-cursor textarea, html.v4-cursor select { cursor: text !important; }
.v4-dot, .v4-ring {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
}
.v4-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--v2-accent);
  display: grid;
  place-items: center;
  color: var(--v2-accent);
  transition: width 0.3s var(--v4-ease), height 0.3s var(--v4-ease), margin 0.3s var(--v4-ease), background 0.2s, opacity 0.25s;
}
.v4-dot .material-icons-round { font-size: 0; opacity: 0; transition: font-size 0.3s var(--v4-ease), opacity 0.2s; }
/* Sur un élément d'action, le point laisse place à l'icône. */
.v4-dot[data-s="card"], .v4-dot[data-s="zoom"], .v4-dot[data-s="drag"] { width: 26px; height: 26px; margin: -13px 0 0 -13px; background: transparent; }
.v4-dot[data-s="card"] .material-icons-round, .v4-dot[data-s="zoom"] .material-icons-round, .v4-dot[data-s="drag"] .material-icons-round { font-size: 22px; opacity: 1; }
.v4-ring {
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 999px;
  border: 1.5px solid var(--v2-accent);
  transition: width 0.4s var(--v4-ease), height 0.4s var(--v4-ease), margin 0.4s var(--v4-ease),
              border-color 0.3s, opacity 0.25s;
}
.v4-ring[data-s="link"] { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
/* Éléments d'action : l'anneau s'agrandit autour de l'icône, sans se remplir. */
.v4-ring[data-s="card"], .v4-ring[data-s="zoom"], .v4-ring[data-s="drag"] { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
.v4-ring[data-s="btn"], .v4-ring[data-s="text"], .v4-dot[data-s="text"] { opacity: 0 !important; }
.v4-dot[data-s="btn"] { opacity: 0 !important; }
.v4-cursor-out .v4-ring, .v4-cursor-out .v4-dot { opacity: 0 !important; }

/* ── Lumière qui suit le curseur ─────────────────────────────
   Un canevas plein écran posé sur la page, sous la navigation. Le mode de
   fusion garde le texte lisible : en sombre, « screen » éclaire (le blanc
   reste blanc) ; en clair, « multiply » teinte le fond (le texte foncé
   reste foncé). Il passe ainsi aussi sur la photo du hero. */
.v4-lueur {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 40;
  pointer-events: none;
  mix-blend-mode: screen;
}
html[data-theme="light"] .v4-lueur { mix-blend-mode: multiply; }

/* Sur les cartes : le bord et la surface s'éclairent sous le pointeur. */
.v2-hero-card, .v2-autre-card { position: relative; }
.v4-spot::before, .v4-spot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s;
  z-index: 2;
}
.v4-spot::before {
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--v2-accent) 12%, transparent), transparent 65%);
}
.v4-spot::after {
  padding: 1.5px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--v2-accent) 90%, #fff), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.v4-spot:hover::before, .v4-spot:hover::after { opacity: 1; }

/* ── Navigation : soulignement qui glisse ────────────────────── */
.v2-nav-links { position: relative; }
html.v4 .v2-nav-link.active { border-color: transparent; }
.v4-ink {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  border-radius: 2px;
  background: var(--v2-accent);
  transition: transform 0.5s var(--v4-ease), width 0.5s var(--v4-ease), opacity 0.3s;
  pointer-events: none;
}

/* ── Changement de thème en cercle ───────────────────────────── */
html.v4-vt-theme::view-transition-old(root),
html.v4-vt-theme::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.v4-vt-theme::view-transition-new(root) { z-index: 2; }
html.v4-no-tr, html.v4-no-tr * { transition: none !important; }

/* ── Transition entre pages (carte → page projet) ────────────── */
@view-transition { navigation: auto; }
::view-transition-group(visuel-projet) { animation-duration: 0.6s; animation-timing-function: var(--v4-ease); }
::view-transition-old(visuel-projet), ::view-transition-new(visuel-projet) { height: 100%; object-fit: cover; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; }

/* Repli : le visuel cliqué s'agrandit en bandeau avant le changement de page. */
.v4-vt-clone { position: fixed; z-index: 400; object-fit: cover; pointer-events: none; }
.v4-vt-voile { position: fixed; inset: 0; z-index: 399; background: var(--v2-bg); opacity: 0; pointer-events: none; }

/* ── Apparition (hero, titres, page détail) ──────────────────── */
html.v4-anim .v4-in { opacity: 0; transform: translateY(26px); }
html.v4-anim .v4-in.v4-vu {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s var(--v4-ease), transform 0.8s var(--v4-ease);
}
html.v4-anim .v4-blur { filter: blur(6px); }
html.v4-anim .v4-in.v4-sans-fondu { opacity: 1; }

/* Avant l'exécution de v4.js (chargé en différé), le hero est déjà dans l'état
   de départ de son animation : pas d'éclair visible → caché → animé.
   v4.js pose la classe v4-pret une fois les animations branchées. */
html.v4-anim:not(.v4-pret) .v2-hero-text .v2-hero-name,
html.v4-anim:not(.v4-pret) .v2-hero-text .v2-tagline p,
html.v4-anim:not(.v4-pret) .v2-hero-card { opacity: 0; transform: translateY(26px); }
html.v4-anim:not(.v4-pret) .v2-hero-text .v2-headline > * { display: inline-block; transform: translateY(26px); filter: blur(6px); }
html.v4-anim .v4-blur.v4-vu { filter: none; transition: opacity 0.9s var(--v4-ease), transform 0.9s var(--v4-ease), filter 0.9s var(--v4-ease); }

/* Titres de section : le titre monte depuis un masque, la barre grandit. */
html.v4-anim .v4-titre .v2-section-bar { transform: scaleY(0); transform-origin: 50% 100%; }
html.v4-anim .v4-titre .v2-section-title { clip-path: inset(0 0 100% 0); transform: translateY(60%); }
html.v4-anim .v4-titre.v4-vu .v2-section-bar { transform: none; transition: transform 0.6s var(--v4-ease); }
html.v4-anim .v4-titre.v4-vu .v2-section-title {
  clip-path: inset(0 0 -10% 0);
  transform: none;
  transition: clip-path 0.9s 0.1s var(--v4-ease), transform 0.9s 0.1s var(--v4-ease);
}

/* Texte qui s'allume à la lecture : chaque mot passe de grisé à net. */
.v4-mot { transition: opacity 0.2s linear; }

/* ── Projets : cartes empilées ───────────────────────────────── */
html.v4-mode-pile #projets-grid { display: none; }
.v4-pile { display: flex; flex-direction: column; margin-bottom: 30px; }
.v4-pile-card {
  position: sticky;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(20px, 3vw, 44px);
  height: min(70vh, 540px);
  margin-bottom: 8vh;
  padding: 18px;
  border-radius: 24px;
  background: var(--v2-card);
  border: 1px solid var(--v2-line);
  box-shadow: 0 -10px 50px var(--v2-shadow);
  text-decoration: none;
  transform-origin: 50% 0;
  will-change: transform;
}
html[data-theme="dark"] .v4-pile-card { background: #171035; }
.v4-pile-card:last-child { margin-bottom: 0; }
.v4-pile-visuel { border-radius: 16px; overflow: hidden; min-height: 0; }
.v4-pile-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s var(--v4-ease); }
.v4-pile-card:hover .v4-pile-visuel img { transform: scale(1.04); }
.v4-pile-texte { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding-right: 12px; }
.v4-num {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: clamp(48px, 6vw, 84px);
  line-height: 0.9;
  color: var(--v2-title);
}
.v4-pile-texte .v2-project-title { font-size: clamp(22px, 2.4vw, 30px); }
.v4-voir {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v2-accent);
  margin-top: 8px;
}
.v4-voir::after { content: " →"; display: inline-block; transition: transform 0.4s var(--v4-ease); }
.v4-pile-card:hover .v4-voir::after { transform: translateX(6px); }
.v4-pile-veil { position: absolute; inset: 0; border-radius: inherit; background: var(--v2-bg); opacity: 0; pointer-events: none; }

@media (max-width: 760px) {
  .v4-pile-card { grid-template-columns: 1fr; grid-template-rows: 1fr auto; height: min(78vh, 600px); gap: 14px; padding: 14px; }
  .v4-pile-texte { gap: 8px; padding: 0 4px 6px; }
  .v4-num { font-size: 40px; }
  .v4-pile-texte .v2-project-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}


/* ── Accordéon « Autres projets » ────────────────────────────── */
html.v4 .v2-autres-chevron { transition: transform 0.5s var(--v4-ease); }

/* ── Décor : suit la souris ──────────────────────────────────── */
.v2-decor-glow, .v2-decor-rings { will-change: transform; }

/* ── Page détail ─────────────────────────────────────────────── */
html.v4-anim .detail-banner.v4-banner-intro { clip-path: inset(0 16% 0 16%); }
html.v4-anim .detail-banner.v4-banner-intro #detail-banner-img { scale: 1.18; }
html.v4-anim .detail-banner.v4-banner-go { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--v4-ease); }
html.v4-anim .detail-banner.v4-banner-go #detail-banner-img { scale: 1; transition: scale 1.3s var(--v4-ease); }
#detail-banner-img { view-transition-name: visuel-projet; }

/* Visuels de la galerie : s'ouvrent et se posent au défilement */
html.v4-anim .shot.v4-pose { will-change: clip-path; }
html.v4-anim .shot.v4-pose img { will-change: scale; }

/* Séquence animée pilotée par le défilement */
.shot-anim .v4-etapes {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 99px;
  background: rgba(21, 10, 51, 0.72);
  line-height: 1;
}
.shot-anim .v4-etapes i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); transition: background 0.3s, transform 0.3s; }
.shot-anim .v4-etapes i.on { background: #DBB7FF; transform: scale(1.3); }
html.v4 .shot-anim img + img { transition: opacity 0.25s linear; }

/* Écrans mobiles en bande */
.v4-strip {
  grid-column: 1 / -1;
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 10px calc(50% - 130px) 18px;
  margin: 0 -8px;
  scrollbar-width: none;
}
.v4-strip::-webkit-scrollbar { display: none; }
.v4-strip.v4-drag { scroll-snap-type: none; }
.v4-strip .shot { flex: none; width: 260px; scroll-snap-align: center; transition: transform 0.15s linear, opacity 0.15s linear; }
.v4-strip-nav { grid-column: 1 / -1; display: flex; justify-content: center; gap: 8px; margin-top: -6px; }
.v4-strip-nav button {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--v2-line); background: var(--v2-card); color: var(--v2-fg);
  display: grid; place-items: center; cursor: pointer;
}
.v4-strip-nav button:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; }
@media (max-width: 520px) { .v4-strip { padding-inline: calc(50% - 110px); } .v4-strip .shot { width: 220px; } }

/* Visionneuse : l'animation vient du script (depuis l'image cliquée) */
html.v4 .visionneuse { animation: none; }

/* ── Panneau de démo ─────────────────────────────────────────── */
.v4-panel {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--v2-card);
  border: 1px solid var(--v2-line);
  box-shadow: 0 10px 40px var(--v2-shadow);
  backdrop-filter: blur(16px);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: var(--v2-fg);
  max-width: calc(100vw - 32px);
}
.v4-panel b { font-family: 'Montserrat', sans-serif; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v2-accent); }
.v4-panel-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.v4-panel button {
  font: 500 12px/1 'DM Sans', sans-serif;
  padding: 7px 11px;
  border-radius: 99px;
  border: 1px solid var(--v2-line);
  background: transparent;
  color: var(--v2-fg-soft);
  cursor: pointer;
}
.v4-panel button[aria-pressed="true"] { background: var(--v2-accent); border-color: var(--v2-accent); color: #fff; }
.v4-panel button:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; }
.v4-panel a { color: var(--v2-fg-muted); font-size: 11.5px; }
.v4-panel-fermer { position: absolute; top: 6px; right: 6px; border: 0 !important; padding: 4px 6px !important; }
.v4-panel.v4-replie > :not(.v4-panel-ouvrir) { display: none; }
.v4-panel-ouvrir { display: none; }
.v4-panel.v4-replie .v4-panel-ouvrir { display: block; }

@media (prefers-reduced-motion: reduce) {
  .v4-ring, .v4-dot { display: none; }
  html.v4-cursor, html.v4-cursor * { cursor: auto !important; }
}