/* ==========================================================
   Break The Routine — Édition Halloween (octobre 2026)
   Chargé APRÈS le <style> de la page et site-polish.css :
   il ne fait que redéfinir les couleurs et ajouter le décor.
   Pour revenir au thème normal : retirer les 3 lignes
   "halloween" dans le <head> et le bandeau en haut du <body>.
   ========================================================== */

:root{
  --ink:#080616;
  --panel:#110b20;
  --panel-raised:#1a1329;
  --border:#39264f;
  --violet:#7c3aed;        /* violet du moodboard */
  --violet-glow:#c084fc;   /* lavande lumineuse */
  --signal:#c084fc;
  --fog:#b7accb;
  --hw-purple:#8b5cf6;     /* violet de la marque, en second rôle */
  --hw-purple-l:#b794ff;
  --hw-moon:#f4f4ff;
  --hw-slime:#9be15d;
}

body{background:var(--ink);}

/* Lueurs de fond : orange citrouille + violet sorcière */
.noise-glow{
  background:
    radial-gradient(760px 520px at 14% -6%, rgba(124,58,237,.16), transparent 60%),
    radial-gradient(700px 520px at 100% 10%, rgba(139,92,246,.18), transparent 58%),
    radial-gradient(900px 600px at 50% 110%, rgba(139,92,246,.10), transparent 60%) !important;
}

