/* ==========================================================================
   Blue Palm Design — système visuel commun des propositions
   Utilisé par toutes les pages /p/<prospect>/index.html
   La couche Blue Palm (barre de marque, notice, offre, CTA, pied de page)
   est identique partout. Les couleurs du prospect restent dans sa démo/iframe.
   ========================================================================== */

:root{
  /* Identité Blue Palm */
  --forest:#0d2425;
  --forest2:#18383a;
  --ink:#102426;
  --muted:#627270;
  --paper:#f5f0e8;
  --cream:#fffdf8;
  --sand:#e9dfcf;
  --coral:#d86a43;
  --coral-deep:#bf5533;
  --teal:#8bc9be;
  --bone:#fbf3e2;
  --line:rgba(16,36,38,.14);
  --line-strong:rgba(16,36,38,.26);
  --line-dark:rgba(139,201,190,.20);

  --sans:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --mono:"DM Mono",ui-monospace,monospace;

  --shadow:0 28px 65px -35px rgba(16,36,38,.42);
  --radius:2px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px}

.wrap{width:min(1080px,calc(100% - 38px));margin-inline:auto}

/* --- Petits labels mono ------------------------------------------------- */
.eyebrow,.bp-label{
  font:500 11px/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--teal);display:flex;gap:10px;align-items:center
}
.eyebrow:before{content:"";width:25px;height:1px;background:currentColor;flex:none}
.eyebrow--dark,.section .eyebrow,.offer .eyebrow,.preview .eyebrow{color:var(--forest2)}
.benefits .eyebrow,.hero .eyebrow{color:var(--teal)}

/* --- Notice commune ----------------------------------------------------- */
.notice{
  background:var(--forest);color:#e8f2ef;
  padding:10px 15px;text-align:center;
  font:600 11px/1.5 var(--sans);letter-spacing:.02em
}
.notice b{color:var(--teal);font-weight:700}

/* --- Barre de marque Blue Palm ------------------------------------------ */
.bp-bar{background:var(--cream);position:relative;z-index:5}
.bp-bar-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;min-height:78px;padding:14px 0
}
.bp-brand{display:flex;align-items:center;gap:13px;flex:none}
.bp-mark{
  width:42px;height:42px;display:block;flex:none;
  object-fit:contain;border-radius:1px
}
.bp-brand-text{display:flex;flex-direction:column;gap:3px;line-height:1}
.bp-name{
  font:700 15px/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--forest)
}
.bp-sub{
  font:400 9.5px/1 var(--mono);letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted)
}
.bp-bar-meta{display:flex;align-items:center;gap:16px}
.bp-bar-tag{
  font:400 10.5px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap
}

/* Règle horizontale de marque */
.bp-rule{
  border:0;border-top:1px solid var(--line-strong);margin:0;
  height:0;background:none
}
.split{border:0;border-top:1px solid var(--line);margin:0}

/* --- Boutons ------------------------------------------------------------ */
.btn{
  min-height:48px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 21px;border-radius:var(--radius);border:0;cursor:pointer;
  font:800 14px/1 var(--sans);letter-spacing:.005em;text-align:center;
  transition:transform .15s ease,background-color .15s ease
}
.btn:hover{transform:translateY(-1px)}
.btn-coral,.btn-wood,.btn-orange{
  background:var(--coral);color:#fff;
  box-shadow:0 12px 22px -13px rgba(216,106,67,.65)
}
.btn-coral:hover,.btn-wood:hover,.btn-orange:hover{background:var(--coral-deep)}
.btn-white,.btn-ghost{
  background:transparent;color:var(--forest);
  border:1px solid var(--line-strong)
}
.btn-white:hover,.btn-ghost:hover{background:var(--paper)}
.btn-line{
  background:transparent;color:#c8d5d2;
  border:1px solid rgba(139,201,190,.35)
}
.btn-line:hover{border-color:var(--teal);color:var(--bone)}

/* --- Hero --------------------------------------------------------------- */
.hero{
  padding:60px 0 66px;color:#e8f2ef;
  background:linear-gradient(140deg,var(--forest2) 0%,var(--forest) 68%)
}
.hero-grid{display:grid;grid-template-columns:1fr .82fr;gap:40px;align-items:end}
.hero h1{
  font:400 clamp(44px,6vw,70px)/.97 var(--serif);letter-spacing:-.035em;
  margin:16px 0;color:var(--bone)
}
.hero h1 em{font-style:italic;color:var(--teal)}
.hero p{
  font-size:17px;line-height:1.58;color:rgba(251,234,208,.8);
  max-width:37em;margin:0 0 25px
}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}

