/* =====================================================================
   VIGPRO — RÔLES DE BOUTONS · SOURCE UNIQUE
   Créé le 15.08.2026 sur la demande de JP : « l'idéal est d'avoir le moins
   possible de nuances d'une page à l'autre, il faut une vraie symétrie des
   couleurs, des boutons ».

   POURQUOI CE FICHIER EXISTE (mesuré le 15.08, avant de l'écrire) :
     · 53 fonds de boutons DIFFÉRENTS pour 89 déclarations dans les 4 plugins ;
     · 13 boutons de suppression avec 6 couleurs différentes ;
     · #9f3245 écrit EN DUR 7 fois alors que la variable de Config existe
       juste à côté — ces boutons-là ne suivaient donc PAS l'identité du club ;
     · le même effet de survol défini 3 fois, dans 3 fichiers séparés.
   La cause n'était pas le désordre mais l'ABSENCE D'ENDROIT UNIQUE : chaque
   bouton avait été écrit là où il était créé, avec la couleur du jour.

   ⭐ CE FICHIER EST CHARGÉ DANS LES TROIS CONTEXTES (voir vigprocfg.php) :
      1. le site public          2. le panneau Vigpro Config
      3. l'administration de Gestion / Points
   C'est ce qui garantit qu'un bouton a la même apparence PARTOUT. Un CSS
   chargé dans un seul contexte ne peut pas produire de symétrie.

   COMMENT AJOUTER UN BOUTON PLUS TARD : ne PAS lui écrire de couleur.
   Lui donner une classe de rôle (vgb-principal, vgb-positif, vgb-attention,
   vgb-danger, vgb-secondaire), ou ajouter son sélecteur à la liste du rôle
   correspondant, plus bas. C'est tout.
   ===================================================================== */

