/* Bandeau de preuves de la page d'accueil (/ et /classique), sous l'accroche et
   avant les projets. Chargee par la seule vue qui l'affiche (views/portfolio.ejs,
   mecanisme extraStyles), a cote de public/css/preuves.css.

   POURQUOI LES DEUX FEUILLES ENSEMBLE, ET PAS UNE COPIE DE LA PASTILLE ICI.
   La pastille `.preuve-etat` est definie UNE SEULE FOIS, dans preuves.css. Ses
   deux regles non negociables — la couleur porte le fond et le lisere, le texte
   reste --text ; chaque etat porte un mot — ont deja ete mesurees et corrigees
   la-bas. Les recopier ici garantirait qu'un jour les deux definitions
   divergent, et que la page d'accueil affiche une pastille au contraste
   corrige d'un cote seulement. Le cout de cette reutilisation est de charger
   environ 4 Ko de regles portees par `.doc`, `.doc-table` et `.preuve-tableau`,
   selecteurs qui n'existent nulle part sur la page d'accueil : elles ne
   s'appliquent a rien.

   AUCUNE COULEUR NOUVELLE. Le bandeau n'utilise que --surface, --border,
   --text, --text-muted, --accent et --mono, deja definis dans style.css pour
   les deux themes. Mesures : node outils/contraste.mjs (collees dans la PR).

   AUCUN JAVASCRIPT. La CSP de production est script-src 'self', et le bandeau
   est entierement rendu par EJS : sans JS, il s'affiche a l'identique. */

.bandeau-preuves {
  /* Une bande, pas un tableau de bord : un seul filet, pas de carte ombree, et
     une hauteur qui ne dispute rien a l'accroche au-dessus. */
  margin: 0 0 2rem;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
}

/* Titre et pastilles sur la MEME rangee : c'est ce qui fait une bande et non un
   encadre. `flex-wrap` est ce qui tient la promesse des 390 px — la rangee se
   replie en plusieurs lignes plutot que de pousser la page en defilement
   horizontal. */
.bandeau-preuves-rang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .75rem;
}

.bandeau-preuves-etats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Intitule du bandeau : c'est lui qui dit de quoi il s'agit avant meme qu'on
   lise les etats. Un <h2> pour l'ordre des titres de la page (h1 du hero, puis
   celui-ci, puis « Projet en vedette » et « Projets »), ramene a la taille d'une
   etiquette — le sujet de la page reste le travail, pas le monitoring. */
