/* Annonces en bandeau (annonces.js, serveur/annonces.py). Charte « Corde » : carte blanche, filet de couleur du style à
   gauche, posée PAR-DESSUS la page en bas (comme le bandeau de mesure d'audience .ck) : aucun contenu ne bouge (CLS nul).
   La cale .an-cale, ajoutée tout en bas de la page, a la hauteur du bandeau (--an-h) pour que la fin reste lisible.
   Mise en page téléphone : classe .an-etroit (posée par annonces.js selon la largeur de l'écran, et par l'aperçu de la
   console pour la vue « 375 px ») : une seule règle pour la page et l'aperçu. Valeurs de secours pour chaque variable. */
.an { position: fixed; z-index: 58; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: center; pointer-events: none; }
.an-in { pointer-events: auto; position: relative; box-sizing: border-box; width: 100%; max-width: 760px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 14px; align-items: center; padding: 14px 56px 14px 16px; background: #fff; border: 1px solid var(--rule-strong, #c9cfd4);
  border-left: 4px solid var(--an-c); border-radius: var(--radius, 12px); box-shadow: 0 8px 28px rgba(22, 26, 29, .16);
  color: var(--ink, #161a1d); font: 400 14.5px/1.45 var(--f-text, "Inter", Arial, sans-serif); text-align: left; }
.an-info { --an-c: var(--neutral-ink, #4d5661); --an-fond: var(--neutral-bg, #edf0f2); }
.an-nouveaute { --an-c: var(--red-deep, #d92d20); --an-fond: #feeceb; }
.an-important { --an-c: var(--yellow-ink, #8a5400); --an-fond: var(--warn-bg, #fff4da); }
.an-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--an-fond); color: var(--an-c); }
.an-c { min-width: 0; }
.an-t { margin: 0; font: 800 15.5px/1.3 var(--f-display, "Manrope", "Inter", Arial, sans-serif); letter-spacing: -.01em; color: var(--ink, #161a1d); overflow-wrap: anywhere; }
.an-tag { display: inline-block; margin-right: 4px; padding: 1px 7px; border-radius: 99px; background: var(--an-c); color: #fff;
  font: 700 11px/1.55 var(--f-text, "Inter", Arial, sans-serif); letter-spacing: .04em; text-transform: uppercase; vertical-align: 2px; }
.an-x { margin: 3px 0 0; color: var(--ink-2, #3e454d); overflow-wrap: anywhere; }
.an-repli { margin: 4px 0 0; color: var(--muted, #646b75); font-size: 12.5px; font-style: italic; }
.an-b { justify-self: end; white-space: nowrap; text-decoration: none; }
.an-f { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-2, #3e454d); cursor: pointer; }
.an-f:hover { background: var(--neutral-bg, #edf0f2); color: var(--ink, #161a1d); }
.an-f:focus-visible, .an-b:focus-visible { outline: 3px solid var(--red-deep, #d92d20); outline-offset: 2px; }
.an-cale { height: var(--an-h, 0px); }

/* Téléphone (≤ 767 px) : pleine largeur moins 12 px, bouton sous le texte ; au-dessus de la barre basse du site (.bnav) */
.an.an-etroit { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.an.an-etroit.an-sur-bnav { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
.an-etroit .an-in { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; padding: 12px 48px 12px 12px; }
.an-etroit .an-ico { width: 32px; height: 32px; align-self: start; }
.an-etroit .an-b { grid-column: 2; justify-self: start; margin-top: 10px; white-space: normal; }
.an-etroit .an-f { top: 4px; right: 4px; }

@media (prefers-reduced-motion: no-preference) {
  .an-in { animation: an-entree .28s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes an-entree { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
@media print { .an, .an-cale { display: none; } }