/* ==========================================================================
   PROSPECTION PRÉDICTIVE — page dédiée
   S'appuie sur marketing.css (tokens, .container, .btn, .nav, .footer,
   .actcards-stage/frame/iframe/caption, .section-eyebrow)
   ========================================================================== */

/* ---- entrance animations (play on load, no observer dependency) ---- */
@keyframes pp-reveal{ from{ transform:translateY(20px); } to{ transform:none; } }
.js .reveal{ animation:pp-reveal .7s cubic-bezier(.4,0,.2,1) both; }
.js .reveal[data-d="1"]{ animation-delay:.09s }
.js .reveal[data-d="2"]{ animation-delay:.18s }
.js .reveal[data-d="3"]{ animation-delay:.27s }
.js .reveal[data-d="4"]{ animation-delay:.36s }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; animation:none; }
}

/* ---- hero ---- */
.pp-hero{
  position:relative;
  padding:128px 0 56px;
  border-bottom:1px solid var(--border);
  overflow:hidden;
}
.pp-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(820px 460px at 70% -6%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 62%),
    radial-gradient(620px 380px at 8% 8%, color-mix(in srgb, var(--chaud) 5%, transparent), transparent 60%);
}
.pp-hero .container{ position:relative; }
.pp-hero-head{ max-width:1100px; margin:0 auto; }
/* le texte garde ses propres largeurs de lecture à l'intérieur du bloc aligné sur l'animation */
.pp-hero-head h1{ max-width:760px; }
.pp-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
}
.pp-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--chaud);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--chaud) 50%,transparent); animation:pp-ping 1.9s ease-out infinite; }
@keyframes pp-ping{ 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--chaud) 45%,transparent)} 70%,100%{box-shadow:0 0 0 9px transparent} }

.pp-hero h1{
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:clamp(36px, 5.4vw, 64px);
  line-height:1.04;
  letter-spacing:-0.035em;
  color:var(--text);
  margin:18px 0 0;
  text-wrap:balance;
}
.pp-hero h1 .accent{ color:var(--accent); }
.pp-hero-sub{
  font-size:clamp(16px,1.5vw,19px);
  line-height:1.6;
  color:var(--text-dim);
  margin:20px 0 0;
  max-width:620px;
  text-wrap:pretty;
}
.pp-hero-sub strong{ color:var(--text); font-weight:600; }
.pp-cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

/* ---- embed stage ---- */
.pp-stage{ padding:46px 0 96px; }
.pp-stage .actcards-frame{ border-radius:18px; }

/* ---- generic section head ---- */
.pp-sec{ padding:96px 0; position:relative; }
.pp-sec.alt{ background:var(--s2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.pp-sec-head{ max-width:680px; margin:0 auto 56px; text-align:center; }
.pp-sec-head h2{
  font-family:'Inter', sans-serif; font-weight:600;
  font-size:clamp(28px,3.6vw,42px); line-height:1.1; letter-spacing:-0.025em;
  color:var(--text); margin:13px 0 14px; text-wrap:balance;
}
.pp-sec-head p{ font-size:16px; line-height:1.6; color:var(--text-dim); margin:0; text-wrap:pretty; }
.pp-sec-head .section-eyebrow{ color:var(--accent); }

/* ---- steps (comment ça marche) ---- */
.pp-steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  max-width:1100px; margin:0 auto;
}
.pp-step{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:26px 24px 24px;
  box-shadow:var(--shadow-sm, 0 1px 2px rgba(20,22,31,.04));
}
.pp-step-num{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:12px; font-weight:500; color:var(--muted); letter-spacing:.06em;
}
.pp-step-ic{
  width:42px; height:42px; border-radius:11px; margin:14px 0 16px;
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  color:var(--accent);
}
.pp-step-ic svg{ width:21px; height:21px; }
.pp-step h3{
  font-family:'Inter', sans-serif; font-size:18px; font-weight:600; letter-spacing:-.01em;
  color:var(--text); margin:0 0 7px;
}
.pp-step p{ font-size:14.5px; line-height:1.55; color:var(--text-dim); margin:0; }
.pp-step-bar{ position:absolute; left:0; top:24px; bottom:24px; width:2px; border-radius:2px;
  background:linear-gradient(180deg, var(--accent), color-mix(in srgb,var(--accent) 20%,transparent)); }

/* ---- fiche section (text + animated card) ---- */
.pp-fiche-wrap{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
  max-width:1080px; margin:0 auto;
}
.pp-fiche-copy h2{
  font-family:'Inter',sans-serif; font-weight:600; font-size:clamp(26px,3.2vw,38px);
  line-height:1.12; letter-spacing:-.025em; color:var(--text); margin:13px 0 16px; text-wrap:balance;
}
.pp-fiche-copy p{ font-size:16px; line-height:1.62; color:var(--text-dim); margin:0 0 22px; text-wrap:pretty; }
.pp-points{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.pp-points li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--text); line-height:1.45; }
.pp-points .pp-pt-ic{ width:22px; height:22px; flex-shrink:0; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb,var(--green) 14%,transparent); color:var(--green); margin-top:1px; }
.pp-points .pp-pt-ic svg{ width:13px; height:13px; }

