/* ═══════════════════════════════════════════════════════════════
   PROJECT ZERO × IA — la parenthèse blanche.
   Noir, blanc, gris, et de l'or par petites touches.
   ═══════════════════════════════════════════════════════════════ */

.pzi {
  --blanc: #FFFFFF;
  --encre: #08090B;
  --graphite: #131519;
  --gris: #6E727A;
  --gris-clair: #E6E7EA;
  --or: #A8853A;
  --or-clair: #F4E4BD;
  --or-vif: #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);
  --enc-h: clamp(22px, 7vw, 32px);
  --enc-l: clamp(46px, 14vw, 66px);
  position: relative; display: block; width: 100%; max-width: 100vw;
  background: var(--blanc); color: var(--encre); font-family: var(--texte);
  overflow: hidden; isolation: isolate;
  padding: clamp(78px, 12vw, 148px) 0 clamp(86px, 13vw, 160px);
}
.pzi *, .pzi *::before, .pzi *::after { box-sizing: border-box; }

/* ── les encoches, même langage que le reste du site ─────────── */
.pzi-enc { position: absolute; left: 50%; z-index: 9; translate: -50% 0;
  width: var(--enc-l); height: var(--enc-h); overflow: visible; pointer-events: none; }
.pzi-enc.haut { top: -4px; }
.pzi-enc.bas { bottom: -1px; }
.pzi-enc polygon { fill: #050505; }
.pzi-enc path { fill: none; stroke: var(--or-vif); stroke-width: 1; stroke-opacity: 0;
  vector-effect: non-scaling-stroke; transition: stroke-opacity 1.2s ease .25s; }
.pzi.vu .pzi-enc path { stroke-opacity: .5; }

.pzi-cadre { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 44px); }

/* ── introduction ────────────────────────────────────────────── */
.pzi-label { margin: 0 0 clamp(20px, 3vw, 30px); font-family: var(--titre); font-weight: 600;
  text-transform: uppercase; letter-spacing: .3em; font-size: clamp(10px, 2.3vw, 12.5px);
  color: var(--gris); text-align: center; }
.pzi-label b { font-weight: 600; color: var(--or); }
.pzi-titre { margin: 0; font-family: var(--titre); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.042em; line-height: .92; font-size: clamp(36px, 7.8vw, 82px);
  text-align: center; text-wrap: balance; }
.pzi-titre span { display: block; }
.pzi-chapo { margin: clamp(22px, 3.2vw, 34px) auto 0; max-width: 46ch; text-align: center;
  font-size: clamp(16px, 1.7vw, 20px); line-height: 1.6; color: var(--gris); }

/* ── le chat ─────────────────────────────────────────────────── */
.pzi-scene { position: relative; margin: clamp(46px, 7vw, 86px) auto 0; width: min(100%, 820px); }
.pzi-chat { width: 100%;
  border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, #16181C 0%, #0A0B0D 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 30px 70px -28px rgba(8,9,11,.55),
              0 0 0 1px rgba(8,9,11,.06); }
/* le final vit sous la conversation, qui reste affichée en permanence */
.pzi-final-bloc { text-align: center; margin-top: clamp(74px, 12vw, 152px); }
.pzi-final-bloc .pzi-note { margin-top: clamp(26px, 3.4vw, 38px); }
.pzi-final-bloc .pzi-verdict { margin-top: 0; }

.pzi-tete { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: clamp(13px, 1.7vw, 18px) clamp(16px, 2.2vw, 22px);
  border-bottom: 1px solid rgba(255, 255, 255, .07); }
.pzi-marque { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pzi-ident { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; min-width: 0; }
/* le logo garde ses proportions, jamais compressé par le flex */
.pzi-ident img { display: block; flex: 0 0 auto; width: auto; object-fit: contain;
  height: clamp(23px, 2.4vw, 30px); max-width: 58vw; }
.pzi-ident span { display: block; font-family: var(--titre); font-weight: 500;
  text-transform: uppercase; letter-spacing: .19em; font-size: clamp(9.5px, 1.05vw, 11px);
  color: rgba(255, 255, 255, .42); }
.pzi-vivant { width: 6px; height: 6px; border-radius: 50%; background: var(--or-vif); flex: 0 0 auto;
  box-shadow: 0 0 6px rgba(214,184,117,.85); animation: pzi-pouls 2.6s ease-in-out infinite; }
@keyframes pzi-pouls { 0%,100% { opacity: .35; scale: .85 } 50% { opacity: 1; scale: 1.15 } }

.pzi-rejouer { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 8px 13px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  background: rgba(255,255,255,.04); cursor: pointer;
  font-family: var(--titre); font-weight: 600; text-transform: uppercase; letter-spacing: .16em;
  font-size: clamp(9.5px, 1vw, 10.5px); color: rgba(255,255,255,.66);
  transition: border-color .3s ease, color .3s ease, background .3s ease; }
.pzi-rejouer svg { width: 13px; height: 13px; }
.pzi-rejouer:hover { border-color: rgba(214,184,117,.6); color: var(--or-clair);
  background: rgba(214,184,117,.07); }
.pzi-rejouer:focus-visible { outline: 2px solid var(--or-vif); outline-offset: 2px; }

.pzi-fil { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 18px);
  padding: clamp(20px, 2.8vw, 30px) clamp(16px, 2.4vw, 26px);
  max-height: min(58vh, 520px); overflow-y: auto; scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.16) transparent; }
