/* ==========================================================================
   MaBourseAuxVetements — habillage par-dessus Bootstrap 5.3
   La charte est inchangee : bleu #3498db, vert d'action #27ae60, police Lato.
   ========================================================================== */

:root {
  --mbv-bleu: #3498db;
  --mbv-bleu-fonce: #2b86c5;
  --mbv-bleu-texte: #2176b5;
  --mbv-bleu-pale: #e4f1fb;
  --mbv-vert: #27ae60;
  --mbv-vert-fonce: #1f8f4e;
  --mbv-vert-pale: #e3f5ec;
  --mbv-encre: #2c3e50;
  --mbv-gris-texte: #5a6b78;
  --mbv-gris-label: #7b8c99;
  --mbv-fond: #f7f9fa;
  --mbv-bordure: #e3e9ec;
  --mbv-pied: #233140;
}

/* --- Bases ---------------------------------------------------------------- */

body {
  font-family: Lato, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--mbv-encre);
  background-color: #fff;
}

a {
  color: var(--mbv-bleu-texte);
}

a:hover {
  color: #15527f;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 900;
  letter-spacing: -0.3px;
}

.mbv-fond {
  background-color: var(--mbv-fond);
}

.mbv-texte-doux {
  color: var(--mbv-gris-texte);
}

/* Intitule de donnee : « DEPOT », « PRIX PAR LISTE »… */
.mbv-label {
  font-size: 0.8125rem;
  font-weight: 900;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--mbv-gris-label);
  margin-bottom: 0.2rem;
}

/* --- Barre de navigation : le bleu historique ---------------------------- */

.navbar-mbv {
  background-color: var(--mbv-bleu);
}

.navbar-mbv .navbar-brand {
  color: #fff;
  font-weight: 900;
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

/* Sur telephone, le nom du site et le bouton du menu tiennent sur une meme
   ligne. En taille normale, le bouton passait sous le nom : une bande bleue
   de 50 px perdue en haut de chaque page. */
@media (max-width: 419.98px) {
  .navbar-mbv .navbar-brand {
    font-size: 1.0625rem;
    gap: 0.4375rem;
    margin-right: 0.5rem;
  }

  .navbar-mbv .navbar-brand img {
    width: 26px;
    height: 26px;
  }
}

@media (max-width: 359.98px) {
  .navbar-mbv .navbar-brand {
    font-size: 0.9375rem;
  }
}

.navbar-mbv .navbar-brand:hover,
.navbar-mbv .navbar-brand:focus {
  color: #fff;
}

.navbar-mbv .nav-link {
  color: #fff;
  border-radius: 0.375rem;
  padding: 0.625rem 0.875rem;
}

.navbar-mbv .nav-link:hover,
.navbar-mbv .nav-link:focus {
  color: #fff;
  background-color: var(--mbv-bleu-fonce);
}

.navbar-mbv .nav-link.active {
  color: #fff;
  background-color: var(--mbv-bleu-fonce);
  font-weight: 700;
}

/* Bouton « Connexion » en inverse dans la barre */
.navbar-mbv .nav-link-inverse {
  color: #1f6698;
  background-color: #fff;
  font-weight: 700;
}

.navbar-mbv .nav-link-inverse:hover,
.navbar-mbv .nav-link-inverse:focus {
  color: #15527f;
  background-color: #eaf4fc;
}

.navbar-mbv .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.55);
}

.navbar-mbv .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-mbv .dropdown-menu {
  border-color: var(--mbv-bordure);
}

/* --- Bandeau de recherche ------------------------------------------------ */

.mbv-bandeau {
  background-color: var(--mbv-bleu);
  color: #fff;
}

.mbv-bandeau h1 {
  font-size: 2.5rem;
  line-height: 1.15;
  letter-spacing: -0.6px;
}

.mbv-bandeau .mbv-accroche {
  color: #eaf4fc;
}

.mbv-bandeau .form-label {
  color: #fff;
  font-weight: 700;
}

.mbv-bandeau .form-control {
  border: 2px solid #fff;
}

@media (max-width: 575.98px) {
  .mbv-bandeau h1 {
    font-size: 1.875rem;
  }
}

/* --- Boutons ------------------------------------------------------------- */

.btn-mbv-vert {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--mbv-vert);
  --bs-btn-border-color: var(--mbv-vert);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--mbv-vert-fonce);
  --bs-btn-hover-border-color: var(--mbv-vert-fonce);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1a7b43;
  --bs-btn-active-border-color: #1a7b43;
  --bs-btn-font-weight: 700;
}

.btn-mbv-bleu {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--mbv-bleu);
  --bs-btn-border-color: var(--mbv-bleu);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--mbv-bleu-fonce);
  --bs-btn-hover-border-color: var(--mbv-bleu-fonce);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2278b3;
  --bs-btn-active-border-color: #2278b3;
  --bs-btn-font-weight: 700;
}

/* --- Cartes et pastilles de statut -------------------------------------- */

.mbv-carte {
  background-color: #fff;
  border: 1px solid var(--mbv-bordure);
  border-radius: 0.75rem;
}

.mbv-statut {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

.mbv-statut-ouvert {
  color: #1d7a4c;
  background-color: var(--mbv-vert-pale);
}

.mbv-statut-inscrit {
  color: #8a5a00;
  background-color: #fdf0d8;
}

.mbv-statut-encours {
  color: #6b4e9e;
  background-color: #efe9f9;
}

.mbv-etiquette-section {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 900;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  padding: 0.35rem 0.875rem;
  border-radius: 999px;
}

.mbv-etiquette-asso {
  color: var(--mbv-bleu-texte);
  background-color: var(--mbv-bleu-pale);
}

.mbv-etiquette-user {
  color: #1d7a4c;
  background-color: var(--mbv-vert-pale);
}

/* --- Pied de page ------------------------------------------------------- */

.mbv-pied {
  background-color: var(--mbv-pied);
  color: #aebcc8;
}

.mbv-pied a {
  color: #aebcc8;
  text-decoration: none;
}

.mbv-pied a:hover {
  color: #fff;
}

.mbv-pied .mbv-version {
  color: #7c8e9e;
}

/* --- Notifications flottantes (remplace bootstrap-notify) --------------- */

#mbv-toasts {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1090;
  max-width: min(26rem, calc(100vw - 2rem));
}

/* --- Tableaux de gestion ------------------------------------------------ */

.table > :not(caption) > * > * {
  vertical-align: middle;
}

/* --- Espace « mon compte » ------------------------------------------------ */

.mbv-ariane {
  font-size: 0.875rem;
  color: var(--mbv-gris-texte);
}

.mbv-ariane a {
  text-decoration: none;
}

.mbv-ariane a:hover {
  text-decoration: underline;
}

.mbv-ariane span[aria-hidden] {
  margin: 0 0.5rem;
  color: #a9b7c0;
}

/* Navigation laterale du compte */
.mbv-nav-compte {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.5rem;
  text-decoration: none;
  color: var(--mbv-encre);
  font-size: 0.9375rem;
}

.mbv-nav-compte:hover {
  background-color: #f2f6f8;
  color: var(--mbv-encre);
}

.mbv-nav-compte.actif {
  background-color: var(--mbv-bleu-pale);
  color: #1b5e8f;
  font-weight: 700;
}

.mbv-nav-compte-sortie {
  color: #8a5a5a;
}

.mbv-nav-compte-sortie:hover {
  background-color: #fdf4f4;
  color: #7a2e2e;
}

/* Pied de carte : la zone grisee qui porte les boutons d'action */
.mbv-carte-pied {
  padding: 1rem 1.5rem;
  border-top: 1px solid #eef2f4;
  background-color: #fbfcfd;
  border-radius: 0 0 0.75rem 0.75rem;
}

/* « Annuler » est un lien, « Enregistrer » un bouton de formulaire : deux
   elements differents, donc deux hauteurs calculees differemment. On les
   ramene au meme gabarit, 44px, qui est aussi la hauteur minimale confortable
   au doigt. */
.mbv-carte-pied .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Le bouton d'envoi d'un formulaire Symfony est entoure d'un div de ligne :
   sans cela il ne s'aligne pas sur le lien voisin. */
.mbv-carte-pied .mb-3,
.mbv-carte-pied div {
  margin-bottom: 0 !important;
}

/* Rappel des regles de mot de passe */
.mbv-regles-mdp {
  padding: 0.875rem 1rem;
  background-color: var(--mbv-fond);
  border: 1px solid var(--mbv-bordure);
  border-radius: 0.5rem;
  font-size: 0.9375rem;
}

.mbv-regles-mdp li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #1d7a4c;
}

.mbv-regles-mdp .bi-check-lg {
  flex-shrink: 0;
}

/* Variante pale du bouton bleu, pour les actions secondaires */
.btn-mbv-bleu-pale {
  background-color: var(--mbv-bleu-pale);
  border-color: #bcdcf5;
  color: #1b5e8f;
  font-weight: 700;
}

.btn-mbv-bleu-pale:hover,
.btn-mbv-bleu-pale:focus {
  background-color: #d4e9f8;
  border-color: #a6d0f0;
  color: #15527f;
}

/* --- Espace d'administration --------------------------------------------- */

/* Bandeau fonce : on ne doit jamais croire qu'on est sur le site public */
.navbar-mbv-admin {
  background-color: var(--mbv-pied);
}

.navbar-mbv-admin .navbar-brand,
.navbar-mbv-admin .nav-link {
  color: #d4dde4;
}

