/* ═══════════════════════════════════════════════════════════════
   PROJECT ZERO — le réseau.
   Une constellation de membres autour du visiteur. Noir, un peu d'or.
   Deux compositions distinctes : texte à gauche sur bureau,
   texte en haut puis constellation verticale sur téléphone.
   ═══════════════════════════════════════════════════════════════ */

.pzr {
  --noir: #050505;
  --noir2: #0A0A0B;
  --or: #D6B875;
  --or-clair: #F4E4BD;
  --gris: #85898F;
  --titre: "Stack Sans Notch", "DM Sans", system-ui, sans-serif;
  --texte: "DM Sans", "Satoshi", system-ui, sans-serif;
  --ressort: cubic-bezier(.22, 1, .36, 1);
  position: relative; display: block; width: 100%; max-width: 100vw;
  background: var(--noir); color: #fff; font-family: var(--texte);
  overflow: hidden; isolation: isolate;
  padding: clamp(66px, 9vw, 110px) 0 clamp(62px, 8vw, 94px);
}
.pzr *, .pzr *::before, .pzr *::after { box-sizing: border-box; }
.pzr::before {                                  /* grain, à la limite du visible */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pzr::after {                                   /* le noir n'est pas tout à fait plat */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(58% 46% at 68% 44%, rgba(214,184,117,.055), transparent 70%);
}

.pzr-cadre { position: relative; z-index: 2; width: 100%; max-width: 1440px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px); }

/* ── le discours ─────────────────────────────────────────────── */
.pzr-label { margin: 0 0 clamp(18px, 2.6vw, 26px); font-family: var(--titre); font-weight: 700;
  text-transform: uppercase; letter-spacing: .28em; font-size: clamp(14px, 2.8vw, 19px);
  color: var(--or); }
