/* Bannières animées · L’IA, c’est simple
   CSS seul (aucun script, aucun style inline, aucune police externe) : compatible CSP 'self'.
   Utilise les variables du brouillon refonte (edition.css) : --paper --ink --accent --muted --wash --sage --line --white.
   Couleurs propres aux bannières : --bn-night, --bn-gold. Boutons : classe .button du brouillon. */
.bn{--bn-night:#14223a;--bn-gold:#d9a441;--serif:Georgia,"Times New Roman",serif;--sans:Inter,Arial,sans-serif}
.bn h2,.bn h3{font-family:var(--serif);font-weight:400;letter-spacing:-.03em;line-height:1.1;text-wrap:balance;margin:0}
.bn .bn-eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.bn .button.bn-light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.bn{position:relative;overflow:hidden;border-radius:6px;min-width:0}

/* 1. Notice bar with ticker */
.bn-ticker{background:var(--bn-night);color:#e9e3d6;font-size:14px;display:flex;align-items:center;gap:14px;padding-block:10px;padding-inline:16px}
.bn-ticker .bn-dot{width:8px;height:8px;border-radius:50%;background:var(--bn-gold);flex:none;animation:bn-ping 2.4s infinite}
@keyframes bn-ping{0%{box-shadow:0 0 0 0 #d9a441aa}70%{box-shadow:0 0 0 9px #d9a44100}100%{box-shadow:0 0 0 0 #d9a44100}}
.bn-ticker .bn-track{overflow:hidden;flex:1;min-width:0;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.bn-ticker .bn-run{display:flex;gap:48px;width:max-content;animation:bn-run 28s linear infinite}
.bn-ticker .bn-run span{white-space:nowrap}
.bn-ticker .bn-run em{font-style:normal;color:var(--bn-gold)}
.bn-ticker:hover .bn-run{animation-play-state:paused}
@keyframes bn-run{to{transform:translateX(-50%)}}

/* 2. Sleeping chip hero */
.bn-npu{background:radial-gradient(120% 140% at 80% 20%,#22365a 0%,var(--bn-night) 60%);color:#f3eee3;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:24px;padding:44px 40px}
.bn-npu h2{font-size:clamp(28px,3.6vw,44px)}
.bn-npu h2 em{color:var(--bn-gold);font-style:italic}
.bn-npu p{color:#c9cfdc;margin:14px 0 24px;max-width:440px}
.bn-npu .bn-eyebrow{color:var(--bn-gold)}
.bn-chip{position:relative;width:min(240px,100%);aspect-ratio:1;margin-inline:auto}
.bn-chip .bn-die{position:absolute;inset:22%;border-radius:12px;background:#2a3f63;border:2px solid #3c5480;display:grid;place-items:center;font:700 22px var(--sans);color:#8c9bb8;letter-spacing:.1em;animation:bn-wake 6s ease-in-out infinite}
.bn-chip .bn-pins{position:absolute;inset:12%;border-radius:16px;background:repeating-linear-gradient(90deg,#4a5f86 0 6px,transparent 6px 16px) top/100% 10% no-repeat,repeating-linear-gradient(90deg,#4a5f86 0 6px,transparent 6px 16px) bottom/100% 10% no-repeat,repeating-linear-gradient(0deg,#4a5f86 0 6px,transparent 6px 16px) left/10% 100% no-repeat,repeating-linear-gradient(0deg,#4a5f86 0 6px,transparent 6px 16px) right/10% 100% no-repeat}
.bn-chip .bn-z{position:absolute;right:6%;top:18%;font:italic 600 22px var(--serif);color:#c9cfdc;opacity:0;animation:bn-zz 6s ease-in infinite}
.bn-chip .bn-z:nth-child(4){animation-delay:.6s;font-size:17px;right:14%}
.bn-chip .bn-z:nth-child(5){animation-delay:1.2s;font-size:13px;right:2%}
@keyframes bn-zz{0%{opacity:0;transform:translate(0,0)}10%{opacity:1}45%{opacity:0;transform:translate(18px,-46px)}100%{opacity:0}}
@keyframes bn-wake{0%,55%{background:#2a3f63;color:#8c9bb8;box-shadow:none}68%,92%{background:#c98a2b;color:#fff8e8;box-shadow:0 0 0 6px #d9a44133,0 0 60px 10px #d9a44166}100%{background:#2a3f63;color:#8c9bb8;box-shadow:none}}

/* 3. Five free guides fan */
.bn-free{background:var(--sage);display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:20px;padding:40px}
.bn-free h2{font-size:clamp(26px,3.2vw,40px)}
.bn-free p{color:var(--muted);margin:12px 0 22px}
.bn-fan{position:relative;height:220px}
.bn-fan i{position:absolute;left:50%;bottom:10px;width:110px;height:150px;margin-left:-55px;border-radius:3px;box-shadow:4px 6px 14px #1e304826;transform-origin:50% 120%;animation:bn-fan 7s var(--e,ease-in-out) infinite;display:flex;align-items:flex-end;padding:10px;font:italic 14px/1.15 var(--serif);color:var(--paper)}
.bn-fan i:nth-child(1){background:#3c5480;--r:-28deg}
.bn-fan i:nth-child(2){background:#a64b35;--r:-14deg}
.bn-fan i:nth-child(3){background:#1e3048;--r:0deg}
.bn-fan i:nth-child(4){background:#6f8b74;--r:14deg}
.bn-fan i:nth-child(5){background:#c98a2b;--r:28deg}
@keyframes bn-fan{0%,12%{transform:rotate(0)}30%,82%{transform:rotate(var(--r))}100%{transform:rotate(0)}}
.bn-arrow{display:inline-block;animation:bn-bob 1.6s ease-in-out infinite}
@keyframes bn-bob{50%{transform:translateY(4px)}}

/* 4. Typing before/after */
.bn-clarity{background:var(--white);border:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:0}
.bn-clarity .bn-side{padding:32px 30px;min-width:0}
.bn-clarity .bn-side+.bn-side{background:var(--wash);border-left:1px solid var(--line)}
.bn-clarity .bn-lab{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bn-clarity .bn-side+.bn-side .bn-lab{color:var(--accent)}
.bn-bubble{margin-top:14px;font:17px/1.5 var(--serif);min-height:96px}
.bn-type{display:inline;background:linear-gradient(var(--wash),var(--wash)) no-repeat right/100% 100%;animation:bn-reveal 8s steps(60,end) infinite}
.bn-side:first-child .bn-type{background-image:linear-gradient(var(--white),var(--white))}
@keyframes bn-reveal{0%{background-size:100% 100%}55%,92%{background-size:0% 100%}100%{background-size:100% 100%}}
.bn-caret{display:inline-block;width:2px;height:1.1em;background:var(--accent);vertical-align:-3px;animation:bn-blink 1s steps(1) infinite}
@keyframes bn-blink{50%{opacity:0}}
.bn-score{margin-top:16px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.bn-bar{flex:1;height:6px;border-radius:9px;background:#d6dde3;overflow:hidden}
.bn-bar span{display:block;height:100%;background:var(--accent);width:var(--w);animation:bn-grow 8s ease-out infinite}
.bn-w30{--w:30%}.bn-w94{--w:94%}
@keyframes bn-grow{0%,15%{width:0}55%,92%{width:var(--w)}100%{width:0}}

/* 5. Second brain: documents fly into a book */
.bn-brain{background:#efe7d6;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:20px;padding:40px}
.bn-brain h2{font-size:clamp(26px,3.2vw,40px)}
.bn-brain p{color:var(--muted);margin:12px 0 22px}
.bn-shelf{position:relative;height:220px}
.bn-book{position:absolute;right:16%;bottom:18px;width:120px;height:150px;background:var(--ink);border-radius:3px 8px 8px 3px;box-shadow:inset 10px 0 0 #2c4366,5px 7px 16px #1e304833;display:grid;place-items:center;color:var(--bn-gold);font:italic 15px/1.2 var(--serif);text-align:center;padding:10px;animation:bn-glow 6s ease-in-out infinite}
@keyframes bn-glow{0%,70%{box-shadow:inset 10px 0 0 #2c4366,5px 7px 16px #1e304833}80%{box-shadow:inset 10px 0 0 #2c4366,0 0 0 6px #d9a44144,0 0 40px #d9a44188}100%{box-shadow:inset 10px 0 0 #2c4366,5px 7px 16px #1e304833}}
.bn-doc{position:absolute;left:4%;width:52px;height:66px;background:var(--white);border:1px solid var(--line);border-radius:2px;box-shadow:2px 3px 6px #1e304820;opacity:0;animation:bn-fly 6s ease-in infinite;background-image:repeating-linear-gradient(#cfd6dd 0 2px,transparent 2px 9px);background-size:70% 60%;background-position:50% 60%;background-repeat:no-repeat}
.bn-doc:nth-child(2){top:10px;animation-delay:.5s}
.bn-doc:nth-child(3){top:80px;animation-delay:1.1s}
.bn-doc:nth-child(4){top:150px;animation-delay:1.7s}
@keyframes bn-fly{0%{opacity:0;transform:translate(0,0) rotate(-8deg)}10%{opacity:1}55%{opacity:1;transform:translate(210px,30px) rotate(6deg) scale(.6)}65%,100%{opacity:0;transform:translate(230px,30px) scale(.4)}}

/* 6. Newsletter envelope */
.bn-news{background:var(--accent);color:var(--paper);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;padding:30px 36px}
.bn-news h3{font-size:clamp(22px,2.6vw,30px)}
.bn-news p{margin:6px 0 0;color:#f3dcd2;font-size:15px}
.bn-env{position:relative;width:96px;height:66px;flex:none}
.bn-env .bn-back{position:absolute;inset:0;background:#f3e6d3;border-radius:4px}
.bn-env .bn-sheet{position:absolute;left:10px;right:10px;top:8px;height:52px;background:var(--white);border-radius:2px;animation:bn-out 4.5s ease-in-out infinite;background-image:repeating-linear-gradient(#d8cfc2 0 2px,transparent 2px 8px);background-size:70% 50%;background-position:50% 40%;background-repeat:no-repeat}
.bn-env .bn-front{position:absolute;inset:0;background:linear-gradient(to top right,#e9d8bf 50%,transparent 50.5%) left/50% 100% no-repeat,linear-gradient(to top left,#e9d8bf 50%,transparent 50.5%) right/50% 100% no-repeat;border-radius:4px}
@keyframes bn-out{0%,20%{transform:translateY(0)}45%,75%{transform:translateY(-34px)}100%{transform:translateY(0)}}

/* 7. Author strip */
.bn-author{background:var(--white);border:1px solid var(--line);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:24px 28px}
.bn-ava{position:relative;width:92px;height:92px;flex:none}
.bn-ava img{width:92px;height:92px;border-radius:50%;object-fit:cover;position:relative;z-index:1}
.bn-ava::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(var(--accent),var(--bn-gold),var(--accent));animation:bn-spin 9s linear infinite;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px))}
@keyframes bn-spin{to{transform:rotate(1turn)}}
.bn-author h3{font-size:22px}
.bn-author p{margin:6px 0 0;color:var(--muted);font-size:15px;max-width:520px}
.bn-author a{color:var(--accent);font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap}

/* 8. Scam shield scan */
.bn-scam{background:var(--bn-night);color:#f3eee3;display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:20px;padding:40px}
.bn-scam h2{font-size:clamp(26px,3.2vw,40px)}
.bn-scam p{color:#c9cfdc;margin:12px 0 22px}
.bn-scam .bn-eyebrow{color:var(--bn-gold)}
.bn-phone{position:relative;width:210px;max-width:100%;margin-inline:auto;background:#22365a;border-radius:22px;padding:18px 14px;display:grid;gap:10px;overflow:hidden}
.bn-msg{background:#f3eee3;color:var(--ink);border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.35}
.bn-msg.bn-bad{animation:bn-flag 5s ease-in-out infinite}
.bn-msg.bn-bad::after{content:"⚠ Arnaque probable";display:block;margin-top:6px;font-size:11px;font-weight:700;color:var(--accent);opacity:0;animation:bn-show 5s ease-in-out infinite}
@keyframes bn-flag{0%,45%{box-shadow:none}55%,90%{box-shadow:0 0 0 3px var(--accent)}100%{box-shadow:none}}
@keyframes bn-show{0%,45%{opacity:0}55%,90%{opacity:1}100%{opacity:0}}
.bn-scan{position:absolute;left:0;right:0;height:40px;top:-40px;background:linear-gradient(transparent,#d9a44155,transparent);animation:bn-scan 5s linear infinite}
@keyframes bn-scan{0%{top:-40px}45%{top:100%}100%{top:100%}}

@media (max-width:720px){
  .bn-npu,.bn-free,.bn-brain,.bn-scam{grid-template-columns:1fr;padding:28px 22px}
  .bn-clarity{grid-template-columns:1fr}.bn-clarity .bn-side+.bn-side{border-left:0;border-top:1px solid var(--line)}
  .bn-news,.bn-author{grid-template-columns:1fr;justify-items:start;padding:24px 22px}
  .bn-shelf{transform:scale(.85);transform-origin:left}
}
@media (prefers-reduced-motion:reduce){.bn *,.bn *::before,.bn *::after{animation:none!important}.bn-doc{opacity:1}.bn-clarity .bn-type{background:none}}

/* Deux bannières jumelles (NPU + Deuxième cerveau) : papier crème, illustration découpée, liseré terracotta */
.banner-duo{grid-template-columns:1fr 1fr;align-items:stretch}
.bn-duo-card{position:relative;overflow:hidden;display:grid;grid-template-rows:auto 1fr;gap:10px;padding:34px 30px 18px;color:var(--ink);background:#f4eee2;border:1px solid var(--line);border-top:4px solid var(--accent);transition:transform .25s ease,box-shadow .25s ease}
.bn-duo-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(30,48,72,.16)}
.bn-duo-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%) -100% 0/200% 100% no-repeat;animation:bn-sheen 7s ease-in-out infinite}
@keyframes bn-sheen{0%,60%{background-position:-100% 0}85%,100%{background-position:200% 0}}
.bn-duo-card .bn-eyebrow{color:var(--accent)}
.bn-duo-card h2{font-size:clamp(24px,2.4vw,32px)}
.bn-duo-card h2 em{color:var(--accent);font-style:italic}
.bn-duo-card p{color:var(--muted);margin:12px 0 20px;max-width:440px}
.bn-art{display:grid;place-items:center;min-height:200px}
.bn-art img{width:min(100%,460px);height:auto;display:block;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(ellipse 70% 68% at 50% 52%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 70% 68% at 50% 52%,#000 62%,transparent 100%);transition:transform .6s ease}
.bn-duo-card:hover .bn-art img{transform:scale(1.04)}
.bn-duo-card .bn-chip{width:min(190px,100%)}
/* Deuxième cerveau : une boîte dorée qui avale les feuilles */
.bn-vault{position:relative;width:min(260px,100%);height:190px}
.bn-box{position:absolute;right:12%;bottom:16px;width:118px;height:132px;border:2px solid var(--bn-gold);border-radius:10px;background:#20345a;display:grid;place-items:center;text-align:center;color:var(--bn-gold);font:italic 16px/1.25 var(--serif);box-shadow:0 0 0 rgba(217,164,65,0);animation:bn-glow-gold 6s ease-in-out infinite}
@keyframes bn-glow-gold{0%,40%{box-shadow:0 0 0 rgba(217,164,65,0)}60%{box-shadow:0 0 34px rgba(217,164,65,.55)}100%{box-shadow:0 0 0 rgba(217,164,65,0)}}
.bn-vault .bn-doc{left:2%;background-color:#f3eee3;border-color:#f3eee3}
.bn-vault .bn-doc:nth-child(1){top:6px;animation-delay:.2s}.bn-vault .bn-doc:nth-child(2){top:70px;animation-delay:.8s}.bn-vault .bn-doc:nth-child(3){top:130px;animation-delay:1.4s}
@media(max-width:900px){.banner-duo{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.bn-duo-card::after{animation:none}.bn-duo-card:hover{transform:none}}
/* Static ticker (no movement) and clarity checklist without invented scores */
.bn-ticker.bn-static a{color:inherit;text-decoration:none}
.bn-ticker.bn-static a:hover{text-decoration:underline}
.bn-ticker.bn-static em{font-style:normal;color:var(--bn-gold)}
.bn-checks{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px;font-size:13px;color:var(--muted)}
.bn-checks li::before{content:"✓";color:#2f7a4f;font-weight:700;margin-right:8px}
.bn-checks li.no::before{content:"✗";color:var(--accent,#a64b35)}