/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 31 2026 | 22:03:17 */
/* ============================================================
   PAGE « Découvrir l'outil PNL » — Simple Custom CSS & JS
   Client : Virginie Dorazio Coach
   Charte du site : Bleu pétrole #003549 · Simili doré #CFB48E
   Polices : Playfair Display (titres) · Nunito Sans (corps)

   ⚠ IMPORTANT : tout est scopé sous .vd-pnl-page (classe UNIQUE
   à cette page). On n'utilise PLUS .vd-page, qui est partagée avec
   l'accueil — c'était la cause des survols cassés sur la home.

   NB : polices + FontAwesome importés ici car le bloc HTML de la page
   ne charge plus les <link> (tout est passé dans l'extension).
   ============================================================ */

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');

.vd-pnl-page{
  --cream:#EDE6DC;        /* beige sable — fond principal */
  --blush:#E2D8CC;        /* beige profond — section alternée */
  --gold:#CFB48E;         /* simili doré — accent principal */
  --gold-light:#E8D9C0;   /* doré très clair — fonds légers */
  --petrol:#003549;       /* bleu pétrole — texte / fond sombre */
  --petrol-mid:#2A5F73;   /* pétrole moyen — texte secondaire */
  --petrol-light:#D8E8EF; /* pétrole dilué — section froide */
  background:var(--cream);color:var(--petrol);
  font-family:'Nunito Sans',-apple-system,sans-serif;font-weight:300;
  line-height:1.8;-webkit-font-smoothing:antialiased;
}
.vd-pnl-page *{box-sizing:border-box;}
.vd-pnl-page .vd-container{max-width:960px;margin:0 auto;padding:0 28px;}
.vd-pnl-page .vd-section{padding:80px 0;}
.vd-pnl-page .vd-section-blush{background:var(--blush);}
.vd-pnl-page .vd-section-lavender{background:linear-gradient(160deg,var(--petrol-light),var(--cream));}
.vd-pnl-page .vd-section-dark{background:var(--petrol);color:#fff;}

.vd-pnl-page h1,.vd-pnl-page h2,.vd-pnl-page h3{
  font-family:'Playfair Display',serif;font-weight:400;line-height:1.2;
  color:var(--petrol);margin:0 0 .4em;
}
.vd-pnl-page h2{font-size:38px;text-align:center;}
.vd-pnl-page h2 em,.vd-pnl-page h1 em{font-style:italic;color:var(--gold);font-weight:400;}
.vd-pnl-page .vd-subtitle{
  text-align:center;color:var(--petrol-mid);font-size:16px;font-weight:300;
  max-width:640px;margin:0 auto 48px;line-height:1.8;
}
.vd-pnl-page .vd-tagline{
  display:inline-block;text-transform:uppercase;letter-spacing:.28em;
  font-size:11px;font-weight:600;color:var(--gold);margin-bottom:22px;
}
.vd-pnl-page .vd-btn{
  display:inline-block;background:var(--petrol);color:#fff;text-decoration:none;
  font-family:'Nunito Sans',sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;
  padding:16px 38px;border-radius:0;transition:all .3s ease;border:none;cursor:pointer;
}
.vd-pnl-page .vd-btn:hover{background:var(--gold);color:var(--petrol);transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,53,73,.2);}

/* HERO */
.vd-pnl-page .vd-pnl-hero{
  padding:120px 0 90px;text-align:center;
  background:radial-gradient(circle at 50% 0%,var(--petrol-light),var(--cream) 62%);
}
.vd-pnl-page .vd-pnl-hero h1{font-size:52px;max-width:780px;margin:0 auto .3em;}
.vd-pnl-page .vd-pnl-hero .vd-hero-intro{
  font-size:18px;color:var(--petrol-mid);max-width:620px;margin:0 auto 14px;font-weight:300;line-height:1.9;
}
.vd-pnl-page .vd-pnl-hero .vd-leaf{color:var(--gold);font-size:22px;margin-bottom:26px;display:block;}