.navbar-mbv-admin .navbar-brand {
  font-weight: 900;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.navbar-mbv-admin .nav-link {
  white-space: nowrap;
}

/* Entre 1200 et 1400 px, le menu deplie est juste : les icones des entrees
   s'effacent pour lui laisser la place. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .navbar-mbv-admin .navbar-nav.me-auto .nav-link > .bi {
    display: none;
  }
}

.navbar-mbv-admin .nav-link:hover,
.navbar-mbv-admin .nav-link:focus {
  color: #fff;
}

.navbar-mbv-admin .nav-link.active {
  color: #fff;
  font-weight: 700;
  background-color: rgba(255, 255, 255, 0.14);
  border-radius: 0.375rem;
}

.navbar-mbv-admin .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.3);
}

.navbar-mbv-admin .navbar-toggler-icon {
  filter: invert(1) grayscale(1) brightness(2);
}

.mbv-badge-admin {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  background-color: #c0392b;
  color: #fff;
  padding: 0.1875rem 0.5625rem;
  border-radius: 0.25rem;
  margin-left: 0.5rem;
}

/* Tuiles de chiffres */
.mbv-tuile {
  display: block;
  height: 100%;
  background-color: #fff;
  border: 1px solid var(--mbv-bordure);
  border-radius: 0.75rem;
  padding: 1.125rem 1.25rem;
  text-decoration: none;
  color: inherit;
}

a.mbv-tuile:hover {
  border-color: #c9dcea;
  color: inherit;
}

.mbv-tuile-vert {
  border-left: 4px solid var(--mbv-vert);
}

.mbv-tuile-nombre {
  margin: 0 0 0.25rem;
  font-size: 2.125rem;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
}

/* Sur telephone, deux tuiles par rangee : en 2,125 rem, « 2 115,00 € » se
   coupait sur trois lignes. Les milliers sont separes par une espace fine
   insecable (number_format(..., "\202F") dans les gabarits) : un montant ne
   se coupe plus au milieu, au pire le symbole passe a la ligne. */
@media (max-width: 575.98px) {
  .mbv-tuile-nombre {
    font-size: 1.625rem;
  }
}

.mbv-nombre-vert {
  color: #1d7a4c;
}

/* Tuiles « ce qui demande une action » */
.mbv-alerte {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  height: 100%;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  text-decoration: none;
  border: 1px solid;
}

.mbv-alerte strong {
  font-size: 1.5rem;
  font-weight: 900;
  display: block;
  line-height: 1.1;
}

.mbv-alerte-icone {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.125rem;
}

.mbv-alerte-ambre {
  background-color: #fff8e8;
  border-color: #f2e2bd;
  color: #6b5210;
}

.mbv-alerte-ambre .mbv-alerte-icone {
  background-color: #f7e4b8;
  color: #7b5c12;
}

.mbv-alerte-rouge {
  background-color: #fdf1f1;
  border-color: #f0d2d2;
  color: #7a2e2e;
}

.mbv-alerte-rouge .mbv-alerte-icone {
  background-color: #f5d9d9;
  color: #8a3c3c;
}

.mbv-alerte-bleue {
  background-color: var(--mbv-bleu-pale);
  border-color: #bcdcf5;
  color: #1b5e8f;
}

.mbv-alerte-bleue .mbv-alerte-icone {
  background-color: #cfe6f8;
  color: #1b5e8f;
}

/* Histogramme : des barres en CSS, sans bibliotheque */
.mbv-histogramme {
  display: flex;
  align-items: flex-end;
  gap: 0.625rem;
  height: 11rem;
}

.mbv-histo-colonne {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.375rem;
}

.mbv-histo-valeur {
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  color: var(--mbv-gris-texte);
}

/* La barre est posee en bas de la colonne, sa hauteur est un pourcentage du
   maximum calcule dans le gabarit */
.mbv-histo-barre {
  display: block;
  width: 100%;
  background-color: #b9dcf4;
  border-radius: 0.1875rem 0.1875rem 0 0;
  min-height: 2px;
}

/* Les mois hauts se distinguent aussi par la clarte, pas seulement la teinte */
.mbv-histo-barre-haute {
  background-color: var(--mbv-bleu);
}

.mbv-histo-libelle {
  font-size: 0.6875rem;
  line-height: 1.25;
  text-align: center;
  color: var(--mbv-gris-label);
  border-top: 1px solid var(--mbv-bordure);
  padding-top: 0.4375rem;
  /* Ne retrecit pas : la colonne est a hauteur fixe et les barres se calent
     sur le bas, un libelle compressible les ferait flotter. */
  flex: none;
}

/* La date, sous l'heure, quand la bourse couvre plusieurs jours. */
.mbv-histo-jour {
  display: block;
  font-weight: 700;
  color: var(--mbv-bleu-texte);
}

/* LES BARRES SE CALENT TOUTES SUR LA MEME LIGNE.

   La colonne est a hauteur fixe et son contenu empile vers le bas : un libelle
   sur deux lignes -- l'heure plus la date du changement de jour -- poussait
   donc SA barre vers le haut, et les barres ne partageaient plus la meme base.

   La place des deux lignes est reservee dans toutes les colonnes des que le
   graphique couvre plusieurs jours, qu'elles portent une date ou non. Les
   graphiques d'une seule journee gardent leur libelle compact. */
.mbv-histogramme-multijours .mbv-histo-libelle {
  height: 2.625rem;
}

/* Le passage d'un jour au suivant : un filet vertical plutot qu'un ecart, pour
   ne pas desaligner les colonnes. */
.mbv-histo-nouveau-jour {
  border-left: 1px dashed #c3ced6;
  padding-left: 0.3rem;
  margin-left: 0.3rem;
}

/* Jauge du palmares */
.mbv-jauge {
  height: 0.4375rem;
  background-color: #eef2f4;
  border-radius: 0.25rem;
  overflow: hidden;
}

.mbv-jauge > span {
  display: block;
  height: 100%;
  background-color: var(--mbv-bleu);
  border-radius: 0.25rem;
}

/* Tableaux de l'administration */
.mbv-table-admin {
  min-width: 48rem;
}

.mbv-table-admin thead th {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--mbv-gris-label);
  background-color: #fbfcfd;
  border-bottom: 1px solid var(--mbv-bordure);
  white-space: nowrap;
}

.mbv-col-etat {
  width: 8rem;
}

.mbv-col-actions {
  width: 14rem;
}

/* Une ligne inactive se reconnait au fond, pas seulement a la pastille */
.mbv-ligne-inactive {
  background-color: #fffdf7;
}

/* Pastilles d'etat : fond, bordure et couleur de texte varient ensemble, pour
   rester lisibles sans dependre de la seule teinte */
.mbv-pastille {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.25rem 0.625rem;
  border-radius: 1.25rem;
  border: 1px solid;
  white-space: nowrap;
}

.mbv-pastille-verte {
  color: #1d7a4c;
  background-color: var(--mbv-vert-pale);
  border-color: #b5ddc6;
}

.mbv-pastille-ambre {
  color: #7b5c12;
  background-color: #fff8e8;
  border-color: #f2e2bd;
}

.mbv-pastille-bleue {
  color: #1b5e8f;
  background-color: var(--mbv-bleu-pale);
  border-color: #bcdcf5;
}

.mbv-pastille-grise {
  color: #5a6b78;
  background-color: #f0f3f5;
  border-color: #dde4e8;
}

/* Les commandes a taper */
.mbv-commande {
  font-size: 0.8125rem;
  background-color: #f0f3f5;
  color: var(--mbv-encre);
  padding: 0.1875rem 0.4375rem;
  border-radius: 0.25rem;
}

/* Encadre de depot de l'affiche : tout le bloc est cliquable, le champ de
   fichier reel etant masque a l'interieur du label */
.mbv-depot-photo {
  display: block;
  width: 100%;
  min-height: 11rem;
  border: 2px dashed #ccd6dd;
  border-radius: 0.5rem;
  background-color: var(--mbv-fond);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  text-align: center;
}

.mbv-depot-photo:hover {
  border-color: var(--mbv-bleu);
  background-color: var(--mbv-bleu-pale);
}

/* Le contour de focus doit apparaitre sur l'encadre, puisque le champ qui
   recoit reellement le focus est masque. Le champ etant desormais hors du
   label -- il y etait associe deux fois et ouvrait deux selecteurs de fichier
   -- :focus-within ne le voit plus : la classe est posee par le script. */
.mbv-depot-photo:focus-within,
.mbv-depot-photo.est-focalisee {
  outline: 2px solid var(--mbv-bleu);
  outline-offset: 2px;
}

.mbv-depot-photo img {
  width: 100%;
  height: 11rem;
  object-fit: cover;
  display: block;
}

.mbv-depot-photo-vide {
  min-height: 11rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  color: var(--mbv-gris-texte);
}

.mbv-depot-photo-vide .bi {
  font-size: 1.75rem;
  color: var(--mbv-bleu);
}

/* Bandeau « changer » par-dessus l'affiche existante */
.mbv-depot-photo-texte {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.4375rem;
  background-color: rgba(44, 62, 80, 0.82);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
}

/* Les etats de l'encadre sont bascules par l'attribut hidden. Il faut le dire
   explicitement : la regle du navigateur pour [hidden] est moins specifique que
   nos propres display, qui l'emporteraient et laisseraient tout visible. */
.mbv-depot-photo [hidden],
.mbv-photo-pied[hidden],
.mbv-photo-erreur[hidden] {
  display: none !important;
}

/* Un fichier vient d'etre choisi : le pointille devient un trait plein vert. */
.mbv-depot-photo.est-choisie {
  border-style: solid;
  border-color: var(--mbv-vert);
  background-color: #fff;
}

