/* BLACKT Studio : parcours prêt-à-porter, page autonome (Elementor Canvas), tout est préfixé .bks. Revu le 01/10/2026. */
html:has(.bks){background:#f1ede4}
body:has(.bks){margin:0;background:#f1ede4}
.bks{--n:#f1ede4;--p:#0a0a0a;--r:#d11b41;--g:#6e6b64;--l:rgba(10,10,10,.16);--c:#eae5da;--c2:#e3ddd0;
  color:var(--p);font-family:"Space Grotesk",system-ui,sans-serif;font-size:16px;line-height:1.55;width:100%;min-height:100vh;margin:0 auto;padding:0 clamp(16px,4vw,56px) 96px;box-sizing:border-box;
  /* Le halo rouge du coin superieur droit venait du theme sombre. Sur le
     beige il ne se lit plus comme une lumiere mais comme une tache. */
  background:var(--n)}
.bks *,.bks *::before,.bks *::after{box-sizing:border-box}
.bks button{font:inherit;color:inherit;cursor:pointer;text-transform:none;letter-spacing:normal;line-height:inherit;box-shadow:none;background:none;border:0;padding:0;border-radius:0}
.bks button:hover,.bks button:focus{background:none;color:inherit;border-radius:0}
.bks [hidden]{display:none!important}
.bks :focus-visible{outline:2px solid var(--r);outline-offset:3px}
.bks p{margin:0}
.bks h1,.bks h2,.bks h3{margin:0;color:var(--p)}
.bks .bks-lab{display:block;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--g)}
.bks .bks-titre{font-family:"Space Grotesk",sans-serif;font-weight:300;font-size:clamp(40px,4.8vw,76px);line-height:1.02;letter-spacing:-.03em;margin:18px 0 0;text-transform:none}
.bks h3{font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:clamp(20px,1.6vw,24px);line-height:1.2;letter-spacing:-.01em}
.bks .bks-intro{color:var(--g);max-width:46ch;margin-top:18px;font-size:clamp(15px,1.15vw,18px)}
.bks .bks-intro strong{color:var(--p);font-weight:500}
.bks-entree{animation:bks-in .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes bks-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* en-tête du parcours */
.bks-head{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(20px,4vw,64px);padding:22px 0 20px;margin-bottom:clamp(40px,6vw,88px);background:linear-gradient(var(--n) 70%,rgba(241,237,228,0))}
.bks-marque{font-family:"Archivo",sans-serif;font-weight:900;font-size:22px;letter-spacing:.01em;color:var(--p)!important;text-decoration:none;display:flex;align-items:baseline;gap:8px}
.bks-marque span{font-family:"Space Grotesk",sans-serif;font-weight:400;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--g)}
/* --pas : le nombre d'etapes, pose par le script. En dur a six, la ligne
   depassait du dernier point sur un parcours qui n'en compte que cinq. */
.bks-fil{--avance:0;--pas:6;position:relative;display:grid;grid-template-columns:repeat(var(--pas),1fr);list-style:none;margin:0;padding:0}
.bks-fil::before,.bks-fil::after{content:"";position:absolute;top:5px;left:calc(100% / (var(--pas) * 2));height:1px;background:var(--l);width:calc(100% - 100% / var(--pas))}
.bks-fil::after{background:var(--p);width:calc((100% - 100% / var(--pas)) * var(--avance));transition:width .6s cubic-bezier(.2,.7,.2,1)}
.bks-fil li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:var(--g)}
.bks-fil li > button{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--g)}
.bks-fil .num,.bks-fil .lab{display:block}
.bks-fil .point{width:11px;height:11px;border-radius:50%;background:var(--n);border:1px solid rgba(10,10,10,.35);position:relative;z-index:1;transition:transform .3s,background .3s,border-color .3s}
.bks-fil .num{font-size:11px;letter-spacing:.08em;margin-top:8px;line-height:1}
.bks-fil .lab{font-size:12px;letter-spacing:.02em;white-space:nowrap;line-height:1.2}
.bks-fil li.fait .point{background:var(--p);border-color:var(--p)}
.bks-fil li.fait button{color:var(--p)}
.bks-fil li.fait button:hover .lab{text-decoration:underline;text-underline-offset:4px}
.bks-fil li.ici .point{background:var(--r);border-color:var(--r);transform:scale(1.35);box-shadow:0 0 0 6px rgba(250,32,77,.18)}
.bks-fil li.ici{color:var(--p)}
.bks-fil li.ici .num,.bks-fil li.ici .lab{color:var(--p);font-weight:500}
.bks-fil li.avenir{opacity:.55}
.bks-head-actions{display:flex;align-items:center;gap:18px}
.bks-quitter{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--l);color:var(--p)!important;text-decoration:none;font-size:20px;line-height:1;transition:border-color .2s}
.bks-quitter:hover{border-color:var(--p)}
.bks-mobile-etape{display:none}
@media (max-width:980px){
  .bks-head{grid-template-columns:auto 1fr auto;gap:14px}
  .bks-fil{grid-column:1/-1;grid-row:2}
  .bks-fil .lab,.bks-fil .num{display:none}
  .bks-mobile-etape{display:block;grid-column:2;grid-row:1;justify-self:center;font-size:13px;color:var(--p)}
  .bks-mobile-etape span{color:var(--g);margin-right:6px}
  .bks-head-actions .bks-lien{display:none}
}

