/* Définies sur :root (pas seulement .bdgt-app) car les fenêtres modales (calendrier, chat, score…) sont ajoutées directement à , en dehors de .bdgt-app — sans ça, var(--bdgt-ink) etc. y sont invalides et le texte retombe sur la couleur crème du thème sitewide. */ :root { --bdgt-accent: #4a9a54; --bdgt-accent-dark: #3d8046; --bdgt-ink: #2b2a27; --bdgt-muted: #8a8377; --bdgt-line: #e8e2d6; --bdgt-bg-card: #ffffff; --bdgt-bg-page: #f8f5ee; --bdgt-radius: 14px; --bdgt-font-display: inherit; } .bdgt-app { font-family: inherit; color: var(--bdgt-ink); max-width: 720px; margin: 0 auto; width: 100%; box-sizing: border-box; overflow-x: hidden; } .bdgt-app * { box-sizing: border-box; min-width: 0; } .bdgt-header { margin-bottom: 20px; } .bdgt-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .bdgt-edit-link { display: inline-block; margin-top: 6px; font-size: 0.8rem; color: #7A7A7A; text-decoration: underline; opacity: 0.7; } .bdgt-edit-link:hover { opacity: 1; } .bdgt-voir-link { display: inline-block; margin-top: 8px; padding: 3px 10px; font-size: 0.75rem; border: 1px solid currentColor; border-radius: 999px; text-decoration: none; opacity: 0.8; } .bdgt-voir-link:hover { opacity: 1; } .bdgt-date { color: var(--bdgt-muted); font-size: 0.9rem; } .bdgt-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; background: var(--bdgt-line, #e4e2df); color: var(--bdgt-ink); } .bdgt-badge--en_cours, .bdgt-badge--phase_finale { background: #fde8bd; color: #7a4b00; } .bdgt-badge--termine { background: #dcefdf; color: #1f6f43; } .bdgt-section { background: var(--bdgt-bg-card); border: 1px solid var(--bdgt-line); border-radius: var(--bdgt-radius); padding: 22px 20px; margin-bottom: 20px; box-shadow: 0 1px 2px rgba(43, 42, 39, 0.04), 0 10px 28px rgba(43, 42, 39, 0.05); } @media ( max-width: 480px ) { .bdgt-app { max-width: 100vw; width: 100vw; margin-left: calc( 50% - 50vw ); margin-right: calc( 50% - 50vw ); padding: 0 6px; } .bdgt-section { width: 100%; border-left: none; border-right: none; border-radius: 0; padding: 14px 12px; margin-bottom: 10px; box-shadow: none; } } .bdgt-accueil-logo { display: flex; justify-content: center; margin-bottom: 16px; } .bdgt-accueil-logo img { max-width: 180px; width: 100%; height: auto; } .bdgt-accueil-actions { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; } .bdgt-create-panel { width: 100%; max-width: 320px; text-align: center; } .bdgt-create-panel summary { display: inline-block; list-style: none; } .bdgt-create-panel summary::-webkit-details-marker, .bdgt-create-panel summary::marker { display: none; content: ''; } /* Widget "Tournoi" de l'accueil : ne pas centrer, s'aligner sur le titre au-dessus */ .bdgt-accueil { margin-left: 0 !important; margin-right: auto !important; } /* Liste accordéon "Tournois en cours / Historique / Créer un tournoi" */ .bdgt-accordion-list { border: 1px solid rgba(236, 231, 226, 0.25); border-radius: 4px; overflow: hidden; margin: 0 auto 24px 0; max-width: min(480px, calc(100vw - 72px)); box-sizing: border-box; /* Permet aux tailles de texte ci-dessous (en cqw) de suivre la largeur du conteneur Elementor plutôt que celle de tout l'écran (vw) — redimensionne ce conteneur dans l'éditeur pour changer la taille de tout le bloc. */ container-type: inline-size; } .bdgt-accordion-row { position: relative; border-bottom: 1px solid rgba(236, 231, 226, 0.25); background: #6b6b6b; overflow: hidden; } .bdgt-accordion-row::before { content: ''; position: absolute; inset: 0; background: #0c0c0c; clip-path: inset(0 0 100% 0); transition: clip-path 0.8s cubic-bezier(0.65, 0, 0.35, 1); z-index: 0; pointer-events: none; } .bdgt-accordion-row.bdgt-row-revealed::before { clip-path: inset(0 0 0% 0); } .bdgt-accordion-row summary, .bdgt-accordion-row .bdgt-accordion-content, .bdgt-accordion-row--link > * { position: relative; z-index: 1; } /* Le libellé est dans un (contrairement au texte nu de

), donc la règle sitewide "span { font-family: ... !important }" le cible directement et gagne sur l'héritage du parent : on doit la re-cibler ici aussi. */ .bdgt-accordion-row--link > * { font-family: 'Bastardo Grotesk', sans-serif !important; } .bdgt-accordion-row:last-child { border-bottom: none; } .bdgt-accordion-row summary { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; padding: 16px 18px; font-family: 'Bastardo Grotesk', sans-serif; font-size: clamp(15px, 4cqw, 32px); font-weight: 400; color: var(--bdgt-cream, #ece7e2); } .bdgt-accordion-row summary::-webkit-details-marker, .bdgt-accordion-row summary::marker { display: none; content: ''; } .bdgt-accordion-icon { position: relative; width: 16px; height: 16px; flex: 0 0 auto; } .bdgt-accordion-icon::before, .bdgt-accordion-icon::after { content: ''; position: absolute; top: 50%; left: 50%; background: currentColor; transform: translate(-50%, -50%); transition: transform 0.2s ease; } .bdgt-accordion-icon::before { width: 16px; height: 1.5px; } .bdgt-accordion-icon::after { width: 1.5px; height: 16px; } .bdgt-accordion-row[open] .bdgt-accordion-icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleY(0); } .bdgt-accordion-row--link { display: flex; align-items: center; justify-content: space-between; text-decoration: none; cursor: pointer; padding: 16px 18px; font-family: 'Bastardo Grotesk', sans-serif !important; font-size: clamp(15px, 4cqw, 32px); font-weight: 400; color: var(--bdgt-cream, #ece7e2) !important; } .bdgt-accordion-row--link:hover { color: var(--bdgt-cream, #ece7e2) !important; } .bdgt-historique-titles { list-style: none; margin: 0; padding: 0; } .bdgt-historique-titles li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(236, 231, 226, 0.12); font-family: 'Archivo Thin', sans-serif; font-weight: 100; font-size: clamp(13px, 12.17px + 0.221vw, 15px); color: var(--bdgt-cream, #ece7e2); } .bdgt-historique-titles li:last-child { border-bottom: none; } .bdgt-historique-title-link { flex: 0 0 auto; color: var(--bdgt-cream, #ece7e2) !important; text-decoration: none; font-size: 18px; line-height: 1; opacity: 0.7; } .bdgt-historique-title-link:hover { color: var(--bdgt-cream, #ece7e2) !important; opacity: 1; } .bdgt-accordion-content { padding: 0 18px 20px; } /* Page /tournoi/ : contenu toujours déplié (pas d'accordéon), sections empilées */ /* Plus spécifique que .bdgt-accueil (qui force margin-left:0 pour l'usage sur l'accueil) : sur la page /tournoi/ dédiée, on veut bien centrer le bloc. */ .bdgt-accueil.bdgt-full-page { /* Pas de max-width fixe : la taille suit le conteneur Elementor qui entoure ce widget shortcode — redimensionne CE conteneur dans l'éditeur (Mise en page > Largeur) pour changer la taille de tout le bloc. */ container-type: inline-size; max-width: 100%; margin: 0 auto 24px !important; } .bdgt-full-section { border-bottom: 1px solid rgba(236, 231, 226, 0.25); padding: 24px 0; } .bdgt-full-section:first-child { padding-top: 0; } .bdgt-full-section:last-child { border-bottom: none; padding-bottom: 0; } .bdgt-full-heading { margin: 0 0 16px; font-family: 'Bastardo Grotesk', sans-serif !important; font-size: clamp(15px, 4cqw, 32px); font-weight: 400; color: var(--bdgt-cream, #ece7e2); } .bdgt-full-content { color: var(--bdgt-cream, #ece7e2); } /* Toute la page /tournoi/ en Bastardo Grotesk (le CSS global du thème force sinon une police générique sur p/li/span/a/h1-h6 avec !important). */ .bdgt-full-page, .bdgt-full-page * { font-family: 'Bastardo Grotesk', sans-serif !important; } /* L'historique complet (.bdgt-legacy-historique) est stylé pour le thème clair d'origine du plugin (var(--bdgt-ink) sombre) ; sur /tournoi/ il s'affiche maintenant sur le fond sombre du site, donc on repasse le texte en crème. */ .bdgt-full-content .bdgt-legacy-historique { border-top-color: rgba(236, 231, 226, 0.25); } .bdgt-full-content .bdgt-legacy-historique h4, .bdgt-full-content .bdgt-legacy-historique .bdgt-historique-titre, .bdgt-full-content .bdgt-historique-date { color: var(--bdgt-cream, #ece7e2); } .bdgt-full-content .bdgt-legacy-historique ul { color: rgba(236, 231, 226, 0.75); } .bdgt-full-content .bdgt-accueil-list a { color: var(--bdgt-cream, #ece7e2); } .bdgt-full-content .bdgt-accueil-list li { border-bottom-color: rgba(236, 231, 226, 0.25); } /* Petit "+" à droite du titre qui déplie une section (Historique, Créer un tournoi) repliée par défaut, au lieu de tout afficher dès l'ouverture. */ .bdgt-section-toggle-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; } .bdgt-section-toggle-summary::-webkit-details-marker, .bdgt-section-toggle-summary::marker { display: none; content: ''; } .bdgt-section-toggle-summary .bdgt-full-heading { margin: 0; } .bdgt-section-toggle-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(236, 231, 226, 0.4); color: var(--bdgt-cream, #ece7e2); } .bdgt-section-toggle-icon::before { content: '+'; font-size: 18px; line-height: 1; } .bdgt-section-toggle[open] .bdgt-section-toggle-icon::before { content: '\2212'; } .bdgt-section-toggle .bdgt-full-content { margin-top: 16px; } /* Tournoi à venir : titre, case affiche (vide/blanche tant qu'aucune image n'a été renseignée à la création du tournoi) et bouton d'inscription. */ .bdgt-a-venir { display: flex; flex-direction: column; align-items: center; text-align: center; } .bdgt-a-venir-titre { margin: 0 0 16px; font-family: 'Bastardo Grotesk', sans-serif; font-size: clamp(18px, 14.72px + 0.884vw, 26px); font-weight: 400; } .bdgt-a-venir-affiche { width: 100%; max-width: 320px; aspect-ratio: 210 / 297; background: var(--bdgt-cream, #ece7e2); border-radius: 4px; overflow: hidden; margin: 0 auto 16px; } /* Sur /tournoi/, 320px de large occupe presque tout un écran de téléphone — même réduction que l'affiche d'inscription. */ @media ( max-width: 480px ) { .bdgt-a-venir-affiche { max-width: 200px; } } /* Affiche affichée en tête de la section Inscriptions, sur la page du tournoi lui-même (là où on inscrit son équipe) — plus petite que la taille de base, surtout sur téléphone où 320px de large occupe presque tout l'écran. */ .bdgt-inscription-affiche { max-width: 220px; margin-left: auto; margin-right: auto; } @media ( max-width: 480px ) { .bdgt-inscription-affiche { max-width: 160px; } } .bdgt-a-venir-affiche img { display: block; width: 100%; height: 100%; object-fit: cover; } .bdgt-a-venir-btn { text-decoration: none; background: #ffffff !important; color: #1b170f !important; } /* Bloc accueil ("Tournoi à venir" / "Tournoi en cours") : une seule affiche + un seul titre (le même évènement, seul le format/la série change), puis un lien texte par tournoi/série accessible — voir render_a_venir_titre() dans class-shortcode.php. */ /* Le conteneur Elementor qui héberge ce widget (flex-direction:column, dans une rangée flex-direction:row) ne s'agrandit pas toujours correctement pour suivre la hauteur réelle du contenu — le surplus déborde alors par-dessus la section suivante. On force ces ancêtres à suivre leur contenu plutôt que de garder une hauteur figée. */ .elementor-element-94983cf, .elementor-element-5701feb, .elementor-element-5701feb .elementor-widget-container, .elementor-element-5701feb .elementor-shortcode, .elementor-element-f35e397, .elementor-element-f35e397 .elementor-widget-container, .elementor-element-f35e397 .elementor-shortcode { height: auto !important; flex: 0 0 auto !important; } .bdgt-a-venir-carte-titre { display: block; width: 100%; margin: 0 0 12px; text-align: left; font-family: 'Bastardo Grotesk', sans-serif; font-size: clamp(14px, 11.72px + 0.884vw, 20px); line-height: 1.25; font-weight: 400; color: #ece7e2; overflow-wrap: break-word; } /* Sur l'accueil, l'affiche ne doit pas dépasser la taille du bloc voisin (le texte "Tournois tout au long de l'année…" à sa gauche) — nettement plus petite que dans les autres contextes (page du tournoi, inscription). */ .bdgt-a-venir-hero-affiche { max-width: 160px; margin: 0 0 12px; } .bdgt-a-venir-hero-label { display: block; margin: 0 0 8px; font-family: 'Bastardo Grotesk', sans-serif; font-weight: 700; color: #ece7e2; } .bdgt-a-venir-liens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .bdgt-a-venir-liens li { display: flex; align-items: baseline; gap: 8px; } .bdgt-a-venir-liens li::before { content: '•'; color: #ece7e2; } .bdgt-a-venir-liens a { font-family: 'Bastardo Grotesk', sans-serif; color: #ece7e2; text-decoration: none; } .bdgt-a-venir-carte-btn { text-decoration: none; background: #ffffff !important; color: #1b170f !important; } /* Catégorie (balle noire/bleue) + séries à cocher dans le formulaire de création, pour créer plusieurs tournois liés en une fois. */ .bdgt-categorie-fieldset { border: 1px solid rgba(236, 231, 226, 0.25); border-radius: 8px; padding: 10px 12px; margin: 0; } .bdgt-categorie-label { display: flex; align-items: center; gap: 8px; color: var(--bdgt-cream, #ece7e2); font-weight: 600; } .bdgt-serie-group { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; padding-left: 24px; } .bdgt-serie-label { display: flex; align-items: center; gap: 6px; color: var(--bdgt-cream, #ece7e2); font-size: 0.9rem; } /* Champ d'upload de l'affiche dans le formulaire de création */ .bdgt-affiche-field-label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--bdgt-cream, #ece7e2); } /* Petit label au-dessus des champs date/date-heure (Android n'affiche pas de texte "jj/mm/aaaa" dans le champ lui-même tant qu'aucune date n'est choisie, contrairement au bureau — sans lui la case vide semblait cassée). Couleur adaptée au fond du contexte : crème sur la page sombre /tournoi/, sombre à l'intérieur d'une modale blanche. */ .bdgt-field-label { display: block; font-size: 0.8rem; margin: 0 0 4px; } .bdgt-create-form .bdgt-field-label { color: var(--bdgt-cream, #ece7e2); } .bdgt-modal-card .bdgt-field-label { color: var(--bdgt-ink); } .bdgt-create-form { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; text-align: left; } .bdgt-btn-create { display: inline-block; background: var(--bdgt-accent, #4a9a54); color: #fff; text-decoration: none; font-weight: 700; border-radius: 999px; padding: 12px 26px; cursor: pointer; border: none; font-size: 1rem; } .bdgt-btn-create:hover { background: var(--bdgt-accent-dark); color: #fff; } .bdgt-accueil-list, .bdgt-historique-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .bdgt-accueil-list li, .bdgt-historique-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 4px; border-bottom: 1px solid var(--bdgt-line); } .bdgt-accueil-list li:last-child, .bdgt-historique-list li:last-child { border-bottom: none; } .bdgt-accueil-list a, .bdgt-historique-list a { color: var(--bdgt-ink); font-weight: 700; text-decoration: none; } .bdgt-accueil-list a:hover, .bdgt-historique-list a:hover { text-decoration: underline; } .bdgt-historique-date { color: var(--bdgt-muted); font-size: 0.8rem; white-space: nowrap; } .bdgt-historique-titre { color: var(--bdgt-ink); text-decoration: none; } .bdgt-historique-titre:hover { text-decoration: underline; } .bdgt-legacy-historique { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--bdgt-line); } .bdgt-legacy-historique h4 { margin: 0 0 6px; font-size: 0.95rem; } .bdgt-legacy-historique ul { margin: 0 0 16px; padding-left: 20px; color: var(--bdgt-muted); font-size: 0.9rem; } .bdgt-legacy-historique ul:last-child { margin-bottom: 0; } .bdgt-section-title { margin: 0 0 18px; font-weight: 700; font-size: 1.5rem; line-height: 1.15; text-align: center; letter-spacing: -0.005em; color: var(--bdgt-ink); display: block; position: relative; padding-bottom: 14px; } .bdgt-section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 36px; height: 3px; border-radius: 2px; background: var(--bdgt-accent, #4a9a54); } .bdgt-historique-panel summary.bdgt-section-title { cursor: pointer; list-style: none; } .bdgt-historique-panel summary.bdgt-section-title::-webkit-details-marker { display: none; } .bdgt-historique-panel summary.bdgt-section-title::before { content: '▸'; display: inline-block; margin-right: 6px; transition: transform 0.15s ease; color: var(--bdgt-accent, #4a9a54); } .bdgt-historique-panel[open] summary.bdgt-section-title::before { transform: rotate(90deg); } .bdgt-historique-panel[open] summary.bdgt-section-title { margin-bottom: 18px; } .bdgt-round-title { margin: 18px 0 8px; font-size: 0.95rem; color: var(--bdgt-muted); text-transform: uppercase; letter-spacing: 0.04em; } .bdgt-round-title:first-of-type { margin-top: 0; } .bdgt-matches { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; } .bdgt-match-wrapper { display: flex; flex-direction: column; } .bdgt-match { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr); align-items: center; gap: 2px 8px; padding: 3px 6px; border-radius: 8px 8px 0 0; background: var(--bdgt-bg-page); font-size: clamp(0.8rem, 3.6vw, 0.92rem); } .bdgt-chat-row-outside { display: flex; justify-content: flex-end; background: var(--bdgt-bg-page); border-radius: 0 0 8px 8px; padding: 0 6px 1px; } .bdgt-chat-icon { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: none; border-radius: 50%; background: #1f6f43; font-size: 0.8rem; line-height: 1; cursor: pointer; padding: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } .bdgt-chat-icon:hover { background: #17532f; } .bdgt-team { min-width: 0; overflow: hidden; color: var(--bdgt-ink) !important; } .bdgt-team--a { text-align: left; } .bdgt-team--b { text-align: right; } .bdgt-team--winner { font-weight: 700; } .bdgt-team-line { display: block; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bdgt-team-line--short { display: none; } @media ( max-width: 480px ) and ( orientation: portrait ) { .bdgt-team-line--full { display: none; } .bdgt-team-line--short { display: block; } } .bdgt-score-cell { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; } .bdgt-score-display { font-weight: 700; white-space: nowrap; min-width: 3em; text-align: center; padding: 0 0.5em; border-radius: 6px; background: #fff; border: 1px solid var(--bdgt-line); } .bdgt-score-display--pending { font-weight: 400; color: var(--bdgt-muted); font-size: 0.85rem; border-style: dashed; } .bdgt-play-btn { display: flex; align-items: center; gap: 6px; padding: 0.3em 0.7em; border: none; border-radius: 999px; background: var(--bdgt-accent, #4a9a54); color: #fff; font-weight: 700; font-size: 0.85em; letter-spacing: 0.03em; cursor: pointer; white-space: nowrap; } .bdgt-play-btn:hover { background: var(--bdgt-accent-dark); } .bdgt-play-btn--live { background: #c9860c; } .bdgt-play-btn--done { background: #1f5fa8; } .bdgt-play-btn--done:hover { background: #164a87; } .bdgt-stat-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: none; border-radius: 50%; background: var(--bdgt-line, #e4e2df); font-size: 1rem; cursor: pointer; flex-shrink: 0; } .bdgt-stat-btn:hover { background: #d7d4cf; } .bdgt-archive-btn { border: none; border-radius: 999px; padding: 5px 14px; background: #1a1a1a; color: #fff; font-size: 0.8rem; font-weight: 600; cursor: pointer; } .bdgt-archive-btn:hover { background: #333; } .bdgt-badge--archive { background: #e9e6e1; color: #4a4642; } .bdgt-modal-card--stat { max-width: 380px; } .bdgt-stat-chart { background: #fff; border-radius: 10px; padding: 8px; } .bdgt-stat-chart svg { width: 100%; height: auto; display: block; } .bdgt-stat-legend { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 0.85rem; } .bdgt-stat-legend-item { position: relative; padding-left: 18px; } .bdgt-stat-legend-item::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 12px; height: 3px; border-radius: 2px; } .bdgt-stat-legend-item--a::before { background: #b3272d; } .bdgt-stat-legend-item--b::before { background: #1f5fa8; } .bdgt-live-wrap { display: inline-flex; align-items: center; gap: 6px; } .bdgt-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #c9860c; animation: bdgt-pulse 1.2s ease-in-out infinite; } @keyframes bdgt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .bdgt-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .bdgt-standings { border-collapse: collapse; width: 100%; font-size: 0.88rem; } .bdgt-standings th, .bdgt-standings td { padding: 7px 10px; border-bottom: 1px solid var(--bdgt-line); text-align: left; white-space: nowrap; } .bdgt-standings th { color: var(--bdgt-muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; } .bdgt-row--lead td:first-child { font-weight: 700; color: var(--bdgt-accent-dark); } @media ( max-width: 480px ) { .bdgt-standings th, .bdgt-standings td { padding: 6px 6px; font-size: 0.82rem; } } /* Scoreboard (umpire mode) */ .bdgt-scoreboard { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; font-family: inherit; overflow: hidden; } .bdgt-sb-half { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; color: #fff; padding: 6px 14px; overflow: hidden; } .bdgt-sb-half--a { background: #b3272d; } .bdgt-sb-half--b { background: #1f5fa8; } .bdgt-sb-name { background: #fff; color: var(--bdgt-ink, #54595F); font-size: clamp( 0.85rem, 4.5dvh, 1.2rem ); font-weight: 700; padding: 6px 16px; border-radius: 10px; max-width: 90%; text-align: center; overflow-wrap: break-word; } .bdgt-sb-name-line { display: block; line-height: 1.25; } .bdgt-sb-rank { font-size: clamp( 0.65rem, 2.2dvh, 0.85rem ); font-weight: 600; color: rgba(255, 255, 255, 0.85); background: rgba(0, 0, 0, 0.2); padding: 3px 10px; border-radius: 999px; } .bdgt-sb-score { font-size: clamp( 2rem, 11dvh, 3.4rem ); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .bdgt-sb-controls { display: flex; gap: clamp( 10px, 3dvh, 18px ); } .bdgt-sb-btn { width: clamp( 56px, 13dvh, 88px ); height: clamp( 56px, 13dvh, 88px ); border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.92); color: var(--bdgt-ink, #54595F); font-size: clamp( 1.6rem, 6dvh, 2.6rem ); font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); flex-shrink: 0; } .bdgt-sb-btn:active { transform: scale(0.94); } .bdgt-sb-close { position: absolute; top: calc( 10px + env( safe-area-inset-top ) ); right: 16px; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 1.1rem; cursor: pointer; z-index: 2; } .bdgt-sb-reset { position: absolute; bottom: calc( 80px + env( safe-area-inset-bottom ) ); right: 16px; width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 1rem; cursor: pointer; z-index: 2; } .bdgt-sb-reset:hover { background: rgba(0, 0, 0, 0.55); } .bdgt-sb-footer { flex: 0 0 auto; width: 100%; box-sizing: border-box; display: flex; justify-content: center; align-items: center; padding: 8px 0 calc( 8px + env( safe-area-inset-bottom ) ); background: #111; z-index: 20; } .bdgt-sb-done { border: none; background: #1a1a1a; color: #fff; font-weight: 700; font-size: 0.95rem; padding: 12px 26px; border-radius: 999px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); cursor: pointer; } .bdgt-sb-prompt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; background: #fff; border-radius: 12px; padding: 20px 24px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); text-align: center; min-width: 240px; } .bdgt-sb-prompt p { margin: 0 0 14px; font-size: 1.1rem; font-weight: 700; color: #54595F; } .bdgt-sb-prompt .bdgt-modal-actions { justify-content: center; } /* Créneau (schedule) */ .bdgt-creneau-row { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; font-size: 0.78em; color: var(--bdgt-muted); margin-bottom: 2px; } .bdgt-creneau-label { white-space: nowrap; } .bdgt-creneau-btn { border: none; background: transparent; color: var(--bdgt-accent-dark); text-decoration: underline; font-size: 1em; cursor: pointer; padding: 2px; } /* Modal (créneau) */ .bdgt-modal-overlay { position: fixed; inset: 0; z-index: 100001; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; padding: 16px; } .bdgt-modal-card { background: #fff; border-radius: 12px; padding: 20px; max-width: 340px; width: 100%; } .bdgt-modal-card h4 { margin: 0 0 8px; } .bdgt-modal-card--day { max-width: 480px; max-height: 80vh; overflow-y: auto; } .bdgt-day-heading { font-size: 1.3rem; margin: 0 0 16px; text-align: center; color: var(--bdgt-ink) !important; } .bdgt-match--readonly { margin-bottom: 10px; } .bdgt-match--readonly .bdgt-creneau-row { font-weight: 700; color: #4a9a54; margin-bottom: 4px; } .bdgt-modal-teams { color: #7A7A7A; font-size: 0.9rem; margin: 0 0 14px; } .bdgt-modal-input { width: 100%; padding: 10px; border: 1px solid #e4e2df; border-radius: 6px; font-size: 1rem; margin-bottom: 16px; background: #fff !important; color: var(--bdgt-ink) !important; } .bdgt-modal-actions { display: flex; justify-content: flex-end; gap: 10px; } .bdgt-btn-primary, .bdgt-btn-secondary { border: none; border-radius: 999px; padding: 10px 18px; font-weight: 600; font-size: 0.9rem; cursor: pointer; } .bdgt-btn-primary { background: #4a9a54; color: #fff; } .bdgt-btn-primary:hover { background: #4a9a54; } .bdgt-btn-secondary { background: #f6f5f3; color: #54595F; } .bdgt-btn-secondary { background: var(--bdgt-bg-page); color: var(--bdgt-ink); } /* Calendrier */ .bdgt-cal-header { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px; } .bdgt-cal-nav { border: none; background: var(--bdgt-bg-page); width: 30px; height: 30px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; line-height: 1; } .bdgt-cal-label { font-weight: 700; min-width: 140px; text-align: center; } .bdgt-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .bdgt-cal-weekdays { margin-bottom: 6px; } .bdgt-cal-weekday { text-align: center; font-size: 0.72rem; color: var(--bdgt-muted); text-transform: uppercase; font-weight: 600; } .bdgt-cal-cell { min-height: 56px; border-radius: 6px; background: var(--bdgt-bg-page); padding: 4px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; } .bdgt-cal-cell--empty { background: transparent; } .bdgt-cal-cell--today { box-shadow: inset 0 0 0 2px var(--bdgt-accent, #4a9a54); } .bdgt-cal-cell--has-matches { cursor: pointer; } .bdgt-cal-cell--has-matches:hover { background: #ece9e5; } .bdgt-cal-day-num { font-size: 0.72rem; font-weight: 700; color: var(--bdgt-muted); } .bdgt-cal-chip { font-size: 0.6rem; background: #fff; color: var(--bdgt-ink) !important; border: 1px solid var(--bdgt-line); border-radius: 4px; padding: 1px 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bdgt-cal-chip--done { background: #dcefdf; border-color: #b8dcc0; } @media ( max-width: 480px ) { .bdgt-cal-cell { min-height: 42px; } .bdgt-cal-chip { font-size: 0.55rem; } } /* Inscriptions */ .bdgt-inscrits-list { margin: 0 0 20px; padding-left: 20px; } .bdgt-inscrits-list li { margin-bottom: 4px; } .bdgt-inscrits-list--pending { list-style: none; padding-left: 0; } .bdgt-inscrits-list--pending li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 10px; border-bottom: 1px solid var(--bdgt-line); } .bdgt-inscrits-list--pending li:last-child { border-bottom: none; } .bdgt-inscrits-list--pending li:nth-child(odd) { background: #F1F2F3; } .bdgt-inscrits-list--pending li:nth-child(even) { background: #EAF9EC; } .bdgt-btn-payer { flex-shrink: 0; display: inline-block; background: #c0392b; color: #fff; border: none; border-radius: 999px; padding: 6px 16px; font-weight: 700; font-size: 0.85rem; text-decoration: none !important; cursor: pointer; } a.bdgt-btn-payer:hover { background: #a93226; } .bdgt-btn-payer--done { background: #1f6f43; cursor: default; } .bdgt-photos-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin-bottom: 16px; } .bdgt-photo-thumb { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; display: block; } .bdgt-photos-input { display: none; } .bdgt-inscription-row { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .bdgt-inscription-row input { flex: 1; min-width: 160px; padding: 10px; border: 1px solid var(--bdgt-line); border-radius: 6px; font-size: 0.95rem; } .bdgt-inscription-msg { margin-top: 10px; font-size: 0.9rem; } .bdgt-helloasso-setting { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--bdgt-line); } .bdgt-helloasso-setting p { margin: 0 0 8px; font-size: 0.85rem; color: var(--bdgt-muted); } .bdgt-helloasso-setting .bdgt-inscription-row { margin-bottom: 0; } .bdgt-helloasso-setting button { flex-shrink: 0; } .bdgt-inscription-msg--ok { color: #1f6f43; } .bdgt-inscription-msg--error { color: var(--bdgt-accent-dark); } .bdgt-format-option { display: flex; align-items: center; gap: 8px; padding: 10px 0; font-weight: 600; cursor: pointer; border-top: 1px solid var(--bdgt-line); } .bdgt-format-option:first-of-type { border-top: none; } .bdgt-format-extra { padding: 0 0 14px 26px; display: flex; flex-direction: column; gap: 8px; } .bdgt-format-suboption { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; } /* Chat */ .bdgt-chat-btn { border: none; background: #1f6f43; color: #fff; border-radius: 999px; font-size: 0.78em; font-weight: 600; cursor: pointer; padding: 3px 10px; white-space: nowrap; } .bdgt-chat-btn:hover { background: #17532f; } .bdgt-modal-card--chat { max-width: 420px; display: flex; flex-direction: column; max-height: 85vh; } .bdgt-push-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; } .bdgt-push-status { font-size: 0.85rem; color: #17532f; font-weight: 600; } .bdgt-push-btn { font-size: 0.8rem; padding: 6px 12px; } .bdgt-chat-whoami { font-size: 0.85rem; color: #6b7370; text-align: center; margin: 4px 0; } .bdgt-chat-change-nom { background: none; border: none; padding: 0; color: #1f5fa8; text-decoration: underline; font-size: 0.85rem; cursor: pointer; } .bdgt-chat-identity { margin: 4px 0; } .bdgt-chat-list { overflow-y: auto; max-height: 320px; margin: 10px 0; padding: 12px; background: #e5ddd5; border-radius: 8px; display: flex; flex-direction: column; gap: 6px; } .bdgt-chat-empty { color: #7A7A7A; font-size: 0.9rem; text-align: center; } .bdgt-chat-row { display: flex; width: 100%; } .bdgt-chat-row--mine { justify-content: flex-end; } .bdgt-chat-row--theirs { justify-content: flex-start; } .bdgt-chat-bubble { display: flex; flex-direction: column; max-width: 78%; padding: 6px 9px 4px; border-radius: 10px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12); position: relative; } .bdgt-chat-row--mine .bdgt-chat-bubble { background: #dcf8c6; border-bottom-right-radius: 2px; } .bdgt-chat-row--theirs .bdgt-chat-bubble { background: #fff; border-bottom-left-radius: 2px; } .bdgt-chat-auteur { font-weight: 700; font-size: 0.78rem; color: #4a9a54; margin-bottom: 2px; } .bdgt-chat-texte { font-size: 0.92rem; white-space: pre-wrap; word-break: break-word; color: #54595F; } .bdgt-chat-heure { align-self: flex-end; font-size: 0.68rem; color: #7A7A7A; margin-top: 2px; } .bdgt-chat-textarea { resize: vertical; font-family: inherit; }