/* ═══════════════════════════════════════════════════════════════
   PROJECT ZERO — Derrière Project Zero.
   Deux tirages encadrés, accrochés côte à côte. Le cadre est un
   double filet de métal : argent à gauche, champagne à droite.
   Aucun effet de matière, le noir et la lumière font le travail.
   ═══════════════════════════════════════════════════════════════ */

.pzd {
  --noir: #050505;
  --argent: #C9CDD3;
  --or: #D6B875;
  --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(64px, 8vw, 108px) 0 clamp(64px, 8vw, 104px);
}
.pzd *, .pzd *::before, .pzd *::after { box-sizing: border-box; }
.pzd::before {                       /* grain */
  content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: .05;
  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── l'en-tête ───────────────────────────────────────────────── */
.pzd-entete { position: relative; z-index: 2; width: 100%;
  max-width: 900px; margin: 0 auto clamp(38px, 5vw, 66px);
  padding: 0 clamp(20px, 5vw, 32px); text-align: center; }
.pzd-oeil { margin: 0; font-family: var(--titre); font-weight: 600; text-transform: uppercase;
  letter-spacing: .34em; font-size: clamp(9.5px, 1vw, 11.5px); color: var(--or); line-height: 2; }
.pzd-titre { margin: clamp(8px, 1vw, 14px) 0 0; font-family: var(--titre); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.035em; line-height: .94;
  font-size: clamp(34px, 5.6vw, 74px); }
.pzd-titre .argent {
  background-image: linear-gradient(168deg, #FFFFFF, #C9CDD3 40%, #8E939B 66%, #EFF1F3);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent; }
.pzd-sous { margin: clamp(12px, 1.4vw, 18px) 0 0; font-family: var(--titre); font-weight: 500;
  text-transform: uppercase; letter-spacing: .3em; font-size: clamp(10px, 1.05vw, 12.5px);
  color: rgba(255,255,255,.6); line-height: 2; }
.pzd-verbes { margin: clamp(16px, 2vw, 24px) auto 0; font-family: var(--titre); font-weight: 500;
  text-transform: uppercase; letter-spacing: .3em; font-size: clamp(9.5px, 1vw, 11.5px);
  color: rgba(255,255,255,.44); }
.pzd-verbes b { font-weight: 500; color: var(--or); opacity: .8; padding: 0 .5em; }

/* ═══════════════════════════════════════════════════════════════
   LA COMPOSITION, À TOUTES LES LARGEURS
   Deux portraits détourés posés sur un halo, un bloc central qui les
   relie, deux colonnes séparées d'un filet d'un pixel. Aucune carte,
   aucun cadre : le noir et l'espace font tout le travail. Le grand
   écran reprend la même structure, simplement plus ample.
   ═══════════════════════════════════════════════════════════════ */
/* L'écart avec la section du dessus était trop large : la composition
   commence par des portraits, elle n'a pas besoin d'un long silence. */
/* Juste assez pour que l'arc, qui déborde du haut de l'image, ne soit
   pas coupé par la section précédente. Pas un pixel de plus. */
/* L'arc ne déborde plus du haut de l'image depuis qu'il a été resserré :
   la section peut donc remonter d'autant. */
.pzd { padding: clamp(20px, 3.5vw, 40px) 0 clamp(60px, 11vw, 104px); }
.pzd-mob { display: block; opacity: 0; translate: 0 22px;
  transition: opacity 1s var(--ressort), translate 1s var(--ressort); }
.pzd.parti .pzd-mob { opacity: 1; translate: 0 0; }
.pzd-entete { display: none; }

/* ── les deux portraits ─────────────────────────────────────── */
.pzd-mob-duo { position: relative; display: grid; grid-template-columns: 1fr 1fr;
  align-items: end; gap: 0; padding: 0 clamp(14px, 4vw, 22px); }
/* le trait doré qui sépare les deux, plus vif au centre */
.pzd-mob-duo::after {
  content: ""; position: absolute; left: 50%; top: 12%; bottom: 6%; width: 1px;
  translate: -50% 0; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, transparent,
    rgba(214,184,117,.26) 18%, rgba(244,228,189,.85) 50%,
    rgba(214,184,117,.26) 82%, transparent); }
.pzd-mob-p { position: relative; margin: 0; aspect-ratio: 780 / 996; }
/* L'arc passe DERRIÈRE la tête : le portrait est détouré, il suffit de
   le poser sous lui. Un cercle d'un pixel, pas un halo de plus. */
.pzd-mob-p::before {
  content: ""; position: absolute; left: 50%; top: 28%; z-index: 0;
  width: 72%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; pointer-events: none;
  /* le trait s'éteint vers le bas : il ne reste que l'arc au-dessus
     et sur les côtés de la tête, jamais un cercle refermé */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 46%,
    rgba(0,0,0,.35) 63%, transparent 78%);
  mask-image: linear-gradient(180deg, #000 0%, #000 46%,
    rgba(0,0,0,.35) 63%, transparent 78%); }
.p .pzd-mob-p::before, .pzd-mob-p.p::before {
  border: 1px solid rgba(214,219,226,.34);
  box-shadow: 0 0 22px -6px rgba(214,219,226,.30); }
.j .pzd-mob-p::before, .pzd-mob-p.j::before {
  border: 1px solid rgba(214,184,117,.52);
  box-shadow: 0 0 26px -4px rgba(214,184,117,.42),
              inset 0 0 30px -12px rgba(214,184,117,.34); }
.pzd-mob-halo { position: absolute; left: 50%; top: 32%; z-index: 0;
  width: 100%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  pointer-events: none; filter: blur(22px); }
.p .pzd-mob-halo { background: radial-gradient(circle,
  rgba(198,205,214,.30) 0%, rgba(150,160,172,.10) 42%, transparent 66%); }
.j .pzd-mob-halo { background: radial-gradient(circle,
  rgba(214,184,117,.28) 0%, rgba(168,140,80,.10) 42%, transparent 66%); }
.pzd-mob-img { position: relative; z-index: 1; display: block;
  width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
  /* les sujets sont détourés : les agrandir au-delà de leur boîte ne
     produit aucun bord, seulement des personnes plus présentes */
  transform-origin: 50% 100%;
  /* Découpe en ovale plutôt qu'en rectangle : l'ellipse cadre la tête et
     le buste, et le dégradé du bas dissout les épaules dans le noir au
     lieu de les trancher. Les deux masques se croisent. */
  -webkit-mask-image:
    radial-gradient(ellipse 44% 41% at 50% 38%, #000 76%, transparent 100%),
    linear-gradient(180deg, #000 58%, rgba(0,0,0,.5) 82%, transparent 100%);
  mask-image:
    radial-gradient(ellipse 44% 41% at 50% 38%, #000 76%, transparent 100%),
    linear-gradient(180deg, #000 58%, rgba(0,0,0,.5) 82%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.p .pzd-mob-img { filter: grayscale(.34) contrast(1.08) brightness(1.02) saturate(.8); }
.j .pzd-mob-img { filter: grayscale(.1) contrast(1.06) brightness(1.02) saturate(1.02); }
/* Les deux portraits ont été recadrés à la source sur une base commune :
   même largeur de tête, même hauteur de crâne, même niveau de coupe du
   buste. Un seul réglage suffit donc ici, et il vaut pour les deux. */
.pzd-mob-img { scale: 1; }

/* Le masque qui empêchait l'épaule de traverser le trait a été retiré :
   il rognait aussi l'arc et le halo, ce qui donnait des bords droits.
   Depuis que les portraits ne débordent plus de leur boîte, ils ne
   peuvent de toute façon plus atteindre la ligne centrale. */

/* ── le bloc central qui relie les deux ─────────────────────── */
.pzd-mob-noyau { position: relative; margin-top: clamp(4px, 2vw, 12px);
  padding: 0 clamp(20px, 6vw, 30px); text-align: center; }
.pzd-mob-label { margin: 0 0 clamp(14px, 3.4vw, 20px); font-family: var(--titre);
  font-weight: 600; text-transform: uppercase; letter-spacing: .42em;
  font-size: 9.5px; color: rgba(255,255,255,.42);
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 4vw, 22px); }
.pzd-mob-label::before, .pzd-mob-label::after {
  content: ""; height: 1px; width: clamp(26px, 9vw, 64px);
  background: linear-gradient(90deg, transparent, rgba(214,184,117,.5)); }
.pzd-mob-label::after { transform: scaleX(-1); }
.pzd-mob-titre { margin: 0; font-family: var(--titre); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.03em; line-height: .92;
  font-size: clamp(30px, 9vw, 46px);
  display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pzd-mob-titre .arg {
  background-image: linear-gradient(168deg, #FFFFFF, #C9CDD3 44%, #9BA1A9 70%, #F2F4F6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent; }
.pzd-mob-titre .or {
  background-image: linear-gradient(168deg, #FFFFFF, #F0E2C2 40%, #D6B875 74%, #FFF8EA);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent; }
.pzd-mob-titre .croix { font-style: normal; font-weight: 300;
  font-size: .44em; line-height: 1; color: rgba(214,184,117,.75);
  margin: clamp(4px, 1.4vw, 8px) 0; }
.pzd-mob-sous { margin: clamp(16px, 4vw, 22px) 0 0; font-family: var(--titre);
  font-weight: 500; text-transform: uppercase; letter-spacing: .2em;
  font-size: clamp(9.5px, 2.7vw, 11px); color: rgba(255,255,255,.55);
  line-height: 1.9; }

/* ── les deux colonnes, sans le moindre cadre ───────────────── */
.pzd-mob-cols { position: relative; display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 5vw, 26px); margin-top: clamp(40px, 9vw, 60px);
  padding: 0 clamp(18px, 5vw, 26px); }
.pzd-mob-cols::before {          /* le filet central, un pixel */
  content: ""; position: absolute; left: 50%; top: 4%; bottom: 12%; width: 1px;
  translate: -50% 0;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.14) 22%,
    rgba(255,255,255,.14) 74%, transparent); }
.pzd-mob-col { text-align: center; }
.pzd-mob-nom { margin: 0 0 clamp(14px, 3.4vw, 18px); font-family: var(--titre);
  font-weight: 500; text-transform: uppercase; letter-spacing: .17em;
  font-size: clamp(13px, 3.6vw, 15px); line-height: 1.3; }
.p .pzd-mob-nom { color: #EDEFF2; }
.j .pzd-mob-nom { color: #F6EEDC; }
.pzd-mob-nom small { display: block; font-size: .74em; letter-spacing: .2em;
  opacity: .6; margin-top: 4px; }
.pzd-mob-nom::after {
  content: ""; display: block; height: 1px; width: clamp(52px, 30%, 96px);
  margin: clamp(12px, 3vw, 16px) auto 0; }
.p .pzd-mob-nom::after { background: linear-gradient(90deg, transparent,
  rgba(214,219,226,.55), transparent); }
.j .pzd-mob-nom::after { background: linear-gradient(90deg, transparent,
  rgba(214,184,117,.65), transparent); }
.pzd-mob-liste { list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(9px, 2.4vw, 12px); }
.pzd-mob-liste li { font-family: var(--titre); font-weight: 400;
  text-transform: uppercase; letter-spacing: .12em;
  font-size: clamp(10px, 2.9vw, 11.5px); color: rgba(255,255,255,.68);
  line-height: 1.5; }
.pzd-mob-micro { margin: clamp(20px, 5vw, 28px) 0 0; display: grid; gap: 2px;
  font-family: var(--titre); font-weight: 500; text-transform: uppercase;
  letter-spacing: .22em; font-size: 8.5px; line-height: 1.7; }
.p .pzd-mob-micro { color: rgba(201,205,211,.42); }
.j .pzd-mob-micro { color: rgba(214,184,117,.44); }

.pzd-mob-fin { margin: clamp(46px, 10vw, 66px) 0 0;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 4vw, 24px);
  font-family: var(--titre); font-weight: 500; text-transform: uppercase;
  letter-spacing: .34em; font-size: 9.5px; color: rgba(255,255,255,.34); }
.pzd-mob-fin::before, .pzd-mob-fin::after {
  content: ""; height: 1px; width: clamp(30px, 12vw, 90px);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22)); }
.pzd-mob-fin::after { transform: scaleX(-1); }


/* ── grand écran : la même composition, en plus large ──────────── */
@media (min-width: 900px) {
  .pzd-mob-duo { max-width: 980px; margin: 0 auto; gap: clamp(4px, 1vw, 14px);
    padding: 0 24px; }
  .pzd-mob-p { aspect-ratio: 780 / 996; }
  .pzd-mob-img { scale: 1; }
  .pzd-mob-halo { width: 96%; filter: blur(34px); }
  .pzd-mob-p::before { width: 72%; top: 28%; }
  .pzd-mob-noyau { margin-top: clamp(10px, 2vw, 26px); }
  .pzd-mob-label { font-size: 11px; letter-spacing: .46em;
    margin-bottom: clamp(18px, 2vw, 26px); }
  .pzd-mob-titre { flex-direction: row; align-items: baseline;
    justify-content: center; gap: clamp(18px, 2.4vw, 34px);
    font-size: clamp(46px, 5.6vw, 82px); }
  .pzd-mob-titre .croix { font-size: .34em; margin: 0; }
  .pzd-mob-sous { margin-top: clamp(20px, 2.4vw, 30px);
    font-size: 12.5px; letter-spacing: .26em; }
  .pzd-mob-cols { max-width: 820px; margin: clamp(56px, 6vw, 86px) auto 0;
    gap: clamp(50px, 7vw, 96px); padding: 0 32px; }
  .pzd-mob-cols::before { top: 0; bottom: 6%; }
  .pzd-mob-nom { font-size: clamp(15px, 1.5vw, 18px);
    margin-bottom: clamp(18px, 2vw, 24px); }
  .pzd-mob-liste { gap: clamp(11px, 1.2vw, 14px); }
  .pzd-mob-liste li { font-size: clamp(11.5px, 1.05vw, 12.5px); letter-spacing: .15em; }
  .pzd-mob-micro { margin-top: clamp(26px, 3vw, 36px); font-size: 9.5px; }
  .pzd-mob-fin { margin-top: clamp(60px, 7vw, 92px); font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .pzd-mob { opacity: 1 !important; translate: none !important; }
  .pzd-mob-halo, .pzd-mob-img { transform: none !important; }
}