/* ══════════════════════════════════════════
   page-zhein.css — Outil pédagogique Zhein
   Pile / face : repérer les techniques de vente
══════════════════════════════════════════ */

/* ── HERO ── */
.zhein-hero{padding:4.5rem 0 3rem}
.zhein-hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.zhein-hero-intro{max-width:520px}
.zhein-hero-title{font-size:clamp(2.1rem,3.6vw,3rem);font-weight:700;letter-spacing:-.03em;line-height:1.08;margin:1rem 0 1.2rem}
.zhein-hero-sub{font-size:1.05rem;color:var(--ink-mid);line-height:1.75}

.zhein-hero-visual{
  background-color:rgba(255,255,255,.82);
  background-image:radial-gradient(circle, rgba(22,22,22,.12) 1px, transparent 1px);
  background-size:18px 18px;
  border:1.5px solid rgba(22,22,22,.28);
  border-radius:16px;
  padding:1.4rem;
  box-shadow:3px 4px 0 rgba(0,0,0,.14);
}
.zhein-hero-img{width:100%;height:auto;display:block;border:1.5px solid var(--ink)}
.zhein-hero-caption{display:block;margin-top:1rem;font-size:.85rem;font-style:italic;color:var(--ink-soft)}

/* ── INTRO ── */
.zhein-intro{padding:1rem 0 3rem}
.zhein-intro-inner{max-width:760px}
.zhein-intro p{color:var(--ink-mid);margin-top:.6rem}

/* ── GRID WRAPPER ── */
.zhein-grid-wrap{background:var(--cream-grid);border:1.5px solid var(--ink);border-radius:var(--r-grid);padding:1.6rem}
.zhein-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2.2rem}

/* ── ITEM ── */
.zhein-item{position:relative;z-index:1;transition:opacity .35s var(--ease-out),filter .35s var(--ease-out),z-index 0s linear .45s}
.zhein-item.is-active{z-index:20;transition-delay:0s}
.zhein-item-head{margin-bottom:.7rem}
.zhein-num{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}

/* Dim other cards while one is zoomed/flipped */
.zhein-grid.has-active .zhein-item:not(.is-active){opacity:.45;filter:saturate(.7)}

/* ── FLIP CARD ── */
.zhein-flip{
  display:block;width:100%;aspect-ratio:16/9;
  border:0;background:transparent;padding:0;margin:0;
  cursor:pointer;perspective:1800px;
  font-family:var(--sans);text-align:left;
  transform:scale(1);transform-origin:center;
  transition:transform .45s var(--ease-spring);
}
.zhein-item.is-active .zhein-flip{transform:scale(1.18)}

.zhein-flip-inner{
  display:block;position:relative;width:100%;height:100%;
  transition:transform .7s var(--ease-spring);
  transform-style:preserve-3d;
}
.zhein-flip.is-flipped .zhein-flip-inner{transform:rotateY(180deg)}

.zhein-face{
  position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border:1.5px solid var(--ink);border-radius:0;
  box-shadow:3px 3px 0 rgba(0,0,0,.1);
  overflow:hidden;transition:box-shadow .25s var(--ease-out);
}
.zhein-flip:hover .zhein-face,
.zhein-item.is-active .zhein-face{box-shadow:7px 10px 0 rgba(0,0,0,.16),0 24px 48px rgba(0,0,0,.18)}

.zhein-face--front{background:#fff}
.zhein-face--front img{width:100%;height:100%;object-fit:cover;display:block}

.zhein-face--back{
  transform:rotateY(180deg);
  background:#fff;
  padding:1.8rem 1.6rem 3rem;
  display:flex;flex-direction:column;justify-content:center;gap:.7rem;
  overflow-y:auto;
}
.zhein-face-title{display:block;font-family:var(--display);font-weight:700;font-size:1rem;line-height:1.3;color:var(--coral)}
.zhein-face-text{display:block;font-size:.92rem;line-height:1.62;color:var(--ink-dark)}

.zhein-flip-hint{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:.55rem .9rem;
  background:rgba(22,22,22,.82);color:#fff;
  font-size:.76rem;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:.4rem;
}
.zhein-flip-hint svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ── CLOSING ── */
.zhein-closing{padding:4rem 0 5rem}
.zhein-closing-inner{max-width:820px}
.zhein-closing p{color:var(--ink-mid);margin-top:1rem}
.zhein-closing strong{color:var(--ink)}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width:900px){
  .zhein-grid{grid-template-columns:1fr}
  .zhein-hero-inner{grid-template-columns:1fr;gap:2rem}
  .zhein-hero-intro{max-width:none}
}
@media (max-width:768px){
  .zhein-hero{padding:3rem 0 2rem}
  .zhein-grid-wrap{padding:1rem}
  .zhein-face--back{padding:1.2rem 1.3rem}
  .zhein-flip{aspect-ratio:4/3}
  .zhein-item.is-active .zhein-flip{transform:scale(1.08)}
}