.summary{
  padding:23px;border:1px solid var(--line-dark);border-radius:var(--radius);
  background:rgba(0,0,0,.22)
}
.summary .label{font:500 11px var(--mono);letter-spacing:.12em;color:var(--teal)}
.summary h2{
  font:400 29px/1.06 var(--serif);letter-spacing:-.02em;
  margin:13px 0 17px;color:var(--bone)
}
.summary div{
  display:flex;justify-content:space-between;gap:14px;
  border-top:1px solid rgba(139,201,190,.18);padding:10px 0;
  font-size:13px;color:rgba(251,234,208,.75)
}
.summary div b{color:#fbead0;text-align:right;font-weight:600}

/* --- Sections ----------------------------------------------------------- */
.section{padding:76px 0}
.section h2{
  font:400 clamp(36px,4.5vw,54px)/.99 var(--serif);
  letter-spacing:-.03em;margin:14px 0
}
.lead{font-size:17px;color:var(--muted);max-width:44em;margin:0}

/* --- Cartes contexte ---------------------------------------------------- */
.context-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
.card{
  background:var(--cream);border:1px solid var(--line);
  border-radius:var(--radius);padding:23px
}
.card .tag{
  font:500 10.5px var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--coral)
}
.card h3{font-size:16.5px;margin:11px 0 7px;letter-spacing:-.01em}
.card p{margin:0;color:var(--muted);font-size:13.5px}

/* --- Bénéfices ---------------------------------------------------------- */
.benefits{background:var(--forest);color:#e8f2ef}
.benefits h2{color:var(--bone)}
.benefits .lead{color:rgba(251,234,208,.72)}
.benefit-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:30px;
  border-top:1px solid rgba(139,201,190,.22)
}
.benefit{padding:22px 22px 0 0;border-right:1px solid rgba(139,201,190,.16)}
.benefit:last-child{border-right:0}
.benefit b{
  display:block;font:400 26px/1.1 var(--serif);letter-spacing:-.02em;
  color:var(--teal);margin-bottom:8px
}
.benefit span{font-size:13.5px;color:rgba(251,234,208,.76)}

/* --- Offre & prix (identique sur toutes les propositions) --------------- */
.offer{background:var(--sand)}
.offer-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start}
.offer-copy h2{max-width:12ch}
.offer-copy p{color:var(--muted);font-size:16px}

.price-card{
  background:linear-gradient(145deg,var(--forest2),var(--forest) 78%);
  color:#e8f2ef;border-radius:var(--radius);padding:32px;box-shadow:var(--shadow)
}
.price-card .tag{font:500 11px var(--mono);letter-spacing:.11em;color:var(--teal)}
.price{display:flex;align-items:end;gap:12px;margin:14px 0 7px}
.price strong{font:400 70px/.85 var(--serif);letter-spacing:-.04em;color:var(--bone)}
.price span{font-size:14px;color:rgba(251,234,208,.72);padding-bottom:8px}
.monthly{
  border-top:1px solid rgba(139,201,190,.22);padding:18px 0 16px;
  font-size:16px;color:rgba(251,234,208,.85)
}
.monthly b{
  font:400 34px var(--serif);letter-spacing:-.02em;color:var(--bone)
}
.monthly small{display:block;margin-top:4px;font-size:13px;color:rgba(251,234,208,.7)}
.includes{padding:0;margin:0 0 22px;list-style:none}
.includes li{
  border-top:1px solid rgba(139,201,190,.18);padding:10px 0;
  font-size:13.5px;color:rgba(251,234,208,.82)
}
.includes li:before{content:'✓';color:var(--teal);font-weight:800;margin-right:10px}

.cta,.checkout{display:block;width:100%;border:0;cursor:pointer}
.cta[aria-disabled=true],.checkout[aria-disabled=true]{
  background:#2f4a48;color:#d5e4e0;cursor:not-allowed;box-shadow:none
}
.cta[aria-disabled=true]:hover,.checkout[aria-disabled=true]:hover{
  transform:none;background:#2f4a48
}
.cta-note,.checkout-note{
  font-size:11.5px;color:rgba(251,234,208,.65);margin:12px 0 0;text-align:center
}

/* --- Déroulé ------------------------------------------------------------ */
.steps{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--cream);margin-top:31px
}
.step{padding:23px;border-right:1px solid var(--line)}
.step:last-child{border-right:0}
.step .num{font:400 35px/1 var(--serif);color:var(--forest2)}
.step h3{font-size:16px;margin:12px 0 6px;letter-spacing:-.01em}
.step p{color:var(--muted);font-size:13.5px;margin:0}
.fine{font-size:12px;color:var(--muted);margin-top:22px;max-width:70em}

/* --- Démo d’abord : résumé + iframe, juste sous le hero ------------------
   Composant commun réutilisable par toutes les propositions.
   Une seule iframe par page : la démo vit ici, pas en bas de page.        */