:root{
  /* Les rôles s'appuient sur Vigpro Config quand un réglage existe, avec un
     repli sûr. Changer une couleur dans Config déplace donc TOUS les boutons
     du rôle — c'était l'intention d'origine, perdue à force d'écrire en dur. */
  --vgb-principal:      var(--vigprocfg-principale,#9f3245);
  --vgb-positif:        #1e9e5a;
  --vgb-positif-clair:  #eafaf1;
  --vgb-positif-fonce:  #14663a;
  --vgb-attention:      #e08a1e;
  --vgb-attention-clair:#fff6e8;
  --vgb-attention-fonce:#8a5a10;
  /* ⚠️ UN SEUL ROUGE POUR TOUT LE SITE. Choisi parmi les 6 en présence :
     c'est celui du bouton « Supprimer le compte » validé par JP le 15.08.
     Les 5 autres (#c0392b, #b32d2e, #9f3245, gris, noir translucide) sont
     abandonnés. ⚠️ NE JAMAIS réutiliser #9f3245 pour une suppression : c'est
     la couleur d'IDENTITÉ du club, elle ne doit pas signifier « ça efface ». */
  --vgb-danger:         #b91c1c;
  --vgb-danger-clair:   #fdf2f2;
  --vgb-danger-bord:    #e0a3a3;
  --vgb-secondaire:     #e5e7eb;
  --vgb-secondaire-txt: #33404f;
  --vgb-rayon:          8px;
  --vgb-ombre:          0 6px 16px -6px rgba(0,0,0,.42);
}

/* ---------------------------------------------------------------------
   1. LE GESTE COMMUN À TOUS LES BOUTONS
   Survol : assombrissement franc + ombre + 1px vers le haut. Clic : à plat.
   ⚠️ brightness(.85) et pas .92 : mesuré le 14.08 sur le gris #7a7a7a, .92
   ne faisait passer la luminosité que de 122 à 112 sur 255 — invisible.
   --------------------------------------------------------------------- */
.vgb, .vgb-principal, .vgb-positif, .vgb-attention, .vgb-danger, .vgb-secondaire{
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: var(--vgb-rayon);
  padding: 9px 15px;
  cursor: pointer;
  line-height: 1.2;
  transition: filter .18s ease, box-shadow .18s ease, transform .12s ease,
              background-color .18s ease, color .18s ease;
}
.vgb:hover, .vgb-principal:hover, .vgb-positif:hover,
.vgb-attention:hover, .vgb-danger:hover, .vgb-secondaire:hover{
  filter: brightness(.85);
  box-shadow: var(--vgb-ombre);
  transform: translateY(-1px);
}
.vgb:active, .vgb-principal:active, .vgb-positif:active,
.vgb-attention:active, .vgb-danger:active, .vgb-secondaire:active{
  transform: translateY(0);
  box-shadow: 0 2px 6px -2px rgba(0,0,0,.4);
}

/* ---------------------------------------------------------------------
   2. LES RÔLES
   PLEIN = l'action attendue · BORDÉ = une action de plus, volontaire.
   ⚠️ Le danger est BORDÉ par principe : un rouge plein attirerait l'oeil
   autant que l'action principale, ce qu'il ne faut jamais pour un geste
   irréversible. La variante « pleine » existe seulement pour les petites
   croix posées SUR une photo, où un bouton bordé serait illisible.
   --------------------------------------------------------------------- */
.vgb-principal{ background: var(--vgb-principal); color:#fff; border:0; }
.vgb-positif  { background: var(--vgb-positif);   color:#fff; border:0; }

.vgb-positif-bord{
  background: var(--vgb-positif-clair);
  color: var(--vgb-positif-fonce);
  border: 1px solid var(--vgb-positif);
}
.vgb-attention{
  background: var(--vgb-attention-clair);
  color: var(--vgb-attention-fonce);
  border: 1px solid var(--vgb-attention);
}
.vgb-danger{
  background: var(--vgb-danger-clair);
  color: var(--vgb-danger);
  border: 1px solid var(--vgb-danger-bord);
}
.vgb-danger:hover{ border-color: var(--vgb-danger); background:#fbe3e3; }
.vgb-danger-plein{ background: var(--vgb-danger); color:#fff; border:0; }
.vgb-secondaire{
  background: var(--vgb-secondaire);
  color: var(--vgb-secondaire-txt);
  border: 1px solid #d7dbe1;
}

/* ---------------------------------------------------------------------
   3. RATTACHEMENT DES BOUTONS EXISTANTS
   On relie les classes DÉJÀ EN PLACE aux rôles, sans toucher au HTML :
   aucun risque de casser un comportement, et le jour où un bouton reçoit
   directement sa classe de rôle, sa ligne disparaît d'ici.
   ⚠️ CE BLOC EST LE SEUL ENDROIT à mettre à jour pour un nouveau bouton.
   --------------------------------------------------------------------- */

/* --- DANGER : les 13 boutons de suppression, désormais d'une seule couleur --- */
.vgm-mm-del,
.vgpt-del,/* [16.08 JP] .vgpt-fp-del + .vgpt-fpp-del RETIRES du role danger : dans l'editeur des points de RDV JP veut la croix en GRIS (definie dans le plugin), plus aucun rose. Les autres suppressions gardent le rouge. */
.vigprocfg-btn-sm.del, .vigprocfg-del-row, .vigprocfg-media-remove{/* [16.08 JP] .vgm-photo-delbtn (« Supprimer ma photo ») retire aussi : il a deja un style GRIS dans le plugin, JP ne veut plus le fond rose */
  background: var(--vgb-danger-clair) !important;
  color: var(--vgb-danger) !important;
  border: 1px solid var(--vgb-danger-bord) !important;
}
.vgm-mm-del:hover,
.vgpt-del:hover,
.vigprocfg-btn-sm.del:hover, .vigprocfg-del-row:hover, .vigprocfg-media-remove:hover{/* [16.08 JP] fp-del / fpp-del / vgm-photo-delbtn retires du survol rose aussi (sinon le rose revenait au survol) */
  border-color: var(--vgb-danger) !important;
  background: #fbe3e3 !important;
}
/* Croix POSÉES SUR UNE PHOTO : pleines, sinon illisibles sur l'image. */
.vgpt-photo-del, .vigprocfg-gal-del, .vigprocfg-mm-del{
  background: var(--vgb-danger) !important;
  color: #fff !important;
  border: 0 !important;
}

/* --- LE GESTE, pour tous les boutons déjà nommés du projet ---
   ⚠️ On NE VISE PAS `button` tout court : sur le site public, cela toucherait
   des éléments qui n'en sont pas, et les liens de texte ont leur propre
   convention (gras + trait net) depuis le 13.08. */
.vh-btn, .vigprot-addcourse, .vigprot-map-toggle, .vigprot-fb-cartebtn, .vigprot-adv-btn, .vigprot-view-btn,
.vigprot-search-btn, .nsb-reset-full, .vgm-qp-field, .vgm-part-btn, .vgm-part-retour,
.vgalb-open, .dl-btn-online, .dl-btn-pdf, .wa-btn, .vigprot-pop-link,
.vigprocfg-cr-open, .vigprocfg-cr-submit, .vigpp-arrow, .vh-badge-clic,
.vgm-mm-save, .vgm-mm-val, .vgm-mm-del, .vgm-btn,
.vigprocfg-btn-sm, .vigprocfg-btn-header-link, .vigprocfg-add-row,
.vgpt-del, .vgpt-copy, .vgpt-fp-del{
  transition: filter .18s ease, box-shadow .18s ease, transform .12s ease,
              background-color .18s ease, color .18s ease;
}
.vh-btn:hover, .vigprot-addcourse:hover, .vigprot-map-toggle:hover, .vigprot-fb-cartebtn:hover, .vigprot-adv-btn:hover,
.vigprot-view-btn:hover, .vigprot-search-btn:hover, .nsb-reset-full:hover, .vgm-qp-field:hover,
.vgm-part-btn:hover, .vgm-part-retour:hover, .vgalb-open:hover, .dl-btn-online:hover,
.dl-btn-pdf:hover, .wa-btn:hover, .vigprot-pop-link:hover, .vigprocfg-cr-open:hover,
.vigprocfg-cr-submit:hover, .vigpp-arrow:hover, .vh-badge-clic:hover,
.vgm-mm-save:hover, .vgm-mm-val:hover, .vgm-btn:hover,
.vigprocfg-btn-sm:hover, .vigprocfg-btn-header-link:hover, .vigprocfg-add-row:hover,
.vgpt-copy:hover{
  filter: brightness(.85);
  box-shadow: var(--vgb-ombre);
  transform: translateY(-1px);
}
.vh-btn:active, .vigprot-addcourse:active, .vigprot-map-toggle:active, .vigprot-fb-cartebtn:active, .vigprot-adv-btn:active,
.vigprot-view-btn:active, .vigprot-search-btn:active, .nsb-reset-full:active, .vgm-qp-field:active,
.vgm-part-btn:active, .vgm-part-retour:active, .vgalb-open:active, .dl-btn-online:active,
.dl-btn-pdf:active, .wa-btn:active, .vigprot-pop-link:active, .vigprocfg-cr-open:active,
.vigprocfg-cr-submit:active, .vigpp-arrow:active, .vh-badge-clic:active,
.vgm-mm-save:active, .vgm-mm-val:active, .vgm-mm-del:active, .vgm-btn:active,
.vigprocfg-btn-sm:active, .vigprocfg-btn-header-link:active, .vigprocfg-add-row:active,
.vgpt-del:active, .vgpt-copy:active{
  transform: translateY(0);
  box-shadow: 0 2px 6px -2px rgba(0,0,0,.4);
}

/* --- HAUTEUR COMMUNE DES BOUTONS DE LA BARRE DE FILTRES ---
   MESURÉ le 15.08 sur le catalogue : TROIS hauteurs pour quatre boutons —
   Recherche et Réinitialiser 36,8px (marge 10, interligne fixé), Voir la carte
   39px (marge 9, interligne libre), Filtres avancés 41px (marge 9 + une bordure
   de 1px que les autres n'ont pas). Chacun avait été réglé dans son coin.
   ⚠️ ON NE TOUCHE PAS AUX MARGES DE CHACUN : elles serviraient encore à autre
   chose. On impose une hauteur MINIMALE commune et on centre le texte — la
   hauteur ne dépend alors plus ni de la marge, ni de la bordure, ni de
   l'interligne. C'est la seule façon d'obtenir l'égalité sans tout réécrire.
   `border-box` : la bordure de « Filtres avancés » est comptée DANS la hauteur. */
.vigprot-map-toggle,
.vigprot-fb-cartebtn,
.vigprot-view-btn,
.vigprot-search-btn,
.nsb-reset-full,
.vigprot-adv-btn{
  min-height: 40px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1.2;
}
/* ⚠️ « Recherche » et « Réinitialiser » RÉSISTAIENT (mesuré : 36,8px alors que les autres
   passaient à 40). Cause : la règle `.nsb-grp .vigprot-search-btn, .nsb-grp .nsb-reset-full`
   de vigpro-gestion.php impose `padding:10px 16px !important` ET porte deux classes — elle est
   donc PLUS SPÉCIFIQUE que la mienne, qui n'en porte qu'une. Ni l'ordre des fichiers ni la
   priorité de chargement n'y changent rien : la spécificité l'emporte toujours.
   On réplique donc le même niveau de spécificité (`.nsb-grp` + la classe) au lieu d'empiler
   un `!important` de plus, qui ne suffirait d'ailleurs pas. */
.nsb-grp .vigprot-search-btn,
.nsb-grp .nsb-reset-full,
.nsb-grp .vigprot-map-toggle,
.nsb-grp .vigprot-adv-btn,
.nsb-grp .vigprot-view-btn{
  min-height: 40px !important;
  line-height: 1.2 !important;
}

/* --- BARRE DE FILTRES : 6 couleurs -> 3 RÔLES (15.08, validé par JP) ---
   MESURÉ avant : six boutons, six couleurs, aucune répétition — bleu clair, orange, gris pâle,
   vert pâle, gris moyen, rouge framboise. Deux défauts de fond, pas seulement d'apparence :
     · « Voir la carte » et « Voir la vue technique » font LA MÊME CHOSE (basculer un affichage)
       et n'avaient pas la même couleur — bleu et orange laissaient croire à deux natures ;
     · « Recherche », qui lance l'action PRINCIPALE de la barre, était en gris moyen, donc moins
       visible que « Réinitialiser » qui éclatait en rouge alors qu'il ne fait qu'effacer.
   ⚠️ « Réinitialiser » PERD SON ROUGE volontairement : effacer un filtre n'a rien de dangereux, et
   ce rouge entrait en concurrence avec celui des vraies suppressions, qu'on venait d'unifier.
   Un seul rouge sur le site, et il veut dire « ça efface pour de bon ».
   ⚠️ On garde les `!important` : les règles d'origine en ont, et elles portent parfois deux
   classes (.nsb-grp .vigprot-search-btn) — sans même spécificité, rien ne passerait. */

/* PRINCIPAL — l'action que les visiteurs font le plus. Suit la couleur de Config. */
.vigprot-search-btn,
.nsb-grp .vigprot-search-btn{
  background: var(--vigprocfg-principale,#9f3245) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}

/* AFFICHAGE — même geste, donc même couleur pour les deux. */
.vigprot-map-toggle,
.vigprot-fb-cartebtn,
.vigprot-view-btn,
.nsb-grp .vigprot-map-toggle{
  background: #6aa9e8 !important;
  color: #fff !important;
  border: 1px solid #4f92d4 !important;
}

/* SECONDAIRE — utile, jamais prioritaire. */
.vigprot-adv-btn,
.nsb-reset-full,
.nsb-grp .nsb-reset-full,
.nsb-grp .vigprot-adv-btn{
  background: #e5e7eb !important;
  color: #33404f !important;
  border: 1px solid #cfd6df !important;
}

/* --- CE QUI N'EST PAS UN BOUTON, ou qui a sa propre mécanique --- */
.vigprocfg-pn:hover,
.wp-picker-container button:hover,
.wp-color-result:hover,
.vigprot-card:hover{
  filter: none;
  box-shadow: none;
  transform: none;
}