*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;overflow:hidden;background:#fff;color:#111;font-family:Helvetica Neue,Helvetica,Arial,Roboto,"Noto Sans"}
:root{--rBase: clamp(20rem, 32svmin, 40rem);}
.stage{position:relative;width:100svw;height:100svh;display:grid;align-content:center;justify-items:center;gap:10px}

/* Photo centrale sans cercle */
.hero{border:none;background:none;padding:0;cursor:pointer}
.hero img{max-width:min(58svw,58svh);height:auto;display:block}

/* Sous-titre cliquable */
.subtitle{font-size:14px;font-style:italic;color:#666;cursor:pointer;text-decoration:underline}

/* Chips */
.burst{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.chip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1);background:none;border:none;color:#111;font-weight:500;font-size:14px;white-space:nowrap;opacity:0;filter:blur(4px);cursor:pointer;pointer-events:auto;transition:transform 1s cubic-bezier(.2,.6,.1,1),opacity 1s ease,filter 1s ease}
.stage.active .chip{opacity:1;filter:blur(0);transform:translate(-50%,-50%) rotate(var(--angle)) translate(calc(var(--rBase)*var(--m,1))) rotate(calc(-1*var(--angle))) scale(1)}

/* Player compact bas droite */
.player{position:fixed;right:16px;bottom:16px;width:min(340px,86svw);padding:8px 10px;border-radius:8px;border:1px solid #e3e3e3;box-shadow:0 1px 8px rgba(0,0,0,.05);backdrop-filter:blur(3px);background:color-mix(in oklab,#ffffff 88%,transparent);display:grid;grid-template-columns:auto 1fr auto;gap:8px}
.player__play{width:32px;height:26px;border:1px solid #111;border-radius:4px;background:#fff;color:#111;display:grid;place-items:center}
.player__play .icon{width:16px;height:16px}
.player__play .icon polygon,.player__play .icon rect{fill:currentColor}
.ticker{overflow:hidden;white-space:nowrap;font-style:italic;font-weight:300;color:#222;font-size:12px}
.ticker__inner{display:inline-block}
.player__bar{position:relative;height:3px;background:#eaeaea;border-radius:999px}
.player__progress{position:absolute;inset:0 auto 0 0;width:0%;background:#111;border-radius:999px}
.player__time{font-variant-numeric:tabular-nums;font-size:11px;color:#555;min-width:82px;text-align:right}

/* Overlay */
.overlay{position:fixed;inset:0;background:#fff;display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .4s ease, visibility .4s ease}
.overlay.open{opacity:1;visibility:visible}
.card{width:min(900px,92svw);display:grid;grid-template-columns:1fr 1fr}
.card img{width:100%;height:100%;object-fit:cover;display:block}
.card__body{padding:20px;display:grid;align-content:start;gap:8px}
.card__body h3{margin:0;font-size:22px}
.card__body p{margin:0;color:#333;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-style:italic;font-weight:300;white-space:pre-wrap}
.overlay__hint{position:fixed;bottom:16px;left:0;right:0;text-align:center;font-size:12px;color:#777}

@media (max-width:680px){.card{grid-template-columns:1fr;width:min(560px,92svw)} :root{--rBase: clamp(18rem, 46svw, 30rem);} }

/* Cache le sous-titre sans rien casser */
.subtitle{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(1px,1px,1px,1px) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
}

/* Toggle Play/Pause icons inside the button */
.player__play .icon-pause{ display:none; }
.player__play[aria-pressed="true"] .icon-play{ display:none; }
.player__play[aria-pressed="true"] .icon-pause{ display:inline; }

/* Scroll song title only while playing */
.player.playing .ticker__inner{ animation: marquee 12s linear infinite; padding-left: 100%; }
@keyframes marquee{ 0%{ transform: translateX(0);} 100%{ transform: translateX(-100%);} }

/* Card entrance */
.card{transform: translateY(6px); opacity:0; transition: opacity .4s ease, transform .5s cubic-bezier(.2,.6,.1,1)}
.overlay.open .card{transform: translateY(0); opacity:1}


/* --- appended: slow spin for burst + keep chip labels horizontal --- */
@keyframes spinCW { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes spinCCW { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

.stage.active .burst{
  animation: spinCW 40s linear infinite;
}
.stage.active .burst:hover{
  animation-play-state: paused;
}

.stage.active .burst .chip__label{
  display:inline-block;
  will-change: transform;
  animation: spinCCW 40s linear infinite;
}
.stage.active .burst:hover .chip__label{
  animation-play-state: paused;
}
/* Curseur custom – site-wide */
body {
  cursor: url('assets/cursor.png') 6 6, auto;
}

/* Garde le curseur custom aussi sur les éléments interactifs */
a, button, [role="button"], .chip, .hero, .player, .overlay, .overlay * {
  cursor: url('assets/cursor.png') 6 6, pointer;
}
.chip__label {
  font-weight: normal;
  font-style: normal;
}


/* === MOBILE RING V5 + HERO BIGGER v7 === */
/* Keep the smaller V5 ring and enlarge hero ~15% on mobile. */
@media (pointer: coarse){
  :root{ --rBase: clamp(7rem, 15svmin, 12rem); }
  .hero img{ max-width: min(100svmin, 100svw, 100svh); }
}

/* === MOBILE PLAYER OVERRIDE === */
@media (pointer: coarse){
  .player{
    width: 50%;                  /* half width */
    left: 50%;                   /* center horizontally */
    right: auto;                 /* reset desktop right positioning */
    transform: translateX(-50%); /* truly center */
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)); /* keep safe zone */
  }
}

/* === MOBILE CARD SCROLL FIX === */
@media (pointer: coarse){
  .overlay{
    align-items: flex-start;         /* stack from top instead of centering */
    overflow: auto;                  /* allow overlay itself to scroll */
    -webkit-overflow-scrolling: touch;
  }

  .card{
    margin: 20px auto;               /* add spacing around card */
    max-height: calc(100svh - 40px); /* fit within viewport height */
    overflow: auto;                  /* card scrolls if needed */
    display: block;                  /* simpler block layout on phones */
    width: 92svw;                    /* narrower than full width */
  }

  .card__body{
    max-height: calc(100svh - 200px); /* leave space for image etc */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* === MOBILE: prevent sticky hover from pausing/desyncing animations === */
@media (hover: none), (pointer: coarse){
  /* Never pause the orbit on hover (touch devices only) */
  .stage.active .burst:hover,
  .stage.active:hover .burst {
    animation-play-state: running !important;
    -webkit-animation-play-state: running !important;
  }

  /* And don't let individual chips/labels alter play state on hover */
  .stage.active .chip:hover,
  .stage.active .chip *:hover {
    animation-play-state: inherit !important;
    -webkit-animation-play-state: inherit !important;
  }

  /* tiny tap-behavior polish */
  .hero, .burst, .chips { touch-action: manipulation; }
}

/* MOBILE: make label play-state follow the parent orbit */
@media (hover: none), (pointer: coarse){
  .stage.active .chip__label { animation-play-state: inherit !important; }
}

/* Ghost-free chip swap helper (target #cardImg explicitly) */
.overlay.preloading #cardImg { opacity: 0; transition: opacity .2s ease; }
.overlay.open       #cardImg { opacity: 1; }

/* iOS tap highlight: remove gray flash on tap */
.chip, .chip * , .hero, .overlay, a, button {
  -webkit-tap-highlight-color: transparent;
}

/* Keep keyboard accessibility on desktop; remove outlines only on touch */
@media (hover: none), (pointer: coarse){
  .chip:focus, .chip *:focus, .hero:focus, a:focus, button:focus {
    outline: none;
  }
}

/* Landing page title (top-centered) */
.site-header{
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 8px 12px;
  z-index: 10;          /* above hero/ring; overlay can still be higher */
  pointer-events: none; /* never blocks clicks on hero/ring */
}

/* Default (desktop/laptop) */
.site-title {
  max-width: min(45vw, 260px);  /* current desktop size */
  height: auto;
  opacity: 1;
  transition: opacity .3s ease;
}

/* Mobile/tablet only: smaller, proportional scaling */
@media (hover: none), (pointer: coarse) {
  .site-title {
    max-width: 40svmin;  /* ~30% of the smaller screen edge */
    height: auto;        /* keep aspect ratio */
  }
}

/* Fade the title out once the ring opens */
.stage.active ~ .site-header .site-title{
  opacity: 0;
}

/* Show the second PNG in the header on mobile only */
.site-subtitle--mobile { 
  display: none; 
  opacity: 1; 
  transition: opacity .3s ease;
}

/* Mobile/tablet: stack both header PNGs and size them */
@media (hover: none), (pointer: coarse){
  .site-header { 
 display: grid;                 /* replaces flex for this layout */
    justify-content: start;       /* center the column in the page */
    align-content: start;
    row-gap: 0;                    /* NO vertical space between rows */
    padding-bottom: 0;             /* avoid extra space under the header */
  }

  .site-title{
    max-width: 30svmin;
    height: auto;
    justify-self: center;          /* title centered */
    margin: 0;                     /* no extra margins */
  }

  .site-subtitle--mobile { 
    display: block; 
    max-width: 10svmin;   /* tweak this to change mobile size of second PNG */
    height: auto; 
    justify-self: end;
    margin-top: -16px;  
  }
}

/* Fade the second PNG in the header when ring opens (mobile header copy) */
.stage.active ~ .site-header .site-subtitle--mobile { opacity: 0; }

/* Desktop-only copy under the hero */
.desktop-subtitle { display: none; }
@media (hover: hover) and (pointer: fine){
  .desktop-subtitle{
    display: flex;
    justify-content: center;
    margin-top: 16px;         /* space under hero */
    transition: opacity .3s ease;
  }
  .desktop-subtitle__img{
    width: 5vw;              /* scales on large screens */
    max-width: 360px;         /* cap for big monitors */
    height: auto;
    display: block;
  }
  /* Fade the desktop subtitle when ring opens */
  .stage.active .desktop-subtitle { opacity: 0; }
}

/* MOBILE: keep chip labels inside the screen without shrinking the ring */
@media (pointer: coarse) {
  .chip__label {
    /* allow wrapping, break long words if needed */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;

    /* cap label width relative to viewport so it can’t extend off-screen */
    max-inline-size: clamp(8ch, 38svw, 18ch);
    /* small breathing space if your label has background/padding */
    padding-inline: 4px;
  }
}