/* ═══════════════════════════════════════════════════════════════
   PROJECT ZERO — « Tu entres pour faire. »
   Timeline éditoriale. Noir, argent, or. Rien d'autre.
   Rythme : typo → panneau → typo → panneau.
   ═══════════════════════════════════════════════════════════════ */

.pzc {
  --noir: #050505;
  --graphite: #0C0D0F;
  --argent: rgba(255, 255, 255, .17);
  --or: #D6B875;
  --or-clair: #F4E4BD;
  --gris: #8B8F96;
  --titre: "Stack Sans Notch", "DM Sans", system-ui, sans-serif;
  --texte: "DM Sans", "Satoshi", system-ui, sans-serif;
  position: relative; display: block; width: 100%; max-width: 100vw;
  background: var(--noir); color: #fff; font-family: var(--texte);
  overflow: hidden; isolation: isolate;
  padding: clamp(84px, 14vw, 168px) 0 clamp(96px, 16vw, 190px);
}
.pzc *, .pzc *::before, .pzc *::after { box-sizing: border-box; }
/* grain, à la limite du perceptible */
.pzc::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .045;
  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");
}

.pzc-argent {
  background-image: linear-gradient(166deg, #FFFFFF 0%, #CFD3D9 32%, #90959D 56%, #F0F2F5 80%, #A9AEB6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.pzc-or {
  background-image: linear-gradient(166deg, #F7EACA 0%, #D6B875 38%, #B2934F 64%, #F2E2BC 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* ── en-tête ─────────────────────────────────────────────────── */
.pzc-haut { position: relative; z-index: 3; text-align: center; padding: 0 20px;
  margin-bottom: clamp(72px, 12vw, 150px); }
/* un canvas garde son ratio intrinsèque si la largeur n'est pas explicite */
.pzc-poussiere { position: absolute; left: 0; top: 50%; z-index: -1;
  width: 100%; height: 190%; translate: 0 -50%; pointer-events: none; }
.pzc-oeil { margin: 0; font-family: var(--titre); font-weight: 500; text-transform: uppercase;
  letter-spacing: .34em; font-size: clamp(10px, 2.3vw, 12.5px); color: var(--gris); }
.pzc-fait { margin: clamp(12px, 2vw, 18px) 0 clamp(26px, 4.4vw, 44px); font-family: var(--titre);
  font-weight: 700; text-transform: uppercase; letter-spacing: .2em;
  font-size: clamp(13px, 2.8vw, 17px); }
.pzc-titre { margin: 0; font-family: var(--titre); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.042em; line-height: .9; font-size: clamp(36px, 8.4vw, 80px); }
.pzc-titre span { display: block; }

/* ── la piste ────────────────────────────────────────────────── */
.pzc-piste { position: relative; width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.pzc-rail { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; translate: -50% 0;
  background: rgba(255, 255, 255, .07); }
.pzc-faisceau { position: absolute; inset: 0; transform-origin: 50% 0; scale: 1 0;
  background: linear-gradient(180deg, rgba(214,184,117,.2) 0%, var(--or) 14%, var(--or-clair) 100%);
  box-shadow: 0 0 5px rgba(214,184,117,.6), 0 0 14px rgba(214,184,117,.28); }
.pzc-tete { position: absolute; left: 50%; top: 0; z-index: 4; width: 5px; height: 5px;
  translate: -50% -50%; border-radius: 50%; background: #FFF6E2; opacity: 0;
  box-shadow: 0 0 7px rgba(244,228,189,.95), 0 0 20px rgba(214,184,117,.5); }

/* ── une étape ───────────────────────────────────────────────── */
.pzc-etape { position: relative; display: flex; padding: clamp(46px, 7.5vw, 96px) 0; }
.pzc-etape[data-cote="gauche"] { justify-content: flex-start; }
.pzc-etape[data-cote="droite"] { justify-content: flex-end; }

.pzc-noeud { position: absolute; left: 50%; top: 50%; z-index: 4; width: 8px; height: 8px;
  translate: -50% -50%; border-radius: 50%; background: var(--or-clair); opacity: 0; scale: .3;
  box-shadow: 0 0 7px rgba(244,228,189,.9), 0 0 18px rgba(214,184,117,.45); }
.pzc-onde { position: absolute; inset: -5px; border-radius: 50%; opacity: 0; scale: .5;
  border: 1px solid rgba(244,228,189,.8); }
.pzc-branche { position: absolute; top: 50%; z-index: 3; height: 1px; scale: 0 1;
  box-shadow: 0 0 4px rgba(214,184,117,.5); }
.pzc-etape[data-cote="gauche"] .pzc-branche { right: 50%; transform-origin: 100% 50%;
  background: linear-gradient(270deg, var(--or-clair), rgba(214,184,117,.22)); }
.pzc-etape[data-cote="droite"] .pzc-branche { left: 50%; transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--or-clair), rgba(214,184,117,.22)); }

/* ── le contenu ──────────────────────────────────────────────── */
.pzc-bloc { position: relative; z-index: 3; width: clamp(280px, 40vw, 476px); }
.pzc-etape[data-cote="gauche"] .pzc-bloc { text-align: right; margin-right: clamp(40px, 5vw, 78px); }
.pzc-etape[data-cote="droite"] .pzc-bloc { text-align: left; margin-left: clamp(40px, 5vw, 78px); }

/* Les numéros 01 à 04 ont été retirés de l'affichage. L'élément est
   conservé pour l'animation et le filet de sécurité, mais il ne prend
   plus de place : le titre de chaque étape remonte d'autant. */
.pzc-num { display: none !important; margin: 0; font-family: var(--titre);
  font-weight: 700; letter-spacing: .26em; font-size: clamp(16px, 1.85vw, 21px);
  color: var(--or); opacity: 0; }
.pzc-etiq { margin: 0; font-family: var(--titre); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.038em; line-height: .93; font-size: clamp(29px, 4.7vw, 56px); }
.pzc-etiq span { display: block; opacity: 0; translate: 0 18px; }
.pzc-chapo { margin: clamp(18px, 2.4vw, 28px) 0 0; font-size: clamp(16px, 1.5vw, 18.5px);
  line-height: 1.62; color: rgba(255,255,255,.9); opacity: 0; translate: 0 12px; }
.pzc-liste { list-style: none; margin: clamp(20px, 2.6vw, 32px) 0 0; padding: 0;
  display: grid; gap: clamp(6px, .7vw, 10px); }
.pzc-liste li { font-family: var(--titre); font-weight: 500; letter-spacing: .012em;
  line-height: 1.44; font-size: clamp(15.5px, 1.55vw, 19px); color: rgba(255,255,255,.76);
  opacity: 0; translate: 0 12px; }
.pzc-pied { margin: clamp(20px, 2.6vw, 30px) 0 0; font-family: var(--titre); font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; font-size: clamp(13px, 1.25vw, 15px);
  color: var(--or); opacity: 0; translate: 0 12px; }

/* la grille de compétences, compacte et sans cartes */
.pzc-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px) clamp(20px, 2.4vw, 34px); margin: clamp(24px, 2.8vw, 34px) 0 0; }
.pzc-grille > div { display: flex; flex-direction: column; gap: 5px;
  padding-top: clamp(9px, 1vw, 13px); border-top: 1px solid rgba(255, 255, 255, .12);
  opacity: 0; translate: 0 12px; }