.mbv-depot-photo-pastille {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-color: var(--mbv-vert);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Le nom du fichier retenu, sous l'encadre */
.mbv-photo-pied {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.625rem;
  padding: 0.5rem 0.75rem;
  background-color: var(--mbv-vert-pale);
  border-radius: 0.375rem;
  font-size: 0.875rem;
}

.mbv-photo-pied .bi-check-circle-fill {
  color: var(--mbv-vert-fonce);
  font-size: 1.125rem;
  flex: none;
}

/* min-width: 0 est indispensable : sans lui, un nom de fichier long pousse la
   colonne au lieu d'etre tronque. */
.mbv-photo-pied-nom {
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mbv-photo-pied-poids {
  color: var(--mbv-gris-texte);
  flex: none;
}

.mbv-photo-pied button {
  margin-left: auto;
  flex: none;
  border: 1px solid var(--mbv-bordure);
  background-color: #fff;
  border-radius: 0.375rem;
  padding: 0.2rem 0.55rem;
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  color: var(--mbv-gris-texte);
}

.mbv-photo-pied button:hover {
  color: #c0392b;
  border-color: #c0392b;
}

.mbv-photo-erreur {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.625rem;
  padding: 0.5rem 0.75rem;
  background-color: #fdecea;
  border-radius: 0.375rem;
  color: #c0392b;
  font-size: 0.875rem;
}

.mbv-photo-erreur .bi {
  flex: none;
  font-size: 1.0625rem;
}

/* --- Fiche d'une manifestation (site public) ----------------------------- */

/* L'affiche a gauche, le texte au milieu, les actions dans une colonne a leur
   mesure -- elles occupaient un tiers de la largeur pour deux boutons. */
.mbv-fiche-entete {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
}

.mbv-fiche-photo {
  flex: 0 0 auto;
  width: 150px;
  border-radius: 0.5rem;
  border: 1px solid var(--mbv-bordure);
  overflow: hidden;
  display: block;
}

.mbv-fiche-photo img,
img.mbv-fiche-photo {
  width: 150px;
  height: 150px;
  object-fit: cover;
  display: block;
}

.mbv-fiche-texte {
  /* flex: 999 pour que le texte absorbe la largeur disponible avant la colonne
     d'actions, qui garde sa taille */
  flex: 999 1 18rem;
  min-width: 0;
}

.mbv-fiche-actions {
  flex: 0 1 13rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (max-width: 575.98px) {
  /* Au telephone, l'affiche passe en pleine largeur plutot que de laisser une
     colonne de texte de deux mots a cote */
  .mbv-fiche-photo,
  .mbv-fiche-photo img,
  img.mbv-fiche-photo {
    width: 100%;
    height: auto;
  }

  .mbv-fiche-actions {
    flex-basis: 100%;
  }
}

/* --- Formulaire de manifestation ----------------------------------------- */

/* Entete de section numerotee : les vingt champs etaient a la suite, sans
   aucun repere */
.mbv-section-entete {
  padding: 1.125rem 1.5rem;
  border-bottom: 1px solid #eef2f4;
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.mbv-section-numero {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-color: var(--mbv-bleu-pale);
  color: #1b5e8f;
  font-weight: 900;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mbv-carte-geo {
  height: 300px;
  border-radius: 0.5rem;
  border: 1px solid #ccd6dd;
  background-color: #eef3f5;
}

/* La colonne de resume suit le defilement sur grand ecran : les boutons
   d'action restent atteignables sans redescendre tout le formulaire.
   Jamais sur petit ecran, ou elle masquerait la saisie. */
@media (min-width: 992px) {
  .mbv-colonne-resume {
    position: sticky;
    top: 1rem;
  }
}

.mbv-resume-tuile {
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--mbv-bordure);
  border-radius: 0.5rem;
  background-color: var(--mbv-fond);
}

.mbv-resume-bleu {
  background-color: var(--mbv-bleu-pale);
  border-color: #bcdcf5;
}

.mbv-resume-bleu .mbv-resume-nombre,
.mbv-resume-bleu .mbv-resume-libelle {
  color: #1b5e8f;
}

.mbv-resume-vert {
  background-color: var(--mbv-vert-pale);
  border-color: #b5ddc6;
}

.mbv-resume-vert .mbv-resume-nombre {
  color: #1d7a4c;
}

.mbv-resume-vert .mbv-resume-libelle {
  color: #39685c;
}

.mbv-resume-nombre {
  margin: 0 0 0.125rem;
  font-size: 1.625rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1;
}

.mbv-resume-libelle {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--mbv-gris-texte);
}

.mbv-resume-libelle span {
  opacity: 0.75;
}

/* --- Cartes de manifestation (association) ------------------------------- */

/* Bandeau de vente en cours : vert, large, lisible de loin -- cette page reste
   ouverte sur un coin d'ecran pendant toute la vente */
.mbv-bandeau-vente {
  background-color: var(--mbv-vert-pale);
  border: 1px solid #b5ddc6;
  border-left: 4px solid var(--mbv-vert);
  border-radius: 0.75rem;
  padding: 1rem 1.375rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.mbv-etat-vente {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #1d7a4c;
}

.mbv-pastille-vive {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--mbv-vert);
  display: block;
  flex-shrink: 0;
}

.mbv-vente-sous-titre {
  font-size: 0.9375rem;
  color: #39685c;
}

/* Pastille d'etat d'une caisse */
.mbv-pastille-caisse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--mbv-vert);
  display: inline-block;
  margin-right: 0.5rem;
  flex-shrink: 0;
}

/* Gris : rien d'encaisse depuis plus d'une heure. La difference se lit aussi a
   la clarte, pas seulement a la teinte. */
.mbv-pastille-caisse-dormante {
  background-color: #a9b7c0;
}

.mbv-jauge-verte {
  background-color: var(--mbv-vert) !important;
}

.mbv-jauge-ambre {
  background-color: #e0a82e !important;
}

.mbv-carte-danger {
  border-color: #f0dcdc;
}

/* Les quatre chiffres d'une manifestation : une tuile par chiffre, le nombre
   d'abord. Remplace quatre lignes de texte du genre « Nb liste : 33 ». */
.mbv-tuiles-manif {
  border-top: 1px solid #eef2f4;
  background-color: #fbfcfd;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .mbv-tuiles-manif {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.mbv-tuiles-manif > div {
  padding: 0.875rem 1.25rem;
  border-right: 1px solid #eef2f4;
  border-bottom: 1px solid #eef2f4;
}

@media (min-width: 768px) {
  .mbv-tuiles-manif > div {
    border-bottom: 0;
  }

  .mbv-tuiles-manif > div:last-child {
    border-right: 0;
  }
}

/* Variante a six tuiles, pour le bilan d'une bourse close : trois colonnes sur
   deux rangees. Le modificateur est necessaire -- la grille de base sert aussi
   a l'onglet « À venir », qui en porte quatre. */
@media (min-width: 768px) {
  .mbv-tuiles-manif-six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Le trait du bas revient : il separe les deux rangees. */
  .mbv-tuiles-manif-six > div {
    border-bottom: 1px solid #eef2f4;
  }

  .mbv-tuiles-manif-six > div:nth-child(3n) {
    border-right: 0;
  }

  .mbv-tuiles-manif-six > div:nth-last-child(-n + 3) {
    border-bottom: 0;
  }
}

.mbv-tuile-manif-nombre {
  margin: 0 0 0.125rem;
  font-size: 1.375rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1;
}

.mbv-tuile-manif-sur {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--mbv-gris-label);
}

.mbv-tuile-manif-libelle {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--mbv-gris-label);
}

/* Les lettres d'une manifestation, avec leur taux d'occupation */
.mbv-lettre {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  padding: 0.3125rem 0.625rem;
  border-radius: 0.375rem;
  border: 1px solid #b5ddc6;
  background-color: var(--mbv-vert-pale);
  color: #1d7a4c;
  font-weight: 900;
  font-size: 0.9375rem;
}

/* Complete : fond et texte changent ensemble, la couleur n'est pas le seul
   indice -- le compteur dit la meme chose en chiffres */
.mbv-lettre-complete {
  border-color: #f0d2d2;
  background-color: #fdf1f1;
  color: #7a2e2e;
}

.mbv-lettre-compte {
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.85;
}

/* --- Tableau de saisie des vetements ------------------------------------- */

.mbv-table-saisie thead th {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--mbv-gris-label);
  background-color: #fbfcfd;
  white-space: nowrap;
}

.mbv-table-saisie td {
  padding: 0.4375rem 0.625rem;
}

.mbv-table-saisie .form-control {
  padding: 0.5rem 0.6875rem;
  font-size: 0.9375rem;
}

/* Un tableau de saisie a besoin de largeurs stables, sinon les colonnes
   sautent d'une ligne a l'autre selon le contenu */
.mbv-table-saisie {
  min-width: 55rem;
}

.mbv-col-num {
  width: 3.5rem;
  text-align: center;
}

.mbv-num-ligne {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--mbv-gris-label);
}

.mbv-col-taille {
  width: 7rem;
}

.mbv-col-prix {
  width: 8rem;
}

.mbv-col-retrait {
  width: 3.25rem;
  text-align: center;
}

/* Le bouton de retrait reste discret : il sert dans le cas particulier d'une
   liste plus longue que le quota de la bourse choisie, pas a chaque saisie. */
.mbv-retirer-ligne {
  padding: 0.25rem 0.5rem;
  line-height: 1;
}

/* MoneyType rend le symbole dans un input-group : on garde le champ lisible */
.mbv-col-prix .input-group {
  flex-wrap: nowrap;
}

.mbv-col-prix input {
  text-align: right;
}

/* --- Encadre de la manifestation, espace deposant ----------------------- */

.mbv-bandeau-manif {
  border-left: 4px solid var(--mbv-bleu);
}

.mbv-manif-photo {
  flex-shrink: 0;
}

.mbv-manif-photo img,
img.mbv-manif-photo {
  width: 96px;
  height: 96px;
  object-fit: cover;
}

.mbv-manif-corps {
  /* flex: 999 pour que le corps absorbe la place avant la colonne d'actions */
  flex: 999 1 20rem;
  min-width: 0;
}

.mbv-label-vert {
  color: var(--mbv-vert-fonce);
}

/* Les trois dates, en colonnes plutot qu'en phrases */
.mbv-manif-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 1.125rem 0 0;
}

.mbv-manif-dates dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--mbv-gris-label);
}