/* boutons : toujours des pilules */
.bks .bks-btn,.bks .bks-btn:hover,.bks .bks-btn:focus{border-radius:99px!important}
.bks .bks-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:15px 28px;border:1px solid var(--p);background:var(--p);color:var(--n);font-weight:500;text-transform:uppercase;letter-spacing:.1em;font-size:13px;text-decoration:none;transition:background .2s,color .2s,border-color .2s,transform .2s}
.bks .bks-btn:hover{background:var(--r);border-color:var(--r);color:var(--p)}
.bks .bks-btn:hover svg{transform:translateX(3px)}
.bks .bks-btn svg{transition:transform .2s}
.bks .bks-btn.plein{background:var(--p);color:var(--n)}
.bks .bks-btn.rouge{background:var(--r);border-color:var(--r);color:var(--p)}
.bks .bks-btn.rouge:hover{background:var(--p);border-color:var(--p);color:var(--n)}
.bks .bks-btn.ghost{background:transparent;color:var(--p);border-color:var(--l)}
.bks .bks-btn.ghost:hover{border-color:var(--p);background:transparent;color:var(--p)}
.bks .bks-btn.petit{padding:9px 16px;font-size:11px}
.bks .bks-btn.large{width:100%;margin-top:26px}
.bks .bks-btn[disabled]{opacity:.45;pointer-events:none}
.bks .bks-lien,.bks .bks-lien:hover,.bks .bks-lien:focus{background:none;border:0;border-radius:0;padding:0;font-size:inherit;color:var(--p);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--r)}
.bks .bks-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;align-items:center}

/* mise en page des étapes */
.bks-2col{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,7vw,120px);align-items:start;max-width:1320px;margin:0 auto}
.bks-gauche{position:sticky;top:150px}
@media (max-width:900px){.bks-2col{grid-template-columns:1fr}.bks-gauche{position:static}}

/* formulaires */
.bks .bks-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.bks .bks-champ{display:flex;flex-direction:column;gap:8px}
.bks .bks-champ.large{grid-column:1/-1}
.bks label{font-size:13px;color:var(--g)}
.bks label i{color:var(--r);font-style:normal}
.bks label small{font-size:12px;opacity:.8}
.bks input[type=text],.bks input[type=email],.bks input[type=tel],.bks input[type=url],.bks textarea,.bks select{width:100%;background:transparent;color:var(--p);border:1px solid var(--l);border-radius:12px;padding:15px 16px;font:inherit;font-size:16px;transition:border-color .2s,background .2s}
.bks input::placeholder,.bks textarea::placeholder{color:rgba(10,10,10,.35)}
.bks textarea{min-height:110px;resize:vertical}
.bks input:focus,.bks textarea:focus,.bks select:focus{border-color:var(--p);background:rgba(10,10,10,.03);outline:none}
.bks select{background:var(--c)}
.bks .bks-accord{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--g);grid-column:1/-1;margin-top:4px}
.bks .bks-accord input{margin-top:4px;accent-color:var(--r);width:18px;height:18px;flex:none}
.bks .bks-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bks .bks-msg{min-height:1.5em;margin-top:14px;font-size:14px;color:var(--g)}
.bks .bks-msg.erreur{color:#c8143a}
@media (max-width:640px){.bks .bks-grille{grid-template-columns:1fr}}

/* secteurs : liste numérotée */
.bks-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--l)}
.bks-liste li{border-bottom:1px solid var(--l)}
.bks-liste li > button,.bks-liste li > div{width:100%;display:grid;grid-template-columns:48px 1fr auto 28px;align-items:center;gap:16px;padding:24px 4px;text-align:left;color:var(--p);transition:padding .3s,background .3s}
.bks-liste li > button:hover{padding-left:16px;background:linear-gradient(90deg,rgba(250,32,77,.08),transparent)}
.bks-liste .num{font-size:13px;color:var(--g);letter-spacing:.06em}
.bks-liste .nom{font-size:clamp(20px,1.8vw,26px);font-weight:400;letter-spacing:-.01em;display:flex;flex-direction:column;gap:2px}
.bks-liste .nom small{font-size:14px;color:var(--g)}
.bks-liste .meta{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--g)}
.bks-liste .fl{color:var(--r);display:grid;place-items:center}
.bks-liste .off{opacity:.4;cursor:not-allowed}
.bks-liste .off .meta{color:var(--p);border:1px solid var(--l);border-radius:99px;padding:4px 10px}
.bks-autre{margin-top:28px;border:1px solid var(--l);border-radius:16px;padding:0 22px}
.bks-autre summary{cursor:pointer;list-style:none;padding:18px 0;color:var(--p);font-weight:500;display:flex;justify-content:space-between}
.bks-autre summary::after{content:"+";color:var(--r);font-size:22px;line-height:1}
.bks-autre[open] summary::after{content:"−"}
.bks-autre[open]{padding-bottom:22px}
.bks-autre .bks-grille{margin:18px 0}