.pzc-grille b { font-family: var(--titre); font-weight: 700; text-transform: uppercase;
  letter-spacing: .11em; font-size: clamp(13.5px, 1.05vw, 15px); color: var(--or-clair); }
.pzc-grille i { font-style: normal; font-size: clamp(12.5px, .95vw, 13.8px); line-height: 1.52;
  color: rgba(255, 255, 255, .58); }

/* ── les panneaux, étapes 02 et 04 ───────────────────────────── */
.pzc-bloc.panneau { width: clamp(300px, 44vw, 528px);
  padding: clamp(28px, 3.2vw, 40px) clamp(24px, 3vw, 38px); }
.pzc-bloc.panneau::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(152deg, #14161A 0%, var(--graphite) 44%, #08090B 100%);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}
.pzc-cadre { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pzc-cadre .repos { fill: none; stroke: var(--argent); stroke-width: 1; }
.pzc-cadre .vif { fill: none; stroke: url(#pzc-metal); stroke-width: 1.3;
  filter: drop-shadow(0 0 3px rgba(214,184,117,.55)); }

.pzc-etape.majeure .pzc-bloc.panneau { width: clamp(300px, 50vw, 548px); }

/* ── mobile ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pzc-piste { padding: 0 18px 0 0; }
  .pzc-rail, .pzc-tete { left: 24px; }
  .pzc-etape, .pzc-etape[data-cote="gauche"], .pzc-etape[data-cote="droite"] {
    justify-content: flex-end; padding: clamp(38px, 9vw, 60px) 0; }
  .pzc-noeud { left: 24px; }
  .pzc-branche, .pzc-etape[data-cote="gauche"] .pzc-branche, .pzc-etape[data-cote="droite"] .pzc-branche {
    left: 24px; right: auto; transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--or-clair), rgba(214,184,117,.22)); }
  .pzc-bloc, .pzc-bloc.panneau, .pzc-etape.majeure .pzc-bloc.panneau { width: calc(100% - 58px); }
  .pzc-grille { grid-template-columns: 1fr; gap: 15px; }
  .pzc-etape[data-cote="gauche"] .pzc-bloc, .pzc-etape[data-cote="droite"] .pzc-bloc { text-align: left; margin-left: clamp(40px, 5vw, 78px); }
  .pzc-etiq { font-size: clamp(29px, 8.4vw, 36px); }
  .pzc-bloc.panneau { padding: clamp(26px, 6vw, 34px) clamp(20px, 5vw, 28px); }
}

/* sans animation, tout est lisible d'emblée */
.pzc.sans-anim .pzc-oeil, .pzc.sans-anim .pzc-fait, .pzc.sans-anim .pzc-titre span,
.pzc.sans-anim .pzc-num, .pzc.sans-anim .pzc-etiq span, .pzc.sans-anim .pzc-chapo,
.pzc.sans-anim .pzc-liste li, .pzc.sans-anim .pzc-pied, .pzc.sans-anim .pzc-grille > div {
  opacity: 1 !important; translate: none !important; transform: none !important; }
.pzc.sans-anim .pzc-noeud { opacity: 1 !important; scale: 1 !important; transform: translate(-50%,-50%) !important; }
.pzc.sans-anim .pzc-faisceau { scale: 1 1 !important; transform: none !important; }
.pzc.sans-anim .pzc-branche { scale: 1 1 !important; transform: none !important; }
.pzc.sans-anim .pzc-tete { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  .pzc-num, .pzc-etiq span, .pzc-chapo, .pzc-liste li, .pzc-pied, .pzc-grille > div {
    opacity: 1 !important; translate: none !important; }
  .pzc-noeud { opacity: 1 !important; scale: 1 !important; }
}


/* « Ici, on fait. » n'est plus affiché. L'élément reste pour la séquence
   d'animation, mais il ne prend plus de place au-dessus du titre. */
.pzc-fait { display: none !important; margin: 0 !important; }
/* C'est lui qui portait l'écart avant le titre : on le rend au surtitre. */
.pzc-oeil { margin-bottom: clamp(26px, 4.4vw, 44px) !important; }