:root { /* Chrome de marque (header, footer) — constant, ne change pas avec le theme */ --chrome-bg: #131315; --chrome-text: #f5f4f0; --chrome-text-muted: rgba(245, 244, 240, 0.6); --chrome-border: #2a2a2c; /* Sidebar admin/membre — deja constante avant la refonte, conservee telle quelle */ --pal-bo-bg: #444; --pal-locked: #444; /* Compte marque comme doublon d'un autre (module Gestion des doublons) — rouge sombre, distinct du bg-danger (adhesion expiree) et du bg-locked (gris). Constante, lisible en texte blanc. */ --pal-doublon: #7a1220; --pal-doublon-bg: color-mix(in srgb, var(--pal-doublon) 14%, transparent); /* Accent rouge de marque — constant */ --pal-red: #d6293a; --pal-red-deep: #630f16; --pal-red-mid: #931b24; /* Version teintee du rouge, meme construction que --pal-success-bg/--pal-warning-bg (fond clair pour badge/bandeau, ex. "adhesion expiree" — cf. AdhesionActive.razor.css) */ --pal-red-bg: color-mix(in srgb, var(--pal-red) 13%, transparent); /* Texte/icone sur fond accent sature (--pal-red et --pal-warning) — constant, blanc lisible sur les deux. Audit du 2026-08-07 (session d'harmonisation) : "color: #fff" etait tape en dur ~24 fois sur des boutons/badges a fond accent au lieu de passer par une variable. */ --pal-on-accent: #fff; /* Chrome sombre du back-office (sidebar) — construits sur --chrome-bg/--pal-red, theme-aware par construction (color-mix suit --chrome-bg/--pal-red qui ne changent pas eux-memes, mais la formule reste coherente si un jour ils bougent). Cf. decisions.md [[backoffice-redesign-kickoff]]. */ --bo-chrome-hover: color-mix(in srgb, white 7%, var(--chrome-bg)); --bo-chrome-active: color-mix(in srgb, var(--pal-red) 24%, var(--chrome-bg)); --bo-chrome-active-icon: #ff8f97; /* Survol de ligne/carte back-office (surfaces claires, theme-aware via --surface-card) et fond "danger" teinte rouge (badges/icones d'alerte back-office). */ --bo-row-hover: color-mix(in srgb, var(--pal-red) 5%, var(--surface-card)); --bo-danger-bg: color-mix(in srgb, var(--pal-red) 12%, transparent); /* Couleurs semantiques (succes/attention) — distinctes de l'accent rouge de marque, bascule clair/sombre (voir blocs dark plus bas) */ --pal-success: #1f7a4d; --pal-success-bg: color-mix(in srgb, var(--pal-success) 13%, transparent); --pal-warning: #a2650f; --pal-warning-bg: color-mix(in srgb, var(--pal-warning) 13%, transparent); --pal-info: #2f6f9e; --pal-info-bg: color-mix(in srgb, var(--pal-info) 13%, transparent); /* Toggle clair/sombre — constant, ne change pas avec le theme */ --icon-sun-color: #f2a93b; --theme-toggle-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Ombre portee sur l'avatar de fiche membre (Trombinoscope) — constant, meme famille que --theme-toggle-shadow ci-dessus. Audit du 2026-08-07 : etait en dur dans TrombinoscopeDetail.razor.css. */ --pal-avatar-shadow: 0 2px 10px rgba(0, 0, 0, .12); /* Medailles podium (Archives) — constant, ne change pas avec le theme */ --podium-gold: #e8d721; --podium-silver: #b9c0c2; --podium-bronze: #c68b22; /* Contenu des popups LinkBlazor Dialog (.pal-msgpop*, EditeCMSPop/EditeLieuPop) — simples alias vers les tokens de surface du site (voir plus bas, meme bloc que --text/--surface-card). Nommes a part pour que le contenu des popups reste lisible que qu'il ne soit garde comme alias theme-aware que via ces 4 variables (plutot que de coder en dur --text/--surface-card dans chaque regle .pal-msgpop-*) : le panneau .lb-dialog lui-meme consomme desormais les memes tokens, voir plus bas [[dialog-chrome-themed]]. */ --dialog-text: var(--text); --dialog-text-muted: var(--text-muted); --dialog-surface: var(--surface-card); --dialog-border: var(--surface-border); /* Palette categorielle agenda (types d'evenements) — bascule clair/sombre (sauf Live et Autre, constants : le rouge de marque reste reserve a Live, Autre reste sur le gris neutre du texte) */ --agenda-live: var(--pal-red); --agenda-online: #c07a12; --agenda-club: #1f7a68; --agenda-ext: #7a4fa3; --agenda-other-t: #3d5a80; --agenda-other: var(--text-muted); /* Degrade footer — bascule clair/sombre (plat en clair, fondu vers le noir en sombre, voir maquette) */ --footer-grad-start: #9c0008; --footer-grad-end: #870005; /* Fond du hero/carrousel accueil (zone visible hors image : fallback sans image, bords du wrapper) — bascule clair/sombre ; le degrade de l'overlay texte reste lui volontairement fixe sur --chrome-bg (lisibilite du texte sur les photos, independante du theme) */ --hero-bg: #f6f5f2; /* Surface de contenu — bascule clair/sombre, voir blocs dark plus bas */ --surface-bg: #ffffff; --surface-card: #f6f5f2; --surface-border: #e7e4dc; --text: #17181a; --text-muted: #6e6c66; /* Points de rupture standards du site : smartphone (defaut, <600px) / tablette / PC petit ecran / PC grand ecran. Non utilisables tels quels dans une condition @media (une custom property n'est pas lisible a cet endroit du CSS) : servent de reference/documentation et sont utilisables en JS (getComputedStyle) ou en valeur de propriete normale. Chaque @media du site doit reprendre une de ces 3 valeurs en dur (voir commentaire "seuil: --bp-*" a cote). */ --bp-tablet: 600px; --bp-desktop-sm: 1024px; --bp-desktop-lg: 1440px; /* CKEditor definit sa propre police par defaut (Helvetica/Arial...), differente de celle du site (voir font-family sur body plus bas) : sans cette ligne, tout contenu riche affiche via .ck-content (news, forum, messagerie, detail tournoi/championnat) tranche visuellement avec le reste du site. */ --ck-content-font-family: 'AtkinsonHyperlegible','Umunu',"Raleway", Roboto, "Helvetica Neue", Arial, sans-serif; /* Police a chasse fixe pour les blocs "formule" de la doc back-office (DocThemeClassement) — constant, ne change pas avec le theme. */ --pal-mono-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Taille des icones SVG inline dans le contenu riche pal-cms-* (.pal-cms-mini-item-icon, .pal-cms-value-icon) — constant, ne change pas avec le theme. Ces icones sont forcement en brut (pas ) : CKEditor supprime les elements inline vides sans contenu texte a la sauvegarde (cf. commentaire sur .pal-cms-ticket dans pal-cms.css), et un sans largeur/hauteur explicite retombe sur sa taille par defaut (300x150) au lieu de suivre le style de son conteneur. */ --pal-cms-icon-size: 1.4rem; /* News : podium d'un classement (.pal-cms-podium) et joueur d'une etape de chronologie (.pal-cms-timeline-player) — tailles constantes, couleurs reprises des tokens existants (--podium-*, --agenda-online), deja declines en theme sombre. */ --pal-cms-podium-avatar-size: 3.5rem; --pal-cms-podium-avatar-size-first: 4.5rem; --pal-cms-podium-medal-size: 1.6rem; --pal-cms-podium-slot-width: 9rem; --pal-cms-podium-step: 1.5rem; --pal-cms-timeline-avatar-size: 2.75rem; --pal-cms-timeline-player-width: 7rem; --pal-cms-timeline-dot-ext: var(--agenda-online); /* Colonne d'evolution d'un classement (.pal-cms-ranking-evo), couleurs = --pal-success / --pal-red. */ --pal-cms-ranking-evo-width: 3.2rem; --pal-cms-ranking-evo-width-mobile: 2.4rem; /* Diametre de la photo du vainqueur dans .pal-cms-winner-card (pal-cms.css, news mensuelle, section Flashback) — constant, ne change pas avec le theme. */ --pal-cms-winner-photo-size: 4.5rem; /* Regle d'elevation "Carte" (audit graphique 2026-08-06/07, harmonisation cartes/sections — voir decisions.md [[cartes-sections-elevation]]) — constant, ne change pas avec le theme. Un seul rayon pour toute carte (isolee ou repetee) ; l'ombre ne marque que les cartes isolees (seul element principal d'une page : Account, CMS). Jamais les deux a la fois avec des valeurs differentes — toute nouvelle carte doit consommer ces variables, pas un nombre en dur. */ --pal-card-radius: 14px; --pal-card-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px -4px rgba(0, 0, 0, .15); /* Texte "hint" (petite explication sous un champ ou un tableau) — constant, ne change pas avec le theme. Aligne sur .pal-bo-form-hint (pal-backoffice.css). */ --pal-hint-font-size: .72rem; --pal-hint-gap: .75rem; /* Regle de forme "Bouton" (audit graphique, harmonisation boutons — voir decisions.md [[boutons-forme-role]]) — constant, ne change pas avec le theme. Rond (50%/999px) reserve aux icones seules sans texte (pagination, avatars, icones de navigation) ; carre-arrondi pour tout le reste (tout bouton avec du texte, CTA, action de formulaire) — y compris 2 exceptions volontaires a la regle "icone seule = rond" : le bouton "j'aime" et le bouton de recherche du header. Toute nouvelle icone-seule doit rester ronde sauf accord explicite. */ --pal-btn-radius: 8px; /* Puce de texte pouvant passer sur 2 lignes (ex. nom de championnat, /GestionUtilisateur/Tournois) — constant, ne change pas avec le theme. Rayon ~ moitie de la hauteur d'une ligne : pilule sur 1 ligne, rectangle arrondi sur 2 (999px en faisait un gros rond). */ --pal-chip-wrap-radius: .8rem; --pal-chip-wrap-max-width: 12rem; /* Largeur minimale d'une colonne "nom" dans un tableau qui defile sur mobile (ex. colonne Tournoi de /GestionUtilisateur/Tournois) : les noms tiennent sur 2 lignes au lieu de 4-5. */ --pal-grid-name-col-min-width: 12rem; /* Casse des en-tetes de tableau (QuickGrid ET tableaux HTML bruts / de bourrage dont toutes les
), site entier — audit du 2026-08-13 : la moitie des grilles avaient un entete en majuscules fixes (text-transform: uppercase code en dur par grille), l'autre moitie non, et certaines grilles melangeaient les deux au sein d'une meme ligne (colonnes triables, enveloppees par QuickGrid dans un
sont vides (aucun item reel derriere) — invisibles tant qu'aucun style de ligne (fond/bordure/hauteur) n'est perceptible, mais visibles des qu'on stylise une grille. Regle generale valable pour toute grille QuickGrid du site (voir aussi le fix specifique deja en place sur Trombinoscope, .card-grid, dont la structure de ligne de bourrage differe legerement). */ .quickgrid tbody tr:not(:has(> td:not(:empty))) { display: none; } .quickgrid input, .quickgrid select { border: none; background-color: inherit; width: 100%; } .bg-inherit { background-color: inherit !important; } .quickgrid .wc-255 { width: 255px; } .quickgrid .wc-135 { width: 135px; } .quickgrid .col-justify-end input { text-align: end; } .quickgrid.quick-nohead th { color: unset; background-color: unset; border-color: unset; } .quickgrid .col-options-button:after { background: none !important; color: white; content: "\F3E0"; font-family: "bootstrap-icons"; } .quickgrid .col-options label { color: black; } .quickgrid .pal-title-vertical .col-title-text { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } .quickgrid td.pal-tournoi-mode, .quickgrid td.pal-tournoi-place { color: white; background-color: #18692b; } .quickgrid tbody tr:nth-of-type(odd) td.pal-tournoi-mode { background-color: #1d552a; } .quickgrid td.pal-tournoi-place { background-color: #004f93; } .quickgrid tbody tr:nth-of-type(odd) td.pal-tournoi-place { background-color: #053b68; } /* /news : le QuickGrid (rendu par une librairie tierce, hors scope CSS isolation Blazor) est transforme visuellement en grille CSS 2 colonnes. La news vedette n'est pas dans cette grille (rendue a part dans NewsList.razor), donc la grille garde toujours un nombre pair d'items et n'a jamais besoin d'une ligne qui s'etale sur les 2 colonnes. */ table.pal-news-grid { display: block; width: 100%; box-sizing: border-box; } .pal-news-grid thead { display: none; } .pal-news-grid tbody { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: 1fr; gap: 1.75rem; } .pal-news-grid tr { display: contents; } /* Specificite renforcee (classe+attribut+3 balises) pour gagner sur la regle par defaut de la librairie QuickGrid elle-meme (Microsoft.AspNetCore.Components.QuickGrid.*.bundle.scp.css) : .quickgrid[theme=default] > tbody > tr > td { padding: 0.1rem calc(0.4rem + var(--col-gap)) 0.1rem 0.4rem; } Plus specifique que notre ancienne regle .pal-news-grid td, d'ou le padding asymetrique observe (colonnes plus decalees a droite qu'a gauche). */ .pal-news-grid.quickgrid[theme=default] > tbody > tr > td { display: block; padding: 0; border: none; min-width: 0; /* sans ca, une cellule de grille CSS ne retrecit jamais sous la taille naturelle de son contenu (ex. un titre sans espace) : la grille 1fr/1fr devient inegale et les cartes ne sont plus alignees sur les bords gauche/droit du bloc. */ } /* seuil: --bp-desktop-sm */ @media (min-width: 1024px) { .pal-news-grid tbody { grid-template-columns: repeat(2, 1fr); } } .quickgrid > tbody > tr > td.pal-tournoi-mode, .quickgrid > tbody > tr > td.pal-tournoi-place { padding: 0; } /*.quickgrid td.pal-rank { background-color: #0c48c4; text-align:center; color:white; }*/ /*Account*/ .pal-account { background-color: var(--surface-bg); padding: 2rem; min-height: 800px; } .ck-editor { width: 100%; } .ck-editor__editable { min-height: 280px; } /* Forum : voir pal-forum.css (fichier dedie, meme principe que pal-manage.css) */ .lb-dialog .ck.ck-balloon-panel { z-index: 2050; } /* Chrome du panneau .lb-dialog (librairie tierce LinkBlazor) — restait blanc en dur jusqu'ici (voir ancien commentaire [[dialog-theme-invariant]] dans decisions.md) : desormais theme via les memes tokens --dialog-* et --surface-card ci-dessus [[dialog-chrome-themed]]. Couvre les ~6 popups qui partagent ce composant (EditeCMSPop, EditeLieuPop, Pop/ImportLive*, BOEditAbo, SearchItemView) sans qu'aucune n'ait besoin d'etre modifiee individuellement : les popups deja sur .pal-msgpop-* heritent directement des alias --dialog-*, les autres (SearchItemView, BOEditAbo, Pop/ImportLive*) utilisent du Bootstrap brut (.form-control/.table/.card) qui lit ses propres variables --bs-* jamais theme-aware par defaut — redefinies ici, scopees a .lb-dialog, memes techniques que --bs-secondary-color (:root, plus haut) et pal-manage.css/SearchView.razor.css (redefinition locale des variables Bootstrap). */ :root { --lb-dialog-background-color: var(--dialog-surface); --lb-dialog-border-radius: var(--pal-card-radius); --lb-dialog-shadow: var(--pal-card-shadow); --lb-dialog-content-padding: 1rem; } .lb-dialog { border: 1px solid var(--dialog-border); color: var(--dialog-text); --bs-body-color: var(--dialog-text); --bs-body-bg: var(--dialog-surface); --bs-border-color: var(--dialog-border); --bs-emphasis-color: var(--dialog-text); --bs-tertiary-bg: var(--dialog-surface); --bs-table-striped-bg: color-mix(in srgb, var(--dialog-text) 5%, transparent); --bs-table-hover-bg: color-mix(in srgb, var(--dialog-text) 7.5%, transparent); --bs-table-active-bg: color-mix(in srgb, var(--dialog-text) 10%, transparent); } .lb-dialog-titlebar-close { --lb-close-border-color: var(--dialog-border); color: var(--dialog-text-muted); } /* CrossIcon (composant LinkBlazor partage par .lb-dialog-titlebar-close et .lb-toast-titlebar-close) rend un sans fill="currentColor" — le trait est donc noir en dur par defaut du navigateur, invisible en theme sombre tant que ce fill n'est pas explicitement rattache a la couleur du bouton parent. */ .lb-dialog-titlebar-close svg, .lb-toast-titlebar-close svg { fill: currentColor; } /* Popup ouvert avec CssClass="pal-pop-noheader" (DialogOptions) : on retire la barre du haut (croix + zone de titre) uniquement. NE PAS toucher à .lb-dialog-titlebar : c'est le conteneur colonne qui enveloppe AUSSI .lb-dialog-content (le corps du popup). Le contenu du popup fournit son propre titre et un bouton « Annuler ». */ .pal-pop-noheader .lb-top-dialog { display: none; } /* Dialogue de confirmation (Dialog.Confirm) : le composant ConfirmDialog de LinkBlazor rend le message dans un simple
sans classe, juste avant .lb-confirm-btn-container, comme un noeud texte — les retours a la ligne d'un message multi-lignes (ex. suppression tournoi/championnat avec liste des consequences) seraient donc ecrases. pre-line les preserve sans figer les espaces d'indentation. */ .lb-dialog :is(div, p):has(+ .lb-confirm-btn-container) { white-space: pre-line; } /* Toasts (LinkBlazor.DialogAndToast) — contrairement a .lb-dialog ([[dialog-theme-invariant]], laisse blanc en dur pour ne pas risquer de casser du contenu back-office), un toast est une notification ephemere sans contenu structure : aucun risque a le themer globalement, front et back-office confondus. La librairie pose des couleurs pleines en dur par severite (#f23939/#39d0f2/#30c833/#f2e339, bordure noire, ombre fixe) — remplacees par le meme langage que les badges/chips semantiques du site (fond teinte clair + liseret/titre colores). */ .lb-toast-item { border: 1px solid var(--surface-border); border-radius: var(--pal-card-radius); background: var(--surface-card); box-shadow: var(--pal-card-shadow); overflow: hidden; /* la plupart des toasts du site n'ont qu'une ligne (titre seul, "mode solo" de la librairie, sans .lb-toast-detail en dessous) : sans hauteur mini ni centrage, le padding du titre seul (pense pour etre suivi d'un detail) laissait un pave bas et desequilibre. */ min-height: 3.75rem; display: flex; flex-direction: column; justify-content: center; } .lb-toast-item:hover { box-shadow: var(--pal-card-shadow); } .lb-toast-titlebar { background: transparent; border-bottom: none; color: var(--text); align-items: center; padding: .5rem 1.1rem; } .lb-toast-titlebar-close { --lb-close-border-color: var(--surface-border); color: var(--text-muted); } .lb-toast-detail { color: var(--text); padding: 0 1.1rem 1rem 1.1rem; } .lb-toast-title { font-weight: 700; } .lb-message-error .lb-toast-item { border-left: 4px solid var(--pal-red); } .lb-message-error .lb-toast-title { color: var(--pal-red); } .lb-message-info .lb-toast-item { border-left: 4px solid var(--pal-info); } .lb-message-info .lb-toast-title { color: var(--pal-info); } .lb-message-success .lb-toast-item { border-left: 4px solid var(--pal-success); } .lb-message-success .lb-toast-title { color: var(--pal-success); } .lb-message-warn .lb-toast-item { border-left: 4px solid var(--pal-warning); } .lb-message-warn .lb-toast-title { color: var(--pal-warning); } /* Dashboard Menus */ .pal-dash-sep > div + div { border-left: 1px solid; padding-left: 7px; } .pal-dash-menu { flex-direction: column; display: flex; background-color: var(--pal-bo-bg) !important; color: var(--chrome-text-muted); min-width: 300px; } /* seuil: --bp-desktop-sm */ @media (min-width:1024px) { .pal-dash-menu { min-height: 100vh; } } .pal-dash-menu.pal-lg { min-height: auto; height: 100%; } /* seuil: --bp-desktop-sm */ @media (min-width:1024px) { .pal-dash-menu.pal-lg { min-height: 100vh; } } .accordion-fakebutton { cursor: pointer; position: relative; } .pal-dash-menu .accordion-button::after { content: '\F282'; background-image: unset; font-family: 'bootstrap-icons' } .pal-dash-menu ul { list-style-type: none; margin-block-start: 0; margin-block-end: 0; padding-inline-start: 0; background-color: color-mix(in srgb, var(--pal-bo-bg) 85%, white 15%); } .pal-dash-menu .accordion-body { padding: unset; } .pal-dash-menu li { padding: 0.6rem 0 0 3.5rem; position: relative; cursor: pointer; } .pal-dash-menu .accordion-button:focus { box-shadow: unset; } .pal-dash-menu .accordion-fakebutton a { padding: 1rem 1.25rem; display: inline-block; } .pal-dash-menu .accordion-fakebutton button { padding: 1rem 1.25rem; display: inline-block; border: unset; color: unset; background-color: unset } .pal-dash-menu .accordion { background-color: var(--pal-bo-bg); } .pal-dash-menu .accordion-button, .pal-dash-menu .accordion-fakebutton, .pal-dash-menu .accordion-button:not(.collapsed), .pal-dash-menu .accordion-item { background-color: var(--pal-bo-bg); border-bottom: 1px solid var(--chrome-border); color: var(--chrome-text-muted); box-shadow: none; } .pal-dash-menu .accordion-button { color: var(--chrome-text-muted); } .pal-dash-menu .accordion-item { border: unset; } .pal-dash-menu a { text-decoration: none; color: var(--chrome-text-muted); width: 100%; } .pal-dash-menu i { margin-right: 4px; } .accordion-header i { margin-right: 8px; } .pal-dash-menu .accordion-fakebutton:hover a, .pal-dash-menu .accordion-button:hover, .pal-dash-menu li:hover a { color: var(--chrome-text); } .pal-dash-menu .accordion-fakebutton:hover, .pal-dash-menu .accordion-button:hover, .pal-dash-menu li:hover { background-color: color-mix(in srgb, var(--pal-bo-bg) 80%, black 20%); } .pal-dash-menu .accordion-body li:last-child { padding-bottom: 8px; } /* Bootstrap*/ .pal-img.img-thumbnail { max-width: unset; } .dropdown-item i { margin-right: 10px; } .nav-link:hover { --bs-nav-link-hover-color: var(--pal-red-deep); } .nav-link { --bs-nav-link-color: var(--pal-red); } .nav-tabs .nav-link { background-color: var(--surface-card); } .nav-tabs { --bs-nav-tabs-link-active-color: #fff; --bs-nav-tabs-link-active-bg: var(--pal-red); --bs-nav-tabs-link-active-border-color: #000; } .nav-tabs .nav-link.active:hover { --bs-nav-tabs-link-active-bg: var(--pal-red-deep); } .nav-tabs:hover { --bs-nav-tabs-link-active-color: #fff; --bs-nav-tabs-link-active-bg: var(--pal-red); --bs-nav-tabs-link-active-border-color: #000; } .card-header { background-color: hsl(from var(--pal-red) h s l / 0.05); } .accordion-button:not(.collapsed) { color: white; background-color: var(--pal-red); box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--pal-red); } .accordion-button:focus { z-index: 3; outline: 0; box-shadow: 0 0 0 0.1rem hsl(from var(--pal-red) h s l / 0.2); } .accordion-button:not(.collapsed)::after { filter: invert(100%) sepia(100%) saturate(14%) hue-rotate(212deg); } .breadcrumb-item + .breadcrumb-item::before { content: var(--bs-breadcrumb-divider, ">"); } /* Quick Grid */ td.pal-pill-info { color: var(--bs-info); } .qg-max-300 { max-height: 300px; overflow: auto; } .pal-bo label, .pal-profil label, .pal-login label { font-weight: bold; } .pal-bo input.form-control, .pal-profil input.form-control, .pal-login input.form-control, .pal-bo select.form-control, .pal-profil select.form-control, .pal-login select.form-control, .pal-bo div.input-group, .pal-profil div.input-group, .pal-login div.input-group { margin-bottom: 0.5rem; } .pal-bo .input-group input.form-control { margin-bottom: unset; } .pal-sticky-button { display: flex; justify-content: center; margin-top: 0.4rem; padding: 0.25rem 0; position: -webkit-sticky; position: sticky; bottom: 0; z-index: 400; /* Fond blanc translucide + bordure grise fixes (codes en dur avant cette session) : invisible/ incoherent en theme sombre. Utilise sur 14 pages (front + back-office). */ background-color: hsl(from var(--surface-card) h s l / .85); border: 1px solid var(--surface-border); border-radius: 5px; } /*User Defined*/ .pal-user-cms .pal-flex-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin: 30px 0; } .pal-user-cms .pal-flex-item { display: flex; flex-direction: column; align-items: center; width: 360px; } .pal-user-cms .pal-team-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; padding: 40px; } .pal-user-cms .pal-team-member { display: flex; flex-direction: column; align-items: center; text-align: center; width: 200px; } .pal-user-cms .pal-team-member img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 5px; } .pal-user-cms .pal-member-role { font-size: 18px; color: #A00500; } .pal-user-cms .pal-member-name { font-size: 14px; font-weight: bold; color: #222; } .ck-editor__editable { min-height: 0px; } /* ============================================================================ Affiliation Winamax — encart de l'espace membre (/GestionUtilisateur/Dashboard) Uniquement textuel, fond de couleur selon le statut. Ne revele jamais le caractere exceptionnel/restreint (libelles neutres cote front-office). ============================================================================ */ .pal-affil-fo { --_c: var(--text-muted); --_bg: color-mix(in srgb, var(--pal-tier-none) 30%, transparent); /* Colonne : le bloc d'actions passe TOUJOURS sous le texte (avant : cote a cote avec justify-content:space-between, l'action ne descendait qu'a l'etroit — incoherent d'un statut a l'autre selon la longueur du message). */ display: flex; flex-direction: column; gap: .7rem; padding: 1rem 1.25rem; margin-bottom: 1.5rem; border-radius: var(--pal-card-radius); border: 1px solid color-mix(in srgb, var(--_c) 32%, transparent); background-color: var(--_bg); } .pal-affil-fo--ok { --_c: var(--pal-success); --_bg: var(--pal-success-bg); } .pal-affil-fo--pending { --_c: var(--pal-info); --_bg: var(--pal-info-bg); } /* Cas « a traiter » (pseudo non reconnu, autre club) : orange, comme .pal-affil-bo--warn cote back-office — distingue « tu dois faire quelque chose » de « tu n'es simplement pas affilie ». */ .pal-affil-fo--warn { --_c: var(--pal-warning); --_bg: var(--pal-warning-bg); } .pal-affil-fo-main { display: flex; flex-direction: column; gap: .2rem; min-width: 0; } .pal-affil-fo-title { font-weight: 800; color: var(--_c); } .pal-affil-fo-msg { font-size: .9rem; color: var(--text); } .pal-affil-fo-actions { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; } .pal-affil-fo-actions a, .pal-affil-fo-actions button { font-size: .86rem; font-weight: 700; color: var(--_c); background: none; border: 1px solid color-mix(in srgb, var(--_c) 45%, transparent); border-radius: 999px; padding: .35rem .9rem; text-decoration: none; cursor: pointer; }