/* design : liste + aperçu */
.bks-designs-vue{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.bks-filtres{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.bks-filtres button{border:1px solid var(--l)!important;color:var(--g);border-radius:99px!important;padding:7px 14px!important;font-size:12px}
.bks-filtres button[aria-pressed=true]{background:var(--p)!important;color:var(--n)!important;border-color:var(--p)!important}
.bks-designs{list-style:none;margin:26px 0 22px;padding:0;max-height:min(52vh,560px);overflow:auto;scrollbar-width:thin;border-top:1px solid var(--l)}
.bks-designs li{border-bottom:1px solid var(--l)}
.bks-designs button{width:100%;display:grid;grid-template-columns:36px 1fr auto 20px;gap:12px;align-items:center;padding:13px 4px;text-align:left;color:var(--g);transition:color .2s,padding .3s}
.bks-designs .nom{font-size:17px;letter-spacing:.02em;text-transform:uppercase}
.bks-designs .num{font-size:12px}
.bks-designs .tag{font-size:10px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--r);color:var(--r);border-radius:99px;padding:2px 8px}
.bks-designs .fl{opacity:0;color:var(--r);transition:opacity .2s,transform .2s;transform:translateX(-4px)}
.bks-designs button:hover,.bks-designs button.actif{color:var(--p);padding-left:10px}
.bks-designs button.actif .fl,.bks-designs button:hover .fl{opacity:1;transform:none}
.bks-designs button.actif .num{color:var(--r)}
.bks-apercu-design{position:sticky;top:150px}
.bks-ecran-apercu{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--c2);border:1px solid var(--l)}
.bks-ecran-apercu img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;animation:bks-fondu .45s ease both}
@keyframes bks-fondu{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}
.bks-apercu-pied{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:22px;flex-wrap:wrap}
.bks-nom-apercu{font-family:"Space Grotesk",sans-serif!important;font-weight:400!important;font-size:22px!important;text-transform:uppercase;letter-spacing:.04em}
.bks-nom-apercu span{color:var(--r);margin-right:4px}
.bks-apercu-pied .bks-intro{margin-top:6px;font-size:15px}
.sur-tactile{display:none}
@media (hover:none){.sur-souris{display:none}.sur-tactile{display:inline}}
@media (max-width:900px){.bks-designs-vue .bks-droite{order:-1}.bks-apercu-design{position:static}.bks-designs{max-height:none}}