/* ---------- bandeau Halloween ---------- */
.hw-ribbon{
  position:relative;z-index:31;
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:9px 16px;
  background:linear-gradient(90deg,#2a0f3d,#27113f 50%,#2a0f3d);
  border-bottom:1px solid rgba(124,58,237,.35);
  font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#ddd0f4;text-align:center;
}
.hw-ribbon svg{width:18px;height:18px;flex-shrink:0;}
.hw-ribbon b{font-family:'Archivo Black',sans-serif;font-weight:400;font-size:17px;letter-spacing:.06em;color:var(--violet);text-transform:none;}

/* ---------- en-tête ---------- */
header{background:rgba(8,6,22,.84) !important;}
.logo b{color:var(--violet);text-shadow:0 0 18px rgba(124,58,237,.45);}

/* ---------- titres ---------- */
h1 .accent,
h1 .hi,
h2 .hi{
  font-family:'Archivo Black',sans-serif;
  font-weight:400;letter-spacing:.03em;
  color:var(--violet);
  text-shadow:0 0 24px rgba(124,58,237,.45), 0 2px 0 #281044;
}
h1 .accent,h1 .hi{font-size:1.18em;line-height:1;}
.eyebrow,.section-tag{color:var(--violet-glow);}

/* ---------- boutons ---------- */
.btn-primary,.nav-cta,.sticky-btn.solid{
  background:linear-gradient(180deg,#b34dff,#7c3aed) !important;
  color:#f4f4ff !important;
  box-shadow:0 10px 30px -10px rgba(124,58,237,.7);
}
.btn-primary:hover,.nav-cta:hover{box-shadow:0 14px 34px -10px rgba(124,58,237,.85) !important;}

/* ---------- héros : lune, toiles, brume, chauves-souris ---------- */
.hero{isolation:isolate;}
.btr-product-hero::before{opacity:.14 !important;filter:hue-rotate(-60deg) saturate(1.2);}
.hw-moon{
  position:absolute;z-index:0;pointer-events:none;
  top:36px;right:4%;width:170px;height:170px;border-radius:50%;
  background:
    radial-gradient(circle at 36% 34%, rgba(180,110,40,.18) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 58%, rgba(180,110,40,.15) 0 7%, transparent 8%),
    radial-gradient(circle at 48% 72%, rgba(180,110,40,.12) 0 5%, transparent 6%),
    radial-gradient(circle at 40% 40%, #fffaf0, #ffe2b0 60%, #f5b64b);
  box-shadow:0 0 50px 14px rgba(192,132,252,.30), 0 0 160px 60px rgba(124,58,237,.16);
  opacity:.9;
}
.hw-web{position:absolute;z-index:0;pointer-events:none;width:170px;height:170px;opacity:.22;}
.hw-web.l{top:0;left:0;}
.hw-web.r{top:0;right:0;transform:scaleX(-1);opacity:.14;}
.hw-fog{
  position:absolute;left:-10%;right:-10%;bottom:-20px;height:180px;z-index:0;pointer-events:none;
  background:
    radial-gradient(40% 60% at 20% 80%, rgba(183,148,255,.10), transparent 70%),
    radial-gradient(45% 60% at 70% 90%, rgba(192,132,252,.08), transparent 70%);
  filter:blur(6px);
  animation:hw-fog 18s ease-in-out infinite alternate;
}
@keyframes hw-fog{from{transform:translateX(-3%);}to{transform:translateX(3%);}}

.hw-bats{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;}
.hw-bat{position:absolute;width:44px;height:22px;opacity:.9;animation:hw-fly linear infinite;}
.hw-bat svg{width:100%;height:100%;fill:#120817;filter:drop-shadow(0 0 1.5px rgba(192,132,252,.95)) drop-shadow(0 0 8px rgba(124,58,237,.35));animation:hw-flap .32s ease-in-out infinite alternate;transform-origin:50% 50%;}
@keyframes hw-flap{from{transform:scaleY(1);}to{transform:scaleY(.6);}}
@keyframes hw-fly{
  0%{transform:translate(0,0) rotate(-4deg);}
  25%{transform:translate(-6vw,-18px) rotate(3deg);}
  50%{transform:translate(-12vw,8px) rotate(-3deg);}
  75%{transform:translate(-18vw,-14px) rotate(4deg);}
  100%{transform:translate(-24vw,4px) rotate(-2deg);}
}

/* fenêtre de l'appli : halo orange */
.app-aura{background:radial-gradient(closest-side, rgba(124,58,237,.30), rgba(139,92,246,.18) 55%, transparent) !important;}
.app-window{box-shadow:0 30px 90px -20px rgba(124,58,237,.35), 0 0 0 1px rgba(192,132,252,.18) !important;}

/* citrouille à côté des titres de section */
.section-tag::before{
  content:"";display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235a8f2b' d='M12.6 2.2c.9-.6 2.2-.4 2.6.2-.9.1-1.7.6-2 1.5l-.9.1z'/%3E%3Cellipse cx='12' cy='14' rx='10' ry='8' fill='%23ff7a1a'/%3E%3Cpath fill='%23c24d00' d='M12 6c-2 2-2 14 0 16 2-2 2-14 0-16zM6.5 7.5c-3 3-3 10 0 13 .6-4 .6-9 0-13zm11 0c.6 4 .6 9 0 13 3-3 3-10 0-13z' opacity='.45'/%3E%3Cpath fill='%23240c00' d='M7.5 12.5l2-1.6.6 2.2zm9 0l-2-1.6-.6 2.2zM8 16.2c1.2 1.4 6.8 1.4 8 0l-1 1.6-1-1-1 1.2-1-1.2-1 1.2-1-1.2-1 1z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* sections : liseré orange discret */
section{border-top-color:rgba(124,58,237,.14) !important;}
.hi{color:var(--violet-glow);}

@media (max-width:760px){
  .hw-moon{width:130px;height:130px;top:18px;right:-20px;opacity:.4;}
  .hw-web{width:110px;height:110px;}
  .hw-ribbon{font-size:10px;gap:8px;}
  .hw-ribbon b{font-size:14px;}
}

@media (prefers-reduced-motion:reduce){
  .hw-bat,.hw-bat svg,.hw-fog{animation:none !important;}
}

/* Direction artistique : moodboard violet. Contenu et mise en page conservés. */
:root{--fg:#f4f4ff;--reading-fg:#c3b8d4;--hw-purple:#7c3aed;--hw-purple-l:#c084fc;}
body{background-color:#080616;}
::selection{background:#7c3aed;color:#fff;}
.hw-ribbon{background:linear-gradient(90deg,#10091f,#281044,#10091f);border-color:#61308a;color:#d9c8ef;}
.hw-ribbon b{color:#d9a5ff;font-family:'Manrope',sans-serif;font-weight:800;}
.hw-ribbon svg{filter:hue-rotate(245deg) saturate(.75);}
header{border-bottom-color:rgba(192,132,252,.25);box-shadow:0 8px 30px #08061666;backdrop-filter:blur(20px);}
.logo b{color:#f4f4ff;text-shadow:0 0 18px #a855f766;}
.hero{background:#080616;isolation:isolate;}
.hero::before,.btr-product-hero::before{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background-image:linear-gradient(90deg,rgba(8,6,22,.35),rgba(8,6,22,.05)),url('images/halloween-moodboard-bg.jpg');
 background-size:cover;background-position:center;opacity:1 !important;filter:none;
 -webkit-mask-image:linear-gradient(#000 75%,transparent);mask-image:linear-gradient(#000 75%,transparent);
}
.hero> .wrap{position:relative;z-index:3;}
.hero .hw-moon,.hero .hw-web,.hero .hw-bats{display:none;}
.hero .hw-fog{background:radial-gradient(ellipse at 70% 100%,#a855f733,transparent 65%);}
h1 .accent,h1 .hi,h2 .hi{font-family:'Archivo Black',sans-serif;font-weight:400;letter-spacing:-.025em;}
h1 .accent,h1 .hi{font-size:1em;line-height:inherit;color:#cf8dff;text-shadow:0 0 28px #a855f744;}
.hero h1{color:#f4f4ff;text-shadow:0 3px 24px #080616;}
.hero-sub,.hero .lead{color:#d4c9e1;text-shadow:0 2px 8px #080616;}
.eyebrow,.section-tag,.section-eyebrow{color:#c084fc;}
.btn-primary,.nav-cta,.sticky-btn.solid{border:1px solid #c084fc88;border-radius:10px;color:#fff !important;background:linear-gradient(180deg,#ad41f5,#7c3aed) !important;box-shadow:inset 0 1px 0 #ffffff33,0 5px 25px #7c3aed55;}
.btn-secondary,.btn-outline,.link-ghost{border:1px solid #b67bea88;border-radius:10px;background:#10091fcc;}
.link-ghost{padding:12px 17px;color:#eee3ff;}
.stack-shot,.app-window,.preview-figure{border:1px solid #b67bea66;background:linear-gradient(145deg,#251336ee,#100b1eee);box-shadow:0 20px 60px #0009,0 0 32px #7c3aed33 !important;}
.stack-tag{background:#130c22e8;border-color:#b67bea55;color:#d9c8ef;}
.product-card,.feature-card,.price-card,.plan-card,.blog-card,.card{border-color:#9865c344;background-image:linear-gradient(145deg,#a855f70a,transparent 70%);box-shadow:0 14px 38px #0002;}
.product-card:hover,.feature-card:hover,.blog-card:hover{border-color:#c084fc88;box-shadow:0 12px 38px #7c3aed1a;}
.product-preview{background:linear-gradient(140deg,#160d26,#0c0817);}
.section-tag::before{filter:hue-rotate(245deg);}
footer{background:linear-gradient(180deg,#100a1b,#080616);border-top-color:#9865c344;}
input:focus,select:focus,textarea:focus{border-color:#c084fc;outline-color:#c084fc;}
@media(min-width:901px){.hero{min-height:660px;}.hero-grid{gap:48px;}.hero h1{font-size:clamp(46px,4.4vw,66px);}}
@media(max-width:760px){.hero::before,.btr-product-hero::before{background-position:65% center;background-image:linear-gradient(180deg,#08061666,#080616bb),url('images/halloween-moodboard-bg.jpg');}.hero-sub,.hero .lead{color:#dfd5e9;}}
@media(prefers-reduced-motion:reduce){.hw-fog{animation:none;}}

/* Retours Halloween : deux lignes de titre, appels à l’action orange. */
.btr-product-hero h1.display{font-size:clamp(22px,3vw,42px);white-space:nowrap;text-wrap:initial;line-height:1.12;}
.btr-product-hero h1.display .accent{color:#cf8dff;}
.halloween-places{margin:0 0 16px;padding:12px 14px;border:1px solid #ff932e66;border-radius:10px;background:#ff7a1a12;color:#ffd6b4;font-size:13px;line-height:1.5;}
.halloween-places strong{color:#ffab62;white-space:nowrap;}
#ils-en-parlent .proof-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1060px;}
.btn-primary,.nav-cta,.sticky-btn,.btn-ghost,.btn-primary-link,.opt-btn.primary,a.btn,.offer-cta,.link-ghost{
 background:linear-gradient(180deg,#ff9b45,#ff7419) !important;color:#241006 !important;
 border-color:#ffb577 !important;box-shadow:inset 0 1px 0 #ffffff44,0 6px 24px #ff741933 !important;
}
.btn-primary:hover,.nav-cta:hover,.sticky-btn:hover,.btn-ghost:hover,.btn-primary-link:hover,.opt-btn.primary:hover,a.btn:hover,.offer-cta:hover,.link-ghost:hover{
 background:linear-gradient(180deg,#ffb065,#ff852e) !important;box-shadow:0 8px 28px #ff74194d !important;
}
@media(max-width:900px){.btr-product-hero h1.display{font-size:clamp(22px,5vw,42px);}}
@media(max-width:760px){#ils-en-parlent .proof-grid{grid-template-columns:none;}}

/* Places communes à l’offre Halloween et barre d’achat. */
.sticky-actions{align-items:center;flex-wrap:wrap;}
.sticky-places{margin-right:auto;color:#ffb577;font:600 12px/1.4 'Manrope',sans-serif;}
#btr-sticky-buy .sticky-btn.solid{background:linear-gradient(180deg,#ff9b45,#ff7419) !important;color:#241006 !important;}
.plan .halloween-places{margin:0 0 18px;}
@media(max-width:600px){.sticky-places{flex-basis:100%;text-align:center;margin:0;}.sticky-actions{gap:7px;}.plan-amt{flex-wrap:wrap;}}

#produits .sp-link{display:inline-block;padding:12px 16px;border-radius:10px;background:linear-gradient(180deg,#ff9b45,#ff7419);color:#241006;border:1px solid #ffb577;box-shadow:0 6px 24px #ff741922;}
#produits .sp-half>div:first-child{display:flex;flex-direction:column;align-items:flex-start;}
#produits .sp-half .sp-link{margin-top:auto;}

/* La vidéo remplace seulement le décor lorsque sa première image est prête. */
.hw-scroll-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-1;pointer-events:none;opacity:0;-webkit-mask-image:linear-gradient(#000 75%,transparent);mask-image:linear-gradient(#000 75%,transparent);}
.hero.hw-video-ready::before{background-image:linear-gradient(90deg,rgba(8,6,22,.35),rgba(8,6,22,.05));z-index:0;}
.hero.hw-video-ready .hw-scroll-video{opacity:1;}
@media(max-width:760px){.hw-scroll-video{object-position:65% center;}.hero.hw-video-ready::before{background-image:linear-gradient(180deg,#08061666,#080616bb);}}
@media(prefers-reduced-motion:reduce){.hw-scroll-video{display:none;}}
