/*  BANDEAU D'ANNONCE DU CLUB
    =========================

    Ce que ce fichier habille : la phrase que le president allume depuis
    l'espace admin quand un cours saute. Elle apparait sur l'accueil et sur
    le forum, c'est-a-dire devant des visiteurs qui n'ont pas de compte.

    LE BANDEAU NE DOIT JAMAIS DEPLACER LA PAGE.
    Sur l'accueil il se loge dans la bande vide sous la barre de navigation
    (.header-spacer, 230 px de haut et entierement vide). Il y est tire par
    une marge negative : la place est donc PRISE SUR DU VIDE, et la hauteur
    de la page ne change pas selon que l'annonce est allumee ou eteinte.
    Sans cela, allumer le bandeau descendrait la photo d'accueil de 80 px
    chez tous les visiteurs — un changement de mise en page pour une
    information temporaire.

    La couleur : blanc lumineux, comme demande. Le halo est fait de deux
    ombres portees et non d'un fond clair : sur la photo sombre de l'accueil
    un rectangle blanc ecraserait tout le haut de la page. */

.annonce-zone[hidden] {
  display: none;
}

.annonce-zone {
  /*  overflow: hidden est ce qui fait le defilement : c'est cette fenetre
      qui coupe le texte quand il sort, sans elle le texte deborderait de la
      page et ferait apparaitre une barre de defilement horizontale sur tout
      le site. */
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 10px 0;
  box-sizing: border-box;

  /*  LA LARGEUR DU BANDEAU NE DOIT PAS DEPENDRE DE LA LONGUEUR DU MESSAGE.
      overflow: hidden coupe bien le texte a l'affichage, mais ne l'empeche
      pas de compter dans la largeur MINIMALE que le bandeau reclame a son
      parent. Sur le forum, la colonne centrale est une boite flexible : elle
      s'etirait donc jusqu'aux 599 px du texte, sur un telephone de 360 px.
      Mesure faite : la page entiere passait a 676 px de large, et tout le
      forum se decalait vers la droite des que Nagem allumait une annonce.
      contain: inline-size coupe ce lien — la largeur vient du parent, jamais
      du contenu. La regle min-width: 0 posee sur la colonne du forum fait le
      meme travail pour les navigateurs trop anciens pour contain. */
  contain: inline-size;
}

/*  ACCUEIL : LE BANDEAU EST POSE, PAS INSERE.
    =========================================

    Premiere tentative, abandonnee : laisser le bandeau dans le flux et le
    remonter dans la bande vide par une marge negative. Mesure faite sur six
    largeurs d'ecran, la bande et la barre ne bougent pas ensemble :

        largeur    bande vide    bas de la barre
        1440 px      180 px           96 px
        1024 px      180 px          125 px   <- la barre depasse deja
         900 px      230 px          110 px
         390 px      230 px          231 px   <- barre plus haute que la bande

    La barre grandit quand ses liens passent a la ligne, et elle grandit
    encore une fois connecte puisqu'il y a plus de liens ; la bande, elle, ne
    connait que deux valeurs fixes. Aucune marge constante ne peut convenir
    aux deux : celle qui allait sur un grand ecran cachait le bandeau SOUS la
    barre sur les cinq autres.

    Deuxieme tentative, abandonnee aussi : sortir le bandeau du flux et
    calculer sa position d'apres la barre mesuree. Le bandeau ne passait plus
    sous la barre et la page ne bougeait plus d'un pixel — mais il se posait
    alors SUR LE LOGO DU CLUB sur neuf des douze configurations mesurees. Il
    n'y a tout simplement pas toujours de place libre : sur un telephone, la
    barre de navigation occupe deja 231 px pour une bande qui en fait 230.

    CE QUI EST RETENU : le bandeau reste dans le flux et pousse la photo vers
    le bas quand il est allume. On accepte donc que la page descende d'une
    cinquantaine de pixels les jours de fermeture. C'est le comportement de
    n'importe quel bandeau d'alerte, c'est reversible en un clic depuis
    l'espace admin, et surtout c'est la seule solution qui ne recouvre jamais
    rien — ni la barre au-dessus, ni le logo en dessous, sur aucune largeur.

    Une annonce de fermeture merite la place qu'elle prend ; le logo du club,
    lui, ne merite pas d'etre a moitie cache.

    annonce.js ajoute au besoin une marge : sur les ecrans ou la barre de
    navigation depasse la bande vide, les premiers pixels du bandeau seraient
    sinon caches derriere elle.

    z-index 50 : au-dessus de la photo et de son voile, sous la barre de
    navigation qui est a 100 et doit rester cliquable. */