/* aperçu + panneau */
.bks-apercu{display:grid;grid-template-columns:340px minmax(0,1fr);gap:20px;align-items:start}
.bks-panneau{background:var(--c);border:1px solid var(--l);border-radius:18px;padding:22px;position:sticky;top:150px;max-height:calc(100vh - 170px);overflow:auto}
.bks-panneau h3{font-size:24px;font-weight:400}
.bks-panneau .bloc{padding:18px 0;border-bottom:1px solid var(--l)}
.bks-panneau .bloc:last-child{border-bottom:0;padding-bottom:0}
.bks-panneau .bloc > .bks-lab{display:block;margin-bottom:10px}
.bks-palettes{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.bks-palettes button{height:44px;border-radius:10px;border:1px solid var(--l);padding:0;overflow:hidden;display:flex;background:none}
.bks-palettes button i{flex:1}
.bks-palettes button[aria-pressed=true]{outline:2px solid var(--p);outline-offset:2px}
.bks-couleurs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.bks-couleurs label{display:flex;flex-direction:column;gap:6px;font-size:12px}
.bks-couleurs input[type=color]{width:100%;height:36px;border:1px solid var(--l);border-radius:8px;background:var(--c2);padding:3px}
.bks-bascule{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--l);border-radius:99px;padding:3px}
.bks-bascule button{background:none;border:0;color:var(--g);border-radius:99px;padding:9px;font-size:13px}
.bks-bascule button[aria-pressed=true]{background:var(--p);color:var(--n)}
.bks-panneau select{padding:11px 12px;font-size:15px}
.bks-panneau select + select{margin-top:8px}
.bks-logo{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bks-logo input[type=file]{font-size:13px;color:var(--g);max-width:100%}
.bks-cadre{border:1px solid var(--l);border-radius:18px;overflow:hidden;background:var(--c2)}
.bks-barre{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--l);font-size:13px;color:var(--g)}
.bks-barre .points{display:flex;gap:6px}.bks-barre .points i{width:10px;height:10px;border-radius:50%;background:var(--l)}
.bks-barre .titre{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bks-barre .vues{display:flex;gap:4px}
.bks-barre .vues button{background:none;border:1px solid transparent;color:var(--g);border-radius:8px;padding:5px 10px;font-size:12px}
.bks-barre .vues button[aria-pressed=true]{border-color:var(--l);color:var(--p)}
.bks-ecran{height:calc(100vh - 170px);min-height:560px;display:flex;justify-content:center;background:#fff;transition:background .3s}
.bks-ecran iframe{width:100%;height:100%;border:0;display:block;background:#fff;transition:width .35s}
.bks-cadre.mobile .bks-ecran{background:var(--c2);padding:18px 0}
.bks-cadre.mobile iframe{width:390px;border-radius:26px;border:8px solid #000}
.bks-sortie{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.bks-sortie .bks-btn{width:100%}
.bks-pages{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.bks-pages span{font-size:12px;color:var(--g);border:1px solid var(--l);border-radius:99px;padding:3px 9px}
@media (max-width:1100px){
  .bks-apercu{grid-template-columns:1fr}
  .bks-apercu .bks-cadre{grid-column:1;grid-row:auto}
  .bks-panneau{position:static;max-height:none;order:2}
  .bks-ecran{height:72vh;min-height:480px}
  .bks-cadre.mobile iframe{width:min(390px,100%)}
}

/* options */
.bks-options{display:grid;gap:34px;margin-top:40px;max-width:1100px}
.bks-vue:not(.bks-2col){max-width:1320px;margin:0 auto}
.bks-options fieldset{border:0;padding:0;margin:0}
.bks-options legend{font-family:"Space Grotesk",sans-serif;font-weight:400;font-size:clamp(20px,1.7vw,26px);letter-spacing:-.01em;margin-bottom:14px;padding:0;color:var(--p)}
.bks-choix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.bks-choix.deux{grid-template-columns:repeat(2,minmax(0,1fr))}
.bks-choix label{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid var(--l);border-radius:16px;background:var(--c);cursor:pointer;color:var(--p);transition:border-color .2s}
.bks-choix label:hover{border-color:var(--g)}
.bks-choix input{position:absolute;opacity:0;pointer-events:none}
.bks-choix label:has(input:checked){border-color:var(--r);box-shadow:inset 0 0 0 1px var(--r)}
.bks-choix label:has(input:focus-visible){outline:2px solid var(--r);outline-offset:3px}
.bks-choix .nom{font-weight:500;font-size:17px}
.bks-choix .prix{font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:30px;line-height:1;letter-spacing:-.02em}
.bks-choix .prix s{font-weight:400;font-size:18px;color:var(--g);margin-right:4px}
.bks-choix .prix small{font-family:"Space Grotesk",sans-serif;font-weight:400;font-size:13px;color:var(--g);margin-left:4px}
.bks-choix .txt{font-size:14px;color:var(--g)}
.bks-recap{margin-top:40px;padding:28px;border-radius:18px;background:var(--p);color:var(--n);display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;max-width:1100px}
.bks-recap .total{font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:clamp(28px,3.4vw,46px);line-height:1;letter-spacing:-.02em}
.bks-recap .detail{color:#6e6b64;font-size:14px;margin-top:6px}
.bks-recap .bks-btn{background:var(--n);color:var(--p);border-color:var(--n)}
.bks-recap .bks-btn:hover{background:var(--r);border-color:var(--r)}
@media (max-width:900px){.bks-choix,.bks-choix.deux{grid-template-columns:1fr}}

/* rendez-vous */
.bks-rdv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:28px;margin-top:40px;align-items:start}
.bks-rdv iframe{width:100%;height:760px;border:0;border-radius:18px;background:#fff}
/* Les trois jalons de la suite : des numeros dans des ronds, relies par un
   trait qui se dessine du premier au dernier a l'arrivee sur l'etape. Le
   trait est absolu, donc il passerait par-dessus les ronds : ceux-ci sont
   positionnes a leur tour pour repasser devant. */
.bks-jalons{position:relative;margin:28px 0 0;padding:0;list-style:none;display:grid;gap:24px}
.bks-jalons::before{content:"";position:absolute;left:17px;top:20px;bottom:20px;width:2px;background:var(--l);transform:scaleY(0);transform-origin:top;animation:bks-trait 1.1s .2s cubic-bezier(.4,0,.2,1) forwards}
@keyframes bks-trait{to{transform:scaleY(1)}}
.bks-jalons li{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start}
.bks-jalons .rond{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;border:1px solid var(--l);background:var(--c);display:grid;place-items:center;font-family:"Space Grotesk",sans-serif;font-size:13px;font-weight:500;color:var(--r)}
.bks-jalons strong{display:block;color:var(--p);font-weight:500;padding-top:8px}
.bks-jalons p{margin:4px 0 0;color:var(--g);font-size:14px;line-height:1.45}
@media (prefers-reduced-motion:reduce){.bks-jalons::before{animation:none;transform:none}}
@media (max-width:900px){.bks-rdv{grid-template-columns:1fr}.bks-rdv iframe{height:680px}}

/* fenêtres */
.bks-modal{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;padding:16px}
.bks-modal.ouvert{display:flex}
.bks-modal .boite{background:var(--c);color:var(--p);border:1px solid var(--l);border-radius:20px;padding:28px;width:min(560px,100%);max-height:92vh;overflow:auto;position:relative}
.bks-modal .fermer{position:absolute;top:14px;right:14px;background:none;border:1px solid var(--l);color:var(--p);border-radius:99px;width:36px;height:36px;font-size:18px;line-height:1}
.bks-modal .bks-grille{grid-template-columns:1fr;margin-top:20px}
.bks-onglets{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px}
/* « .bks » devant, sinon « .bks button:hover » (plus specifique) rend leurs
   angles droits aux pastilles des le survol et au choix. */
.bks .bks-onglets button,
.bks .bks-onglets button:hover,
.bks .bks-onglets button:focus{background:none;border:1px solid var(--l);color:var(--g);border-radius:99px;padding:8px 14px;font-size:13px}
.bks .bks-onglets button[aria-pressed=true],
.bks .bks-onglets button[aria-pressed=true]:hover,
.bks .bks-onglets button[aria-pressed=true]:focus{background:var(--p);color:var(--n);border-color:var(--p)}
/* Le creneau de visio dans la fenetre : la hauteur juste pour voir le mois
   entier sans faire defiler deux fois. */
.bks-visio{margin-top:18px;border:1px solid var(--l);border-radius:14px;overflow:hidden;background:var(--n)}
.bks-visio iframe{display:block;width:100%;height:min(58vh,540px);border:0}
/* L'agenda a besoin de largeur : a 500 px il empile la liste des creneaux
   sous le calendrier et la fenetre devient plus haute que l'ecran. */
.bks-modal.large .boite{width:min(940px,100%)}
.bks-tel-num{font-size:clamp(20px,2.2vw,26px);font-weight:500;letter-spacing:-.01em;margin:16px 0 0;display:inline-block;color:var(--p);text-decoration:none;border-bottom:1px solid var(--l)}
/* Le detail de chaque formule : une liste de coches plutot qu'un paragraphe,
   on y compare ligne a ligne au lieu de relire deux phrases. La coche est
   dessinee en CSS, sans image ni police d'icones. */
.bks-choix .pts{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.bks-choix .pts li{position:relative;padding-left:22px;font-size:13.5px;line-height:1.4;color:var(--g)}
.bks-choix .pts li::before{content:"";position:absolute;left:3px;top:.28em;width:10px;height:6px;border-left:1.6px solid var(--r);border-bottom:1.6px solid var(--r);transform:rotate(-45deg)}
/* Le texte des points qui distinguent l'option passe en couleur de texte ;
   la coche, elle, reste rouge dans tous les cas. */
.bks-choix .pts li.fort{color:var(--p)}
.bks-choix .sstitre{display:block;margin-top:2px;font-size:13px;color:var(--g)}
.bks-choix .note-opt{margin:10px 0 0;font-size:12.5px;line-height:1.35;color:var(--g);opacity:.85}
.bks-vide{color:var(--g);padding:40px 0}
@media (prefers-reduced-motion:reduce){.bks *{transition:none!important}}

/* Curseur : le site masque le curseur natif au profit d'un point rouge injecté par l'en-tête.
   Le parcours n'a pas cet en-tête (Elementor Canvas) : on rend le curseur natif. */
@media (hover:hover) and (pointer:fine){
  html:has(.bks),html:has(.bks) body,html:has(.bks) label,html:has(.bks) .bks p{cursor:auto!important}
  html:has(.bks) a,html:has(.bks) button,html:has(.bks) summary,html:has(.bks) select,html:has(.bks) [role=button],html:has(.bks) input[type=checkbox],html:has(.bks) input[type=radio],html:has(.bks) input[type=color],html:has(.bks) input[type=file],html:has(.bks) .bks-choix label{cursor:pointer!important}
  html:has(.bks) input[type=text],html:has(.bks) input[type=email],html:has(.bks) input[type=tel],html:has(.bks) input[type=url],html:has(.bks) textarea{cursor:text!important}
  html:has(.bks) .bks-liste .off{cursor:not-allowed!important}
}

/* étape 3 : roue des designs (01/10/2026) */
.bks-roue-cadre{position:relative;margin:28px 0 22px;-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.bks-roue{list-style:none;margin:0;padding:calc(min(60vh,560px) / 2 - 36px) 0;height:min(60vh,560px);overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory;scrollbar-width:none;outline:none}
.bks-roue::-webkit-scrollbar{display:none}
.bks-roue li{scroll-snap-align:center;transform-origin:0 50%;transition:opacity .15s linear;will-change:transform}
.bks-roue button{display:flex;align-items:baseline;gap:14px;width:100%;padding:10px 0;text-align:left;color:var(--g)!important;font-size:clamp(30px,2.9vw,46px);line-height:1.05;letter-spacing:-.01em;white-space:nowrap}
.bks-roue .num{font-family:"Space Grotesk",sans-serif;font-size:12px;letter-spacing:.08em;color:var(--g);min-width:22px}
.bks-roue .nom{overflow:hidden;text-overflow:ellipsis}
.bks-roue li.ici button,.bks-roue button:hover{color:var(--p)!important}
.bks-roue li.ici .num{color:var(--r)}
.bks-roue:focus-visible{outline:2px solid var(--r);outline-offset:4px;border-radius:8px}
.bks-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.bks-badge{display:inline-block;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;padding:5px 10px;border-radius:99px;border:1px solid var(--l);color:var(--g)}
.bks-badge.rouge{border-color:var(--r);color:var(--r)}
@media (max-width:900px){.bks-roue{height:min(42vh,360px);padding:calc(min(42vh,360px) / 2 - 30px) 0}.bks-roue button{font-size:28px}}
@media (prefers-reduced-motion:reduce){.bks-roue li{transform:none!important}}
/* étape 3 : tout tient dans l'écran, la roue prend la hauteur restante */
.bks-designs-vue .bks-titre{font-size:clamp(34px,3.2vw,52px)}
.bks-designs-vue .bks-intro{margin-top:12px;font-size:15px}
.bks-designs-vue .bks-roue-cadre{margin:18px 0 12px}
.bks-designs-vue .bks-roue{height:max(300px,calc(100vh - 420px));padding:calc(max(300px,calc(100vh - 420px)) / 2 - 34px) 0}
.bks-designs-vue .bks-apercu-design{top:130px}
@media (max-width:900px){.bks-designs-vue .bks-roue{height:min(42vh,360px);padding:calc(min(42vh,360px) / 2 - 30px) 0}}
/* page autonome : pas de marges Elementor autour du parcours */
html:has(.bks) .elementor .e-con:has(.bks),html:has(.bks) .elementor .e-con:has(.bks) > .e-con-inner{padding:0!important;margin:0!important;max-width:none!important;gap:0!important}
.bks-designs-vue .bks-roue{height:max(280px,calc(100vh - 360px));padding:calc(max(280px,calc(100vh - 360px)) / 2 - 34px) 0}
.bks-designs-vue .bks-roue{height:max(260px,calc(100vh - 430px));padding:calc(max(260px,calc(100vh - 430px)) / 2 - 34px) 0}
@media (min-width:901px){.bks-designs-vue .bks-ecran-apercu{width:min(100%,calc((100vh - 330px) * 1.6));margin-left:auto}.bks-designs-vue .bks-apercu-pied{width:min(100%,calc((100vh - 330px) * 1.6));margin-left:auto}.bks-designs-vue .bks-apercu-design{top:110px}}

/* 02/10 : étape 3 sans texte d'aide, retour en haut, roue plus haute ; panneau simplifié */
.bks .bks-retour{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.08em;text-transform:uppercase!important;color:var(--g)!important;margin-bottom:18px;transition:color .2s}
.bks .bks-retour:hover{color:var(--p)!important}
/* Le Retour de l'etape 4 vit au-dessus du panneau, hors du cadre, aligne sur
   son bord gauche : il appartient a la page, pas au panneau de reglages.
   Il occupe la colonne de gauche seule ; l'apercu monte a cote de lui, sur
   les deux rangees, donc rien n'est repousse vers le bas. */
.bks-apercu-tete{grid-column:1;grid-row:1;margin-bottom:10px}
.bks-apercu-tete .bks-retour{margin-bottom:0}
.bks-apercu .bks-cadre{grid-column:2;grid-row:1 / span 2}
.bks .bks-retour svg{transition:transform .2s}
.bks .bks-retour:hover svg{transform:translateX(-3px)}
.bks-designs-vue .bks-titre{margin-top:0}
.bks-designs-vue .bks-roue-cadre{margin:8px 0 0}
.bks-designs-vue .bks-roue{height:max(300px,calc(100vh - 290px));padding:calc(max(300px,calc(100vh - 290px)) / 2 - 34px) 0}
.bks-designs-vue .bks-gauche{top:110px}
.bks-apercu-txt{min-height:128px}
.bks-ecran-apercu img + img{animation:bks-fondu .45s ease both}
.bks-palettes{grid-template-columns:repeat(5,1fr);gap:10px}
.bks .bks-palettes button{height:auto;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;overflow:visible}
.bks-palettes .pal-fond{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:12px;border:1px solid var(--l);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.bks-palettes .pal-fond i{position:absolute;width:34%;aspect-ratio:1;border-radius:50%;bottom:16%;box-shadow:0 0 0 2px rgba(0,0,0,.08)}
.bks-palettes .pal-fond i:first-child{left:16%}
.bks-palettes .pal-fond i:last-child{right:16%}
.bks-palettes .pal-nom{font-size:10px;letter-spacing:.06em;color:var(--g);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bks-palettes button[aria-pressed=true] .pal-fond{outline:2px solid var(--p);outline-offset:2px}
.bks-palettes button[aria-pressed=true] .pal-nom{color:var(--p)}
.bks-panneau h3{font-size:26px;margin-bottom:4px}
.bks .bks-palettes button[aria-pressed=true]{outline:none}
.bks-designs-vue .bks-roue{height:max(280px,calc(100vh - 345px));padding:calc(max(280px,calc(100vh - 345px)) / 2 - 34px) 0}

/* étape 3 sur mobile : comme avocats.blackt.agency, la roue en haut, l'aperçu juste dessous, tout dans un écran */
@media (max-width:900px){
  .bks-designs-vue{display:flex;flex-direction:column;gap:14px}
  .bks-designs-vue .bks-gauche,.bks-designs-vue .bks-droite{order:0}
  .bks-designs-vue .bks-retour{margin-bottom:8px}
  .bks-designs-vue .bks-titre{font-size:clamp(28px,8vw,36px)}
  .bks-designs-vue .bks-roue-cadre{margin:4px 0 0}
  .bks-designs-vue .bks-roue{height:clamp(170px,30svh,260px);padding:calc(clamp(170px,30svh,260px) / 2 - 24px) 0}
  .bks-designs-vue .bks-roue button{font-size:clamp(22px,6.4vw,30px);padding:6px 0}
  .bks-designs-vue .bks-apercu-design{position:static;width:100%;max-width:min(520px,calc((100svh - 330px) * 1.6));margin:0 auto}
  .bks-designs-vue .bks-ecran-apercu{width:100%;aspect-ratio:16/10;border-radius:10px}
  .bks-designs-vue .bks-apercu-pied{flex-wrap:nowrap;align-items:center;gap:12px;margin-top:12px;width:100%}
  .bks-designs-vue .bks-apercu-txt{min-height:0}
  .bks-designs-vue .bks-apercu-txt .bks-intro,.bks-designs-vue .bks-tags{display:none}
  .bks-designs-vue .bks-nom-apercu{font-size:16px!important}
  .bks-designs-vue .bks-apercu-pied .bks-btn{padding:12px 16px;font-size:11px;white-space:nowrap;flex:none}
  .bks-head{margin-bottom:22px}
}
@media (max-width:900px){.bks-designs-vue > .bks-gauche,.bks-designs-vue > .bks-droite{width:100%;min-width:0}}
.bks-apercu-pied.seul{justify-content:flex-end;margin-top:16px}@media (max-width:900px){.bks-designs-vue .bks-apercu-pied.seul{justify-content:stretch}.bks-designs-vue .bks-apercu-pied.seul .bks-btn{width:100%}}

/* Parcours anglais : équivalent en dollars sous le prix (03/10/2026) */
.bks-choix .prix small.bks-usd{display:block;margin-top:2px;opacity:.6;font-size:.78em;letter-spacing:0}


/* ------------------------------------------------------------------
   Mise en page desktop, 12/10/2026.

   Constat mesure a 1512x800 : les etapes 1, 3 et 4 debordaient de 106,
   82 et 166 pixels. L'essentiel venait de deux reserves genereuses,
   la marge sous l'en-tete (88 px) et le creux de bas de page (96 px),
   qui ne servent a rien sur un parcours pense pour tenir d'un coup
   d'oeil.
------------------------------------------------------------------- */
@media (min-width:1100px){
  .bks{padding-bottom:28px}
  .bks-head{margin-bottom:36px}

  /* Etape 4. Le panneau de gauche demarrait au haut de la COLONNE de
     droite, donc au niveau de la barre d'outils de l'apercu. Il demarre
     maintenant au haut de l'APERCU lui-meme, en descendant de la hauteur
     exacte de cette barre.
     Les deux colonnes prennent ensuite la hauteur qui reste dans la
     fenetre : 100vh moins l'en-tete (98), sa marge (36), la barre (52)
     et le creux du bas (28). Le panneau defile en interne si son contenu
     depasse, plutot que d'allonger la page. */
  /* --bord : le cadre de l'apercu a une bordure de 1 px, haut et bas.
     Sans la compter, l'alignement rate d'un pixel et la page deborde
     de deux. */
  .bks-apercu{--barre:52px;--bord:1px;--utile:calc(100vh - 216px)}
  /* Le Retour tient exactement la hauteur de la barre d'outils de l'apercu :
     le panneau retombe donc pile sur le haut de l'ecran, comme avant. */
  .bks-apercu-tete{display:flex;align-items:center;height:calc(var(--barre) + var(--bord));margin-bottom:0}
  /* Pas d'interligne entre le Retour et le panneau : la hauteur du Retour
     fait deja l'alignement, un ecart de plus le decalerait d'autant. */
  .bks-apercu{row-gap:0}
  .bks-apercu .bks-barre{height:var(--barre)}
  .bks-apercu .bks-panneau{margin-top:0;height:var(--utile);min-height:420px;overflow-y:auto}
  .bks-apercu .bks-ecran{height:var(--utile);min-height:420px}

  /* Etape 6. Deux corrections.
     La largeur d'abord : dans 754 px la colonne des creneaux de l'agenda
     Google sortait du cadre. 420 px a gauche lui en laissent 870.
     La hauteur ensuite : l'agenda prend exactement ce qui reste dans la
     fenetre, donc l'etape ne defile plus. On passe par flex plutot que
     par un calcul en dur, pour que le titre garde sa hauteur naturelle
     meme s'il se replie sur deux lignes. */
  .bks-vue:has(.bks-rdv){display:flex;flex-direction:column;height:calc(100vh - 162px)}
  .bks-rdv{flex:1 1 auto;min-height:0;grid-template-columns:420px 1fr;align-items:stretch}
  .bks-rdv iframe{height:100%;min-height:420px}
}

/* ------------------------------------------------------------------
   Etape 5 en deux colonnes, 12/10/2026.
   A gauche le contenu de l'etape, titres compris. A droite un
   recapitulatif colle en haut : ce que la personne achete reste sous ses
   yeux pendant qu'elle choisit, avec le total et les deux actions.
------------------------------------------------------------------- */
.bks-resume{border:1px solid var(--l);border-radius:16px;padding:22px;background:var(--c)}
/* Chaque ligne : « legende : valeur » a gauche, le prix a droite. Les deux
   gardent le style des titres (petite capitale espacee) ; la legende reste
   grise, la valeur passe en couleur de texte, c'est elle qu'on lit. */
.bks-resume-lignes .l{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--l)}
.bks-resume-lignes .l:first-child{padding-top:0}
.bks-resume-lignes .k{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--g)}
.bks-resume-lignes .k b{font-weight:inherit;color:var(--p)}
.bks-resume-lignes .p{font-size:14px;font-weight:500;white-space:nowrap}
/* Bascule par mois / a l'annee, en tete de colonne : deux moities d'un meme
   bouton, l'active en plein, pour qu'on voie d'un coup lequel des deux prix
   on regarde.
   Les selecteurs portent « .bks » devant : sans lui, « .bks button:focus »
   (plus specifique) rendait au bouton clique ses angles droits, qui
   depassaient du cadre arrondi. */
.bks .bks-periode{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 20px;padding:4px;border:1px solid var(--l);border-radius:999px;background:var(--c2);overflow:hidden}
.bks .bks-periode button,
.bks .bks-periode button:hover,
.bks .bks-periode button:focus{box-sizing:border-box;width:100%;border:0;border-radius:999px;padding:9px 10px;font:inherit;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--g);background:none;cursor:pointer}
.bks .bks-periode button.actif,
.bks .bks-periode button.actif:hover,
.bks .bks-periode button.actif:focus{background:var(--p);color:var(--n)}
.bks .bks-periode button:focus-visible{outline:2px solid var(--r);outline-offset:2px}
/* La note qui explique la formule, juste sous la ligne du site. */
.bks-resume-lignes .l.colle{border-bottom:0;padding-bottom:4px}
.bks-resume-lignes .note{font-size:12.5px;line-height:1.35;color:var(--g);margin:0;padding:0 0 10px;border-bottom:1px solid var(--l)}
/* Le prix de reference, barre : gris, sans gras, il ne rivalise pas avec le
   prix qu'on paie. */
.bks-resume-total .barre{color:var(--g);font-size:17px;font-weight:400;text-decoration-thickness:1px}
.bks-resume-total .barre[hidden]{display:none}
.bks-resume-total{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:16px 0 0}
.bks-resume-total .total{font-size:clamp(24px,2vw,30px);font-weight:500;letter-spacing:-.02em}
.bks-resume .detail{font-size:12.5px;color:var(--g);margin-top:8px}
.bks-resume-actions{display:grid;gap:10px;margin-top:20px}
.bks-resume-actions .bks-btn{width:100%;justify-content:center;text-align:center}
.bks-resume .bks-cgv{margin:12px 0 0;font-size:12px;line-height:1.4;color:var(--g)}
.bks-resume .bks-cgv a{color:var(--p);text-decoration:underline;text-underline-offset:2px}
.bks-resume .bks-msg{margin-top:12px}

@media (min-width:1100px){
  .bks-options-grille{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:36px;align-items:start}
  /* Colle sous l'en-tete, qui est lui-meme colle en haut de la fenetre. */
  .bks-resume{position:sticky;top:116px}
  /* Le titre de l'etape vit maintenant dans une colonne, pas sur toute la
     largeur : la taille pleine le ferait tenir sur quatre lignes. */
  .bks-options-grille .bks-titre{font-size:clamp(34px,3.2vw,52px)}
  .bks-options-grille .bks-options{max-width:none}
}
@media (max-width:1099px){
  /* En dessous, tout s'empile dans l'ordre naturel : le recapitulatif
     arrive apres les options, le choix avant le total. */
  .bks-options-grille{display:flex;flex-direction:column;gap:24px}
}