/* on-page animated fiche */
.pp-fiche{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 1px 2px rgba(20,22,31,.05), 0 26px 60px rgba(20,22,31,.13);
  overflow:hidden;
  max-width:430px; width:100%; margin:0 auto;
}
.pp-fiche-h{ display:flex; align-items:center; gap:11px; padding:18px 20px 16px; border-bottom:1px solid var(--border); }
.pp-fiche-h-ic{ width:34px; height:34px; border-radius:9px; flex-shrink:0; display:grid; place-items:center;
  background:var(--accent-dim); color:var(--accent); }
.pp-fiche-h-ic svg{ width:18px; height:18px; }
.pp-fiche-eyebrow{ font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.pp-fiche-addr{ font-size:17px; font-weight:700; letter-spacing:-.015em; color:var(--text); margin-top:2px; }
.pp-fiche-meta{ font-size:12px; color:var(--text-dim); margin-top:3px; font-variant-numeric:tabular-nums; }
.pp-fiche-score{ display:flex; align-items:center; gap:18px; padding:20px; }
.pp-ring{ position:relative; width:88px; height:88px; flex-shrink:0; }
.pp-ring svg{ width:88px; height:88px; transform:rotate(-90deg); }
.pp-ring-track{ stroke:var(--s3); }
.pp-ring-fill{ stroke:var(--accent); stroke-linecap:round; stroke-dashoffset:31.9; }
.pp-ring-num{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.pp-ring-num b{ font-size:29px; font-weight:800; letter-spacing:-.03em; color:var(--text); line-height:1;
  font-variant-numeric:tabular-nums; }
.pp-ring-num span{ font-size:10px; font-weight:600; color:var(--muted); margin-top:2px; }
.pp-score-lbl{ font-size:13px; color:var(--text-dim); }
.pp-chip{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; padding:4px 10px 4px 8px; border-radius:99px;
  font-size:12px; font-weight:600; color:var(--chaud);
  background:color-mix(in srgb,var(--chaud) 14%,transparent); border:1px solid color-mix(in srgb,var(--chaud) 32%,transparent); }
.pp-chip i{ width:6px; height:6px; border-radius:50%; background:var(--chaud); }
.pp-fiche-sigs{ padding:2px 20px 8px; }
.pp-fiche-sigs-h{ font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin:6px 0 10px; }
@keyframes pp-sig-in{ from{ transform:translateX(10px); } to{ transform:none; } }
.pp-sig{ display:flex; align-items:center; gap:11px; padding:9px 0; border-top:1px solid var(--s2); }
.pp-sig:first-of-type{ border-top:0; }
.js .pp-sig{ animation:pp-sig-in .5s ease both; }
@media (prefers-reduced-motion: reduce){ .js .pp-sig{ opacity:1; animation:none; } }
.pp-sig-ic{ width:21px; height:21px; flex-shrink:0; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb,var(--green) 13%,transparent); color:var(--green); }
.pp-sig-ic svg{ width:12px; height:12px; }
.pp-sig-tx{ font-size:13.5px; font-weight:500; color:var(--text); }
.pp-fiche-cta{ padding:6px 20px 20px; }
.pp-fiche-btn{ width:100%; height:42px; border:0; border-radius:var(--radius); background:var(--text); color:var(--bg);
  font:inherit; font-size:13.5px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; }
.pp-fiche-btn svg{ width:14px; height:14px; }

/* ---- temperatures ---- */
.pp-temps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1000px; margin:0 auto; }
.pp-temp{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; position:relative; }
.pp-temp-dot{ display:block; width:13px; height:13px; border-radius:50%; border:2px solid var(--surface); box-shadow:0 0 0 1px var(--border), 0 1px 3px rgba(0,0,0,.25); }
.pp-temp h3{ font-family:'Inter',sans-serif; font-size:17px; font-weight:600; color:var(--text); margin:14px 0 6px; }
.pp-temp p{ font-size:14px; line-height:1.55; color:var(--text-dim); margin:0; }
.pp-temp.chaud .pp-temp-dot{ background:var(--chaud); }
.pp-temp.tiede .pp-temp-dot{ background:var(--tiede); }
.pp-temp.froid .pp-temp-dot{ background:var(--froid); }