.annonce-zone-accueil {
  margin: 0;
  z-index: 50;
}

/*  FORUM : la colonne centrale n'a pas de bande vide, le bandeau y prend
    donc sa place normalement, juste au-dessus du titre « Le Ring ». */
.annonce-zone-forum {
  margin: 0 0 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
}

.annonce-texte {
  display: inline-block;
  /*  nowrap est indispensable : sur un telephone, un texte qui va a la ligne
      n'a plus rien a faire defiler, et l'animation ne montrerait qu'un pave
      immobile qui tremble. */
  white-space: nowrap;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 800;
  font-size: clamp(1.15rem, 3.2vw, 2rem);
  letter-spacing: 0.5px;
  color: #fff;
  /*  Le « blanc lumineux » : deux halos, un serre pour le relief et un large
      pour la lueur. Ils sont poses sur le TEXTE et non sur un fond, ce qui
      laisse voir la photo d'accueil derriere. */
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.85),
    0 0 18px rgba(255, 255, 255, 0.5),
    0 0 40px rgba(255, 120, 120, 0.28);
  /*  will-change previent le navigateur qu'il va falloir bouger ce texte en
      continu : sans lui, l'animation est recalculee a chaque image sur le
      processeur, ce qui se voit surtout sur les telephones d'entree de gamme
      ou le texte avance alors par a-coups. */
  will-change: transform;
}

/*  LES DEUX FACONS DE DEFILER, ET POURQUOI IL EN FAUT DEUX.

    Quand le texte TIENT dans la largeur (ordinateur, message court), il part
    vers la droite, revient vers la gauche, puis retrouve sa place : c'est le
    va-et-vient demande, et le texte reste lisible d'un bout a l'autre.

    Quand le texte est PLUS LARGE que l'ecran (le cas courant sur telephone :
    un message peut faire 200 caracteres), partir vers la droite pousserait
    ses premiers mots hors de l'ecran — le lecteur verrait la fin d'une phrase
    dont il n'a jamais vu le debut. Dans ce cas le texte va donc vers la
    gauche pour derouler la suite, puis revient a son debut.

    L'amplitude est calculee dans annonce.js et arrive ici par --course : elle
    depend de la largeur du texte, que le CSS seul ne connait pas. */
.annonce-texte {
  animation: annonce-va-et-vient var(--duree, 14s) ease-in-out infinite;
}

@keyframes annonce-va-et-vient {
  0% { transform: translateX(0); }
  35% { transform: translateX(var(--course, 0px)); }
  70% { transform: translateX(calc(var(--course, 0px) * -1)); }
  100% { transform: translateX(0); }
}

.annonce-zone.annonce-deborde .annonce-texte {
  animation-name: annonce-aller-retour;
}

@keyframes annonce-aller-retour {
  0%, 8% { transform: translateX(0); }
  50% { transform: translateX(calc(var(--course, 0px) * -1)); }
  92%, 100% { transform: translateX(0); }
}

/*  UN BANDEAU QUI BOUGE N'EST PAS UN DETAIL POUR TOUT LE MONDE. Un texte en
    mouvement perpetuel est illisible pour une partie des lecteurs, et donne
    la nausee a d'autres. Quand le systeme demande moins d'animations, le
    texte s'arrete et devient simplement defilable au doigt : l'information
    reste entiere, seul le mouvement disparait. */
@media (prefers-reduced-motion: reduce) {
  .annonce-texte {
    animation: none;
  }

  .annonce-zone {
    overflow-x: auto;
  }
}

/*  Sur un petit ecran le texte doit descendre en taille, sinon trois mots
    remplissent la largeur et le message met une minute a defiler.
    Il n'y a plus de marge a corriger ici : la position verticale est
    calculee a l'execution, elle s'adapte donc d'elle-meme. */