.bandeau-preuves-titre {
  margin: 0;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Le nom court de la preuve, devant son etat. */
.bandeau-preuve {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
}

/* En --text et non en --text-muted : c'est une etiquette, pas une note de bas
   de page. */
.bandeau-preuve-nom {
  font-size: .82rem;
  color: var(--text);
}

/* La pastille elle-meme reste celle de preuves.css. Seule sa taille est
   resserree ici : le bandeau doit se lire en deux secondes, pas dominer le
   hero. */
.bandeau-preuves .preuve-etat {
  font-size: .64rem;
  padding: .1rem .45rem;
}

/* Ligne de contexte : l'horodatage reel, ou la raison de son absence, puis le
   lien vers la page complete. Toujours presente — un bandeau qui ne dirait pas
   de quand date la mesure ne prouverait rien de plus qu'une affirmation. */
.bandeau-preuves-meta {
  margin: .55rem 0 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.bandeau-preuves-meta time {
  font-family: var(--mono);
  font-size: .78rem;
}

/* Anneau de focus a la convention du projet (2 px sur l'accent) : style.css ne
   pose pas de regle generique `a:focus-visible`, chaque composant porte la
   sienne. Sans elle, le lien vers /smsi/preuves serait atteignable au clavier
   sans etre visible. */
.bandeau-preuves-meta a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Le hero est en deux colonnes a partir de 900 px (style.css) ; le bandeau, lui,
   reste pleine largeur sous le hero en toutes circonstances.

   Sous 520 px, le flex-wrap d'origine repliait les CINQ paires nom+pastille
   une (parfois deux) par ligne — la plus longue, « disponibilite » suivie de
   « a surveiller », n'en laissait pas la place a une seconde — soit 4 rangees
   et #projets repousse de 275 px sur un ecran de 844. La grille ci-dessous
   fixe le nombre de COLONNES plutot que de laisser chaque paire reclamer sa
   largeur naturelle : a 3 colonnes fixes, 5 preuves tiennent toujours en
   2 rangees, quelle que soit la longueur du mot d'etat rendu (vert, rouge,
   orange et inconnu ne font pas la meme longueur en toutes lettres). Nom et
   etat passent l'un sous l'autre dans chaque case plutot que cote a cote :
   c'est ce qui rend 3 colonnes tenables dans les ~330 px utiles a 390 px. */
@container cmain (max-width: 520px) {
  .bandeau-preuves {
    padding: .55rem .65rem;
  }

  .bandeau-preuves-rang {
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
  }

  .bandeau-preuves-etats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .3rem .35rem;
    width: 100%;
  }

  .bandeau-preuve {
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
  }

  .bandeau-preuve-nom {
    font-size: .74rem;
  }

  /* La pastille garde son mot entier (jamais la couleur seule pour le
     distinguer) : seule sa taille suit celle deja posee plus haut pour le
     bandeau, rien de plus petit n'est introduit ici. */
  .bandeau-preuves .preuve-etat {
    font-size: .64rem;
    padding: .1rem .4rem;
  }

  .bandeau-preuves-meta {
    font-size: .76rem;
    margin-top: .35rem;
  }

  /* Densite mobile : le repoussement de la section suivante (#projets) vient
     de deux regles GENERIQUES posees dans style.css pour toute la vue epuree
     (.epure .hero { margin-bottom: 4.5rem } et .epure section + section
     { margin-top: 4.5rem }), qui s'additionnent en un collapse de 72px avant
     ET apres le bandeau. Elles servent des paires hero/section qui n'ont pas
     ce bandeau entre elles ailleurs sur le site : `.epure` n'est jamais posee
     hors de cette vue (bodyClass: 'epure', server.js), donc ces deux regles
     generiques ne s'appliquent QUE sur / et /classique — mais on les laisse
     intactes dans style.css et on les surclasse ICI, uniquement pour la paire
     qui touche le bandeau, sans toucher au fichier generique ni a une seule
     autre page. Specificite : 3 classes (.epure .hero:has(+ .bandeau-preuves))
     et 2 classes + 1 type (.epure .bandeau-preuves + section) battent chacune
     leur regle generique (2 classes, et 1 classe + 2 types) quel que soit
     l'ordre de chargement des feuilles. */
  .epure .hero:has(+ .bandeau-preuves) {
    margin-bottom: 1.5rem;
  }

  /* Cote bandeau du meme collapse (margin-top herite de .epure section +
     section) : sans cette ligne, la reduction ci-dessus ne sert a rien, le
     collapse garde le plus grand des deux (72px, celui du bandeau). */
  .epure .hero + .bandeau-preuves {
    margin-top: 1.5rem;
  }

  .epure .bandeau-preuves {
    margin-bottom: 1rem;
  }

  .epure .bandeau-preuves + section {
    margin-top: 1rem;
  }

  /* Le vrai plancher n'etait pas la ou on l'attendait : #projets n'a ni bordure
     ni padding en haut, donc le margin-top de son PREMIER ENFANT (.section-title,
     regle generique de style.css : margin: 2.5rem 0 1rem, utilisee par toutes
     les sections a titre du site) traverse #projets et collapse avec le
     margin-top qu'on vient de reduire ci-dessus — 40px qui gagnaient le max()
     et annulaient la reduction. Le selecteur ci-dessous ne touche PAS la regle
     .section-title generique : il ne vise que le .section-title qui est
     descendant du <section> suivant directement .bandeau-preuves, donc rien
     hors de la page d'accueil / /classique a moins de 520px. */
  .epure .bandeau-preuves + section .section-title {
    margin-top: 1rem;
  }
}