.mbv-manif-dates dd {
  margin: 0.125rem 0 0;
  font-size: 0.9375rem;
  font-weight: 700;
}

.mbv-manif-actions {
  flex: 1 1 13rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mbv-manif-actions .btn {
  text-align: left;
}

/* La desinscription est une action rare : elle ne doit pas peser autant
   qu'un bouton plein */
.mbv-lien-sobre {
  color: var(--mbv-gris-texte);
  font-size: 0.875rem;
  text-decoration: underline;
  padding-left: 0;
  padding-right: 0;
}

.mbv-lien-sobre:hover {
  color: #7a2e2e;
}

/* Les quotas : des chiffres sur une bande de pied */
.mbv-manif-quotas {
  border-top: 1px solid #eef2f4;
  background-color: #fbfcfd;
  border-radius: 0 0 0.75rem 0.75rem;
  padding: 0.875rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  font-size: 0.875rem;
  color: var(--mbv-gris-texte);
}

.mbv-manif-quotas > div {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.mbv-manif-quotas strong {
  font-size: 1.375rem;
  font-weight: 900;
  color: var(--mbv-bleu-texte);
}

.mbv-manif-quota-moi {
  margin-left: auto;
}

.mbv-manif-quota-moi strong {
  color: var(--mbv-vert-fonce);
}

/* Recherche de bourse, quand on n'est inscrit nulle part */
.mbv-recherche-bourse input {
  max-width: 22rem;
}

/* --- Etiquettes : ecran -------------------------------------------------- */

/* Rappel du recapitulatif, sous la barre d'action */
.mbv-rappel-recap {
  padding: 0.6875rem 1rem;
  border-top: 1px solid #eef2f4;
  background-color: #fff8e8;
  color: #6b5210;
}

.mbv-rappel-recap .bi {
  flex-shrink: 0;
}

/* Conseils d'impression, replies par defaut */
.mbv-conseils {
  border-top: 1px solid #eef2f4;
}

.mbv-conseils > summary {
  padding: 0.8125rem 1rem;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--mbv-bleu-texte);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
}

.mbv-conseils > summary::-webkit-details-marker {
  display: none;
}

.mbv-conseils[open] > summary .bi-chevron-right {
  transform: rotate(90deg);
}

.mbv-conseils > summary .bi-chevron-right {
  transition: transform 0.15s ease;
}

.mbv-conseils > ul {
  padding: 0 1rem 1.125rem 2.75rem;
  margin: 0;
  color: var(--mbv-gris-texte);
  font-size: 0.9375rem;
}

.mbv-conseils > ul > li + li {
  margin-top: 0.4375rem;
}

/* La grille : 4 colonnes a l'ecran, 2 au telephone */
.mbv-grille-etiquettes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
}