/* ---- CTA band ---- */
.pp-cta{ padding:96px 0; text-align:center; }
.pp-cta-inner{ max-width:680px; margin:0 auto; }
.pp-cta h2{ font-family:'Inter',sans-serif; font-weight:600; font-size:clamp(30px,4vw,48px);
  line-height:1.08; letter-spacing:-.03em; color:var(--text); margin:0 0 14px; text-wrap:balance; }
.pp-cta p{ font-size:17px; line-height:1.6; color:var(--text-dim); margin:0 0 28px; }

/* ---- responsive ---- */
@media (max-width: 920px){
  .pp-steps{ grid-template-columns:1fr; }
  .pp-fiche-wrap{ grid-template-columns:1fr; gap:40px; }
  .pp-temps{ grid-template-columns:1fr; }
  .pp-sec{ padding:68px 0; }
  .pp-hero{ padding:104px 0 44px; }
}

/* ---- Menu mobile (burger) ---- */
.pp-burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:40px; height:40px;
  padding:9px;
  background:transparent;
  border:1px solid var(--border);
  border-radius:10px;
  cursor:pointer;
}
.pp-burger span{
  display:block; height:2px; width:100%;
  background:var(--text); border-radius:2px;
  transition:transform .25s, opacity .2s;
}
.pp-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.pp-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.pp-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.pp-mobile-menu{
  position:fixed; inset:0 0 auto 0; top:0;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  padding:88px 24px 28px;
  transform:translateY(-100%);
  transition:transform .3s ease;
  z-index:90;
  box-shadow:0 24px 48px -24px rgba(0,0,0,.25);
}
.pp-mobile-menu.open{ transform:translateY(0); }
.pp-mobile-menu nav{ display:flex; flex-direction:column; gap:4px; }
.pp-mobile-menu nav a:not(.btn){
  font-size:17px; font-weight:500; color:var(--text);
  padding:14px 8px; border-radius:10px; text-decoration:none;
}
.pp-mobile-menu nav a:not(.btn):hover{ background:var(--s2); }
.pp-mobile-menu nav a:not(.btn)[aria-current="page"]{ color:var(--accent); }
.pp-mobile-menu nav .btn{ margin-top:12px; justify-content:center; }
/* le bouton garde sa couleur de texte (blanc sur fond noir) */
.pp-mobile-menu nav a.btn-primary{ color:var(--bg); }

@media (max-width:860px){
  .pp-burger{ display:flex; }
  /* sur mobile on masque le bouton "Être prévenu" inline du header (présent dans le menu) */
  .nav-actions .btn-primary{ display:none; }
}

/* ---- Hero 2 colonnes : texte + logo animé ---- */
.pp-hero-grid{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:48px;
}
.pp-hero-text{ min-width:0; }
.pp-hero-logo{ display:flex; justify-content:center; align-items:center; }
@media (max-width:920px){
  .pp-hero-grid{ grid-template-columns:1fr; gap:28px; }
  /* logo AU-DESSUS du texte sur mobile */
  .pp-hero-logo{ order:-1; justify-content:center; }
  /* texte centré sur mobile */
  .pp-hero-text{ text-align:center; }
  .pp-hero-text .pp-eyebrow{ justify-content:center; }
  .pp-hero-head h1{ margin-left:auto; margin-right:auto; }
  .pp-hero-sub{ margin-left:auto; margin-right:auto; }
  .pp-cta-row{ justify-content:center; }
}

