/* ════════════════════════════════════════════════════════════════
   L'ENTREGENT — la présentation qui se joue.
   Une scène, une phrase à la fois, un trait qui avance.
   Elle recouvre la page ; elle ne la remplace pas.
   ════════════════════════════════════════════════════════════════ */

html.pv-ouvert{overflow:hidden}

.pv{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity 220ms cubic-bezier(.16,.84,.44,1)}
.pv.vu{opacity:1}
.pv[hidden]{display:none !important}
.pv-fond{position:absolute;inset:0;background:rgba(22,32,43,.46);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}

/* les couleurs de la maison, dans la couche aussi */
.pv[data-maison="occasion"]{--acc:#2E4A63;--acc2:#22384B;--clair:#9DB2C4;--pale:#C7D4DE;
  --fond:#FBFCFD;--teinte:#F4F7FA;--fil:#D3E0EA}
.pv[data-maison="presence"]{--acc:#7A6647;--acc2:#5E4E36;--clair:#C4B492;--pale:#DDD1B8;
  --fond:#FDFCF9;--teinte:#FAF7F1;--fil:#E4DAC7}

.pv-cadre{position:relative;display:flex;flex-direction:column;
  width:min(1100px,calc(100vw - 48px));height:min(660px,calc(100vh - 48px));
  background:var(--fond);border:1px solid #16202B;
  transform:translateY(12px);transition:transform 260ms cubic-bezier(.16,.84,.44,1)}
.pv.vu .pv-cadre{transform:none}

/* ── la tête : où l'on est, la lecture, la croix ──────────────── */
.pv-tete{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:0 22px 0 26px;min-height:56px;border-bottom:1px solid #16202B;background:var(--fond)}
.pv-ou{display:flex;align-items:center;gap:14px;min-width:0}
.pv-ch{font-family:Fraunces,Georgia,serif;font-weight:300;font-size:21px;color:var(--clair)}
.pv-sep{width:1px;height:13px;background:var(--fil)}
.pv-vo{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--acc);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-out{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.pv-txt{border:0;background:none;cursor:pointer;font-family:inherit;color:#63696F;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:8px 12px;min-height:44px;
  transition:color 180ms cubic-bezier(.16,.84,.44,1)}
.pv-txt:hover{color:#16202B}
.pv-x{flex:0 0 auto;width:44px;height:44px;border:0;background:none;color:#63696F;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:color 180ms cubic-bezier(.16,.84,.44,1)}
.pv-x:hover{color:#16202B}

/* ── la scène ─────────────────────────────────────────────────── */
.pv-scene{flex:1 1 auto;position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) 440px;gap:40px;
  padding:30px 36px 26px 52px;overflow:hidden;background:var(--fond)}
.pv-scene[hidden]{display:none !important}
.pv-gauche{display:grid;grid-template-rows:auto 1fr auto;gap:22px;min-width:0}

/* le numéro du chapitre, son titre — le point fixe de l'écran */
.pv-etape{display:flex;align-items:flex-end;gap:20px;min-width:0}
.pv-no{flex:0 0 auto;font-family:Fraunces,Georgia,serif;font-weight:300;font-size:54px;
  line-height:.82;color:var(--pale)}
.pv-ct{font-family:Fraunces,Georgia,serif;font-weight:400;font-size:20px;line-height:1.25;
  color:var(--acc);padding-bottom:2px;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* la phrase : elle monte d'un bloc, elle ne s'écrit pas mot à mot */
.pv-mot{margin:0;align-self:center;max-width:24ch;
  font-family:Fraunces,Georgia,serif;font-weight:300;font-size:34px;line-height:1.34;
  letter-spacing:-.012em;color:#16202B;
  opacity:0;transform:translateY(10px);
  transition:opacity 520ms cubic-bezier(.16,.84,.44,1),transform 520ms cubic-bezier(.16,.84,.44,1)}
.pv-mot.vu{opacity:1;transform:none}
.pv-mot.pt{font-size:28px;max-width:32ch}
.pv-mot.ptt{font-size:23px;line-height:1.42;max-width:40ch}

/* le fil du chapitre, sous la phrase */
.pv-fil{height:1px;background:var(--fil);position:relative}
.pv-fil i{position:absolute;left:0;top:0;height:1px;background:var(--acc);width:0;
  transition:width 260ms linear}

/* ── le dessin : une illustration par phrase, qui se trace ────── */
.pv-dessin{display:flex;align-items:center;justify-content:center;min-width:0;color:var(--acc)}
.pv-dessin svg{width:100%;height:auto;max-height:100%;overflow:visible}
.pv-dessin .sc{opacity:0;transition:opacity 460ms cubic-bezier(.16,.84,.44,1)}
.pv-dessin .sc.on{opacity:1}
.pv-dessin .tr{stroke-dasharray:var(--L);stroke-dashoffset:var(--L);
  transition:stroke-dashoffset 900ms cubic-bezier(.16,.84,.44,1)}
.pv-dessin .sc.on .tr{stroke-dashoffset:0}

/* la dernière image */
.pv-fin{position:absolute;inset:0;background:var(--fond);
  display:flex;flex-direction:column;justify-content:center;gap:18px;padding:32px 56px}
.pv-fin[hidden]{display:none !important}
.pv-fin-t{font-family:Fraunces,Georgia,serif;font-weight:300;font-size:34px;line-height:1.28;
  letter-spacing:-.012em;color:#16202B;max-width:24ch}
.pv-fin-p{margin:0;font-size:15.5px;line-height:1.72;color:#63696F;max-width:56ch}
.pv-fin-b{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:6px}
.pv-agir{display:inline-flex;align-items:center;gap:14px;background:var(--acc2);color:#fff;
  border:0;padding:16px 26px;font-family:inherit;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;min-height:52px;
  transition:background 200ms cubic-bezier(.16,.84,.44,1)}
.pv-agir:hover{background:var(--acc)}
.pv-encore{border:0;background:none;cursor:pointer;font-family:inherit;color:#63696F;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;padding:8px 0;min-height:44px}
.pv-encore:hover{color:#16202B}

/* ── le texte, pour qui préfère lire ──────────────────────────── */
.pv-texte{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:var(--fond)}
.pv-texte[hidden]{display:none !important}
.pv-texte .pv-in{padding:30px 40px 40px}
.pv-titre{margin:0;font-family:Fraunces,Georgia,serif;font-weight:300;font-size:31px;
  line-height:1.24;letter-spacing:-.015em;color:#16202B}
.pv-chapo{margin:14px 0 0;font-size:15px;line-height:1.72;color:#63696F;max-width:62ch}
.pv-liste{margin-top:24px;border-top:1px solid #16202B}
.pv-c{border-bottom:1px solid #E7E4DC;padding-bottom:20px}
.pv-tt{display:grid;grid-template-columns:40px 1fr auto;gap:14px;align-items:baseline;width:100%;
  background:none;border:0;padding:18px 0 8px;cursor:pointer;text-align:left;
  font-family:inherit;color:inherit;min-height:48px}
.pv-tt:hover .ti{color:var(--acc)}
.pv-tt .no{font-family:Fraunces,Georgia,serif;font-size:16px;color:var(--clair)}
.pv-tt .ti{font-family:Fraunces,Georgia,serif;font-weight:400;font-size:20px;line-height:1.3;
  transition:color 180ms cubic-bezier(.16,.84,.44,1)}
.pv-tt .du{font-size:11px;letter-spacing:.1em;color:#8E9299;white-space:nowrap}
.pv-c .ph{padding-left:54px}
.pv-c .b{margin:0 0 8px;font-size:15.5px;line-height:1.72;color:#23303A;max-width:60ch}
.pv-c .b:last-child{margin-bottom:0}
.pv-c.ici .no,.pv-c.ici .ti{color:var(--acc)}

/* ── le pied : la conduite ────────────────────────────────────── */
.pv-pied{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:12px 26px;
  border-top:1px solid #16202B;background:var(--teinte)}
.pv-nav{flex:0 0 auto;width:36px;height:44px;border:0;background:none;color:#8E9299;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:color 180ms cubic-bezier(.16,.84,.44,1)}
.pv-nav:hover{color:var(--acc)}
.pv-jouer{flex:0 0 auto;width:48px;height:48px;border:0;border-radius:50%;background:var(--acc);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  transition:background 200ms cubic-bezier(.16,.84,.44,1),transform 200ms cubic-bezier(.16,.84,.44,1)}
.pv-jouer:hover{background:var(--acc2)}
.pv-jouer:active{transform:scale(.96)}
.pv-jouer .p{margin-left:2px}
.pv-ou2{flex:1 1 auto;min-width:0;padding-left:6px}
.pv-q{display:block;font-family:Fraunces,Georgia,serif;font-size:17px;line-height:1.3;color:#16202B;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-t{display:block;margin-top:2px;font-size:11px;letter-spacing:.1em;color:#8E9299}
.pv-barre{flex:0 0 160px;height:1px;background:var(--fil);position:relative}
.pv-barre i{position:absolute;left:0;top:0;height:1px;background:var(--acc);width:0;
  transition:width 260ms linear}

@media (max-width:860px){
  .pv-cadre{width:100vw;height:100vh;height:100dvh;border:0}
  .pv-tete{padding:0 10px 0 18px;min-height:52px}
  .pv-txt{padding:8px 8px;font-size:10px;letter-spacing:.1em}
  .pv-scene{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;
    padding:16px 20px 16px;gap:10px}
  .pv-gauche{order:2;gap:12px}
  .pv-dessin{order:1;min-height:0;max-height:46vh}
  .pv-dessin svg{width:100%;height:auto;max-height:46vh}
  .pv-no{font-size:40px}
  .pv-ct{font-size:17px}
  .pv-mot{font-size:25px;max-width:none}
  .pv-mot.pt{font-size:22px;max-width:none}
  .pv-mot.ptt{font-size:19px;max-width:none}
  .pv-fin{padding:24px 22px}
  .pv-fin-t{font-size:25px;max-width:none}
  .pv-fin-p{font-size:15px}
  .pv-agir{width:100%;justify-content:space-between}
  .pv-texte .pv-in{padding:22px 20px 34px}
  .pv-titre{font-size:24px}
  .pv-tt{grid-template-columns:30px 1fr;gap:12px}
  .pv-tt .du{display:none}
  .pv-tt .ti{font-size:18px}
  .pv-c .ph{padding-left:42px}
  .pv-c .b{font-size:15px}
  .pv-pied{padding:10px 14px env(safe-area-inset-bottom);gap:8px}
  .pv-barre{display:none}
  .pv-q{font-size:15px}
  .pv-jouer{width:46px;height:46px}
}
@media (max-width:420px){
  .pv-c .ph{padding-left:0}
  .pv-nav{width:30px}
}
@media (prefers-reduced-motion: reduce){
  .pv,.pv-cadre,.pv-mot{transition:none}
  .pv-mot{opacity:1;transform:none}
  .pv-dessin .tr{transition:none;stroke-dashoffset:0}
}