:root { --team-blue: #0a4d68; --team-cyan: #088395; --team-light: #05bfdb; /* Couleurs pilotées par le thème (clair par défaut, redéfinies en sombre plus bas). */ --fond-page: #f4f9fb; --fond-carte: #ffffff; --ombre-carte: 0 2px 10px rgba(10, 77, 104, 0.08); --opacite-filigrane: 0.05; } :root[data-theme="dark"] { --fond-page: #12161a; --fond-carte: #1b2128; --ombre-carte: 0 2px 12px rgba(0, 0, 0, 0.45); --opacite-filigrane: 0.04; } body { background-color: var(--fond-page); font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } h1, h2, h3, h4, h5, h6, .navbar-brand { font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 700; } /* --- Filigrane du logo, centré et discret sur toutes les pages ------------------- */ .page-watermark { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; overflow: hidden; } .page-watermark img { width: min(55vw, 640px); max-width: 90vw; opacity: var(--opacite-filigrane); user-select: none; } /* --- Header : même esprit qu'organizor.app (flou, pilules) mais en thème clair --- */ .app-navbar { /* --team-color est défini en inline sur , à partir de la couleur choisie pour l'équipe (fiche club) ; --team-blue sert de repli si aucune couleur n'est définie. */ background-color: var(--team-color, var(--team-blue)); background-color: color-mix(in srgb, var(--team-color, var(--team-blue)) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.18); position: sticky; top: 0; z-index: 1030; } /* Bloc de marque : nom de l'application, puis "Team : " + logo juste en dessous. */ /* Le nom de l'application sert de sur-titre : c'est le bloc "Team : " + logo, juste en dessous, qui domine visuellement (comme sur la maquette du club). */ .app-navbar .navbar-brand { font-size: 1rem; letter-spacing: 0.03em; line-height: 1.1; } .brand-equipe { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.25rem; padding-left: 0.15rem; color: #fff !important; text-decoration: none; } .brand-equipe:hover { color: #fff !important; opacity: 0.9; } .brand-equipe-label, .brand-equipe-nom { color: #fff !important; } .brand-equipe-label { font-family: Georgia, "Times New Roman", serif; font-size: 2.1rem; line-height: 1; } .brand-equipe-nom { font-weight: 700; font-size: 1.5rem; letter-spacing: 0.02em; text-transform: uppercase; } .brand-equipe-logo { height: 58px; width: 58px; object-fit: contain; border-radius: 12px; background: #fff; padding: 3px; margin-left: 0.35rem; } .app-navbar .nav-link { border-radius: 100px; padding: 0.5rem 0.9rem !important; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.02em; transition: background-color 0.15s ease; } .app-navbar .nav-link:hover, .app-navbar .nav-link:focus, .app-navbar .dropdown-toggle:hover { background-color: rgba(255, 255, 255, 0.14); } .app-navbar .dropdown-toggle { border-radius: 100px; padding: 0.5rem 0.9rem !important; font-weight: 600; } .btn-nav-pill { display: inline-block; border-radius: 100px; background-color: #fff; color: var(--team-color, var(--team-blue)) !important; font-weight: 800; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.04em; padding: 0.5rem 1.3rem; border: none; text-decoration: none; transition: filter 0.15s ease; } .btn-nav-pill:hover { filter: brightness(0.94); color: var(--team-color, var(--team-blue)); } /* Bascule clair / sombre, dans le header (même principe que sur organizor.app). */ .theme-btn { background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 100px; width: 38px; height: 38px; line-height: 1; font-size: 1rem; padding: 0; cursor: pointer; transition: background-color 0.15s ease; } .theme-btn:hover { background: rgba(255, 255, 255, 0.3); } /* --- Boutons : forme pilule + petites majuscules grasses, façon organizor.app ---- */ .btn { border-radius: 100px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.8rem; } .btn-sm { font-size: 0.72rem; padding: 0.35rem 0.9rem; } .btn-primary { background-color: var(--team-color, var(--team-blue)); border-color: var(--team-color, var(--team-blue)); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--team-color, var(--team-blue)) !important; border-color: var(--team-color, var(--team-blue)) !important; filter: brightness(0.92); } .btn-outline-primary { color: var(--team-color, var(--team-blue)); border-color: var(--team-color, var(--team-blue)); } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active { background-color: var(--team-color, var(--team-blue)) !important; border-color: var(--team-color, var(--team-blue)) !important; } /* --- Cartes, badges, tuiles de stats : accent couleur équipe, clair ou sombre ---- */ .card-fiche { border: none; border-radius: 0.75rem; background-color: var(--fond-carte); box-shadow: var(--ombre-carte); } .badge-categorie { background-color: color-mix(in srgb, var(--team-color, var(--team-light)) 55%, white); } .stat-card { border-radius: 0.75rem; color: #fff; background: linear-gradient( 135deg, var(--team-color, var(--team-blue)), color-mix(in srgb, var(--team-color, var(--team-blue)) 55%, black) ); } /* En thème sombre, les tableaux et fonds "blancs" de Bootstrap doivent suivre. `.bg-white` est posé en dur sur les tableaux de listes : on le neutralise ici. */ :root[data-theme="dark"] .bg-white { background-color: var(--fond-carte) !important; } :root[data-theme="dark"] .badge-categorie { background-color: color-mix(in srgb, var(--team-color, var(--team-light)) 70%, black); color: #fff !important; } /* ================================================================= Adaptation mobile et tablette ================================================================= */ /* --- Tableaux : cartes empilées sur mobile ------------------------------- Sur un écran de téléphone, un tableau de 6 colonnes impose un défilement horizontal pénible. En dessous de 768px, chaque ligne devient une carte et chaque cellule affiche son intitulé (attribut data-label du ). */ @media (max-width: 767.98px) { .table-cartes thead { display: none; } .table-cartes, .table-cartes tbody, .table-cartes tr, .table-cartes td { display: block; width: 100%; } .table-cartes tbody tr { background-color: var(--fond-carte); border-radius: 0.75rem; box-shadow: var(--ombre-carte); margin-bottom: 0.75rem; padding: 0.35rem 0; overflow: hidden; } .table-cartes tbody td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: none; padding: 0.4rem 0.9rem; text-align: right; } /* Intitulé de colonne, repris à gauche de chaque valeur. */ .table-cartes tbody td::before { content: attr(data-label); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.02em; opacity: 0.65; text-align: left; flex-shrink: 0; } /* Une cellule sans intitulé (colonne d'actions) occupe toute la largeur. */ .table-cartes tbody td:not([data-label]) { justify-content: stretch; padding-top: 0.6rem; } .table-cartes tbody td:not([data-label]) .btn { flex: 1 1 auto; } /* La première cellule sert de titre à la carte. */ .table-cartes tbody td:first-child { background-color: rgba(128, 128, 128, 0.08); font-weight: 600; padding-top: 0.6rem; padding-bottom: 0.6rem; } /* Le conteneur de défilement n'a plus lieu d'être une fois en cartes. */ .table-responsive:has(.table-cartes) { overflow-x: visible; } /* Les boutons d'action des fiches passent en pleine largeur, empilés. */ .actions-fiche { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; } .actions-fiche > .btn, .actions-fiche > form, .actions-fiche > form > .btn { width: 100%; } } /* --- Header : le bloc de marque se réduit sur petit écran ---------------- */ @media (max-width: 991.98px) { .app-navbar .navbar-brand { font-size: 0.82rem; } .brand-equipe-label { font-size: 1.45rem; } .brand-equipe-nom { font-size: 1.05rem; /* Un nom d'équipe long ne doit pas pousser le bouton de menu hors écran. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 42vw; } .brand-equipe-logo { height: 40px; width: 40px; } } @media (max-width: 400px) { .brand-equipe-label { font-size: 1.2rem; } .brand-equipe-nom { font-size: 0.92rem; max-width: 34vw; } .brand-equipe-logo { height: 34px; width: 34px; } } /* --- Confort tactile : cibles assez grandes pour le doigt ---------------- */ @media (max-width: 767.98px) { .btn-sm { padding: 0.45rem 0.9rem; font-size: 0.75rem; } .app-navbar .nav-link { padding: 0.6rem 0.9rem !important; } /* Le filigrane, discret sur grand écran, ne doit pas gêner la lecture. */ .page-watermark img { width: 80vw; } }