/* TEXTE LONG */
.vd-pnl-page .vd-prose{max-width:720px;margin:0 auto;}
.vd-pnl-page .vd-prose p{font-size:16px;line-height:1.9;color:var(--petrol-mid);margin:0 0 18px;font-weight:300;}
.vd-pnl-page .vd-prose strong{color:var(--petrol);font-weight:600;}

.vd-pnl-page .vd-keyquote{
  font-family:'Playfair Display',serif;font-style:italic;font-size:25px;line-height:1.6;
  color:var(--petrol);text-align:center;max-width:680px;margin:40px auto;
  padding:0 24px;position:relative;
}
.vd-pnl-page .vd-keyquote::before,.vd-pnl-page .vd-keyquote::after{
  content:'';display:block;width:46px;height:2px;background:var(--gold);margin:18px auto;
}

.vd-pnl-page .vd-pills{
  list-style:none;padding:0;margin:30px auto 8px;max-width:700px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
}
.vd-pnl-page .vd-pills li{
  background:#fff;border:1px solid var(--gold);border-radius:0;
  padding:11px 24px;font-size:15px;color:var(--petrol);font-weight:400;letter-spacing:.3px;
}
.vd-pnl-page .vd-pills li i{color:var(--gold);margin-right:9px;}

/* ÉTAPES NUMÉROTÉES (flex centré : la dernière ligne incomplète se centre) */
.vd-pnl-page .vd-steps{display:flex;flex-wrap:wrap;justify-content:center;gap:26px;margin-top:24px;}
.vd-pnl-page .vd-step{
  flex:0 0 calc((100% - 52px) / 3);
  background:#fff;border-radius:0;border-top:3px solid var(--gold);
  padding:34px 26px 28px;position:relative;
  box-shadow:0 4px 30px rgba(0,53,73,.08);transition:transform .3s ease,box-shadow .3s ease;
}
.vd-pnl-page .vd-step:hover{transform:translateY(-5px);box-shadow:0 14px 40px rgba(0,53,73,.14);}
.vd-pnl-page .vd-step-num{
  position:absolute;top:-19px;left:26px;width:38px;height:38px;border-radius:50%;
  background:var(--petrol);color:var(--gold);border:2px solid var(--gold);
  font-family:'Playfair Display',serif;font-size:17px;
  display:flex;align-items:center;justify-content:center;
}
.vd-pnl-page .vd-step h3{font-size:18px;font-weight:400;margin:10px 0 10px;}
.vd-pnl-page .vd-step p{font-size:14px;line-height:1.75;color:var(--petrol-mid);margin:0;font-weight:300;}

.vd-pnl-page .vd-cycle-center{
  text-align:center;max-width:680px;margin:46px auto 0;
  background:#fff;border-top:3px solid var(--gold);padding:32px 34px;
  box-shadow:0 4px 30px rgba(0,53,73,.08);
}
.vd-pnl-page .vd-cycle-center i{color:var(--gold);font-size:22px;margin-bottom:14px;display:block;}
.vd-pnl-page .vd-cycle-center p{
  font-family:'Playfair Display',serif;font-style:italic;font-size:19px;
  line-height:1.7;color:var(--petrol);margin:0;
}