.pzi-fil::-webkit-scrollbar { width: 6px; }
.pzi-fil::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 3px; }

.pzi-ligne { display: flex; gap: 10px; align-items: flex-end; }
.pzi-ligne.moi { flex-direction: row-reverse; }
.pzi-jeton { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: #202329;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.pzi-jeton svg { width: 14px; height: 14px; fill: var(--or-clair); }
.pzi-bulle { max-width: 78%; padding: 11px 15px; font-size: clamp(14.5px, 1.45vw, 16px);
  line-height: 1.58; border-radius: 16px; }
.pzi-ligne.lui .pzi-bulle { border-top-left-radius: 6px; background: #1B1E24; color: #EDEFF2;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.pzi-ligne.moi .pzi-bulle { border-top-right-radius: 6px; background: #F4F5F7; color: #0B0C0E;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }

.pzi-sous { margin: 9px 0 0; font-size: clamp(14px, 1.4vw, 15.5px); line-height: 1.55;
  color: rgba(255, 255, 255, .78); }
.pzi-capa { list-style: none; margin: 13px 0 0; padding: 0; display: grid; gap: 7px; }
.pzi-capa li { display: flex; align-items: baseline; gap: 9px; font-size: clamp(14px, 1.4vw, 15.5px);
  color: rgba(255,255,255,.9); }
.pzi-capa li::before { content: ""; flex: 0 0 auto; width: 12px; height: 1px;
  background: var(--or-vif); translate: 0 -4px; }
.pzi-final { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.09);
  font-size: clamp(14px, 1.4vw, 15.5px); line-height: 1.55; color: var(--or-clair); }
.pzi-final.suite { margin-top: 9px; padding-top: 0; border-top: 0; color: rgba(255,255,255,.86); }

.pzi-frappe { display: inline-flex; align-items: center; gap: 5px; padding: 13px 16px;
  border-radius: 16px; border-top-left-radius: 6px; background: #1B1E24;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.pzi-frappe i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55);
  animation: pzi-point 1s ease-in-out infinite; }
.pzi-frappe i:nth-child(2) { animation-delay: .15s; }
.pzi-frappe i:nth-child(3) { animation-delay: .3s; }
@keyframes pzi-point { 0%,100% { opacity: .35; translate: 0 0 } 50% { opacity: 1; translate: 0 -4px } }

/* ── conclusion ──────────────────────────────────────────────── */
.pzi-suite { margin-top: clamp(72px, 12vw, 150px); text-align: center; }
.pzi-fort { margin: 0; font-family: var(--titre); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.042em; line-height: .92; font-size: clamp(34px, 7.4vw, 78px); text-wrap: balance; }
.pzi-fort span { display: block; }
.pzi-note { margin: clamp(24px, 3.4vw, 36px) auto 0; max-width: 42ch;
  font-size: clamp(16px, 1.7vw, 20px); line-height: 1.6; color: var(--encre); font-weight: 500; }
.pzi-note + .pzi-note { margin-top: clamp(10px, 1.2vw, 14px); color: var(--gris); font-weight: 400; }
.pzi-verdict { margin: clamp(64px, 10vw, 128px) 0 0; font-family: var(--titre); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.045em; line-height: .9;
  font-size: clamp(27px, 4.9vw, 54px); text-wrap: balance; }
.pzi-verdict span { display: block; }
/* une ligne de respiration entre les deux phrases */
.pzi-verdict span + span { margin-top: .9em; }
/* argent métallique lisible sur blanc */
.pzi-argenté { background-image: linear-gradient(168deg, #7B8189 0%, #2B2E34 40%, #9AA1A9 68%, #3C4046 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.pzi-doré { background-image: linear-gradient(168deg, #C9A34D 0%, #8C6E2B 42%, #D6B875 72%, #9C7C33 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

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

@media (max-width: 700px) {
  .pzi-bulle { max-width: 88%; }
  .pzi-fil { max-height: min(66vh, 560px); padding: 18px 14px; }
  .pzi-tete { padding: 13px 14px; }
  .pzi-chat { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .pzi-r { opacity: 1 !important; transform: none !important; }
  .pzi-vivant, .pzi-frappe i { animation: none; }
}