/* ==========================================================================
   L'annonce en haut du site.
   Ce fichier n'est PAS dans src/ : il est servi tel quel par nginx et injecté
   dans le HTML par sub_filter (voir /etc/nginx/conf.d/just_iyed2best.conf).
   Donc le bandeau peut etre change en ecrivant /annonce.json, sans rebuild
   et sans toucher au code du site.
   ========================================================================== */

#annonce {
  /* sticky, pas fixed : le bandeau prend sa place dans le flux, donc il ne
     recouvre rien du site, et il reste colle en haut pendant le scroll. */
  position: sticky;
  top: 0;

  /* z-index 50 : juste sous le bouton musique et le curseur (tous deux a 60).
     Si l'annonce depasse, elle passe devant le bouton musique (qu'on ne peut
     plus cliquer parce qu'il est en fixed) et devant le curseur custom, qui
     devient invisible sur le bandeau. 50 laisse la main aux deux. */
  z-index: 50;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;

  padding: 12px 20px;
  /* Le rouge du site (--red: #ff1f3d), mais avec un peu de transparence :
     alpha 0.94. Assez pour voir le site defiler un peu en dessous, pas
     assez pour que le texte blanc devienne difficile a lire. Le texte blanc
     sur ce rouge est a environ 4.6:1, donc au-dessus du seuil AA pour du
     gros texte ; c'est aussi pourquoi on ne descend pas plus bas que 0.94. */
  background: rgba(255, 31, 61, 0.94);
  color: #fff;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  box-shadow: 0 4px 0 rgba(122, 4, 24, 0.9);

  /* le site cache la barre de scroll, on fait pareil ici */
  scrollbar-width: none;
}

/* On garde l'encart lisible si le message est long sur mobile. */
#annonce p {
  margin: 0;
  max-width: 72ch;
}

/* Le message peut contenir un <strong> pour mettre un bout en avant. */
#annonce strong {
  font-weight: 900;
}

#annonce a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  white-space: nowrap;
}

#annonce a:hover,
#annonce a:focus-visible {
  opacity: 0.82;
}

/* --- Niveaux d'urgence ---------------------------------------------
   Le niveau est choisi par la commande `banner -n/--niveau`, pas par le
   message : ca permet de garder la meme annonce claire pendant une simple
   info puis la passer en rouge fonce pour une vraie urgence, sans retoucher
   le texte.

   Tous les niveaux restent dans le rouge du site -- le bandeau doit avoir
   la meme couleur que le reste, pas etre un pavé bleu ou vert qui jure avec
   le theme. Ce qui change d'un niveau a l'autre, c'est l'intensite du rouge
   et l'epaisseur du trait du bas. Les quatre noms sont conserves pour que
   les scripts et les commandes deja ecrits continuent de fonctionner. */

#annonce[data-niveau="ok"] {
  /* rose clair, le plus discret : une info sans urgence */
  background: rgba(255, 63, 94, 0.92);
  box-shadow: 0 4px 0 rgba(122, 4, 24, 0.7);
}

#annonce[data-niveau="info"] {
  /* le rouge du site, celui par defaut */
  background: rgba(255, 31, 61, 0.94);
  box-shadow: 0 4px 0 rgba(122, 4, 24, 0.9);
}

#annonce[data-niveau="warn"] {
  /* rouge fonce : la maintenance, ca se voit de loin */
  background: rgba(200, 16, 42, 0.95);
  box-shadow: 0 4px 0 rgba(92, 3, 18, 0.95);
}

#annonce[data-niveau="danger"] {
  /* rouge presque borde : l'urgence, avec un trait plus épais */
  background: rgba(170, 10, 30, 0.96);
  box-shadow: 0 6px 0 rgba(70, 2, 14, 0.95);
}

/* --- Bouton de fermeture ------------------------------------------
   Masque par defaut. `banner --fermable` l'affiche, et le choix est
   memorise en localStorage : un visiteur qui ferme l'annonce ne la
   revoit pas au prochain rechargement, mais il la reverra apres un
   `banner --reset`, parce qu'on change la cle de version a chaque
   nouveau message. */

#annonce-fermer {
  flex: 0 0 auto;
  display: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid #ffffffb3;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

#annonce-fermer:hover,
#annonce-fermer:focus-visible {
  background: #ffffff26;
}

#annonce[data-fermable="1"] #annonce-fermer {
  display: block;
}

@media (max-width: 640px) {
  #annonce {
    padding: 10px 14px;
    font-size: 13.5px;
    gap: 10px;
  }
}

/* --- Bouton musique ----------------------------------------------------
   Le bouton musique est `position: fixed; top: 20px` a droite. L'annonce,
   elle, est centree et peut etre large ou prendre deux lignes selon le
   message. Sans arret, un long message finit sous le bouton, qui devient
   illisible et semble disparaitre (son z-index 60 le repasse devant).

   La hauteur reelle du bandeau est mise dans --annonce-hauteur par le js
   (annonce.js), qui la mesure apres avoir pose le texte. Ici on se contente
   de lire cette variable. Sans js (bandeau vide, ou --no-store casse), la
   valeur de repli 46px couvre le cas le plus courant : une ligne. */

body:has(#annonce:not(:empty)) {
  --annonce-hauteur: 46px;
}

body:has(#annonce:not(:empty)) .music {
  /* top normal du bouton = 20px ; on y ajoute la hauteur du bandeau + un peu
     d'air pour que le bouton ne colle pas au bord du bandeau. */
  top: calc(20px + var(--annonce-hauteur, 46px) + 8px);
}

@media (prefers-reduced-motion: no-preference) {
  #annonce {
    animation: annonce-entree 0.45s ease-out both;
  }

  @keyframes annonce-entree {
    from {
      transform: translateY(-100%);
    }
    to {
      transform: translateY(0);
    }
  }
}