.vd-pnl-page .vd-flanks{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:760px;margin:40px auto 0;}
.vd-pnl-page .vd-flank{border-radius:0;padding:28px 30px;text-align:center;}
.vd-pnl-page .vd-flank-belief{background:var(--gold-light);}
.vd-pnl-page .vd-flank-result{background:var(--petrol);color:#fff;}
.vd-pnl-page .vd-flank h3{font-size:13px;text-transform:uppercase;letter-spacing:.16em;margin-bottom:12px;color:var(--petrol);font-family:'Nunito Sans',sans-serif;font-weight:600;}
.vd-pnl-page .vd-flank-result h3{color:var(--gold);}
.vd-pnl-page .vd-flank p{font-size:14.5px;line-height:1.75;margin:0;color:var(--petrol-mid);font-weight:300;}
.vd-pnl-page .vd-flank-result p{color:rgba(255,255,255,.9);}

/* AVANT / APRÈS */
.vd-pnl-page .vd-ba{max-width:880px;margin:14px auto 0;display:flex;flex-direction:column;gap:28px;}
.vd-pnl-page .vd-ba-row{
  background:#fff;border-radius:0;border-top:3px solid var(--gold);overflow:hidden;
  box-shadow:0 4px 30px rgba(0,53,73,.08);display:grid;grid-template-columns:230px 1fr 1fr;
}
.vd-pnl-page .vd-ba-theme{
  background:var(--petrol-light);padding:28px 24px;
  display:flex;flex-direction:column;justify-content:center;gap:12px;
}
.vd-pnl-page .vd-ba-theme .vd-ba-icon{
  width:46px;height:46px;border-radius:50%;background:var(--petrol);color:var(--gold);
  border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:18px;
}
.vd-pnl-page .vd-ba-theme h3{font-size:17px;font-weight:400;margin:0;line-height:1.3;}
.vd-pnl-page .vd-ba-cell{padding:24px;border-left:1px solid var(--gold-light);}
.vd-pnl-page .vd-ba-label{display:inline-block;text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:600;margin-bottom:12px;}
.vd-pnl-page .vd-ba-avant .vd-ba-label{color:var(--petrol-mid);}
.vd-pnl-page .vd-ba-apres .vd-ba-label{color:var(--gold);}
.vd-pnl-page .vd-ba-cell ul{list-style:none;margin:0;padding:0;}
.vd-pnl-page .vd-ba-cell ul li{
  font-size:14px;color:var(--petrol-mid);font-style:italic;line-height:1.55;
  padding-left:16px;position:relative;margin-bottom:7px;font-weight:300;
}
.vd-pnl-page .vd-ba-cell ul li::before{content:'«';position:absolute;left:0;color:var(--gold);}
.vd-pnl-page .vd-ba-cell ul li::after{content:' »';}
.vd-pnl-page .vd-ba-cell>p{font-size:14px;color:var(--petrol-mid);line-height:1.75;margin:0 0 12px;font-weight:300;}
.vd-pnl-page .vd-ba-resultat{
  font-size:13.5px;color:var(--petrol);line-height:1.6;margin:0;
  background:var(--cream);padding:12px 14px;
}
.vd-pnl-page .vd-ba-resultat strong{color:var(--gold);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:11px;}

/* CTA */
.vd-pnl-page .vd-pnl-cta{text-align:center;}
.vd-pnl-page .vd-pnl-cta h2{margin-bottom:12px;color:#fff;}
.vd-pnl-page .vd-pnl-cta h2 em{color:var(--gold);}
.vd-pnl-page .vd-pnl-cta p{color:rgba(255,255,255,.85);max-width:560px;margin:0 auto 32px;font-size:17px;font-weight:300;line-height:1.9;}

/* APPARITION AU SCROLL (actif seulement si le JS ajoute .vd-js) */
.vd-pnl-page.vd-js .vd-reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.vd-pnl-page.vd-js .vd-reveal.is-visible{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .vd-pnl-page.vd-js .vd-reveal{opacity:1 !important;transform:none !important;transition:none;}
}

/* RESPONSIVE */
@media(max-width:860px){
  .vd-pnl-page .vd-step{flex:0 0 calc((100% - 26px) / 2);}
  .vd-pnl-page .vd-ba-row{grid-template-columns:1fr;}
  .vd-pnl-page .vd-ba-cell{border-left:none;border-top:1px solid var(--gold-light);}
}
@media(max-width:680px){
  .vd-pnl-page .vd-section{padding:60px 0;}
  .vd-pnl-page .vd-pnl-hero{padding:90px 0 64px;}
  .vd-pnl-page .vd-pnl-hero h1{font-size:36px;}
  .vd-pnl-page .vd-pnl-hero .vd-hero-intro{font-size:17px;}
  .vd-pnl-page h2{font-size:28px;}
  .vd-pnl-page .vd-keyquote{font-size:21px;}
  .vd-pnl-page .vd-steps{gap:32px;}
  .vd-pnl-page .vd-step{flex:0 0 100%;}
  .vd-pnl-page .vd-flanks{grid-template-columns:1fr;}
}