.bp-demo-first{
  background:linear-gradient(180deg,var(--forest) 0%,var(--forest2) 100%);
  color:#e8f2ef;padding:44px 0 52px;
  border-top:1px solid rgba(139,201,190,.16)
}
.bp-demo-grid{
  display:grid;grid-template-columns:.72fr 1.28fr;gap:38px;align-items:start
}

/* Colonne gauche : résumé Blue Palm compact */
.bp-demo-copy{position:sticky;top:22px}
.bp-demo-copy h2{
  font:400 clamp(30px,3.2vw,40px)/1.02 var(--serif);letter-spacing:-.028em;
  margin:14px 0 16px;color:var(--bone)
}
.bp-demo-copy h2 em{font-style:italic;color:var(--teal)}
.bp-demo-points{list-style:none;padding:0;margin:0 0 24px}
.bp-demo-points li{
  border-top:1px solid rgba(139,201,190,.18);padding:11px 0;
  font-size:14px;color:rgba(251,234,208,.82);display:flex;gap:11px
}
.bp-demo-points li:before{
  content:'→';color:var(--teal);font-weight:700;flex:none
}
.bp-demo-actions{display:flex;gap:10px;flex-wrap:wrap}
.bp-demo-note{
  margin:16px 0 0;font-size:12.5px;line-height:1.6;color:rgba(251,234,208,.6)
}
.bp-demo-note a{text-decoration:underline;color:var(--teal)}

/* Colonne droite : la démo elle-même */
.bp-demo-frame{
  background:var(--forest);border-radius:var(--radius);
  border:1px solid rgba(139,201,190,.2);
  box-shadow:var(--shadow);overflow:hidden
}
.bp-demo-head{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px 18px;background:var(--ink);color:#e8f2ef;
  border-bottom:1px solid rgba(139,201,190,.22)
}
.bp-demo-head .label{
  font:500 11px var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--teal)
}
.bp-demo-head p{margin:4px 0 0;font-size:13px;color:rgba(251,234,208,.7)}
.bp-demo-head .status{
  font:500 10px var(--mono);letter-spacing:.1em;color:#b7d5ad;white-space:nowrap
}
.bp-demo-iframe{
  display:block;width:100%;height:70vh;min-height:460px;max-height:820px;
  border:0;background:var(--cream)
}

/* --- Pied de page commun ------------------------------------------------ */
.footer{
  padding:0 0 46px;border-top:1px solid var(--line);
  color:var(--muted);font-size:12px
}
.footer-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;padding-top:26px
}
.footer-brand{display:flex;align-items:center;gap:11px}
.footer-brand img{width:26px;height:26px;object-fit:contain;flex:none}
.footer-brand span{
  font:700 12px/1 var(--sans);letter-spacing:.15em;
  text-transform:uppercase;color:var(--forest)
}
.footer-meta{font:400 11px/1.6 var(--mono);letter-spacing:.05em;max-width:52ch}

/* --- Responsive --------------------------------------------------------- */
@media(max-width:900px){
  .hero-grid,.offer-grid,.context-grid,.demo{grid-template-columns:1fr}
  .summary{max-width:520px}
  /* Empilement : le résumé passe au-dessus, la démo juste en dessous. */
  .bp-demo-grid{grid-template-columns:1fr;gap:26px}
  .bp-demo-copy{position:static;max-width:560px}
  .benefit-grid{grid-template-columns:1fr}
  .benefit{
    border-right:0;border-bottom:1px solid rgba(139,201,190,.16);padding:20px 0
  }
  .benefit:last-child{border-bottom:0}
  .steps{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr 1fr}
  .step{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .step:nth-child(2n){border-right:0}
}
@media(max-width:640px){
  .wrap{width:calc(100% - 28px)}
  .bp-bar-inner{min-height:70px}
  .bp-bar-tag{display:none}
  .section{padding:56px 0}
  .hero{padding:40px 0 44px}
  /* Mobile : la démo doit rester atteignable dans les premiers écrans. */
  .bp-demo-first{padding:34px 0 42px}
  .bp-demo-copy h2{margin:12px 0 14px}
  .bp-demo-points{margin-bottom:20px}
  .bp-demo-points li{padding:9px 0;font-size:13.5px}
  .bp-demo-iframe{height:68vh;min-height:420px}
  .price-card{padding:24px}
  .price strong{font-size:56px}
  .steps{grid-template-columns:1fr}
  .step{border-right:0}
  .step:last-child{border-bottom:0}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:14px}
}
@media(max-width:420px){
  .bp-name{font-size:13.5px;letter-spacing:.13em}
  .bp-sub{font-size:9px;letter-spacing:.18em}
  .bp-mark{width:36px;height:36px}
  .btn{padding:0 16px;font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}