` QUE `` * (ligne ~215), tous les modules (menu, connexion, ...) etant rendus en dehors - `.com_gdadhesions` * capturait donc a tort les boutons .btn-primary/.btn-secondary/.btn-success de modules affiches * sur les memes pages que le composant (bug corrige le 2026-08-29). `main .btn-success` (1 classe * + 1 element) l'emporte quand meme sur le `.btn-success` de Cassiopeia (1 classe) grace au * dernier niveau de la specificite CSS (nombre de selecteurs de type). * * Pas de bloc `.btn-primary` ici (volontaire) : Cassiopeia le marque a part (template.css ~13159, * `.btn-primary { background-color: var(--cassiopeia-color-primary); border-color: ...; }` et son * ':hover'/':focus' avec --cassiopeia-color-hover) - une regle EN PLUS de `.btn { background-color: * var(--btn-bg); }`, avec la MEME specificite (1 classe) mais placee apres dans le fichier, donc * elle gagne pour la propriete background-color quoi qu'on mette dans --btn-bg/--bs-btn-bg. Cette * regle lit deja --cassiopeia-color-primary/-hover, que user.css fait pointer vers --logo-gauche/ * --logo-droit (le bleu canard du club) : .btn-primary est donc DEJA a la bonne couleur nativement. * Un essai de surcharge ici (le 2026-08-29) n'avait pu changer que --btn-color (texte), pas le fond * (toujours gagne par la regle Cassiopeia) : bouton fond canard + texte force en noir, illisible. * Bug corrige le 2026-08-30 en supprimant purement et simplement ce bloc inutile et nuisible. */ main .btn-secondary { --btn-color: #fff; --btn-bg: var(--logo-gauche); --btn-border-color: var(--logo-gauche); --btn-hover-color: #fff; --btn-hover-bg: color-mix(in srgb, var(--logo-gauche) 85%, black); --btn-hover-border-color: color-mix(in srgb, var(--logo-gauche) 80%, black); --btn-active-color: #fff; --btn-active-bg: color-mix(in srgb, var(--logo-gauche) 75%, black); --btn-active-border-color: color-mix(in srgb, var(--logo-gauche) 70%, black); --btn-disabled-color: #fff; --btn-disabled-bg: var(--logo-gauche); --btn-disabled-border-color: var(--logo-gauche); --bs-btn-color: #fff; --bs-btn-bg: var(--logo-gauche); --bs-btn-border-color: var(--logo-gauche); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--logo-gauche) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--logo-gauche) 80%, black); --bs-btn-active-color: #fff; --bs-btn-active-bg: color-mix(in srgb, var(--logo-gauche) 75%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--logo-gauche) 70%, black); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--logo-gauche); --bs-btn-disabled-border-color: var(--logo-gauche); } main .btn-success { --btn-color: #fff; --btn-bg: var(--vert-prairie); --btn-border-color: var(--vert-prairie); --btn-hover-color: #fff; --btn-hover-bg: color-mix(in srgb, var(--vert-prairie) 85%, black); --btn-hover-border-color: color-mix(in srgb, var(--vert-prairie) 80%, black); --btn-active-color: #fff; --btn-active-bg: color-mix(in srgb, var(--vert-prairie) 75%, black); --btn-active-border-color: color-mix(in srgb, var(--vert-prairie) 70%, black); --btn-disabled-color: #fff; --btn-disabled-bg: var(--vert-prairie); --btn-disabled-border-color: var(--vert-prairie); --bs-btn-color: #fff; --bs-btn-bg: var(--vert-prairie); --bs-btn-border-color: var(--vert-prairie); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--vert-prairie) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--vert-prairie) 80%, black); --bs-btn-active-color: #fff; --bs-btn-active-bg: color-mix(in srgb, var(--vert-prairie) 75%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--vert-prairie) 70%, black); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--vert-prairie); --bs-btn-disabled-border-color: var(--vert-prairie); } main .btn-outline-primary { --btn-color: var(--cassiopeia-color-primary, #3d6e79); --btn-border-color: var(--cassiopeia-color-primary, #3d6e79); --btn-hover-color: var(--blanc, #fff); --btn-hover-bg: var(--cassiopeia-color-primary, #3d6e79); --btn-hover-border-color: var(--cassiopeia-color-primary, #3d6e79); --btn-active-color: var(--blanc, #fff); --btn-active-bg: var(--cassiopeia-color-primary, #3d6e79); --btn-active-border-color: var(--cassiopeia-color-primary, #3d6e79); --btn-focus-shadow-rgb: 61, 110, 121; --bs-btn-color: var(--cassiopeia-color-primary, #3d6e79); --bs-btn-border-color: var(--cassiopeia-color-primary, #3d6e79); --bs-btn-hover-color: var(--blanc, #fff); --bs-btn-hover-bg: var(--cassiopeia-color-primary, #3d6e79); --bs-btn-hover-border-color: var(--cassiopeia-color-primary, #3d6e79); --bs-btn-active-color: var(--blanc, #fff); --bs-btn-active-bg: var(--cassiopeia-color-primary, #3d6e79); --bs-btn-active-border-color: var(--cassiopeia-color-primary, #3d6e79); --bs-btn-focus-shadow-rgb: 61, 110, 121; } main .btn-outline-secondary { --btn-color: var(--cassiopeia-color-hover, #94cec8); --btn-border-color: var(--cassiopeia-color-hover, #94cec8); --btn-hover-color: var(--noir, #242021); --btn-hover-bg: var(--cassiopeia-color-hover, #94cec8); --btn-hover-border-color: var(--cassiopeia-color-hover, #94cec8); --btn-active-color: var(--noir, #242021); --btn-active-bg: var(--cassiopeia-color-hover, #94cec8); --btn-active-border-color: var(--cassiopeia-color-hover, #94cec8); --btn-focus-shadow-rgb: 148, 206, 200; --bs-btn-color: var(--cassiopeia-color-hover, #94cec8); --bs-btn-border-color: var(--cassiopeia-color-hover, #94cec8); --bs-btn-hover-color: var(--noir, #242021); --bs-btn-hover-bg: var(--cassiopeia-color-hover, #94cec8); --bs-btn-hover-border-color: var(--cassiopeia-color-hover, #94cec8); --bs-btn-active-color: var(--noir, #242021); --bs-btn-active-bg: var(--cassiopeia-color-hover, #94cec8); --bs-btn-active-border-color: var(--cassiopeia-color-hover, #94cec8); --bs-btn-focus-shadow-rgb: 148, 206, 200; } /* btn-outline-success : meme double declaration (--btn-* et --bs-btn-*) que btn-outline-primary et btn-outline-secondary ci-dessus, pour la meme raison (compat Bootstrap compile par Cassiopeia). */ main .btn-outline-success { --btn-color: var(--vert-prairie); --btn-border-color: var(--vert-prairie); --btn-hover-color: var(--blanc, #fff); --btn-hover-bg: var(--vert-prairie); --btn-hover-border-color: var(--vert-prairie); --btn-active-color: var(--blanc, #fff); --btn-active-bg: var(--vert-prairie); --btn-active-border-color: var(--vert-prairie); --btn-focus-shadow-rgb: 23, 122, 56; --bs-btn-color: var(--vert-prairie); --bs-btn-border-color: var(--vert-prairie); --bs-btn-hover-color: var(--blanc, #fff); --bs-btn-hover-bg: var(--vert-prairie); --bs-btn-hover-border-color: var(--vert-prairie); --bs-btn-active-color: var(--blanc, #fff); --bs-btn-active-bg: var(--vert-prairie); --bs-btn-active-border-color: var(--vert-prairie); --bs-btn-focus-shadow-rgb: 23, 122, 56; } /* Utilitaires Bootstrap derives de --success(-rgb) : text-success, bg-success (badges CACI/ licence, ex: layouts/secretariat/step_one.php, adhesions.js), border-success. Contrairement aux boutons (couleurs figees a la compilation, d'ou les surcharges dediees ci-dessus), ces utilitaires lisent la variable a l'execution : une seule surcharge suffit pour tous. Meme remarque que plus haut sur le prefixe "bs-" absent du Bootstrap compile par Cassiopeia (.text-success y lit --success-rgb, pas --bs-success-rgb) : double declaration ci-dessous. Scope sur `main`, pas `.com_gdadhesions` (classe , trop large) - meme raison que le bloc boutons ci-dessus : ne pas deborder sur les modules affiches sur les memes pages. */ main { --success: var(--vert-prairie); --success-rgb: 23, 122, 56; --bs-success: var(--vert-prairie); --bs-success-rgb: 23, 122, 56; } main .form-check-input:checked { background-color: var(--cassiopeia-color-primary, #3d6e79); border-color: var(--cassiopeia-color-primary, #3d6e79); } main .form-check-input:focus { border-color: var(--cassiopeia-color-primary, #3d6e79); box-shadow: 0 0 0 .25rem rgba(61, 110, 121, .25); } .gda-licence-chip { display: inline-block; padding: .25rem .5rem; border-radius: .375rem; font-weight: 600; background-color: #e9ecef; color: #212529; } .gda-licence-chip--warning { background-color: #fff3cd; color: #664d03; border: 1px solid #ffecb5; } /* Permet de scroller horizontalement les tableaux du wizard secretaire si necessaire */ #wizardSecretariat .card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; } #wizardSecretariat .card-body > table.table { min-width: 100%; width: max-content; } .wizard-nav .nav-link.active, .wizard-nav .nav-link.active:focus { color: #fff; background-color: var(--cassiopeia-color-primary); border-bottom-color: var(--cassiopeia-color-primary); border-radius: .375rem .375rem 0 0; font-weight: 600; box-shadow: none; } @media (max-width: 767.98px) { .wizard-nav .nav-link { text-align: center; padding-left: .35rem; padding-right: .35rem; } .wizard-nav .nav-link i, .wizard-step-full { display: none; } .wizard-step-short { display: inline; font-weight: 700; } } /* * Disabled buttons - surcharge locale du composant. * Bootstrap/Cassiopeia definit ces variables par variante (.btn-success, .btn-primary, ...), * donc on les redefinit avec plus de specificite sur le wizard. */ #wizardSecretariat .btn { --btn-disabled-bg: var(--gda-btn-disabled-bg) !important; --btn-disabled-color: var(--gda-btn-disabled-color) !important; --btn-disabled-border-color: var(--gda-btn-disabled-border) !important; --btn-disabled-opacity: 1; } #wizardSecretariat .btn:disabled, #wizardSecretariat .btn.disabled, #wizardSecretariat fieldset:disabled .btn { opacity: 0.65; cursor: not-allowed; font-style: italic; } /* style pour helloasso */ .HaAuthorizeButton { align-items: center; justify-content: center; background-color: #4B3FCF; border: 0.0625rem solid #4B3FCF; border-radius: 0.375rem; display: inline-flex; gap: 0.75rem; padding: 0.75rem 1.5rem; text-decoration: none; transition: background-color 0.2s, box-shadow 0.2s; } .HaAuthorizeButton:hover { background-color: #3a30a8; border-color: #3a30a8; } .HaAuthorizeButton:focus { box-shadow: 0 0 0 0.25rem rgba(75, 63, 207, 0.35); } /* * Table "Brevets" (layouts/profil/card_brevet.php) : th centres/gras, alternance de ligne * sur les teintes claires de la charte NCB (--logo-gauche-100 / --logo-droit-100). * * Le thead reste une ligne normale (non scrollable) et seul le tbody defile : le layout table * ne permet pas de rendre un scrollable independamment de son (une se * dimensionne comme un bloc unique), donc thead/tbody/tr passent en display:flex (colonne pour * thead/tbody, ligne pour tr) avec des cellules a largeur egale (flex:1) pour rester alignees * entre l'entete et le corps. */ .gda-table-brevets { display: block; width: 100%; } .gda-table-brevets thead, .gda-table-brevets tbody { display: block; width: 100%; } .gda-table-brevets tbody { max-height: 320px; overflow-y: auto; } .gda-table-brevets tr { display: flex; width: 100%; } .gda-table-brevets th, .gda-table-brevets td { flex: 1 1 0; } .gda-table-brevets thead th { text-align: center; font-weight: 700; background-color: var(--logo-gauche-700); color: var(--blanc); } /* * Bootstrap peint le fond/texte de chaque cellule via background-color: var(--table-bg) / * color: var(--table-color) (par defaut var(--body-bg) / var(--emphasis-color), donc opaques) : * un simple background-color/color sur serait recouvert par celui des

. On redefinit * ces custom properties, qui cascadent jusqu'aux cellules. Cassiopeia compile Bootstrap SANS le * prefixe "bs-" (--table-bg, pas --bs-table-bg — voir la note plus haut dans ce fichier sur * .btn-outline-*) ; on redefinit aussi les variantes --bs-* au cas ou une feuille Bootstrap * standard (prefixee) serait chargee ailleurs. */ .gda-table-brevets tbody tr:nth-child(odd) { --table-bg: var(--logo-gauche-300); --bs-table-bg: var(--logo-gauche-300); --table-color: var(--blanc); --bs-table-color: var(--blanc); } .gda-table-brevets tbody tr:nth-child(even) { --table-bg: var(--logo-droit-300); --bs-table-bg: var(--logo-droit-300); --table-color: var(--noir); --bs-table-color: var(--noir); } /* Ascenseur du tbody (seule zone scrollable), aux couleurs du th (--logo-gauche-700). */ .gda-table-brevets tbody { scrollbar-color: var(--logo-gauche-700) var(--logo-droit-300); } .gda-table-brevets tbody::-webkit-scrollbar { width: 10px; } .gda-table-brevets tbody::-webkit-scrollbar-track { background: var(--logo-gauche-100); } .gda-table-brevets tbody::-webkit-scrollbar-thumb { background-color: var(--logo-gauche-700); border-radius: 6px; } .HaAuthorizeButtonLogo { height: 1.75rem; width: auto; } .HaAuthorizeButtonTitle { color: #FFFFFF; font-size: 1rem; font-weight: 700; } /* * Simple-datatables - com_gdadhesions * Scope global du composant: applique le style a toutes les vues com_gdadhesions. */ /* Variables visuelles alignees sur le theme actif (avec fallback safe). */ .com_gdadhesions .gda-dt-container { --gda-dt-border: var(--template-border-color, #d7dde5); --gda-dt-surface: var(--template-bg-light, #f7f9fc); --gda-dt-row-hover: #f8fbff; --gda-dt-text-muted: #5c6a79; font-size: small; } .com_gdadhesions .gda-dt-container .btn { font-size: small; margin: 0.15rem; padding: 0.15rem; cursor: default; } /* 1) Barre haute/basse + champs de controle (recherche et select) */ .com_gdadhesions .gda-dt-top, .com_gdadhesions .gda-dt-bottom { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin: .4rem 0; } /* Le vendor simple-datatables injecte un clearfix ::after (content:" "; display:table) qui devient un 3eme item flex et pousse le champ recherche vers le centre. On le neutralise ici pour que space-between ne s'applique qu'aux 2 vrais enfants. */ .com_gdadhesions .gda-dt-top::after, .com_gdadhesions .gda-dt-bottom::after { display: none; } .com_gdadhesions .gda-dt-input, .com_gdadhesions .gda-dt-selector { border: 1px solid var(--gda-dt-border); border-radius: .45rem; min-height: 2.2rem; background: var(--body-bg, #fff); transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; } /* Hover identique a la teinte utilisee par les champs du composant. */ .com_gdadhesions .gda-dt-input:hover, .com_gdadhesions .gda-dt-selector:hover { border-color: var(--gda-input-hover-border); } /* Focus aligne sur les inputs Bootstrap/TomSelect deja utilises dans le composant. */ .com_gdadhesions .gda-dt-input:focus, .com_gdadhesions .gda-dt-selector:focus { color: var(--body-color); background: var(--body-bg, #fff); border-color: var(--gda-input-focus-border); outline: 0; box-shadow: 0 0 0 .25rem var(--gda-input-focus-shadow); } /* 2) En-tete de tableau */ .com_gdadhesions .gda-dt-table > thead > tr > th { text-align: center; background: var(--gda-dt-surface); color: var(--body-color, #223041); border-bottom: 1px solid var(--gda-dt-border); } /* 3) Lignes + survol pour la lisibilite */ .com_gdadhesions .gda-dt-table > tbody > tr > td { vertical-align: middle; border-bottom: 1px solid var(--gda-dt-border); } .com_gdadhesions .gda-dt-table > tbody > tr:hover > td { background: var(--gda-dt-row-hover); } /* 4) Pagination (etat normal, actif, desactive) */ .com_gdadhesions .gda-dt-pagination a { border: 1px solid var(--gda-dt-border); border-radius: .35rem; padding: .2rem .55rem; background: var(--body-bg, #fff); color: var(--body-color, #2e3b4b); text-decoration: none; } .com_gdadhesions .gda-dt-active a { color: var(--body-bg, #fff); background: var(--cassiopeia-color-primary); border-color: var(--cassiopeia-color-primary); } .com_gdadhesions .gda-dt-disabled a { opacity: .45; pointer-events: none; } /* 5) Texte d'information "Affichage de X a Y" */ .com_gdadhesions .gda-dt-info { color: var(--gda-dt-text-muted); font-size: .92rem; } /* Cellules éditables (double-clic) - surbrillance au hover */ .js-editable-date-caci, .js-editable-categorie, .js-editable-fonction, .js-editable-ordre { position: relative; transition: background-color 0.15s ease-in-out; } /* Petit triangle en haut a gauche pour signaler un champ editable. */ .js-editable-date-caci::before, .js-editable-categorie::before, .js-editable-fonction::before, .js-editable-ordre::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; border-top: 10px solid var(--cassiopeia-color-primary); border-right: 10px solid transparent; opacity: .75; pointer-events: none; } .js-editable-date-caci:hover, .js-editable-categorie:hover, .js-editable-fonction:hover, .js-editable-ordre:hover { background-color: #fef8e7 !important; } /* Champ de saisie de l'ordre d'affichage (trombinoscope Bureau) : étroit et centré. */ .ordre-input { width: 5rem; margin: 0 auto; } /* Style pour modifier la direction de la flèche lors de l'expansion */ .toggle-card i { transition: transform .25s ease; } .toggle-card[aria-expanded="true"] i { transform: rotate(90deg); } /* Badge de rôle (Bureau / Responsable de Groupe / Moniteur) affiché sur le dashboard Accueil */ .gda-role-badge { vertical-align: middle; font-weight: 500; } .gda-role-badge i { margin-right: .3rem; } /* Vue Utilisateurs : tableau plus dense (police réduite) */ .gda-table-compact { font-size: .85rem; } /* Centrage horizontal + vertical des badges/boutons à icône dans les cellules des tableaux de la vue Utilisateurs (statut d'adhésion, CACI, suppression, réinitialisation mot de passe) : en inline-block par défaut (Bootstrap), l'icône FontAwesome n'est pas toujours parfaitement centrée par rapport à la cellule (line-height/padding). display:inline-flex reste sans effet sur le

lui-même (donc sans risque pour table-layout: fixed), seulement sur le badge/bouton. */ .gda-table-compact td .badge, .gda-table-compact td .btn { display: inline-flex; align-items: center; justify-content: center; } /* Icônes agrandies (badge Adhésion, boutons Effacer / Réinitialiser le mot de passe) dans les tableaux de la vue Utilisateurs : la taille par défaut paraît petite à côté des vignettes photo (48x48). Appliqué au badge/bouton entier (pas seulement à l'icône ) pour que le padding suive proportionnellement. */ .gda-table-compact .gda-icon-lg { font-size: 1rem; /* 16px à la taille de police racine par défaut (16px) */ } .bg-encadrant { background-color: var(--logo-gauche-500); } .bg-pratiquant { background-color: var(--logo-droit-500); } /* * Largeur des colonnes des 3 tableaux de la vue Utilisateurs (un par onglet : Profils / Niveau * d'accès / Trombinoscope). table-layout: fixed force le respect strict des pourcentages (qui * doivent couvrir toutes les colonnes du tableau et sommer à 100%, sous peine de voir les * dernières colonnes s'effondrer/se chevaucher) ; ajustable ici sans toucher au JS * (simple-datatables n'expose pas d'option de largeur de colonne). */ #tableUtilisateursProfils, #tableUtilisateursAcces, #tableUtilisateursTrombinoscope { table-layout: fixed; } /* Onglet Profils : Adhésion / Photo / Nom / Licence / CACI / Brevets / Email / Actions */ #tableUtilisateursProfils th:nth-child(1), #tableUtilisateursProfils td:nth-child(1) { width: 6%; } #tableUtilisateursProfils th:nth-child(2), #tableUtilisateursProfils td:nth-child(2) { width: 7%; } #tableUtilisateursProfils th:nth-child(3), #tableUtilisateursProfils td:nth-child(3) { width: 16%; } #tableUtilisateursProfils th:nth-child(4), #tableUtilisateursProfils td:nth-child(4) { width: 10%; } #tableUtilisateursProfils th:nth-child(5), #tableUtilisateursProfils td:nth-child(5) { width: 12%; } #tableUtilisateursProfils th:nth-child(6), #tableUtilisateursProfils td:nth-child(6) { width: 18%; } #tableUtilisateursProfils th:nth-child(7), #tableUtilisateursProfils td:nth-child(7) { width: 18%; } #tableUtilisateursProfils th:nth-child(8), #tableUtilisateursProfils td:nth-child(8) { width: 8%; } #tableUtilisateursProfils td:nth-child(3), #tableUtilisateursProfils td:nth-child(7) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Onglet Niveau d'accès : Photo / Nom / Groupes / Statut / Actions */ #tableUtilisateursAcces th:nth-child(1), #tableUtilisateursAcces td:nth-child(1) { width: 8%; } #tableUtilisateursAcces th:nth-child(2), #tableUtilisateursAcces td:nth-child(2) { width: 22%; } #tableUtilisateursAcces th:nth-child(3), #tableUtilisateursAcces td:nth-child(3) { width: 42%; } #tableUtilisateursAcces th:nth-child(4), #tableUtilisateursAcces td:nth-child(4) { width: 18%; } #tableUtilisateursAcces th:nth-child(5), #tableUtilisateursAcces td:nth-child(5) { width: 10%; } #tableUtilisateursAcces td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Onglet Trombinoscope : Photo / Nom / Fonction / Ordre */ #tableUtilisateursTrombinoscope th:nth-child(1), #tableUtilisateursTrombinoscope td:nth-child(1) { width: 10%; } #tableUtilisateursTrombinoscope th:nth-child(2), #tableUtilisateursTrombinoscope td:nth-child(2) { width: 35%; } #tableUtilisateursTrombinoscope th:nth-child(3), #tableUtilisateursTrombinoscope td:nth-child(3) { width: 40%; } #tableUtilisateursTrombinoscope th:nth-child(4), #tableUtilisateursTrombinoscope td:nth-child(4) { width: 15%; } #tableUtilisateursTrombinoscope td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* * Ligne de saisie d'un brevet dont le libellé est reconnu par le référentiel FFESSM * (#__gda_mapping_brevets) : le libellé officiel fait foi, le champ est verrouillé par * Brevets.addBrevet(). Le fond neutre signale « donnée validée » plutôt que « champ désactivé ». */ .brevet-item input.is-brevet-officiel { background-color: var(--bs-tertiary-bg, #f8f9fa); font-weight: 500; cursor: default; }