@media (max-width: 700px) {
  .annonce-texte {
    font-size: clamp(1rem, 4.6vw, 1.4rem);
  }
}


/*  ENVOI D'UNE NOTIFICATION A TOUT LE CLUB
    ======================================= */

#notifDiffusionBtn {
  color: var(--accent-red, #ff3333);
  transition: transform 0.15s ease, filter 0.15s ease;
}

#notifDiffusionBtn:hover {
  filter: brightness(1.35);
  transform: scale(1.1);
}

.diffusion-voile[hidden] {
  display: none;
}

.diffusion-voile {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  /*  « safe center » : si la fenetre est plus haute que l'ecran — un petit
      telephone avec le clavier ouvert — un centrage ordinaire la ferait
      deborder par le HAUT, et le titre comme le texte deviendraient
      inatteignables. */
  align-items: safe center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}

.diffusion-boite {
  width: 100%;
  max-width: 460px;
  background: var(--bg-card, #1c1c1c);
  border: 1px solid #2f3336;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}

.diffusion-boite h3 {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.15rem;
  color: var(--text-main, #fff);
  margin: 0 0 6px;
}

.diffusion-boite h3 i {
  color: var(--accent-red, #ff3333);
  margin-right: 6px;
}

.diffusion-aide {
  font-size: 0.84rem;
  color: var(--text-muted, #b0b0b0);
  margin: 0 0 14px;
  line-height: 1.5;
}

#diffusionTexte {
  width: 100%;
  box-sizing: border-box;
  background: #101012;
  border: 1px solid #333;
  border-radius: 10px;
  color: var(--text-main, #fff);
  font-family: var(--font-body, 'Roboto', sans-serif);
  /*  16px et pas moins : en dessous, un iPhone zoome tout seul sur le champ
      des qu'on le touche, et la fenetre sort de l'ecran. */
  font-size: 16px;
  padding: 12px;
  resize: vertical;
  outline: none;
}

#diffusionTexte:focus {
  border-color: var(--accent-red, #ff3333);
}

.diffusion-compteur {
  font-size: 0.76rem;
  color: #777;
  margin-top: 6px;
  text-align: right;
}

.diffusion-etat {
  font-size: 0.84rem;
  min-height: 20px;
  margin: 8px 0 2px;
  color: var(--text-muted, #b0b0b0);
}

.diffusion-etat.erreur {
  color: #ff6b6b;
}

.diffusion-etat.succes {
  color: #4ade80;
}

.diffusion-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px;
}

.diffusion-actions button {
  /*  44 px de haut : c'est la taille sous laquelle on rate un bouton au
      pouce une fois sur trois. « Envoyer » ecrit a tout le club, on ne le
      declenche pas par erreur et on ne le manque pas non plus. */
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  border: none;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 0.92rem;
  cursor: pointer;
}

.diffusion-annuler {
  background: transparent;
  color: var(--text-muted, #b0b0b0);
  border: 1px solid #3a3a3a !important;
}

.diffusion-envoyer {
  background: var(--accent-red, #ff3333);
  color: #fff;
  font-weight: 600;
}

.diffusion-envoyer:disabled {
  opacity: 0.55;
  cursor: wait;
}


/*  NOTIFICATIONS QUI MENENT QUELQUE PART
    ==================================== */

.notif-cliquable {
  cursor: pointer;
}

.notif-aller {
  font-size: 0.74rem;
  color: var(--accent-red, #ff3333);
  margin-top: 4px;
}

/*  Le message vise apres un clic sur « Voir le message ». Sans ce repere, on
    arrive au milieu de messages tous batis pareil et on ne sait pas lequel
    nous concernait. L'animation s'eteint d'elle-meme au bout de 2,6 s. */
.post-vise {
  animation: post-vise-halo 2.6s ease-out 1;
}

@keyframes post-vise-halo {
  0%, 40% {
    box-shadow: 0 0 0 2px var(--accent-red, #ff3333), 0 0 26px rgba(255, 51, 51, 0.45);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 51, 51, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .post-vise {
    animation: none;
    box-shadow: 0 0 0 2px var(--accent-red, #ff3333);
  }
}