.topbanner.tb-rot{display:grid;align-items:center}
.topbanner.tb-rot .tb-i{grid-area:1/1;opacity:0;transition:opacity .45s ease}
.topbanner.tb-rot .tb-i.on{opacity:1}

.topbanner.tb-un .tb-i{opacity:1}

.topbanner.tb-normal{font-weight:400}
.topbanner.tb-normal b{font-weight:700}

.topbanner.fond-charte1,.topbanner.fond-charte2,
.topbanner.fond-charte3,.topbanner.fond-charte4{
  background:var(--sec-f);color:var(--sec-t)}

.topbanner a.tb-btn{display:inline-block;margin-left:12px;padding:3px 13px;border-radius:30px;
  background:var(--sec-t,#101014);color:var(--sec-f,#FFC233);text-decoration:none;
  font-weight:600;white-space:nowrap}
.topbanner a.tb-btn::after{content:" \2192"}

@media (max-width:560px){
  .topbanner{font-size:clamp(11px,3.05vw,12px);padding-left:10px;padding-right:10px}
  .topbanner a.tb-btn{margin-left:8px;padding:2px 10px}
}
@media (prefers-reduced-motion:reduce){
  .topbanner.tb-rot .tb-i{transition:none}
}