@media (min-width: 576px) {
  .mbv-grille-etiquettes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .mbv-grille-etiquettes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Une etiquette */
.mbv-etiquette {
  position: relative;
  background-color: #fff;
  border: 1px solid #9aa8b2;
  border-radius: 0.25rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Une etiquette ne doit jamais etre coupee en deux par un saut de page */
  page-break-inside: avoid;
  break-inside: avoid;
}

.mbv-etiquette-entete {
  padding: 0.3125rem 0.5rem;
  border-bottom: 1px solid #c9d3da;
  background-color: #f4f7f9;
  font-size: 0.75rem;
  font-weight: 700;
  /* Un nom de modele trop long ne doit pas faire grandir l'etiquette */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Seul le corps recule a gauche, de la largeur du point : l'entete et le pied
   gardent toute la largeur de l'etiquette */
.mbv-etiquette-corps {
  padding: 0.5rem 0.5rem 0.5rem 1.6875rem;
}

.mbv-etiquette-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.mbv-etiquette-ref {
  min-width: 0;
  font-size: 1.0625rem;
  font-weight: 900;
  letter-spacing: -0.3px;
  white-space: nowrap;
}

/* LE REPERE DE PERCAGE
   Pose en absolu, centre sur la hauteur de l'etiquette et decale de 7px du
   bord : aucune colonne ne lui est reservee. C'est la qu'on perce, au milieu
   du bord gauche, pour que l'etiquette pende droit.
   Dessine en CSS plutot qu'en image : net a toute resolution, sans requete
   reseau et sans dependre de rond14x14.png. */
.mbv-point-perce {
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #000;
}

.mbv-etiquette-prix {
  font-size: 1.1875rem;
  font-weight: 900;
  white-space: nowrap;
}

.mbv-etiquette-codebarre {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.mbv-etiquette-codebarre svg {
  max-width: 100%;
  height: auto;
}

.mbv-etiquette-pied {
  margin-top: auto;
  padding: 0.3125rem 0.5rem;
  border-top: 1px solid #c9d3da;
  background-color: #f4f7f9;
  font-size: 0.6875rem;
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
}

.mbv-etiquette-marque {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Entete et pied de la page imprimee */
.mbv-entete-impression {
  display: none;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid #000;
  padding-bottom: 0.25rem;
  margin-bottom: 0.625rem;
  font-size: 0.625rem;
}

.mbv-pied-impression {
  margin-top: 0.625rem;
  text-align: center;
  font-size: 0.5rem;
  color: #555;
}

/* --- Recapitulatif du deposant ------------------------------------------- */

/* Ce n'est pas une page web mais un document a imprimer : traits noirs, pas de
   fond de couleur, et une largeur de feuille plutot que de navigateur. */
.mbv-recap {
  max-width: 48rem;
  margin: 0 auto;
  font-size: 0.8125rem;
  color: #000;
}

.mbv-recap-label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #555;
}

.mbv-recap-lignes {
  font-size: 0.6875rem;
  line-height: 1.6;
}

.mbv-recap-entete {
  display: flex;
  align-items: stretch;
  border: 2px solid #000;
  border-radius: 0.1875rem;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.mbv-recap-manif {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.625rem 0.875rem;
}

.mbv-recap-titre {
  font-size: 0.9375rem;
  font-weight: 900;
}

.mbv-recap-ref {
  flex: 0 0 11.5rem;
  border-left: 2px solid #000;
  padding: 0.625rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
}

.mbv-recap-ref-valeur {
  margin: 0;
  font-size: 1.625rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1;
}

.mbv-recap-codebarre svg {
  max-width: 100%;
  height: auto;
}

.mbv-recap-rangee {
  display: flex;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}

.mbv-recap-bloc {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid #000;
  border-radius: 0.1875rem;
  padding: 0.5rem 0.75rem;
}

.mbv-recap-bloc-cases {
  flex: 0 0 11.5rem;
}

.mbv-recap-nom {
  font-size: 0.8125rem;
  font-weight: 900;
}

.mbv-recap-case {
  font-size: 0.6875rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* Une case a cocher dessinee, et non une icone de police : elle s'imprime
   toujours, meme quand le navigateur refuse de charger la police d'icones */
.mbv-case {
  width: 11px;
  height: 11px;
  border: 1px solid #000;
  display: inline-block;
  flex-shrink: 0;
}

.mbv-recap-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.625rem;
  margin-bottom: 0.75rem;
}

.mbv-recap-table caption {
  caption-side: top;
  text-align: left;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #555;
  padding-bottom: 0.25rem;
}

.mbv-recap-table th,
.mbv-recap-table td {
  border: 1px solid #000;
  padding: 0.25rem 0.3125rem;
  text-align: left;
}

.mbv-recap-table thead th,
.mbv-recap-table tfoot td {
  background-color: #eee;
}

.mbv-recap-table tbody tr {
  /* Une ligne d'article ne doit pas se couper entre deux pages */
  page-break-inside: avoid;
  break-inside: avoid;
}

.mbv-recap-c-num {
  width: 1.625rem;
}

.mbv-recap-c-taille {
  width: 3rem;
}

.mbv-recap-c-prix {
  width: 2.5rem;
  text-align: right;
}

.mbv-recap-c-case {
  width: 2.25rem;
  text-align: center;
}

.mbv-recap-conditions {
  margin-bottom: 0.75rem;
}

.mbv-recap-signatures .mbv-recap-bloc {
  height: 4.125rem;
}

.mbv-recap-pied {
  margin: 0.5rem 0 0;
  text-align: center;
  font-size: 0.5rem;
  color: #555;
}

/* --- Sommes a reverser aux deposants ------------------------------------- */

.mbv-table-reversement .mbv-reversement-net {
  font-weight: 900;
  font-size: 1.0625rem;
  color: var(--mbv-vert-fonce);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mbv-table-reversement td {
  font-variant-numeric: tabular-nums;
}

/* Un deposant qui n'a rien vendu reste dans la liste -- il vient chercher ses
   invendus -- mais ne doit pas retenir l'oeil de celui qui paie. */
.mbv-reversement-sans-vente {
  color: var(--mbv-gris-texte);
}

.mbv-reversement-sans-vente .mbv-reversement-net {
  color: var(--mbv-gris-label);
  font-weight: 400;
}

/* La reference d'une liste et ce qu'elle a rapporte, d'un bloc : c'est ce
   qu'on verifie quand un deposant conteste un montant, sa fiche en main. */
.mbv-reversement-liste {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--mbv-bordure);
  border-radius: 0.3rem;
  white-space: nowrap;
}

.mbv-reversement-liste.a-vendu {
  border-color: var(--mbv-vert);
  background-color: var(--mbv-vert-pale);
}

.mbv-reversement-liste-valeur {
  font-weight: 400;
  color: var(--mbv-gris-texte);
}

.mbv-reversement-liste.a-vendu .mbv-reversement-liste-valeur {
  color: var(--mbv-vert-fonce);
  font-weight: 700;
}

@media print {
  /* La colonne d'emargement : une case vide, assez large pour une signature. */
  .mbv-col-emargement {
    width: 7rem;
    border-bottom: 1px solid #000;
  }

  .mbv-table-reversement {
    font-size: 10pt;
  }

  .mbv-table-reversement td,
  .mbv-table-reversement th {
    padding: 0.35rem 0.4rem;
  }

  /* Une ligne ne doit pas se couper entre deux pages : on signe en face du
     nom. */
  .mbv-table-reversement tr {
    page-break-inside: avoid;
  }

  /* L'outil de recherche de DataTables n'a rien a faire sur le papier. */
  .dataTables_filter,
  .dataTables_length,
  .dataTables_paginate {
    display: none !important;
  }
}

/* --- Suivi de vente du deposant ------------------------------------------
   Pendant la bourse, le deposant revient plusieurs fois dans la journee. Le
   premier chiffre repond a sa question : ce qui lui revient. */

.mbv-vente-entete {
  background: linear-gradient(135deg, var(--mbv-vert-fonce), var(--mbv-vert));
  color: #fff;
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

.mbv-vente-etat {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 0.625rem;
}

/* Le point qui bat dit que la vente tourne, sans promettre du temps reel :
   la page se rafraichit quand on la recharge. */
.mbv-pouls {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.85);
  animation: mbv-pouls 2s infinite;
}

@keyframes mbv-pouls {
  70% {
    box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mbv-pouls {
    animation: none;
  }
}

.mbv-vente-lieu {
  color: #d7f2e3;
  font-size: 0.9375rem;
  margin-top: 0.25rem;
}

.mbv-vente-chiffres {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  background-color: rgba(255, 255, 255, 0.28);
  border-radius: 0.5rem;
  overflow: hidden;
  margin-top: 1.25rem;
}

.mbv-vente-chiffre {
  background-color: rgba(0, 0, 0, 0.14);
  padding: 0.875rem 1rem;
  min-width: 0;
}

.mbv-vente-chiffre.est-principal {
  background-color: rgba(255, 255, 255, 0.18);
}

.mbv-vente-chiffre .mbv-label {
  color: #cdeedd;
}

.mbv-vente-valeur {
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1.1;
  margin: 0.125rem 0 0;
  font-variant-numeric: tabular-nums;
}

.mbv-vente-sur {
  font-size: 1rem;
  font-weight: 400;
}

.mbv-vente-sous {
  font-size: 0.8125rem;
  color: #d7f2e3;
}

/* Une liste = un bloc depliable. Ferme, il donne l'essentiel. */
.mbv-liste-bloc {
  margin-bottom: 0.875rem;
  overflow: hidden;
}

.mbv-liste-bloc > summary {
  list-style: none;
}

.mbv-liste-bloc > summary::-webkit-details-marker {
  display: none;
}

.mbv-liste-tete {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
}

.mbv-liste-tete:hover {
  background-color: var(--mbv-fond);
}

.mbv-liste-bloc > summary:focus-visible {
  outline: 2px solid var(--mbv-bleu);
  outline-offset: -2px;
}

.mbv-liste-ref {
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 0.625rem;
  background-color: var(--mbv-bleu-pale);
  color: var(--mbv-bleu-texte);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  line-height: 1;
}

.mbv-liste-lettre {
  font-size: 1.25rem;
}

.mbv-liste-numero {
  font-size: 0.6875rem;
  letter-spacing: 0.5px;
}

.mbv-liste-corps {
  flex: 1 1 auto;
  /* Sans cela un nom de liste long elargit la ligne au lieu de se replier */
  min-width: 0;
}

.mbv-liste-nom {
  display: block;
  font-weight: 700;
}

.mbv-liste-jauge {
  display: block;
  height: 0.5rem;
  background-color: var(--mbv-bordure);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 0.4rem;
}

.mbv-liste-jauge > span {
  display: block;
  height: 100%;
  background-color: var(--mbv-vert);
  border-radius: 999px;
}

.mbv-liste-sous {
  display: block;
  font-size: 0.8125rem;
  color: var(--mbv-gris-texte);
  margin-top: 0.3rem;
}

.mbv-liste-gain {
  flex: none;
  text-align: right;
}

.mbv-liste-montant {
  display: block;
  font-size: 1.375rem;
  font-weight: 900;
  color: var(--mbv-vert-fonce);
  font-variant-numeric: tabular-nums;
}

/* L'ecart entre le brut et le net, a cote du chiffre qui l'affiche. Garde une
   largeur de ligne pour ne pas se couper n'importe ou. */
.mbv-liste-part {
  display: block;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--mbv-gris-texte);
  margin-top: 0.2rem;
  max-width: 11rem;
}

.mbv-liste-chevron {
  flex: none;
  color: var(--mbv-gris-label);
  transition: transform 0.15s;
}

.mbv-liste-bloc[open] .mbv-liste-chevron {
  transform: rotate(180deg);
}

.mbv-liste-detail {
  border-top: 1px solid var(--mbv-bordure);
  background-color: var(--mbv-fond);
}

.mbv-table-vetements {
  font-size: 0.9375rem;
}

.mbv-table-vetements th {
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--mbv-gris-label);
  white-space: nowrap;
}

.mbv-table-vetements .mbv-vetement-num {
  color: var(--mbv-gris-label);
  font-weight: 700;
}

.mbv-table-vetements .mbv-vetement-ref {
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.mbv-table-vetements .mbv-vetement-prix {
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.mbv-table-vetements tr.est-vendu {
  background-color: rgba(39, 174, 96, 0.07);
}

/* --- Mode caisse ---------------------------------------------------------
   Le seul ecran du site utilise debout, vite, avec la queue devant soi. Les
   tailles sortent de la : ce qu'on lit a un metre est gros, le reste est
   discret. */

.mbv-caisse {
  background-color: var(--mbv-fond);
  padding-block: 1.5rem;
  min-height: 70vh;
}

/* L'entete : quel poste, quelle bourse */
.mbv-caisse-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  background-color: var(--mbv-encre);
  color: #fff;
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.mbv-caisse-numero {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.375rem;
  font-weight: 900;
}

.mbv-caisse-jeton {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.625rem;
  background-color: var(--mbv-vert);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex: none;
}

.mbv-caisse-manif {
  display: block;
  font-size: 0.875rem;
  font-weight: 400;
  color: #b9c6d1;
}

.mbv-caisse-bascule {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.mbv-caisse-bascule .mbv-label {
  color: #8fa3b4;
  margin-right: 0.25rem;
}

.mbv-caisse-bascule a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9375rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.4rem;
  min-width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mbv-caisse-bascule a:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.mbv-caisse-bascule a.est-actif {
  background-color: var(--mbv-vert);
  border-color: var(--mbv-vert);
}

.mbv-caisse-sortie {
  margin-left: 0.375rem;
}

.mbv-caisse-grille {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr) 20rem;
}

@media (max-width: 991.98px) {
  .mbv-caisse-grille {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* La saisie : le seul element qu'on regarde en scannant */
.mbv-caisse-saisie {
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.mbv-caisse-saisie label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.mbv-caisse-saisie-ligne {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.mbv-caisse-reference {
  flex: 1 1 12rem;
  min-width: 0;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
  border: 2px solid var(--mbv-bleu);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  height: auto;
}

.mbv-caisse-reference:focus {
  border-color: var(--mbv-bleu);
  outline: 3px solid var(--mbv-bleu-pale);
  outline-offset: 1px;
  box-shadow: none;
}

.mbv-caisse-ajouter {
  font-size: 1.0625rem;
  padding: 0.6rem 1.5rem;
  flex: none;
}

.mbv-caisse-aide {
  font-size: 0.8125rem;
  color: var(--mbv-gris-texte);
  margin: 0.625rem 0 0;
}

/* Le retour du dernier passage : lisible a un metre, pas en petit bandeau */
.mbv-caisse-retour {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin-top: 0.875rem;
  font-size: 1rem;
}

.mbv-caisse-retour .bi {
  font-size: 1.5rem;
  flex: none;
}

.mbv-caisse-retour.est-ok {
  background-color: var(--mbv-vert-pale);
  color: var(--mbv-vert-fonce);
}

.mbv-caisse-retour.est-ko {
  background-color: #fdecea;
  color: #c0392b;
}

/* Le panier : des lignes hautes, lisibles debout */
.mbv-caisse-panier {
  overflow: hidden;
}

.mbv-caisse-panier-entete {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--mbv-bordure);
}

.mbv-caisse-compte {
  background-color: var(--mbv-bleu-pale);
  color: var(--mbv-bleu-texte);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-weight: 900;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.mbv-caisse-ligne {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid #eef2f4;
}

.mbv-caisse-ligne:last-child {
  border-bottom: 0;
}

/* L'article qui vient d'entrer : on le voit sans relire la liste */
.mbv-caisse-ligne.est-nouvelle {
  background-color: var(--mbv-vert-pale);
}

.mbv-caisse-ref {
  font-size: 1.0625rem;
  font-weight: 900;
  letter-spacing: 1px;
  flex: none;
  min-width: 5.5rem;
  font-variant-numeric: tabular-nums;
}

.mbv-caisse-desc {
  flex: 1 1 auto;
  /* Sans cela une description longue elargit la ligne au lieu de se replier */
  min-width: 0;
}

.mbv-caisse-modele {
  display: block;
  font-weight: 700;
}

.mbv-caisse-detail {
  display: block;
  font-size: 0.8125rem;
  color: var(--mbv-gris-texte);
}

.mbv-caisse-prix {
  font-size: 1.125rem;
  font-weight: 900;
  flex: none;
  font-variant-numeric: tabular-nums;
}

.mbv-caisse-retirer {
  flex: none;
  border: 1px solid var(--mbv-bordure);
  background-color: #fff;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.4rem;
  color: var(--mbv-gris-label);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mbv-caisse-retirer:hover {
  color: #c0392b;
  border-color: #c0392b;
}

.mbv-caisse-panier-vide {
  padding: 2.5rem 1.25rem;
  text-align: center;
  color: var(--mbv-gris-texte);
}

.mbv-caisse-panier-vide .bi {
  font-size: 2rem;
  color: var(--mbv-bordure);
  display: block;
  margin-bottom: 0.5rem;
}

/* Le total : c'est le chiffre qu'on annonce au client */
.mbv-caisse-total {
  padding: 1.25rem;
  position: sticky;
  top: 1rem;
}

.mbv-caisse-montant {
  font-size: 3.25rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
  margin: 0.25rem 0 0;
  font-variant-numeric: tabular-nums;
}

.mbv-caisse-articles {
  color: var(--mbv-gris-texte);
  font-size: 0.9375rem;
  margin: 0.25rem 0 0;
}

.mbv-caisse-payer,
.mbv-caisse-vider {
  width: 100%;
  margin-top: 1rem;
  font-size: 1.125rem;
  padding: 0.8rem;
}

.mbv-caisse-vider {
  margin-top: 0.5rem;
  font-size: 1rem;
  padding: 0.5rem;
  border: 1px solid #e4a9a2;
  background-color: #fff;
  color: #c0392b;
}

.mbv-caisse-vider:hover {
  border-color: #c0392b;
  background-color: #fdecea;
  color: #c0392b;
}

.mbv-caisse-bilan {
  border-top: 1px solid var(--mbv-bordure);
  margin-top: 1rem;
  padding-top: 1rem;
}

.mbv-caisse-bilan-montant {
  font-size: 1.25rem;
  font-weight: 900;
  margin: 0.25rem 0 0;
  font-variant-numeric: tabular-nums;
}

/* --- Choix du poste de caisse -------------------------------------------- */

/* Le bandeau se lit de haut en bas : le titre de la bourse sur toute la
   largeur, puis la rangee des actions. Les empiler plutot que les mettre en
   colonnes garde le titre lisible d'un coup d'oeil -- cette page reste ouverte
   sur un coin d'ecran pendant toute la vente. */
.mbv-bandeau-vente-info {
  flex: 1 1 100%;
  min-width: 0;
}

/* La rangee d'actions : les caisses a gauche, la fin de journee a droite. */
.mbv-bandeau-vente-actions {
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: flex-start;
  justify-content: space-between;
  border-top: 1px solid #b5ddc6;
  padding-top: 0.875rem;
}

.mbv-choix-caisse {
  min-width: 0;
}

/* Seul le bloc de fin de journee est aligne a droite, et seulement tant que
   les deux tiennent sur la meme ligne : replies, ils se lisent a gauche comme
   le reste. */
@media (min-width: 768px) {
  .mbv-choix-caisse-fin {
    text-align: right;
  }

  .mbv-choix-caisse-fin .d-flex {
    justify-content: flex-end;
  }
}

/* --- Bascule entre les deux pages d'aide --------------------------------- */

.mbv-onglets-aide {
  background-color: #fff;
  border-bottom: 1px solid var(--mbv-bordure);
}

.mbv-onglets-aide .container {
  display: flex;
  /* Les deux pavés se partagent la largeur a egalite, et passent l'un sous
     l'autre sur telephone. */
  flex-wrap: wrap;
  gap: 0;
}

.mbv-onglet-aide {
  flex: 1 1 18rem;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: var(--mbv-gris-texte);
  /* Le trait du bas marque l'onglet courant : transparent ailleurs, pour que
     le texte ne se decale pas d'un onglet a l'autre. */
  border-bottom: 3px solid transparent;
}

.mbv-onglet-aide:hover {
  background-color: var(--mbv-fond);
  color: var(--mbv-encre);
}

.mbv-onglet-aide > .bi {
  font-size: 1.25rem;
  flex: none;
  line-height: 1.4;
}

.mbv-onglet-aide strong {
  display: block;
  color: var(--mbv-encre);
  font-size: 1rem;
}

.mbv-onglet-aide-sous {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.mbv-onglet-aide.est-actif {
  border-bottom-color: var(--mbv-bleu);
  background-color: var(--mbv-bleu-pale);
}

.mbv-onglet-aide.est-actif > .bi,
.mbv-onglet-aide.est-actif strong {
  color: var(--mbv-bleu-texte);
}

/* --- Cloche de notification --------------------------------------------- */

/* Le badge se place par rapport a l'icone, pas par rapport au lien du menu :
   la hauteur du nav-link inclut son rembourrage vertical, et un badge cale sur
   son coin haut-droit flotte au-dessus de la cloche sans la toucher. */
.mbv-cloche {
  position: relative;
  display: inline-block;
  line-height: 1;
}

.mbv-cloche-badge {
  position: absolute;
  top: -0.3125rem;
  left: 100%;
  transform: translateX(-45%);
  font-size: 0.625rem;
  line-height: 1;
  padding: 0.2rem 0.35rem;
  /* Le badge ne doit jamais elargir le menu. */
  pointer-events: none;
}

/* --- Page d'accueil ------------------------------------------------------ */

/* Le surtitre du bandeau : il nomme le service avant que le titre ne nomme
   l'action. */
.mbv-bandeau-role {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #cfe8f8;
}

/* Les trois temps du deroule, dans le bandeau bleu */
.mbv-temps {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  padding-top: 1.5rem;
}

.mbv-temps-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  /* Un titre long doit se replier dans sa colonne, pas l'elargir. */
  min-width: 0;
}

.mbv-temps-numero {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-color: #fff;
  color: var(--mbv-bleu-texte);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 900;
}

.mbv-temps-item h3 {
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0 0 0.125rem;
  color: #fff;
}

.mbv-temps-item p {
  font-size: 0.875rem;
  color: #dceaf6;
  margin: 0;
}

/* Les jetons d'icone des six encarts. Ils remplacent six images de 104 px :
   nets a toutes les tailles, et aux couleurs du site. */
.mbv-jeton {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.625rem;
}

.mbv-jeton-bleu {
  background-color: var(--mbv-bleu-pale);
  color: var(--mbv-bleu-texte);
}

.mbv-jeton-vert {
  background-color: var(--mbv-vert-pale);
  color: var(--mbv-vert-fonce);
}

/* --- « Qu'est-ce qu'une bourse aux vetements ? » ------------------------- */

/* Les quatre temps, sur le fond encre. Chaque etape dit qui agit : c'est la
   seule chose que le lecteur cherche vraiment. */
.mbv-frise {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.mbv-frise-etape {
  background-color: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 0.625rem;
  padding: 1.125rem;
  min-width: 0;
}

.mbv-frise-etape > .bi {
  font-size: 1.375rem;
  color: #8fcdf3;
}

.mbv-frise-qui {
  display: block;
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 0.625rem 0 0.25rem;
}

.mbv-frise-qui-asso {
  color: #8fcdf3;
}

.mbv-frise-qui-user {
  color: #8ddcae;
}

.mbv-frise-etape h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.375rem;
  color: #fff;
}

.mbv-frise-etape p {
  font-size: 0.875rem;
  color: #c3cfd9;
  margin: 0;
}

/* L'exemple chiffre : c'est lui qui fait comprendre le principe d'un coup. */
.mbv-compte {
  border-top: 1px solid var(--mbv-bordure);
}

.mbv-compte-ligne {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--mbv-bordure);
  font-size: 0.9375rem;
}

.mbv-compte-ligne .mbv-compte-libelle {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--mbv-gris-texte);
}

.mbv-compte-ligne .mbv-compte-valeur {
  font-weight: 700;
  /* Les chiffres doivent s'aligner en colonne. */
  font-variant-numeric: tabular-nums;
  flex: none;
}

.mbv-compte-ligne.mbv-compte-total {
  border-bottom: 0;
  font-size: 1.0625rem;
}

.mbv-compte-total .mbv-compte-libelle {
  color: var(--mbv-encre);
  font-weight: 700;
}

.mbv-compte-gain {
  color: var(--mbv-vert-fonce);
}

.mbv-compte-frais {
  color: #c0392b;
}

.mbv-lexique dl {
  display: grid;
  gap: 0.75rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 0;
}

.mbv-lexique dt {
  font-weight: 700;
  font-size: 0.9375rem;
}

.mbv-lexique dd {
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  color: var(--mbv-gris-texte);
}

/* --- Impression ---------------------------------------------------------- */

@media print {
  .mbv-sans-impression,
  .navbar,
  .mbv-pied,
  #mbv-toasts {
    display: none !important;
  }

  a[href]::after {
    content: none !important;
  }

  /* Bootstrap fournit d-print-flex mais pas pour un element qui etait en
     d-none : on force l'affichage de l'entete de page ici. */
  .mbv-entete-impression.d-print-flex {
    display: flex !important;
  }

  @page {
    size: A4;
    margin: 8mm;
  }

  body {
    background: #fff;
  }

  .mbv-page-etiquettes {
    /* Sur le papier on reprend toute la largeur utile de la feuille */
    max-width: none;
    width: 100%;
    padding: 0 !important;
  }

  /* Deux colonnes sur le papier : 14 etiquettes tiennent sur une page A4,
     ce qui est le format que les associations utilisent. */
  .mbv-grille-etiquettes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2mm;
  }

  .mbv-etiquette {
    border-color: #000;
    /* Les fonds gris clair ne s'impriment pas chez tout le monde : on les
       enleve pour que le trait de separation suffise. */
    background: #fff;
  }

  .mbv-etiquette-entete,
  .mbv-etiquette-pied {
    background: #fff;
    border-color: #777;
  }

  .mbv-etiquette-entete {
    font-size: 8pt;
  }

  .mbv-etiquette-ref {
    font-size: 11pt;
  }

  .mbv-etiquette-corps {
    padding-left: 1.1875rem;
  }

  .mbv-etiquette-prix {
    font-size: 13pt;
  }

  .mbv-etiquette-pied {
    font-size: 7pt;
  }

  /* Le recapitulatif reprend toute la feuille */
  .mbv-page-recap {
    max-width: none;
    width: 100%;
    padding: 0 !important;
  }

  .mbv-recap {
    max-width: none;
  }

  .mbv-recap-table thead {
    /* L'entete se repete en haut de chaque page quand la liste est longue */
    display: table-header-group;
  }

  .mbv-point-perce {
    left: 6px;
    width: 11px;
    height: 11px;
    /* Sans cela, certains navigateurs n'impriment pas les fonds de couleur
       et le rond disparaitrait. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* --- Listes inscrites : recherche rapide ---------------------------------- */

.mbv-recherche-listes {
  flex: 0 1 20rem;
  min-width: 14rem;
}

/* --- Liste inscrite : references figees ----------------------------------- */

/* La colonne porte la reference complete (« B-12-15 ») et non plus un numero
   de ligne : elle s'elargit. */
.mbv-col-ref {
  width: 6.5rem;
  white-space: nowrap;
}

.mbv-ref-figee {
  font-variant-numeric: tabular-nums;
  color: var(--mbv-encre);
}

.mbv-ligne-nouvelle {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--mbv-vert-fonce);
}

/* --- Etiquettes : choix de celles a imprimer ------------------------------- */

.mbv-choix-etiquettes {
  padding: 0.75rem 1rem;
  border-top: 1px solid #eef2f4;
}

/* La case, dans le coin de l'etiquette : a l'ecran seulement. */
.mbv-etiquette-choix {
  position: absolute;
  top: 0.25rem;
  right: 0.35rem;
  z-index: 2;
  margin: 0;
  cursor: pointer;
}

.mbv-etiquette-choix .form-check-input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  cursor: pointer;
}

/* L'entete laisse la place de la case, pour qu'un long nom de modele ne passe
   pas dessous. */
.mbv-etiquette .mbv-etiquette-entete {
  padding-right: 1.75rem;
}

/* Ecartee : visible a l'ecran mais estompee, absente du papier. */
.mbv-etiquette.est-ecartee {
  opacity: 0.35;
}

@media print {
  .mbv-etiquette.est-ecartee {
    display: none !important;
  }

  .mbv-etiquette .mbv-etiquette-entete {
    padding-right: 0.5rem;
  }
}

/* --- Tableau de bord : titres des encadres d'alerte ------------------------
   Chaque titre reprend la couleur de son encadre : on sait d'un coup d'oeil
   que l'ambre parle des deposants, le rouge des associations, le bleu des
   manifestations. */

.mbv-titre-alerte {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 900;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  padding-left: 0.25rem;
}

.mbv-titre-ambre {
  color: #7b5c12;
}

.mbv-titre-rouge {
  color: #8a3c3c;
}

.mbv-titre-bleu {
  color: #1b5e8f;
}

/* --- Tableau de bord : bourses en cours ------------------------------------
   Une colonne : l'encadre partage la rangee avec le palmares. */

.mbv-grille-encours {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

/* Histogramme resserre, pour l'encadre etroit des inscriptions : douze mois
   dans un quart de largeur. */
.mbv-histogramme-compact {
  gap: 0.2rem;
  height: 9rem;
}

.mbv-histogramme-compact .mbv-histo-valeur {
  font-size: 0.625rem;
}

.mbv-histogramme-compact .mbv-histo-libelle {
  font-size: 0.5625rem;
  letter-spacing: -0.2px;
}

/* Pastille rouge : un compte bloque par l'administration. */
.mbv-pastille-rouge {
  color: #7a2e2e;
  background-color: #fdf1f1;
  border-color: #f0d2d2;
}

/* ==========================================================================
   TELEPHONE
   ========================================================================== */

/* Un tableau trop large defile DANS son cadre, pas la page entiere.
   Bootstrap ne place pas .table-responsive en position relative : un element
   en position absolue a l'interieur -- les libelles .visually-hidden destines
   aux lecteurs d'ecran, dans un <caption> ou un <th> -- prenait alors la page
   pour reference, echappait au cadre, et elargissait toute la page sur
   telephone. Toute la page glissait de gauche a droite. */
.table-responsive {
  position: relative;
}

/* --- Saisie des vetements : une carte par article ------------------------
   Sur ordinateur, un tableau de six colonnes. Sur telephone, ce tableau
   faisait 55 rem de large : on ne voyait que le modele et la moitie de la
   marque, et il fallait faire glisser le tableau a chaque champ, quinze fois
   par liste. Chaque ligne devient une petite carte de quatre rangees :

        Ref. / N°                  [x]
        Modele
        Marque          Couleur / motif
        Taille          Prix

   Le balisage ne change pas : meme formulaire, memes champs, et les lignes
   ajoutees par le script prennent la meme forme. Les intitules des colonnes,
   masques, sont repris au-dessus de chaque champ. */
@media (max-width: 767.98px) {
  .mbv-table-saisie {
    min-width: 0;
  }

  .mbv-table-saisie thead {
    display: none;
  }

  .mbv-table-saisie,
  .mbv-table-saisie tbody {
    display: block;
  }

  .mbv-table-saisie tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "ref     retrait"
      "modele  modele"
      "marque  couleur"
      "taille  prix";
    gap: 0.5rem 0.75rem;
    padding: 0.875rem 1rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
  }

  .mbv-table-saisie tbody tr:nth-child(even) {
    background-color: #fbfcfd;
  }

  .mbv-table-saisie tbody td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
  }

  .mbv-table-saisie tbody td:nth-child(1) { grid-area: ref; align-self: center; }
  .mbv-table-saisie tbody td:nth-child(2) { grid-area: modele; }
  .mbv-table-saisie tbody td:nth-child(3) { grid-area: marque; }
  .mbv-table-saisie tbody td:nth-child(4) { grid-area: couleur; }
  .mbv-table-saisie tbody td:nth-child(5) { grid-area: taille; }
  .mbv-table-saisie tbody td:nth-child(6) { grid-area: prix; }
  .mbv-table-saisie tbody td:nth-child(7) { grid-area: retrait; justify-self: end; align-self: center; }

  .mbv-table-saisie tbody td:nth-child(n+2):nth-child(-n+6)::before {
    display: block;
    margin-bottom: 0.1875rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--mbv-gris-label);
  }

  .mbv-table-saisie tbody td:nth-child(2)::before { content: "Modèle"; }
  .mbv-table-saisie tbody td:nth-child(3)::before { content: "Marque"; }
  .mbv-table-saisie tbody td:nth-child(4)::before { content: "Couleur / motif"; }
  .mbv-table-saisie tbody td:nth-child(5)::before { content: "Taille"; }
  .mbv-table-saisie tbody td:nth-child(6)::before { content: "Prix"; }

  /* Le numero de ligne, seul en tete de carte, se lit comme un titre */
  .mbv-table-saisie .mbv-num-ligne {
    font-size: 1rem;
    color: var(--mbv-encre);
  }

  .mbv-table-saisie .mbv-num-ligne:not(.mbv-ref-figee):not(.mbv-ligne-nouvelle)::before {
    content: "Article ";
    font-weight: 400;
    color: var(--mbv-gris-label);
  }

  /* 16 px au moins : en dessous, Safari sur iPhone zoome la page a chaque
     champ touche, et il faut dezoomer pour passer au suivant. */
  .mbv-table-saisie .form-control {
    font-size: 1rem;
  }

  .mbv-retirer-ligne {
    padding: 0.375rem 0.625rem;
  }
}

/* --- Tableau empile ------------------------------------------------------
   Pour les tableaux du deposant, lus sur telephone plus souvent qu'ailleurs.
   Sous 768 px, chaque ligne devient une carte : une rangee par cellule,
   l'intitule de la colonne (attribut data-label) a gauche, la valeur a
   droite, et les boutons sur toute la largeur en bas. Au-dessus, le tableau
   reste un tableau. */
@media (max-width: 767.98px) {
  .mbv-table-empilee thead {
    display: none;
  }

  .mbv-table-empilee,
  .mbv-table-empilee tbody,
  .mbv-table-empilee tfoot,
  .mbv-table-empilee tr {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .mbv-table-empilee tbody tr {
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background-color: #fff;
  }

  .mbv-table-empilee tbody tr > * {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    padding: 0.375rem 0;
    border: 0;
    text-align: right !important;
    white-space: normal !important;
    box-shadow: none;
  }

  .mbv-table-empilee tbody tr > * + * {
    border-top: 1px dashed var(--bs-border-color);
  }

  .mbv-table-empilee tbody tr > [data-label]::before {
    content: attr(data-label);
    font-weight: 400;
    color: var(--mbv-gris-label);
    text-align: left;
  }

  /* La premiere cellule sert de titre a la carte */
  .mbv-table-empilee tbody tr > :first-child {
    justify-content: flex-start;
    font-size: 1.0625rem;
    font-weight: 700;
    text-align: left !important;
  }

  /* Les boutons : a la ligne, pleine largeur, faciles a toucher */
  .mbv-table-empilee .mbv-cellule-boutons {
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.5rem;
    padding-top: 0.625rem;
  }

  .mbv-table-empilee .mbv-cellule-boutons::before {
    flex-basis: 100%;
  }

  .mbv-table-empilee .mbv-cellule-boutons > *,
  .mbv-table-empilee .mbv-cellule-boutons form > .btn {
    flex: 1 1 auto;
  }

  .mbv-table-empilee .mbv-cellule-boutons form {
    display: flex !important;
    flex: 1 1 auto;
  }

  /* La pastille « Verrouillee » garde sa taille, le bouton prend le reste */
  .mbv-table-empilee .mbv-cellule-boutons > .mbv-pastille {
    flex: 0 0 auto;
    align-self: center;
  }

  /* Dans un cadre sans marge interieure, les cartes ne collent pas au bord */
  .table-responsive > .mbv-table-empilee {
    padding: 0.75rem;
  }

  .mbv-table-empilee tfoot tr {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }

  .mbv-table-empilee tfoot td {
    display: block;
    border: 0;
  }

  .mbv-table-empilee tfoot td:empty {
    display: none;
  }
}

/* --- Paiement des deposants ------------------------------------------------ */

/* Un deposant paye s'efface un peu : l'oeil va a ceux qui restent. */
.mbv-reversement-paye .mbv-reversement-net {
  color: var(--mbv-gris-texte);
}

/* La ligne qu'on vient de payer ou d'annuler, retrouvee au retour de page. */
.mbv-reversement-fait > * {
  background-color: #fff8e1 !important;
  box-shadow: inset 0 0 0 9999px rgba(255, 193, 7, 0.08) !important;
}

.mbv-reversement-paiement {
  min-width: 11rem;
}

/* Le montant a remettre, dans la fenetre de paiement : lisible a un metre,
   comme le total de la caisse. */
.mbv-reversement-a-remettre {
  font-size: 2.25rem;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--mbv-vert-fonce);
  font-variant-numeric: tabular-nums;
}

@media print {
  /* Sur la feuille de remise, les boutons laissent la place a l'emargement,
     et la ligne surlignee a l'ecran ne l'est pas sur le papier. */
  .mbv-reversement-paiement {
    min-width: 0;
  }

  .mbv-reversement-fait > * {
    background-color: transparent !important;
    box-shadow: none !important;
  }
}

/* --- Bilan de la manifestation -------------------------------------------- */

.mbv-bilan-document {
  max-width: 60rem;
  margin: 0 auto;
}

.mbv-bilan-entete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 3px solid var(--mbv-vert);
}

.mbv-bilan-section + .mbv-bilan-section {
  margin-top: 2rem;
}

.mbv-bilan-titre {
  font-size: 0.8125rem;
  font-weight: 900;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--mbv-bleu-texte);
  margin-bottom: 0.75rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--mbv-bordure);
}

.mbv-bilan-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.75rem;
}