.pzr-titre { margin: 0; font-family: var(--titre); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.042em; line-height: .92; font-size: clamp(34px, 7.4vw, 62px); }
.pzr-titre span { display: block; }
.pzr-chapo { margin: clamp(22px, 3vw, 32px) 0 0; max-width: 34ch;
  font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6;
  background-image: linear-gradient(168deg, #F7EACA 0%, #D6B875 42%, #B2934F 68%, #F2E2BC 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent; }

.pzr-conclusion { font-family: var(--titre); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.036em; line-height: 1.06; font-size: clamp(22px, 3.4vw, 34px); }
.pzr-conclusion span { display: block; }
.pzr-conclusion .or {
  background-image: linear-gradient(168deg, #F7EACA 0%, #D6B875 40%, #B2934F 66%, #F2E2BC 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* ── la constellation ────────────────────────────────────────── */
.pzr-ciel { position: relative; width: 100%; }
.pzr-liens { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
.pzr-liens path { fill: none; stroke-linecap: round;
  stroke-dasharray: var(--lg); stroke-dashoffset: var(--lg);
  transition: stroke-dashoffset 1.5s var(--ressort); }
.pzr.parti .pzr-liens path { stroke-dashoffset: 0; }
.pzr-liens .vers-toi { stroke: rgba(214,184,117,.34); stroke-width: 1; }
.pzr-liens .entre { stroke: rgba(255,255,255,.11); stroke-width: 1; }
.pzr-liens g.mobile .coeur { fill: #FFF8E8; }
.pzr-liens g.mobile .halo { fill: var(--or); opacity: .17; }
.pzr-liens g.mobile { opacity: 0; transition: opacity 1.2s ease 1.2s; }
.pzr.parti .pzr-liens g.mobile { opacity: 1; }

/* le centre, c'est le visiteur */
.pzr-toi { position: absolute; z-index: 3; translate: -50% -50%;
  display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pzr-rond { position: relative; display: grid; place-items: center;
  width: var(--d); height: var(--d); border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #131417 0%, #08090A 68%, #050506 100%);
  box-shadow: inset 0 0 0 1px rgba(214,184,117,.42);
  animation: pzr-souffle 4.6s ease-in-out infinite; }
.pzr-rond::before {                             /* le halo */
  content: ""; position: absolute; inset: -46%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(244,228,189,.3) 0%, rgba(214,184,117,.14) 38%, transparent 68%);
  animation: pzr-halo 4.6s ease-in-out infinite; }
.pzr-rond i { font-style: normal; font-family: var(--titre); font-weight: 700;
  font-size: calc(var(--d) * .42); line-height: 1; color: #FFFDF7;
  text-shadow: 0 0 16px rgba(244,228,189,.5);
  animation: pzr-respire 3.4s ease-in-out infinite; }
.pzr-toi b { font-family: var(--titre); font-weight: 700; text-transform: uppercase;
  letter-spacing: .28em; font-size: clamp(11px, 1.15vw, 13px); color: rgba(255,255,255,.82); }
@keyframes pzr-souffle { 0%, 100% { scale: 1 } 50% { scale: 1.025 } }
@keyframes pzr-halo { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }
@keyframes pzr-respire { 0%, 100% { opacity: .82 } 50% { opacity: 1 } }

/* les membres */
.pzr-membre { position: absolute; z-index: 2; translate: -50% -50%;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0; scale: .82; transition: opacity .8s var(--ressort), scale .8s var(--ressort); }
.pzr.parti .pzr-membre { opacity: 1; scale: 1; }
.pzr-visage { position: relative; width: var(--t); height: var(--t); border-radius: 50%;
  overflow: hidden; background: #0E0F11;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 10px 26px -12px rgba(0,0,0,.9); }
.pzr-visage img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(.24) contrast(1.04) brightness(.94); }
.pzr-membre.doré .pzr-visage { box-shadow: inset 0 0 0 1px rgba(214,184,117,.5), 0 10px 26px -12px rgba(0,0,0,.9); }
.pzr-membre em { font-style: normal; font-family: var(--titre); font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; font-size: clamp(8.5px, .78vw, 10px);
  color: rgba(255,255,255,.5); white-space: nowrap; }

/* les petites bulles, bureau seulement */
.pzr-mot { position: absolute; z-index: 5; translate: -50% 0; bottom: calc(100% + 10px);
  padding: 7px 12px; border-radius: 12px; border-bottom-left-radius: 4px;
  background: rgba(22, 24, 28, .94); box-shadow: inset 0 0 0 1px rgba(255,255,255,.11);
  font-size: 12.5px; line-height: 1.35; color: rgba(255,255,255,.9); white-space: nowrap;
  opacity: 0; translate: -50% 6px; pointer-events: none;
  transition: opacity .55s ease, translate .55s var(--ressort); }
.pzr-membre.parle .pzr-mot { opacity: 1; translate: -50% 0; }

/* ── bureau : texte à gauche, constellation à droite ─────────── */
@media (min-width: 1024px) {
  .pzr-cadre { display: grid; grid-template-columns: 40% 1fr; gap: clamp(24px, 3vw, 48px);
    align-items: center; }
  .pzr-mots { display: flex; flex-direction: column; }
  .pzr-conclusion { margin-top: clamp(56px, 6vw, 88px); }
  .pzr-ciel { height: clamp(660px, 52vw, 800px); --d: 126px; }
  .pzr-membre { --t: 84px; }
  .pzr-membre.petit { --t: 66px; }
}
/* ── tablette ────────────────────────────────────────────────── */
@media (min-width: 700px) and (max-width: 1023px) {
  .pzr-mots { text-align: center; }
  .pzr-chapo { margin-left: auto; margin-right: auto; }
  .pzr-ciel { height: 640px; margin-top: 48px; --d: 118px; }
  .pzr-membre { --t: 74px; }
  .pzr-membre.petit { --t: 60px; }
  .pzr-conclusion { margin-top: 56px; text-align: center; }
}
/* ── téléphone ───────────────────────────────────────────────── */
@media (max-width: 699px) {
  .pzr-mots { text-align: left; }
  .pzr-ciel { height: 500px; margin-top: 40px; --d: 104px; }
  .pzr-membre { --t: 60px; }
  .pzr-membre.petit { --t: 52px; }
  .pzr-membre em { letter-spacing: .14em; font-size: 9px; }
  .pzr-mot { display: none; }
  .pzr-conclusion { margin-top: 52px; text-align: center; font-size: clamp(21px, 6.2vw, 30px); }
  .pzr-toi { gap: 11px; }
}

/* ── apparitions ─────────────────────────────────────────────── */
.pzr-r { opacity: 0; transform: translateY(20px); }
.pzr-r.vu { opacity: 1; transform: none;
  transition: opacity .95s var(--ressort), transform .95s var(--ressort); }
.pzr-r[data-d="1"].vu { transition-delay: .1s }
.pzr-r[data-d="2"].vu { transition-delay: .2s }

@media (prefers-reduced-motion: reduce) {
  .pzr-r { opacity: 1 !important; transform: none !important; }
  .pzr-membre { opacity: 1 !important; scale: 1 !important; }
  .pzr-liens path { stroke-dashoffset: 0 !important; transition: none; }
  .pzr-rond, .pzr-rond::before, .pzr-rond i { animation: none; }
  .pzr-rond::before { opacity: .8; }
}