/* ---- Logo animé "donna · prospection prédictive" (composant scopé) ---- */
.pplogo{
  font-size:clamp(40px, 6vw, 72px);
  display:flex; flex-direction:column; align-items:center;
  animation:pplogo-float 6.5s ease-in-out infinite;
}
@keyframes pplogo-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
.pplogo-wordmark{ display:inline-flex; align-items:flex-start; line-height:.9; }
.pplogo-word{ font-family:'Inter',-apple-system,sans-serif; font-weight:800; font-size:1em; letter-spacing:-.045em; color:var(--text); }
.pplogo-pinmark{ position:relative; width:.30em; height:.46em; margin-left:.05em; margin-top:.02em; flex-shrink:0; }
.pplogo-pin{
  position:absolute; top:0; left:50%;
  width:.27em; height:.27em;
  transform:translateX(-50%) rotate(-45deg);
  background:var(--accent); border-radius:50% 50% 50% 0;
  box-shadow:0 .05em .14em color-mix(in srgb,var(--accent) 42%, transparent);
  animation:pplogo-bob 2.8s ease-in-out infinite;
}
.pplogo-pin::after{ content:""; position:absolute; inset:31%; background:var(--bg); border-radius:50%; }
@keyframes pplogo-bob{
  0%,100%{ transform:translateX(-50%) translateY(0) rotate(-45deg) }
  50%    { transform:translateX(-50%) translateY(-.05em) rotate(-45deg) }
}
.pplogo-ripple{
  position:absolute; left:50%; bottom:.02em;
  width:.24em; height:.08em; border-radius:50%;
  border:2px solid var(--accent); transform:translateX(-50%);
  animation:pplogo-ripple 2.8s ease-out infinite;
}
@keyframes pplogo-ripple{
  0%   { transform:translateX(-50%) scale(.5); opacity:.6 }
  100% { transform:translateX(-50%) scale(2.6); opacity:0 }
}
.pplogo-sub{
  margin-top:.4em;
  font-size:.182em; font-weight:600; letter-spacing:.34em; text-transform:uppercase; padding-left:.34em;
  background:linear-gradient(100deg, var(--text-dim) 0 38%, var(--accent) 50%, var(--text-dim) 62% 100%);
  background-size:260% 100%; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:pplogo-sweep 4s linear infinite;
}
@keyframes pplogo-sweep{ from{ background-position:130% 0 } to{ background-position:-130% 0 } }

/* Variante compacte pour remplacer un eyebrow (sur la home) */
.pplogo-mini{ font-size:clamp(22px, 3vw, 30px); }
.pplogo-mini .pplogo-sub{ font-size:.26em; }

/* ---- Toggle Animation / Vidéo + vues ---- */
.pp-toggle{
  display:flex;
  width:fit-content;
  gap:4px;
  padding:4px;
  margin:0 auto 18px;
  background:var(--s2);
  border:1px solid var(--border);
  border-radius:12px;
}
.pp-toggle-btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 16px;
  font:inherit; font-size:14px; font-weight:600;
  color:var(--text-dim);
  background:transparent; border:0; border-radius:9px;
  cursor:pointer;
  transition:background .18s, color .18s;
}
.pp-toggle-btn svg{ width:16px; height:16px; }
.pp-toggle-btn:hover{ color:var(--text); }
.pp-toggle-btn.is-active{
  background:var(--surface);
  color:var(--text);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.pp-view[hidden]{ display:none; }
/* libellé d'onglet : jamais de retour à la ligne */
.pp-toggle-lbl{ white-space:nowrap; }
/* barre de progression de la vidéo en cours, sur l'onglet actif (signale l'auto-enchaînement) */
.pp-toggle-btn{ position:relative; overflow:hidden; }
.pp-toggle-btn.is-active::after{
  content:''; position:absolute; left:0; bottom:0; height:2px;
  width:calc(var(--pp-prog, 0) * 100%);
  background:var(--accent, #6b5cf5);
  border-radius:2px;
  transition:width .18s linear;
  pointer-events:none;
}
/* Mobile : onglets fermés = icône seule, titre complet uniquement sur l'onglet actif */
@media (max-width:600px){
  .pp-toggle{ width:fit-content; max-width:100%; margin-left:auto; margin-right:auto; }
  .pp-toggle-btn{ padding:9px 14px; }
  .pp-toggle-btn:not(.is-active){ padding:9px 12px; gap:0; }
  .pp-toggle-btn:not(.is-active) .pp-toggle-lbl{ display:none; }
}
/* la vue vidéo : ratio 16:9 propre dans le même cadre que l'animation */
.pp-view-video{ aspect-ratio:16 / 9; background:var(--surface); }
.pp-video-el{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0; display:block;
  object-fit:cover;
}