.mbv-bilan-chiffres > div {
  padding: 0.75rem 1rem;
  border: 1px solid var(--mbv-bordure);
  border-radius: 0.5rem;
}

.mbv-bilan-nombre {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--mbv-encre);
  font-variant-numeric: tabular-nums;
}

.mbv-bilan-libelle {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--mbv-gris-texte);
}

.mbv-bilan-table {
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.5rem;
}

.mbv-bilan-table td.text-end {
  white-space: nowrap;
}

.mbv-bilan-sous-total > * {
  font-weight: 700;
  border-top: 1px solid var(--mbv-encre);
}

.mbv-bilan-total > * {
  font-weight: 900;
  font-size: 1.0625rem;
  border-top: 2px solid var(--mbv-encre);
  border-bottom: 0;
}

.mbv-bilan-detail {
  font-size: 0.875rem;
}

.mbv-bilan-signatures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.5rem;
}

.mbv-bilan-signatures > div {
  min-height: 7rem;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--mbv-gris-label);
  border-radius: 0.5rem;
}

@media print {
  .mbv-bilan {
    padding: 0 !important;
    max-width: none;
  }

  .mbv-bilan-document {
    max-width: none;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .mbv-bilan-section {
    page-break-inside: avoid;
  }

  /* Le detail par deposant commence sur une nouvelle page : la premiere
     reste une synthese qu'on lit d'un coup. Il peut, lui, s'etendre sur
     plusieurs pages. */
  .mbv-bilan-saut {
    page-break-before: always;
    page-break-inside: auto;
  }

  .mbv-bilan-detail tr {
    page-break-inside: avoid;
  }

  .mbv-bilan-chiffres > div {
    padding: 0.4rem 0.6rem;
  }
}

/* --- Administration : connexions ------------------------------------------ */

/* Le point vert de « en ligne » : plein dans les cinq dernieres minutes,
   gris au-dela. */
.mbv-point-en-ligne {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background-color: var(--mbv-gris-label);
  vertical-align: middle;
}

.mbv-point-en-ligne.est-actif {
  background-color: var(--mbv-vert);
  box-shadow: 0 0 0 3px var(--mbv-vert-pale);
}

.mbv-table-journal td {
  font-size: 0.875rem;
}

/* --- Administration : taches de maintenance en grille --------------------- */

.mbv-tache-resume {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Une fois deplie, le resume en deux lignes fait doublon. */
.mbv-tache:has(.mbv-tache-details[open]) .mbv-tache-resume {
  display: none;
}

.mbv-tache-details summary {
  cursor: pointer;
  color: var(--mbv-bleu-texte);
}

/* --- Annonces : la fenetre d'arrivee --------------------------------------
   Une carte haute en couleur du ton de l'annonce, un medaillon qui deborde
   du bandeau du haut (comme la peluche de la page de maintenance), des
   points pour se reperer entre plusieurs annonces. */

.mbv-annonces .modal-dialog {
  max-width: 30rem;
}

.mbv-annonces-contenu {
  position: relative;
  border: 0;
  border-radius: 1.125rem;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(35, 49, 64, 0.35);
}

.mbv-annonces-croix {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  z-index: 2;
  filter: invert(1) grayscale(1) brightness(2);
  opacity: 0.85;
}

/* Le ton donne sa couleur au bandeau, au medaillon et au point actif. */
.mbv-annonce-info      { --mbv-ton: var(--mbv-bleu);  --mbv-ton-fonce: var(--mbv-bleu-fonce); --mbv-ton-pale: var(--mbv-bleu-pale); }
.mbv-annonce-important { --mbv-ton: #e5a00d;          --mbv-ton-fonce: #b77d00;               --mbv-ton-pale: #fff4d6; }
.mbv-annonce-urgent    { --mbv-ton: #d64535;          --mbv-ton-fonce: #b0362a;               --mbv-ton-pale: #fdecea; }

.mbv-annonce-tete {
  height: 5.5rem;
  /* Le medaillon descend par un padding et non par sa marge : une marge
     d'enfant traverserait le bandeau et le decollerait du haut de la carte. */
  padding-top: 2.75rem;
  background-image:
    radial-gradient(circle at 15% 30%, rgba(255, 255, 255, 0.18) 0 2.5rem, transparent 2.6rem),
    radial-gradient(circle at 88% 85%, rgba(255, 255, 255, 0.12) 0 3.5rem, transparent 3.6rem),
    linear-gradient(135deg, var(--mbv-ton) 0%, var(--mbv-ton-fonce) 100%);
}

.mbv-annonce-medaillon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.25rem;
  height: 5.25rem;
  margin: 0 auto;
  border-radius: 50%;
  background: #fff;
  color: var(--mbv-ton);
  font-size: 2.25rem;
  box-shadow: 0 8px 22px rgba(35, 49, 64, 0.22);
  position: relative;
}

.mbv-annonce-medaillon img {
  width: 3.5rem;
  height: auto;
}

.mbv-annonce-corps {
  padding: 3.25rem 1.75rem 0.5rem;
  text-align: center;
}

.mbv-annonce-ton {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--mbv-ton-fonce);
}

.mbv-annonce-titre {
  margin: 0 0 0.75rem;
  font-size: 1.375rem;
  font-weight: 900;
  letter-spacing: -0.3px;
  line-height: 1.25;
  color: var(--mbv-encre);
}

.mbv-annonce-texte {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--mbv-gris-texte);
}

.mbv-annonce-lien {
  margin-bottom: 0.5rem;
  border-radius: 999px;
  padding: 0.35rem 1rem;
  font-weight: 700;
  color: var(--mbv-ton-fonce);
  background-color: var(--mbv-ton-pale);
  border: 1px solid transparent;
}

.mbv-annonce-lien:hover,
.mbv-annonce-lien:focus {
  color: #fff;
  background-color: var(--mbv-ton);
}

/* L'arrivee d'une annonce : un glissement court. */
.mbv-annonce-diapo.est-entrante .mbv-annonce-corps,
.mbv-annonce-diapo.est-entrante .mbv-annonce-medaillon {
  animation: mbv-annonce-entree 0.28s ease-out;
}

@keyframes mbv-annonce-entree {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mbv-annonce-diapo.est-entrante .mbv-annonce-corps,
  .mbv-annonce-diapo.est-entrante .mbv-annonce-medaillon {
    animation: none;
  }
}

.mbv-annonces-pied {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem 1.25rem;
}

/* Les points : un par annonce. L'annonce en cours s'allonge et prend la
   couleur de son ton ; celles deja vues restent pleines ; les suivantes
   sont claires. */
.mbv-annonces-points {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.mbv-annonces-point {
  width: 0.625rem;
  height: 0.625rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background-color: #dbe3e8;
  transition: width 0.25s ease, background-color 0.25s ease;
}

.mbv-annonces-point.est-vue {
  background-color: var(--mbv-gris-label);
  cursor: pointer;
}

.mbv-annonces-point:disabled {
  cursor: default;
}

.mbv-annonces-point.est-active {
  width: 1.75rem;
}

.mbv-annonces-point.est-active.mbv-point-info      { background-color: var(--mbv-bleu); }
.mbv-annonces-point.est-active.mbv-point-important { background-color: #e5a00d; }
.mbv-annonces-point.est-active.mbv-point-urgent    { background-color: #d64535; }

.mbv-annonces-precedent {
  color: var(--mbv-gris-texte);
  text-decoration: none;
}

.mbv-annonces-pied .btn {
  white-space: nowrap;
}

/* Sur un petit telephone, « Precedent » se reduit a sa fleche. */
@media (max-width: 419.98px) {
  .mbv-annonces-libelle {
    display: none;
  }

  .mbv-annonces-pied {
    gap: 0.5rem;
    padding: 0.875rem 1rem 1rem;
  }
}

/* L'apercu de l'administration : la meme carte, sans fenetre. */
.mbv-annonce-apercu {
  max-width: 24rem;
  margin: 0 auto;
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 30px rgba(35, 49, 64, 0.18);
}

@media (max-width: 575.98px) {
  .mbv-annonce-corps {
    padding: 3rem 1.25rem 0.25rem;
  }

  .mbv-annonce-titre {
    font-size: 1.25rem;
  }
}