/* Pages BD JELANI sur jelypaint.systeme.io (bd-tome-1, bd-tome-2), copies des pages
   jelypaint.com/bd/... : palettes t1 (nocturne) et t2 (sunset) du site. 25 oct. 2026.
   La palette se choisit par la classe du bloc de style : .bd-t1 ou .bd-t2 (posée sur <html> par le script). */
@font-face{font-family:'Inter';src:url('../polices/InterVariable.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--bd-titre:'Hiragino Sans',BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;--bd-corps:Inter,system-ui,sans-serif}
html.bd-t1{--bd-haut:#0d1f3d;--bd-milieu:#1d3050;--bd-accent:#c9b896;--bd-vif:#2c4cc8;--bd-h1:#fff;--bd-ligne:rgba(201,184,150,.2);--bd-carte:rgba(44,76,200,.06);--bd-halo:rgba(44,76,200,.18);--bd-cta:linear-gradient(135deg,#4a6fe8 0%,#2c4cc8 50%,#1d3050 100%);--bd-cta-ombre:rgba(44,76,200,.55);--bd-pastille:rgba(44,76,200,.35);--bd-pied:#020b2a}
html.bd-t2{--bd-haut:#3a1f12;--bd-milieu:#7a2020;--bd-accent:#f59440;--bd-vif:#e5b13d;--bd-h1:#f59440;--bd-ligne:rgba(229,177,61,.25);--bd-carte:rgba(245,148,64,.05);--bd-halo:rgba(245,148,64,.14);--bd-cta:linear-gradient(135deg,#ffb066 0%,#f59440 50%,#c75c1e 100%);--bd-cta-ombre:rgba(245,148,64,.5);--bd-pastille:rgba(122,32,32,.45);--bd-pied:#1a0f08}
html,body{background:#000!important;overflow-x:clip}
body{background:linear-gradient(180deg,var(--bd-haut) 0,var(--bd-milieu) 520px,#000 1250px,#000 100%)!important}
#app{position:relative;z-index:1}
#app,#app *{font-family:var(--bd-corps);-webkit-font-smoothing:antialiased}
#app h1,#app h2,#app h1 *,#app h2 *{font-family:var(--bd-titre)!important;letter-spacing:-.02em;text-wrap:balance}
#app h1{font-weight:600}
#app h2{font-weight:400}
#app [id^="section-"]{background-color:transparent!important;background-image:none!important}
#app [id^="text-"] p+p{margin-top:16px}
#app a{color:inherit}

/* En-tête et menu du site */
.bd-entete{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1140px;margin:0 auto;padding:16px 0}
.bd-entete__logo img{height:26px;width:auto;display:block;filter:brightness(0) invert(1)}
.bd-menu{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.bd-menu a{color:rgba(255,255,255,.75)!important;text-decoration:none;font:400 16px/1 var(--bd-corps)}
.bd-menu a:hover,.bd-menu a[aria-current]{color:#fff!important}
.bd-menu a[aria-current]{text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--bd-vif)}
.bd-burger{display:none}
#app [id^="section-bdentete"]{border-bottom:1px solid rgba(255,255,255,.08)}
@media (max-width:900px){
 .bd-menu{display:none}
 .bd-burger{display:block;position:relative}
 .bd-burger summary{list-style:none;cursor:pointer;color:#fff;font:600 15px/1 var(--bd-corps);padding:10px 4px}
 .bd-burger summary::-webkit-details-marker{display:none}
 .bd-burger[open] .bd-menu{display:flex;flex-direction:column;align-items:flex-start;gap:18px;position:absolute;right:0;top:44px;z-index:10;min-width:220px;padding:20px 22px;border-radius:12px;background:#05070d;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 30px 60px -20px rgba(0,0,0,.9)}
}

/* Héros */
#app [id^="text-bdpastille"] p{display:inline-block;padding:9px 22px;border-radius:6px;background:var(--bd-pastille);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
#app [id^="text-bdintro"] p{font-style:italic}
.bd-video{position:relative;max-width:1024px;margin:0 auto;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#000;box-shadow:0 40px 90px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.06)}
.bd-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Boutons d'achat : dégradé de la palette */
#app a[id^="button-bdcta"]{background:var(--bd-cta)!important;font-weight:600!important;box-shadow:0 18px 40px -16px var(--bd-cta-ombre);transition:transform .2s ease}
#app a[id^="button-bdcta"]:hover{transform:translateY(-2px)}
#app a[id^="button-bdcta"],#app a[id^="button-bdcta"] *{color:#fff!important}

/* Titres de rubrique */
#app [id^="text-bdsurtitre"] p{letter-spacing:.22em;text-transform:uppercase;font-weight:600}
#app [id^="text-bdsignature"] p,#app [id^="text-bdpourquoi"] p{font-style:italic}

/* Ornement */
.bd-orn{display:flex;align-items:center;justify-content:center;gap:18px;color:var(--bd-accent);font-size:16px;opacity:.85}
.bd-orn::before,.bd-orn::after{content:'';height:1px;width:180px;background:linear-gradient(90deg,transparent,var(--bd-ligne),transparent)}

/* Récit : lettrine et couverture */
#app [id^="text-bdlettrine"] p:first-child::first-letter{float:left;font:italic 400 64px/.8 Georgia,serif;color:var(--bd-accent);margin:6px 8px 0 0}
#app [id^="row-bdrecit"]{align-items:flex-start!important;gap:56px}
.bd-couverture{max-width:320px;margin:0 0 0 auto}
.bd-couverture img{display:block;width:100%;height:auto!important;border-radius:6px;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 80px -30px rgba(0,0,0,.95)}
.bd-couverture figcaption{margin-top:14px;text-align:center;color:rgba(255,255,255,.55);font:italic 400 14px/1.4 var(--bd-corps);letter-spacing:.04em}

/* Planches */
.bd-planches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.bd-planches figure{position:relative;margin:0;border-radius:8px;overflow:hidden;background:#fff;padding:0;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.bd-planches img{display:block;width:100%;height:auto!important}
.bd-planches figcaption{position:absolute;left:12px;right:12px;bottom:12px;padding:9px 12px;border-radius:6px;text-align:center;color:#fff;font:italic 400 14px/1.3 var(--bd-corps);background:rgba(10,12,20,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* Reconnaissance */
#app [id^="row-bdpreuves"]{gap:30px}
#app [id^="row-bdpreuves"]>div{border-top:1px solid var(--bd-ligne);border-bottom:1px solid rgba(255,255,255,.04);padding:22px 10px 28px!important;background:linear-gradient(180deg,var(--bd-carte),transparent)}
#app [id^="headline-bdchiffre"] h3{font-family:var(--bd-titre)!important;font-weight:400;letter-spacing:-.02em}

/* Questions : numéros 01 à 04 */
#app [id^="section-bdfaq"]{counter-reset:bdq}
#app [id^="row-bdq"]{counter-increment:bdq;position:relative;border-top:1px solid var(--bd-ligne);padding:26px 0 26px 96px!important}
#app [id^="row-bdq"]:last-of-type{border-bottom:1px solid var(--bd-ligne)}
#app [id^="row-bdq"]::before{content:counter(bdq,decimal-leading-zero);position:absolute;left:18px;top:24px;color:var(--bd-accent);opacity:.75;font:italic 300 30px/1 var(--bd-titre)}
#app [id^="text-bdquestion"] p{font-style:italic}

/* Phrase de tri et P.S. */
#app [id^="text-bdtri"]{border-left:2px solid var(--bd-accent);padding-left:24px!important}
#app [id^="text-bdtri"] p{font-style:italic}
#app [id^="row-bdps"]{position:relative;box-shadow:0 30px 70px -30px var(--bd-halo)}
#app [id^="text-bdps"] p{font-style:italic}
#app [id^="text-bdps"] strong{font-style:normal;margin-right:8px}

/* Pied de page du site */
.bd-pied{max-width:1140px;margin:0 auto;padding:30px 0 26px}
.bd-pied__liens{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 30px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.08)}
.bd-pied ul{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;margin:0;padding:0}
.bd-pied a{color:rgba(255,255,255,.72)!important;text-decoration:none;font:400 15px/1.4 var(--bd-corps)}
.bd-pied a:hover{color:#fff!important}
.bd-pied__bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding-top:18px;color:rgba(255,255,255,.45);font:400 12.5px/1.5 var(--bd-corps)}
#app [id^="section-bdpied"]{background:var(--bd-pied)!important;border-top:1px solid rgba(255,255,255,.06)}

@media (max-width:800px){
 #app [id^="row-bdrecit"]{gap:28px}
 .bd-couverture{margin:0 auto;max-width:260px}
 .bd-planches{grid-template-columns:1fr;gap:16px;max-width:420px;margin:0 auto}
 #app [id^="row-bdpreuves"]{gap:14px}
 #app [id^="row-bdq"]{padding:22px 0 22px 58px!important}
 #app [id^="row-bdq"]::before{left:4px;font-size:24px;top:22px}
 .bd-orn::before,.bd-orn::after{width:90px}
}

/* Formulaire du héros (prénom, email) : un seul par page, le bouton du bas y remonte */
#app form[id^="optinform-jlbd"]{display:flex!important;flex-flow:row wrap!important;gap:10px;align-items:stretch;max-width:620px;margin-left:auto!important;margin-right:auto!important}
#app form[id^="optinform-jlbd"]>div{margin:0!important;padding:0!important;min-width:0;max-width:100%;flex:1 1 220px}
#app form[id^="optinform-jlbd"]>div:last-child{flex:1 1 100%}
#app form[id^="optinform-jlbd"] input{width:100%!important;min-height:54px;box-sizing:border-box;color:#fff!important;border-radius:6px!important}
#app form[id^="optinform-jlbd"] input::placeholder{color:rgba(255,255,255,.55)!important}
#app form[id^="optinform-jlbd"] button{width:100%!important;min-height:58px;border-radius:6px!important;background:var(--bd-cta)!important;color:#fff!important;font-weight:600!important;font-size:16px!important;line-height:1.3!important;padding:14px 18px!important;box-shadow:0 18px 40px -16px var(--bd-cta-ombre);transition:transform .2s ease}
#app form[id^="optinform-jlbd"] button *{color:#fff!important}
#app form[id^="optinform-jlbd"] button:hover{transform:translateY(-2px)}
html{scroll-behavior:smooth}
#app [id^="optinform-jlbd"]{scroll-margin-top:140px}
#app [id^="text-bdconsigne"]{max-width:620px;margin-left:auto;margin-right:auto}