/* Le bandeau d'annonce sur les pages HORS gabarit V10 (les homes Webflow : fr/index.html, index.html).
 * Le HTML est écrit par scripts/v10-gabarit.mjs entre les marqueurs galeon:annonce, depuis l'agenda de
 * src/lib/v10/menu.json ; le comportement est dans js/annonce.js. C'est le MIROIR du bandeau des pages
 * V10 (css/v10.css, section « bandeau d'annonce ») : les pages Webflow ne chargent pas v10.css, d'où
 * les couleurs écrites en clair. Un changement de l'un se reporte dans l'autre.
 * html.annonce-haut : la bande est en haut, la barre du site (.annonce-barre) descend de sa hauteur. */
.annonce{position:fixed;top:0;left:0;right:0;z-index:2147483646;height:42px;display:flex;align-items:center;justify-content:center;
  background:#161d31;color:#fff;border-bottom:1px solid rgba(255,255,255,.12);
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  transition:top .4s cubic-bezier(.4,0,.2,1),height .35s ease,background .35s ease,border-color .35s ease,opacity .3s ease,transform .38s cubic-bezier(.4,0,.2,1)}
.annonce[hidden]{display:none}
.annonce__in{display:flex;align-items:center;gap:14px;height:42px;max-width:calc(100% - 32px);padding:0 20px;font-size:13px;letter-spacing:-.01em;
  border:1px solid transparent;border-radius:99px;box-sizing:border-box;
  transition:height .35s ease,padding .35s ease,gap .35s ease,font-size .35s ease,background .35s ease,border-color .35s ease,box-shadow .35s ease}
.annonce p{margin:0;min-width:0;line-height:1.2;color:rgba(222,233,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.annonce b{font-weight:700;color:#fff}
.annonce__c{display:none}
.annonce a{display:inline-flex;align-items:center;flex:none;height:26px;padding:0 12px;border-radius:99px;box-sizing:border-box;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);font-size:12.5px;font-weight:500;color:#fff;text-decoration:none;
  transition:background .2s,height .35s ease,padding .35s ease,font-size .35s ease}
.annonce a:hover{background:rgba(255,255,255,.22);color:#fff}
.annonce.is-float{top:var(--annonce-y,105px);height:32px;background:transparent;border-color:transparent}
.annonce.is-float .annonce__in{height:32px;padding:0 6px 0 15px;gap:10px;font-size:12px;
  background:rgba(14,17,34,.62);border-color:rgba(255,255,255,.14);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:0 12px 40px rgba(0,0,0,.34)}
.annonce.is-float a{height:22px;padding:0 10px;font-size:11.5px}
.annonce.is-float.is-hidden{opacity:0;transform:translateY(-12px);pointer-events:none}
.annonce-barre{transition:top .4s cubic-bezier(.4,0,.2,1)}
html.annonce-haut .annonce-barre{top:42px !important}
@media (max-width:640px){
  .annonce__in{gap:10px;padding:0 12px}
  .annonce__l,.annonce p span{display:none}.annonce__c{display:inline}
}
@media (prefers-reduced-motion:reduce){.annonce,.annonce__in,.annonce-barre{transition:none}}