/* =========== Whiteout 2025 (no framework) =========== */ :root{ --primary: #1C76AD; --primary-600:#57A1CB; --accent:#34d1be; --success:#8dc859; --danger:#fe635f; --warning:#f1c40f; --muted:#7e8c8d; --bg:#f6f7f8; --bg-dark:#0b0c0d; --surface:#fff; --surface-2:#f2f6f6; --text:#1e252b; --text-2:#5e6a73; --line:#e5eaee; --shadow:0 10px 24px rgba(17,27,24,.07); --radius:16px; --r-sm:12px; --r-xs:10px; --speed:.18s; --ease:cubic-bezier(.22,1,.36,1); } /* Empêche le sursaut du header entre pages avec/sans scrollbar */ /* html { scrollbar-gutter: stable both-edges; } @supports not (scrollbar-gutter: stable) { html, body { overflow-y: scroll; } } */ /* Dark auto */ @media (prefers-color-scheme: dark){ :root{ --bg:#0b0c0d; --surface:#101315; --surface-2:#0f1414; --text:#e9f0f2; --text-2:#9aa6af; --line:#1e2429; --shadow:0 14px 32px rgba(0,0,0,.55); } } /* Base */ *{ box-sizing:border-box; } html,body{ min-height:100% } body{ margin:0; background:var(--bg); color:var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans"; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } a{ color:var(--primary); text-decoration:none } /* Layout */ .wo-container{ width: min(1100px, 92vw); margin: 0 auto; } .wo-main{ padding: 10px 0 64px; } /* Header */ .wo-header{ position:sticky; top:0; z-index:1002; background: color-mix(in srgb, var(--bg) 65%, var(--surface)); backdrop-filter: blur(6px); border-bottom:1px solid var(--line); } .wo-header__inner{ display:flex; align-items:center; justify-content:space-between; padding:12px 0 } .wo-brand{ font-weight:800; letter-spacing:.2px; color:var(--primary) } .wo-nav{ display:flex; gap:18px } .wo-link{ color:var(--text-2) } .wo-link--active{ color:var(--primary); font-weight:600 } /* Footer */ .wo-footer{ border-top:1px solid var(--line); color:var(--text-2); padding:18px 0; } /* Grid */ .wo-grid{ display:grid; grid-template-columns: 340px 1fr; gap: 18px; } @media (max-width: 900px){ .wo-grid{ grid-template-columns:1fr } } /* Cards */ .wo-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); } .wo-card__body{ padding:18px; } .wo-card__body2{ margin: 8px 10px 10px 15px; } .wo-card__header{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:8px } .wo-col-left{ align-self:start } .wo-col-right{ display:flex; flex-direction:column; gap:18px } /* Avatar & status */ .wo-avatar-xl{ width:140px; height:140px; object-fit:cover; border-radius:50%; display:block; margin:14px auto 20px; border:6px solid color-mix(in srgb, var(--primary) 14%, transparent); box-shadow:0 8px 18px rgba(43,182,163,.18); transition: transform var(--speed) var(--ease); } .wo-avatar-xl:hover{ transform: translateY(-2px) scale(1.01); } .wo-status{ display:inline-flex; align-items:center; gap:8px; color:var(--text-2); font-size:.92rem; } .wo-dot{ width:8px; height:8px; border-radius:50%; background:var(--muted); display:inline-block } .is-online .wo-dot{ background:var(--success) } .is-offline .wo-dot{ background:var(--danger) } /* Typography */ .wo-h4{ font-size:1.25rem; margin:0 0 2px } .wo-h5{ font-size:1.05rem; margin:0 } .wo-h6{ font-size:.95rem; margin:0 } .wo-strong{ font-weight:700 } .wo-meta{ color:var(--text-2); font-size:.92rem } .wo-flex-between{ display:flex; align-items:center; justify-content:space-between; gap:12px } /* Stars */ .wo-stars{ display:flex; align-items:center; justify-content:center; gap:6px; margin:6px 0 4px } .wo-star{ width:18px; height:18px; display:inline-block; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); background:#d7dee4 } .wo-star.is-full{ background:#f5c24a } /* KPIs */ .wo-kpis{ list-style:none; padding:0; margin:12px 0 16px; display:grid; gap:10px } .wo-kpi__label{ color:var(--text-2) } .wo-kpi__value{ font-weight:700 } /* Buttons */ .wo-btn{ --bg:var(--surface); --fg:var(--text); --bd:var(--line); display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--bd); background:var(--bg); color:var(--fg); padding:.65rem .9rem; border-radius:12px; cursor:pointer; transition: transform var(--speed) var(--ease), background-color var(--speed), color var(--speed), border-color var(--speed); text-decoration:none; /*font-weight:600;*/ } .wo-btn:hover{ transform: translateY(-1px) } .wo-btn--block{ width:100% } .wo-btn--sm{ padding:.45rem .7rem; border-radius:10px; font-weight:600; font-size:.92rem } .wo-btn--primary{ --bg:var(--primary); --fg:#fff; --bd:var(--primary) } /* Tous les boutons primaires un peu plus "présents" */ /*.wo-btn--primary{ font-weight:700 !important; }/* .wo-btn--primary:hover{ --bg:var(--primary-600); --bd:var(--primary-600) } .wo-btn--success{ --bg:#1C76AD; --fg:#fff; --bd:#1C76AD } .wo-btn--lose{ --bg:#eb5f5f; --fg:#fff; --bd:#eb5f5f } .wo-btn--ghost{ --bg:transparent; --fg:var(--primary); --bd:var(--primary) } .wo-btn--ghost:hover{ --bg:var(--primary); --fg:#fff } /* Info grid */ .wo-info-grid{ display:grid; gap:8px; margin-top:10px } .wo-info-row{ display:grid; grid-template-columns: 160px 1fr; gap:12px; padding:6px 0; border-bottom:1px dashed var(--line) } .wo-info-label{ color:var(--text-2); font-weight:700; } .wo-info-value{ color:var(--text) } @media (max-width:700px){ .wo-info-row{ grid-template-columns:1fr } } /* Social */ .wo-social{ list-style:none; padding:0; margin:10px 0 0; display:flex; gap:14px; flex-wrap:wrap } .wo-social a{text-decoration:underline} /* Tabs */ .wo-tabs{ margin-top:6px } .wo-tabs > input{ display:none } .wo-tabs > label{ display:inline-block; padding:.55rem .9rem; margin-right:6px; background:var(--surface); border:1px solid var(--line); border-radius:10px; color:var(--text-2); cursor:pointer; } .wo-tabs > input:checked + label{ color:var(--text); font-weight:700; border-color:var(--primary); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent); } .wo-tabs__content{ display:none; margin-top:12px } #tab-activity:checked ~ .wo-tabs__content[data-for="tab-activity"], #tab-tournaments:checked ~ .wo-tabs__content[data-for="tab-tournaments"], #tab-security:checked ~ .wo-tabs__content[data-for="tab-security"]{ display:block } /* Tables / lists */ .wo-table-wrap{ overflow-x:auto } .wo-table{ width:100%; border-collapse:separate; border-spacing:0 10px } .wo-table td{ background:var(--surface); border:1px solid var(--line); padding:.75rem .85rem; vertical-align:middle; } .wo-table tr td:first-child{ border-top-left-radius:12px; border-bottom-left-radius:12px; width:42px; text-align:center; color:var(--primary) } .wo-table tr td:last-child{ border-top-right-radius:12px; border-bottom-right-radius:12px; white-space:nowrap; color:var(--text-2) } .wo-list{ list-style:none; padding:0; margin:0 } .wo-list__item{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--line); background:var(--surface); border-radius:12px; margin-bottom:10px } /* Cards in security section */ .wo-grid-split{ display:grid; grid-template-columns: 1fr 1fr; gap:14px } @media (max-width:900px){ .wo-grid-split{ grid-template-columns:1fr } } .wo-surface{ background: var(--surface-2) } /* Badges, empty states, data list */ .wo-badge{ display:inline-flex; align-items:center; padding:.25rem .5rem; border-radius:999px; font-size:.85rem; font-weight:700 } .wo-badge--success{ background: color-mix(in srgb, var(--success) 25%, transparent); color: #1f4c1a } .wo-badge--muted{ background: color-mix(in srgb, var(--muted) 25%, transparent); color: #2f3840 } .wo-badge--muted{ background: color-mix(in srgb, var(--muted) 25%, transparent); color: var(--text-muted); } [data-theme="dark"]{ --text-muted: #cfd6dd; } [data-theme="light"]{ --text-muted: #2f3840; } .wo-empty{ padding:14px; background:var(--surface); border:1px dashed var(--line); color:var(--text-2); border-radius:12px; } .wo-data{ list-style:none; padding:0; margin:8px 0 0; display:grid; gap:8px } .wo-data li{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:8px 0; border-bottom:1px dashed var(--line) } .wo-data li:last-child{ border-bottom:0 } /* Fournaise (FC) */ .wo-fc{ display:inline-flex; align-items:center; gap:10px } .wo-fc__img{ width:28px; height:28px; border-radius:6px; object-fit:contain; background:#fff; border:1px solid var(--line) } .wo-fc__label{ font-weight:700 } /* ======= MENU PUBLIC ======= */ /* Burger */ .wo-burger{ position: fixed; top: 20px; right: 20px; z-index: 1003; display: none; border: 1px solid var(--line); background: #1c76ad; color: #ffffff; padding: 10px 12px; border-radius: 12px; box-shadow: var(--shadow); font-weight: 800; letter-spacing: .2px; } @media (max-width:1024px){ .wo-burger{ display:inline-flex; align-items:center; gap:8px } } /* Scroll lock + overlay */ body.pub-menu-open{ overflow:hidden; } .wo-menu-overlay{ position: fixed; inset: 0; background: rgba(5,12,11,.45); backdrop-filter: blur(2px); z-index: 1000; opacity: 0; pointer-events: none; transition: opacity var(--speed) var(--ease); } body.pub-menu-open .wo-menu-overlay{ opacity: 1; pointer-events: auto; } /* Menu public */ .wo-public-menu {} .wo-public-menu__list{ display: flex; gap: 18px; align-items: center; margin: 0; padding: 0; list-style: none; } .wo-public-menu__list-2{ display: flex; gap: 8px; align-items: center; margin: 0; padding: 0; list-style: none; } .wo-public-menu__list .wo-link{ color: var(--text-2); } .wo-public-menu__list .wo-link:hover{ color: var(--primary-600); } /* Dropdown "Tournois" */ .wo-public-menu .wo-menu-dropdown{ position: relative; } .wo-public-menu .wo-menu-dropdown > details{ display: inline-block; } /* Bouton (desktop) */ .wo-public-menu .wo-menu-dropdown summary{ list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); } .wo-public-menu .wo-menu-dropdown summary::-webkit-details-marker{ display:none; } /* flèche ▼ */ .wo-public-menu .wo-menu-dropdown summary::after{ content:""; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid currentColor; opacity:.8; transform: translateY(1px); transition: transform var(--speed) var(--ease), opacity var(--speed); } .wo-public-menu .wo-menu-dropdown details[open] summary::after{ transform: rotate(180deg) translateY(-1px); } @media (hover:hover){ .wo-public-menu .wo-menu-dropdown summary:hover{ color: var(--primary-600); } } /* Sous-menu (desktop) */ .wo-public-menu .wo-menu-dropdown .wo-submenu{ position: absolute; top:100%; left:0; min-width:200px; margin:0; padding:.5rem 0; background: var(--surface); border:1px solid var(--line); border-radius:.5rem; box-shadow: var(--shadow); z-index:50; display:none; } .wo-public-menu .wo-menu-dropdown details[open] .wo-submenu{ display:block; } .wo-public-menu .wo-menu-dropdown .wo-submenu li{ list-style:none; } .wo-public-menu .wo-menu-dropdown .wo-submenu a{ display:block; padding:.6rem 1rem; text-decoration:none; color: var(--text-2); transition: background-color var(--speed), color var(--speed); } .wo-public-menu .wo-menu-dropdown .wo-submenu a:hover{ background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); } /* Drawer mobile */ @media (max-width:1024px){ .wo-public-menu{ position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 420px); z-index: 1002; transform: translateX(100%); transition: transform var(--speed) var(--ease), box-shadow var(--speed); padding: 18px 18px 22px; display: block; border-top-left-radius: 18px; border-bottom-left-radius: 18px; /*background: var(--surface); border-left: 1px solid var(--line); box-shadow: -22px 0 48px rgba(0,0,0,.22);*/ } body.pub-menu-open .wo-public-menu{ transform: translateX(0); } .wo-public-menu__list{ flex-direction: column; align-items: stretch; gap: 10px; } /* 1er niveau (liens simples) */ .wo-public-menu__list .wo-link{ display:block; width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background: var(--surface-2); color: var(--text); font-weight:700; transition: transform var(--speed) var(--ease), background-color var(--speed), border-color var(--speed); } /* 1er niveau (le “tournois”) => flex pour pousser la flèche à droite */ .wo-public-menu .wo-menu-dropdown > details{ width:100%; margin:0; } .wo-public-menu .wo-menu-dropdown summary.wo-link{ display:flex; align-items:center; justify-content:space-between; /* <--- clé */ width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background: var(--surface-2); color: var(--text); font-weight:700; transition: transform var(--speed) var(--ease), background-color var(--speed), border-color var(--speed); } /* flèche à droite en mobile */ .wo-public-menu .wo-menu-dropdown summary::after{ margin-left:auto; } .wo-public-menu__list .wo-link:active{ transform: translateY(1px) } .wo-public-menu__list .wo-link.wo-link--danger{ color:#b52121; border-color: color-mix(in srgb, var(--danger) 22%, var(--line)); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); } /* Sous-menu mobile (tabulation) */ .wo-public-menu .wo-menu-dropdown .wo-submenu{ position: static; min-width:auto; border:none; box-shadow:none; background:transparent; padding: 8px 0 0 0; display:none; } .wo-public-menu .wo-menu-dropdown details[open] .wo-submenu{ display:block; } .wo-public-menu .wo-menu-dropdown .wo-submenu li + li{ margin-top:8px; } .wo-public-menu .wo-menu-dropdown .wo-submenu a{ display:block; padding:10px 14px; border:1px solid var(--line); border-radius:12px; background: var(--surface); color: var(--text); font-weight:600; margin-left:12px; width: calc(100% - 12px); } .wo-public-menu .wo-menu-dropdown .wo-submenu a:hover{ background: color-mix(in srgb, var(--primary) 8%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 25%, var(--line)); } } /* Divers UI fusionnés */ .sr-only{ position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .wo-link:hover{ color: var(--primary-600); } .wo-link--danger{ color: #b52121; } .hero{ padding: 10px 0 18px; } .hero .h1{ margin: 0 0 6px; font-size: 1.8rem; } .lead{ color: var(--text-2); margin: 0 0 14px; } .hero-actions{ display: flex; gap: 10px; flex-wrap: wrap; } .cards-grid{ display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin-top: 14px; } .card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); } .card .h3{ margin: 0 0 6px; } .cards{ display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); } .card-tournament .meta{ margin: 10px 0 12px; padding-left: 18px; color: var(--text-2); } /* .badge{ display: inline-flex; align-items: center; padding: .25rem .55rem; border-radius: 999px; font-size: .85rem; font-weight: 700; color: #1f4c1a; background: color-mix(in srgb, var(--success) 25%, transparent); } */ .badge { display: inline-flex; align-items: center; padding: .25rem .55rem; border-radius: 999px; font-size: .85rem; font-weight: 700; color: #ffffff; background: #349a3a; } .badge.grey{ color: #2f3840; background: color-mix(in srgb, var(--muted) 25%, transparent); } .table{ width: 100%; border-collapse: separate; border-spacing: 0 10px; } .table thead th{ text-align: left; color: var(--text-2); font-weight: 700; font-size: .95rem; padding: .35rem .5rem; cursor: default; } .table tbody td{ background: var(--surface); border: 1px solid var(--line); padding: .75rem .85rem; vertical-align: middle; } .table tbody tr td:first-child{ border-top-left-radius: 12px; border-bottom-left-radius: 12px; } .table tbody tr td:last-child{ border-top-right-radius: 12px; border-bottom-right-radius: 12px; text-align: right; } .btn{ --bg: var(--surface); --fg: var(--text); --bd: var(--line); display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--bd); background: var(--bg); color: var(--fg); padding: .6rem .9rem; border-radius: 12px; cursor: pointer; /*font-weight: 700;*/ transition: transform var(--speed) var(--ease), background-color var(--speed), color var(--speed), border-color var(--speed); text-decoration: none; } .btn:hover{ transform: translateY(-1px); } .btn.primary{ --bg: var(--primary); --fg: #fff; --bd: var(--primary); font-size: 16px; } .btn.primary:hover{ --bg: var(--primary-600); --bd: var(--primary-600); } .link{ text-decoration: underline; color: var(--primary); } .muted{ color: var(--text-2); } .h1{ font-size: 1.6rem; margin: 0 0 8px; } .h3{ font-size: 1.15rem; margin: 0; } .ta-right{ text-align: right; } .table-tools{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 8px; flex-wrap: wrap; } .table-tools__left{ display: flex; align-items: center; gap: 10px; flex: 1; } .table-tools__right{ display: flex; align-items: center; gap: 8px; } .input{ appearance: none; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: .6rem .8rem; font: inherit; width: min(520px, 100%); box-shadow: var(--shadow); transition: border-color var(--speed), box-shadow var(--speed), background-color var(--speed); } .input:focus{ outline: none; border-color: var(--primary); } .input.search{ background: color-mix(in srgb, var(--surface) 85%, white); } .is-sortable{ cursor: pointer; user-select: none; position: relative; padding-right: 1.2rem !important; } .is-sortable.is-active::after{ content: ''; position: absolute; right: .4rem; top: 50%; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; transform: translateY(-50%); } .is-sortable.is-asc.is-active::after{ border-bottom: 7px solid var(--text-2); } .is-sortable.is-desc.is-active::after{ border-top: 7px solid var(--text-2); } .pagination{ display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; flex-wrap: wrap; } .pagination__btn{ min-width: 38px; height: 38px; padding: 0 .6rem; } .pagination__btn.is-active{ --bg: var(--primary); --fg: #fff; --bd: var(--primary); } .pagination__gap{ padding: 0 .2rem; color: var(--text-2); } body.modal-open{ overflow: hidden; } .wo-modal{ position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; } .wo-modal__overlay{ position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); } .wo-modal__content{ position: relative; z-index: 1; background: var(--surface); border-radius: 16px; padding: 35px; max-width: 500px; box-shadow: 0 18px 42px rgba(0,0,0,.45); animation: fadeIn .25s var(--ease); } .wo-modal__close{ position: absolute; top: 10px; right: 10px; background: none; border: 0; font-size: 1.4rem; cursor: pointer; color: var(--text-2); } @keyframes fadeIn{ from{opacity: 0; transform: translateY(-10px);} to{ opacity: 1; transform: translateY(0);} } .wo-tabs{ margin-top: 10px; } .wo-tabs__content{ margin-top: 14px; } .wo-modal[hidden]{ display: none !important; } #tab-login:checked ~ .wo-tabs__content[data-for="tab-login"], #tab-register:checked ~ .wo-tabs__content[data-for="tab-register"]{ display: block; } .wo-modal .form{ margin: 0; padding: 4px 2px 0; color: var(--text); } .wo-modal .form h1{ margin: 0 0 10px; font-size: 1.6rem; line-height: 1.2; } .wo-modal .form .row{ margin: 10px 0; } .wo-modal .form label{ display: block; margin-bottom: 6px; font-weight: 700; color: var(--text-2); } .wo-modal .form input, .wo-modal .form select{ width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 92%, white); color: var(--text); outline: none; transition: border-color var(--speed), box-shadow var(--speed), background-color var(--speed); box-shadow: var(--shadow); } .wo-modal .form input::placeholder{ color: color-mix(in srgb, var(--text-2) 70%, transparent); } .wo-modal .form input:focus, .wo-modal .form select:focus{ border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); background: color-mix(in srgb, var(--surface) 98%, white); } .wo-modal .form fieldset{ margin: 12px 0 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 94%, white); } .wo-modal .form legend{ padding: 0 4px; font-weight: 700; color: var(--text-2); } .wo-modal .form details{ margin-top: 6px; } .wo-modal .form details summary{ list-style: none; cursor: pointer; color: var(--primary); text-decoration: underline; } .wo-modal .form .actions{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; } .wo-modal .form .btn{ border-radius: 12px; } .wo-modal .form .link{ border: 0; background: transparent; cursor: pointer; } .wo-modal #forgot-panel{ display: none; margin-top: 12px; padding: 14px; border: 1px dashed color-mix(in srgb, var(--primary) 35%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--primary) 6%, var(--surface)); } .form-errors{ margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; background: #fdecea; color: #611a15; list-style: disc inside; } .field-error{ display: block; margin-top: 6px; font-size: .9em; color: #b00020; } .is-invalid{ outline: 2px solid #fe635f33; } .is-valid{ outline: 2px solid #1C76AD33; } .form-status--success .warn-icon{ color: #ffc107; font-weight: 700; } /* Messages */ .wo-activity{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 16px 8px; } .wo-activity.is-loading .activity-loading{ opacity: 1; } .wo-activity .activity-loading{ opacity: 0; transition: opacity .2s var(--ease); } .wo-activity .activity-feed{ position: relative; display: grid; gap: 16px; margin-top: 6px; margin-bottom: 28px; padding-left: 6px; } .wo-activity .activity-feed::before{ content: ""; position: absolute; left: 24px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 35%, transparent), color-mix(in srgb, var(--accent) 35%, transparent)); opacity: .30; } .wo-activity .activity-item{ position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 12px 58px; box-shadow: var(--shadow); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; border-left: 4px solid transparent; } .wo-activity .activity-item:hover{ transform: translateY(-1px); box-shadow: 0 8px 26px rgba(0,0,0,.18); } .wo-activity .activity-line{ display: flex; align-items: center; gap: 10px; } .wo-activity .activity-text{ color: var(--text); } .wo-activity .activity-emoji{ position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; font-size: 18px; line-height: 1; background: color-mix(in srgb, var(--surface-2) 70%, white); border: 1px solid var(--line); box-shadow: 0 4px 10px rgba(0,0,0,.10); } .wo-activity .activity-item.v-success{ border-left-color: var(--success); } .wo-activity .activity-item.v-danger{ border-left-color: var(--danger); } .wo-activity .activity-item.v-info{ border-left-color: var(--accent); } .wo-activity .activity-item.v-accent{ border-left-color: var(--primary); } .wo-activity .activity-item.v-muted{ border-left-color: var(--muted); } .wo-activity .activity-pager{ display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 0; padding-top: 14px; border-top: 1px dashed var(--line); } .msg { margin: 8px 0; max-width: 75%; } .msg .bubble { padding: 8px 10px; border-radius: 10px; display:inline-block; } .msg.me { margin-left: auto; text-align: right; } .msg.me .bubble { background: #def; } .msg.other .bubble { background: #eee; } .msg .meta { font-size: 12px; color:#777; margin-top: 2px; } #typing-indicator { font-size: 13px; color:#666; margin-top: 6px; font-style: italic; } #messages-list { max-height: 65vh; overflow: auto; } /* État actif dans le sous-menu Tournois */ .wo-public-menu .wo-menu-dropdown .wo-submenu a.wo-link--active{ background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); font-weight: 700; border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); } /* ===== Classements (page) ===== */ .wos-rank-medal{ width:24px; height:24px; vertical-align:middle } .wos-rank-col{ width:54px; text-align:center; color:var(--primary); font-weight:800 } /* Encadré "Mon classement" */ .wos-mybox{ display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin:6px 0 12px; } .wos-mybox .pos{ font-weight:800; color:var(--primary) } .wos-tag{ display:inline-flex; align-items:center; gap:6px; font-weight:700 } /* Ma ligne, légère mise en avant (reste compatible dark) */ .wos-me td{ box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent); } /* Couleurs subtiles des 3 premiers — plus spécifique que .table tbody td */ .table tbody tr.wos-top1 td{ background: color-mix(in srgb, var(--warning) 9%, var(--surface)); border-color: color-mix(in srgb, var(--warning) 22%, var(--line)); } .table tbody tr.wos-top2 td{ background: color-mix(in srgb, #c0c0c0 10%, #d6d6d6); /* argent clair */ border-color: color-mix(in srgb, #c0c0c0 22%, var(--line)); } .table tbody tr.wos-top3 td{ background: color-mix(in srgb, #cd7f32 10%, var(--surface)); /* bronze clair */ border-color: color-mix(in srgb, #cd7f32 22%, var(--line)); } /* Arrondis conservés pour ces 3 lignes */ .table tbody tr.wos-top1 td:first-child, .table tbody tr.wos-top2 td:first-child, .table tbody tr.wos-top3 td:first-child{ border-top-left-radius:12px; border-bottom-left-radius:12px; } .table tbody tr.wos-top1 td:last-child, .table tbody tr.wos-top2 td:last-child, .table tbody tr.wos-top3 td:last-child{ border-top-right-radius:12px; border-bottom-right-radius:12px; } /* Médailles 24px (déjà OK, rappel) */ .wos-rank-medal{ width:24px; height:24px; vertical-align:middle } /* bridge barre de recherche (classements + membres) */ .table-tools, .wo-membres-filters{ width:100%; } .table-tools .input.search, .wo-membres-filters .wo-membres-search{ flex:1 1 auto; width:auto; max-width:none; } /* === Uniformisation barre de recherche (Classements & Membres) === */ .wo-main .table-tools{ /* écrase le space-between global pour un rendu identique aux deux pages */ justify-content: flex-start; width: 100%; } .wo-main .table-tools__left{ display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; } /* l'input s'étire vraiment */ .wo-main .table-tools__left .input.search{ flex: 1 1 auto; width: auto; max-width: none; min-width: 260px; } /* selects de largeur identique sur toutes les pages */ .wo-main .table-tools__left select.input{ flex: 0 0 240px; /* <- largeur fixe harmonisée */ } .wo-main .table-tools__right{ margin-left: auto; /* bouton collé à droite comme sur Membres */ } /* Fix mobile/tablette : empêcher le scroll horizontal dû au drawer du menu */ html, body { max-width: 100%; overflow-x: hidden; } /* === Responsive search bars (Membres + Classements) — SAFE ADD === */ /* Confort tactile uniforme */ .input, select.input, .btn, .btn.primary { min-height: 44px; /* cible 44px pour le doigt */ } /* Petites corrections d’alignement déjà en place */ .wo-main .table-tools{ justify-content:flex-start; width:100%; } .wo-main .table-tools__left{ display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0; } .wo-main .table-tools__left .input.search{ flex:1 1 auto; width:auto; max-width:none; min-width:260px; } .wo-main .table-tools__left select.input{ flex:0 0 240px; } .wo-main .table-tools__right{ margin-left:auto; } /* Membres : wrapper déjà présent */ .wo-membres-header .wo-membres-filters{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; width:100%; margin:12px 0 8px; justify-content:flex-start; } .wo-membres-header .wo-membres-filters .wo-membres-search{ flex:1 1 auto; width:auto; max-width:none; min-width:260px; } .wo-membres-header .wo-membres-filters select.input{ flex:0 0 auto; width:auto; } .wo-membres-header .wo-membres-filters .btn.primary{ margin-left:auto; flex:0 0 auto; } /* ===== BREAKPOINTS ===== */ /* <= 900px : on bascule en pile, largeur 100% */ @media (max-width: 900px){ /* Classements */ .table-tools{ display: grid; grid-template-columns: 1fr; gap: 10px; align-items: stretch; } /* Astuce : "display: contents" garde l’ordre visuel sans ajouter de conteneur */ .table-tools__left, .table-tools__right{ display: contents; } .table-tools .input, .table-tools .input.search, .table-tools select.input{ width: 100%; max-width: none; min-width: 0; /* lève la contrainte min-width:260px */ flex: 1 1 auto; } .table-tools .btn.primary{ width: 100%; margin-left: 0; } /* Membres */ .wo-membres-header .wo-membres-filters{ display: grid; grid-template-columns: 1fr; gap: 10px; } .wo-membres-header .wo-membres-filters .wo-membres-search{ min-width: 0; /* lève la contrainte mobile */ width: 100%; } .wo-membres-header .wo-membres-filters select.input{ width: 100%; } .wo-membres-header .wo-membres-filters .btn.primary{ margin-left: 0; width: 100%; } } /* <= 680px : micro-ajustements */ @media (max-width: 680px){ .wo-main .table-tools__left .input.search{ min-width: 0; /* évite tout débordement résiduel */ } } /* === Dark fine-tuning pour "Classements" (top 1/2/3) — SAFE ADD === */ @media (prefers-color-scheme: dark){ /* on teinte légèrement les lignes podium en s’appuyant sur var(--surface) */ .table tbody tr.wos-top1 td{ background: color-mix(in srgb, var(--warning) 14%, var(--surface)); border-color: color-mix(in srgb, var(--warning) 36%, var(--line)); } .table tbody tr.wos-top2 td{ /* argent assombri */ background: color-mix(in srgb, #9fa6ad 16%, var(--surface)); border-color: color-mix(in srgb, #9fa6ad 38%, var(--line)); } .table tbody tr.wos-top3 td{ /* bronze assombri */ background: color-mix(in srgb, #b87333 18%, var(--surface)); border-color: color-mix(in srgb, #b87333 40%, var(--line)); } } /* === Sécurité : pas de débordement horizontal global (déjà présent, on confirme) === */ html, body { max-width: 100%; overflow-x: hidden; } /* === Harmonisation inputs & selects (look moderne, sans HTML) === */ /* Search: même fond partout (clair & dark) */ .input.search{ background: color-mix(in srgb, var(--surface) 92%, white); } @media (prefers-color-scheme: dark){ .input.search{ background: color-mix(in srgb, var(--surface) 94%, black); } } /* Select: style unifié + flèche SVG + bon focus */ select.input{ appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .6rem 2.2rem .6rem .8rem; /* espace pour la flèche */ box-shadow: var(--shadow); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right .7rem center; } select.input:focus{ outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); } /* Couleurs du menu d’options (support varie selon navigateur mais inoffensif) */ select.input option{ background: var(--surface); color: var(--text); } @media (prefers-color-scheme: dark){ select.input option{ background: var(--surface); color: var(--text); } } /* Placeholders unifiés (un poil plus doux) */ .input::placeholder{ color: color-mix(in srgb, var(--text-2) 70%, transparent); } /* Lissage hover (cohérent avec boutons) */ .input:hover, select.input:hover{ border-color: color-mix(in srgb, var(--primary) 25%, var(--line)); } /* FIX mobile/tablette : ne pas utiliser display: contents sur des wrappers de champs */ @media (max-width: 900px){ .table-tools{ display: grid; grid-template-columns: 1fr; gap: 10px; align-items: stretch; } /* Les deux colonnes deviennent 1 pile verticale, sans 'display: contents' */ .table-tools__left, .table-tools__right{ display: grid; grid-template-columns: 1fr; gap: 10px; } /* Tous les contrôles prennent bien 100% et peuvent rapetisser */ .table-tools__left > *, .table-tools__right > *, .table-tools .input, .table-tools select.input, .table-tools .btn.primary{ width: 100%; max-width: none; min-width: 0; } /* Optionnel : assure la hauteur tactile et évite tout chevauchement */ .table-tools .input{ display:block; min-height:44px; } } /* === HOTFIX MOBILE/TABLET: champ de recherche invisible =================== */ /* Ne change pas le style desktop – corrige seulement le layout mobile. */ @media (max-width: 900px){ /* Empile les contrôles sans 'display: contents' (source du bug mobile) */ .table-tools{ display: grid; grid-template-columns: 1fr; gap: 10px; align-items: stretch; } .table-tools__left, .table-tools__right{ display: grid !important; /* écrase display: contents */ grid-template-columns: 1fr; gap: 10px; } /* Le champ texte redevient mesurable/visible */ .table-tools__left .input.search{ min-width: 0 !important; width: 100% !important; flex: 1 1 auto; } /* Les selects et le bouton prennent la largeur sans forcer le wrap */ .table-tools__left select.input{ width: 100%; flex: 0 0 auto; } .table-tools .btn.primary{ width: 100%; margin-left: 0; } } /* Micro-ajustement petits écrans */ @media (max-width: 680px){ .table-tools__left .input.search{ min-width: 0 !important; } } /* Centre le bouton "Rechercher" en mobile/tablette */ @media (max-width: 900px){ .wo-main .table-tools__right{ display: flex !important; /* conteneur réel */ justify-content: center !important; margin-left: 0 !important; /* annule la règle desktop qui le pousse à droite */ width: 100%; /* pour bien centrer dans la ligne */ } .wo-main .table-tools__right .btn.primary{ width: auto; /* bouton à sa largeur naturelle */ margin: 0 !important; /* pas de décalage résiduel */ } } .card-img { display: block; width: 100%; height: auto; border-radius: var(--radius); /* optionnel, pour garder le style arrondi des cartes */ margin: 0.5rem 0; } /* === Tournois : styles consolidés === */ /* --- Carte match : compacte --- */ .wo-table--bracket .wo-card.wo-match .wo-card__body { padding: 10px 12px; } .wo-match__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .wo-match__head .wo-pill { font-size: 12px; line-height: 1; } .wo-match__head .wo-status { font-size: 12px; opacity: .85; } /* --- Blocs joueurs : rectangles horizontaux compacts --- */ .wo-match__players { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; margin-bottom: 8px; } .wo-slot .card-preview { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 10px; border-radius: 10px; text-decoration: none; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: transform .12s ease, box-shadow .12s ease; } .wo-slot .card-preview:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.10); } /* Avatar façon “page membre” */ .wo-slot .wo-avatar, .wo-card.wo-winner .wo-avatar { position: relative; width: 36px; height: 36px; border-radius: 9999px; overflow: hidden; flex: 0 0 36px; outline: 2px solid rgba(255,255,255,.65); box-shadow: 0 0 0 2px rgba(0,0,0,.06); } .wo-slot .wo-avatar img, .wo-card.wo-winner .wo-avatar img { width: 100%; height: 100%; object-fit: cover; } .wo-slot .wo-avatar::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; display: none; } .wo-slot .wo-avatar[data-status="online"]::after { display: block; background: #22c55e; } .wo-slot .wo-avatar[data-status="offline"]::after { display: block; background: #94a3b8; } .wo-slot .wo-avatar[data-status="busy"]::after { display: block; background: #f59e0b; } /* Pseudo : une ligne + ellipsis */ .wo-slot .wo-name { display: inline-block; font-size: 14px; font-weight: 600; line-height: 1.1; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wo-name--empty, .wo-card .wo-muted { opacity: .75; } .wo-match__meta, .wo-first-report { font-size: 12px; opacity: .85; } /* --- Séparateur flèche entre colonnes du bracket --- */ .wo-bracket-sep { width: 24px; text-align: center; font-weight: 900; opacity: .6; } /* --- Largeur max des cartes du bracket --- */ .wo-table--bracket .wo-card { border-radius: 12px; } .wo-table--bracket td > .wo-card { max-width: 360px; } /* --- Carte "Informations du tournoi" (grille responsive) --- */ .tour-card .wo-card__header { margin: 10px 0 8px 10px; } .tour-info { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 16px; } .ti-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .ti-icon { font-size: 18px; line-height: 1; opacity: .95; flex: 0 0 22px; text-align: center; } .ti-text { display: grid; grid-template-rows: auto auto; row-gap: 2px; } .ti-label { font-size: 12px; opacity: .75; } .ti-value { font-size: 14px; font-weight: 700; line-height: 1.15; word-break: break-word; } /* --- Vainqueur : bloc compact, avatar rond + pseudo en dessous --- */ .wo-card.wo-winner .wo-card__body { padding: 12px; } .wo-card.wo-winner .wo-h5 { margin-bottom: 8px; text-align: center; } /* On centre le chip et on passe en colonne pour avoir le pseudo sous l’avatar */ .wo-winner-row { display: flex; justify-content: center; } .wo-card.wo-winner .card-preview { display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: none; border: 0; padding: 0; min-height: 0; } /* avatar du vainqueur légèrement agrandi, bien rond */ .wo-card.wo-winner .wo-avatar { width: 56px; height: 56px; flex-basis: 56px; border-radius: 9999px; overflow: hidden; } .wo-card.wo-winner .wo-name { font-size: 15px; font-weight: 700; line-height: 1.1; text-align: center; max-width: none; white-space: normal; } /* Filet de sécurité si une vieille pleine largeur traîne dans le bloc */ .wo-card.wo-winner .wo-card__body > img { display: none !important; } /* --- Responsive --- */ @media (max-width: 1024px) { .wo-slot .wo-name { max-width: 180px; } .wo-table--bracket td > .wo-card { max-width: 300px; } } @media (max-width: 640px) { .wo-slot .wo-name { max-width: 160px; font-size: 13px; } .wo-slot .card-preview { min-height: 44px; padding: 6px 8px; } .wo-card.wo-winner .wo-avatar { width: 48px; height: 48px; flex-basis: 48px; } } /* ====== Cards 3 colonnes WoS (homogènes) ====== */ .wo-cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; } /* Carte */ .wo-cards3 .card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed); } .wo-cards3 .card:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(17,27,24,.10); border-color: rgba(0,0,0,.06); } /* Titre */ .wo-cards3 .card-title{ margin: .9rem .9rem 0 .9rem; } /* Image — taille fixe, coins doux */ .wo-cards3 .card-img-wrap{ position: relative; margin: .75rem .9rem 0 .9rem; border-radius: var(--r-sm); overflow: hidden; /* Taille identique pour toutes les images */ aspect-ratio: 3 / 4; /* portrait constant */ background: var(--surface-2); /* fallback pendant le chargement */ } .wo-cards3 .card-img{ width: 100%; height: 100%; display: block; /*object-fit: cover; */ /* recadre proprement */ } /* Corps + lien sticky en bas */ .wo-cards3 .card-body{ display: flex; flex-direction: column; gap: .4rem; padding: .9rem; margin-top: .4rem; } .wo-cards3 .card-body p{ color: var(--text); margin: 0; } .wo-cards3 .card-body .link{ margin-top: auto; /* pousse le lien en bas */ /*font-weight: 600;*/ } /* Responsive */ @media (max-width: 1024px){ .wo-cards3{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px){ .wo-cards3{ grid-template-columns: 1fr; } .wo-cards3 .card-title{ margin: .8rem .8rem 0 .8rem; } .wo-cards3 .card-img-wrap{ margin: .6rem .8rem 0 .8rem; } .wo-cards3 .card-body{ padding: .8rem; } } /* Mode sombre (hérite surtout des variables) : petits ajustements */ @media (prefers-color-scheme: dark){ .wo-cards3 .card:hover{ border-color: rgba(255,255,255,.08); box-shadow: 0 14px 28px rgba(0,0,0,.35); } } /* --- Réseaux sociaux (icônes + tooltip) --- */ .wo-social.social-list{ display:flex; gap:10px; align-items:center; list-style:none; margin:0; padding:0; } .social-item{ position:relative; } .social-link{ display:inline-block; position:relative; outline:0; } .social-icon{ width:22px; height:22px; display:block; border-radius:4px; transition:transform .15s ease, box-shadow .15s ease; box-shadow:0 0 0 0 rgba(0,0,0,.12); } .social-item:hover .social-icon, .social-link:focus .social-icon{ transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,.18); } /* Tooltip lisible (hover/focus) */ .social-tip{ position:absolute; left:50%; bottom:100%; transform:translate(-50%, -6px); background:#111; color:#fff; font-size:12px; line-height:1.25; padding:6px 8px; border-radius:6px; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .15s ease, transform .15s ease; z-index:10; } .social-tip::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:#111; } /* Affichage au survol ET au focus clavier/tap */ .social-item:hover .social-tip, .social-link:focus .social-tip{ opacity:1; transform:translate(-50%, -10px); } /* --- Modale Éditer le profil : responsive & scrollable --- */ /* Assombrir un peu le fond */ #editProfileModal .wo-modal__overlay{ background:rgba(0,0,0,.45); } /* Desktop/tablette : boîte centrée, hauteur limitée, scroll interne */ #editProfileModal .wo-modal__content{ /* Le positionnement/centrage existant reste, on force juste les dimensions/scroll */ width:min(680px, 92vw); max-height:90vh; overflow:auto; -webkit-overflow-scrolling:touch; } /* Mobile : mode "bottom sheet" + plein écran vertical si besoin */ @media (max-width:600px){ #editProfileModal .wo-modal__content{ position:fixed; /* se détache du centrage absolu éventuel */ left:0; right:0; bottom:0; top:auto; transform:none; /* on annule un translate(-50%,-50%) éventuel */ width:100vw; max-height:calc(100vh - 16px); margin:8px 0 0; border-radius:12px 12px 0 0; overflow:auto; -webkit-overflow-scrolling:touch; } } /* Optionnel: éviter que la page du dessous défile quand la modale est ouverte */ body.modal-open{ overflow:hidden; } .wo-hearts{ display:inline-flex; align-items:center; gap:8px; margin:6px 0 2px; /* petit espace sous le h2 */ } .wo-hearts__count{ font-weight:600; font-size:14px; } /* Humeur & Slogan (compact) */ .wo-mood-row .wo-mood-inputs{display:flex;gap:12px;align-items:center;flex-wrap:nowrap} .wo-emoji-select{width:64px;min-width:64px;max-width:78px;text-align:center;font-size:20px;line-height:1.2;padding:6px 4px} .wo-slogan-input{flex:1;min-width:220px} @media (max-width:480px){ .wo-slogan-input{min-width:0;flex:1} } /* === HOTFIX AUTO DARK (placer tout en bas du fichier) =================== */ @media (prefers-color-scheme: dark){ /* Informe le navigateur pour les contrôles natifs */ html{ color-scheme: dark; } /* Réimpose les variables de thème, priorité par position dans le fichier */ :root{ --bg:#0b0c0d; --surface:#101315; --surface-2:#0f1414; --text:#e9f0f2; --text-2:#9aa6af; --line:#1e2429; --shadow:0 14px 32px rgba(0,0,0,.55); } } /* Optionnel (sélecteur de secours si un data-theme force le light) */ html[data-theme="dark"]{ color-scheme: dark; } html[data-theme="dark"] :root, html[data-theme="dark"]{ --bg:#0b0c0d; --surface:#101315; --surface-2:#0f1414; --text:#e9f0f2; --text-2:#9aa6af; --line:#1e2429; --shadow:0 14px 32px rgba(0,0,0,.55); } /* ===== Actions (modal + page) : CGU + bouton assortis ===== */ #auth-modal form[action*="inscription"] .actions, .auth-page form[action*="inscription"] .actions{ --action-h: 46px; /* hauteur visuelle cohérente */ --radius: 12px; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; /* passe en 2 lignes sur petit écran */ } /* Chip CGU compacte */ #auth-modal form[action*="inscription"] .actions .checkbox, .auth-page form[action*="inscription"] .actions .checkbox{ display:flex; align-items:center; gap:.55rem; padding:0 .8rem; min-height:var(--action-h); border:1px solid var(--line, #e5eaee); border-radius:var(--radius); background:var(--surface, #fff); box-shadow:0 3px 12px rgba(17,27,24,.06); font-size:.95rem; /* un peu plus petit pour l'harmonie */ line-height:1.1; user-select:none; } /* Checkbox compacte */ #auth-modal form[action*="inscription"] .actions .checkbox input[type="checkbox"], .auth-page form[action*="inscription"] .actions .checkbox input[type="checkbox"]{ appearance:none; -webkit-appearance:none; width:16px; height:16px; border:2px solid var(--line, #e5eaee); border-radius:5px; background:#fff; display:inline-grid; place-items:center; transition:border-color .18s, box-shadow .18s, transform .08s; cursor:pointer; } #auth-modal form[action*="inscription"] .actions .checkbox input[type="checkbox"]:hover, .auth-page form[action*="inscription"] .actions .checkbox input[type="checkbox"]:hover{ box-shadow:0 0 0 4px rgba(88,127,188,.10); } #auth-modal form[action*="inscription"] .actions .checkbox input[type="checkbox"]::after, .auth-page form[action*="inscription"] .actions .checkbox input[type="checkbox"]::after{ content:""; width:10px; height:10px; transform:scale(0); transition:transform .14s ease-out; clip-path: polygon(14% 54%, 0 68%, 44% 100%, 100% 18%, 84% 4%, 43% 68%); background: var(--primary, #1C76AD); } #auth-modal form[action*="inscription"] .actions .checkbox input[type="checkbox"]:checked, .auth-page form[action*="inscription"] .actions .checkbox input[type="checkbox"]:checked{ border-color: var(--primary, #1C76AD); } #auth-modal form[action*="inscription"] .actions .checkbox input[type="checkbox"]:checked::after, .auth-page form[action*="inscription"] .actions .checkbox input[type="checkbox"]:checked::after{ transform:scale(1); } /* Texte & lien CGU */ #auth-modal form[action*="inscription"] .actions .checkbox span, .auth-page form[action*="inscription"] .actions .checkbox span{ color:var(--text, #1e252b); font-weight:600; white-space:nowrap; align-self:center; } #auth-modal form[action*="inscription"] .actions .checkbox a, .auth-page form[action*="inscription"] .actions .checkbox a{ font-weight:700; text-decoration:none; } #auth-modal form[action*="inscription"] .actions .checkbox a:hover, .auth-page form[action*="inscription"] .actions .checkbox a:hover{ text-decoration:underline; } /* Bouton “S’inscrire” assorti (même hauteur, même radius, même ombre) */ #auth-modal form[action*="inscription"] .actions .btn, .auth-page form[action*="inscription"] .actions .btn{ display:inline-flex; align-items:center; justify-content:center; height:var(--action-h); padding:0 1rem; border-radius:var(--radius); border:1px solid var(--line, #e5eaee); background:var(--surface, #fff); box-shadow:0 3px 12px rgba(17,27,24,.06); font-weight:750; transition:transform .06s ease, box-shadow .18s ease, border-color .18s, background-color .18s; } #auth-modal form[action*="inscription"] .actions .btn:hover, .auth-page form[action*="inscription"] .actions .btn:hover{ border-color:var(--primary, #1C76AD); box-shadow:0 8px 22px rgba(17,27,24,.12); } #auth-modal form[action*="inscription"] .actions .btn:active, .auth-page form[action*="inscription"] .actions .btn:active{ transform: translateY(1px); } #auth-modal form[action*="inscription"] .actions .btn:focus-visible, .auth-page form[action*="inscription"] .actions .btn:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(88,127,188,.18); } /* États erreur / ok sur la checkbox (si validation JS) */ #auth-modal form[action*="inscription"] .actions .checkbox input.is-invalid, .auth-page form[action*="inscription"] .actions .checkbox input.is-invalid{ box-shadow:0 0 0 3px rgba(254,99,95,.15); border-color: var(--danger, #fe635f); } #auth-modal form[action*="inscription"] .actions .checkbox input.is-valid, .auth-page form[action*="inscription"] .actions .checkbox input.is-valid{ box-shadow:0 0 0 3px rgba(52,209,190,.15); border-color: var(--accent, #34d1be); } /* footer actuel + petits raffinements responsives */ .wo-footer { background: color-mix(in srgb, var(--bg) 65%, var(--surface)); color: var(--text-light, #f6f7f8); padding: 1rem 2rem; padding-bottom: max(1rem, env(safe-area-inset-bottom)); /* iOS safe area */ font-size: 0.9rem; } .wo-footer .wo-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; /* autorise le retour à la ligne */ row-gap: .5rem; /* espace entre lignes quand ça wrap */ min-width: 0; /* évite les débordements */ } .wo-footer__copy { margin: 0; font-weight: 500; color: var(--text-2); } .wo-footer__nav { display: flex; gap: 1.25rem; flex-wrap: wrap; /* les liens peuvent passer sur 2 lignes */ } .wo-footer__nav a { color: #1C76AD; text-decoration: none; font-weight: 500; padding: .25rem 0; /* tap target un peu plus grand */ transition: color .25s ease, transform .25s ease; } .wo-footer__nav a:hover { color: #1C76AD; transform: translateY(-2px); } /* --- Mobile (≤ 640px) : on empile et on centre proprement --- */ @media (max-width: 640px) { .wo-footer .wo-container { flex-direction: column; align-items: center; text-align: center; } .wo-footer__nav { gap: 1rem 1.25rem; /* un peu plus serré sur mobile */ } } /* Option confort tablette (≤ 900px) : resserrer les espacements */ @media (max-width: 900px) { .wo-footer { padding: .85rem 1.25rem; } } /* === Contact page — styles dédiés (additifs, sans casser l'existant) === */ /* En-tête courte */ .contact-hero .lead{ margin: 0 0 12px; } /* Grille du formulaire (2 colonnes desktop -> 1 colonne mobile) */ .wo-form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; } .col-span-2{ grid-column: 1 / -1; } @media (max-width: 700px){ .wo-form-grid{ grid-template-columns: 1fr; } } /* Champs & labels */ .wo-field{ display:flex; flex-direction:column; gap:6px; } .label{ font-weight:700; color: var(--text-2); } .req{ color: var(--danger); font-weight:800; } .wo-fieldline{ display:flex; align-items:center; justify-content:space-between; gap:10px; } /* Textarea moderne */ .input--textarea{ min-height: 180px; resize: vertical; line-height: 1.45; padding: .75rem .9rem; } .input--textarea:focus{ border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); } /* Barre compteur */ .charbar{ display:flex; align-items:center; justify-content:flex-end; margin-top:6px; } .char-count{ color: var(--text-2); } /* Zone actions */ .wo-actions{ display:flex; gap:.75rem; flex-wrap:wrap; } /* ——— Carte mini "membre connecté" ——— */ .contact-user-card{ margin-bottom: 12px; } .contact-user-row{ display:flex; align-items:center; gap:12px; } .contact-user__avatar{ width:56px; height:56px; border-radius:999px; overflow:hidden; flex:0 0 56px; outline: 2px solid rgba(255,255,255,.65); box-shadow: 0 0 0 2px rgba(0,0,0,.06); } .contact-user__avatar img{ width:100%; height:100%; object-fit:cover; display:block; } .contact-user__meta{ min-width:0; } .contact-user__name{ font-weight:800; font-size:1.05rem; line-height:1.15; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .contact-user__ids{ font-size:.95rem; } /* Dark: petites retouches (hérite surtout des variables) */ @media (prefers-color-scheme: dark){ .input--textarea:focus{ box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent); } } /* === Galerie & Lightbox (Contact Tickets) === */ .wo-gallery{ display:grid; grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); gap:10px; } .wo-thumb{ display:block; background: var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow: var(--shadow); aspect-ratio: 1 / 1; position:relative; } .wo-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .18s var(--ease), filter .18s var(--ease); } .wo-thumb:hover img{ transform: scale(1.03); filter: saturate(1.05); } .wo-lightbox{ position: fixed; inset:0; display:none; place-items:center; z-index: 4000; background: rgba(0,0,0,.78); padding:20px; } .wo-lightbox:target{ display:grid; } .wo-lightbox img{ max-width: min(92vw, 1400px); max-height: 88vh; border-radius: 14px; box-shadow: 0 18px 42px rgba(0,0,0,.45); border:1px solid color-mix(in srgb, #fff 12%, transparent); } .wo-lightbox__close{ position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:999px; display:grid; place-items:center; text-decoration:none; background: rgba(0,0,0,.45); color:#fff; font-size:24px; font-weight:800; border:1px solid rgba(255,255,255,.25); transition: transform .12s ease, background .12s ease; } .wo-lightbox__close:hover{ transform: scale(1.05); background: rgba(0,0,0,.6); } .wo-lightbox figcaption{ margin-top:10px; text-align:center; color:#d8dee4; font-size:.9rem; } /* === Membres / Mes tickets : table responsive & scroll horizontal === */ .tickets-scroll{ overflow-x: auto; /* autorise le défilement latéral */ -webkit-overflow-scrolling: touch; /* défilement fluide iOS */ touch-action: pan-x pan-y; /* gestuelle au doigt OK */ } .tickets-scroll .table{ width: 100%; min-width: 680px; /* force un seuil pour déclencher le scroll */ } .tickets-table th:last-child, .tickets-table td:last-child{ white-space: nowrap; /* la date ne passe pas à la ligne */ } /* === Giftcodes — Cartes modernes WoS =================================== */ .giftcard { display: flex; flex-direction: column; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed); } .giftcard:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(0,0,0,.12); border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); } .giftcode-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; } .giftcode-code { font-size: 1.2rem; font-weight: 800; color: var(--primary); font-family: monospace; } .giftcode-desc { margin: .5rem 0; color: var(--text); } .giftcode-rewards { margin: .6rem 0; color: var(--text); } .giftcode-expires { margin-top: .8rem; font-size: .9rem; } /* Bouton copier */ .giftcode-copy { min-width: 74px; transition: background var(--speed), transform var(--speed); } .giftcode-copy.copied { background: var(--success) !important; border-color: var(--success) !important; } /* =========================== MODAL iOS INSTALL =========================== */ .ios-modal { position: fixed; inset: 0; justify-content: center; align-items: center; z-index: 9999; } /* Quand l'attribut hidden est présent → on cache */ .ios-modal[hidden] { display: none; } /* Quand il n'est PAS présent → on affiche en flex */ .ios-modal:not([hidden]) { display: flex; } .ios-modal__overlay { position: absolute; inset: 0; backdrop-filter: blur(6px); background: rgba(0, 0, 0, 0.5); } .ios-modal__content { position: relative; background: #ffffff; padding: 20px 24px; max-width: 320px; width: 90%; border-radius: 18px; text-align: center; z-index: 10000; animation: iosPop 0.25s ease-out; } @keyframes iosPop { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } .ios-modal__content h2 { margin-bottom: 8px; font-size: 1.25rem; } .ios-modal__content p { font-size: 0.95rem; margin-bottom: 14px; color: #555; } .ios-share-icon { width: 60px; margin-bottom: 16px; } .ios-modal__close { background: #1c76ad; color: white; padding: 10px 16px; border: none; border-radius: 10px; font-size: 1rem; cursor: pointer; width: 100%; } .ios-modal__close:hover { background: #1E40AF; } /* FIX CLIQUAGE BLOQUÉ POUR LE HUB DISCUSSIONS */ .discussions-page a, .discussion-topic-title-link, .discussion-card-inner a, .discussion-row a { pointer-events: auto !important; z-index: 1000 !important; position: relative; } /* Neutralise le bug des
qui désactivent les clics */ .wo-public-menu details[open] * { pointer-events: auto !important; } /* Bouton de don dans le footer */ .footer-don-btn { margin-left: 14px; } .don-footer-link { /* background: linear-gradient(135deg, #3b82f6, #06b6d4); */ padding: 6px 12px; border-radius: 10px; font-size: 0.85rem; /* font-weight: 600; */ color: #1c76ad; text-decoration: none; transition: 0.2s ease; white-space: nowrap; } .don-footer-link:hover { opacity: 0.85; transform: translateY(-2px); } /* Mode sombre */ body.dark .don-footer-link { background: linear-gradient(135deg, #0ea5e9, #3b82f6); } /* ============================= MODALE "Rejoindre alliance" ============================= */ .join-alliance-modal { position: fixed; inset: 0; display: none; justify-content: center; align-items: center; z-index: 12000; } .join-alliance-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); } .join-alliance-modal__box { position: relative; background: #ffffff; border-radius: 16px; padding: 24px 26px; max-width: 430px; width: 90%; box-shadow: 0 18px 45px rgba(15, 23, 42, 0.35); } .join-alliance-modal h2 { margin: 0 0 10px; font-size: 1.2rem; font-weight: 700; color: #0f172a; } .join-alliance-modal p { margin: 0; font-size: 0.95rem; color: #475569; } .join-alliance-modal .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; } .wos-modal--info { border-top: 4px solid #0ea5e9 !important; /* bleu froid */ } #wos-modal-info h2 { font-weight: 700; } .table-stats { width: 100%; border-collapse: collapse; margin-top: 15px; background: #fff; border-radius: 10px; overflow: hidden; font-size: 0.9rem; } .table-stats thead { background: #f3f4f6; text-align: left; font-weight: bold; } .table-stats th, .table-stats td { padding: 10px 12px; border-bottom: 1px solid #e5e7eb; } .table-stats tbody tr:hover { background: #f9fafb; } .wo-card-orga { border-radius: 14px; padding: 30px; margin-bottom: 30px; border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: background 0.3s ease, color 0.3s ease; /* ✅ TYPO PROPRE */ word-break: normal; overflow-wrap: normal; word-wrap: normal; white-space: normal; line-height: 1.4; max-width: 100%; } /* ============================================ PALETTE : COULEURS ORIGINALES + EXTENSIONS ============================================ */ /* Blanc / Gris / Noir */ .bg-white { background:#ffffff; color:#000; } .bg-grey { background:#f1f3f4; color:#202124; } .bg-dark { background:#d9d9d9; color:#000000; } .bg-black { background:#c7c7c7; color:#000000; } /* BLEUS */ .bg-blue { background:#e8f0fe; color:#0b295f; } .bg-blue-light { background:#eef5ff; color:#0b295f; } .bg-blue-soft { background:#dcecff; color:#0b295f; } /* VERTS */ .bg-green { background:#e6f4ea; color:#064a1f; } .bg-green-light { background:#effaf1; color:#064a1f; } .bg-green-mint { background:#ddfff2; color:#064a1f; } /* JAUNES */ .bg-yellow { background:#fffde7; color:#5f4b00; } .bg-yellow-soft { background:#fff9cc; color:#5f4b00; } .bg-yellow-light { background:#fff4b8; color:#5f4b00; } /* ROSES */ .bg-pink { background:#fde7f3; color:#6a0037; } .bg-pink-light { background:#ffe6f2; color:#6a0037; } .bg-pink-soft { background:#ffd3e9; color:#6a0037; } /* VIOLETS */ .bg-purple { background:#f3e8ff; color:#3b0a73; } .bg-purple-light { background:#f7f0ff; color:#3b0a73; } .bg-purple-soft { background:#ead9ff; color:#3b0a73; } /* MARRONS */ .bg-brown { background:#f3e8dd; color:#4b2d13; } .bg-brown-soft { background:#ecdccf; color:#4b2d13; } .bg-brown-dark { background:#e2d1c2; color:#3a2510; } /* ORANGES */ .bg-orange { background:#ffe8d6; color:#7a3100; } .bg-orange-soft { background:#ffe1c7; color:#7a3100; } .bg-orange-light { background:#ffd6b3; color:#7a3100; } /* ROUGES */ .bg-red { background:#ffe5e5; color:#550000; } .bg-red-soft { background:#ffd6d6; color:#550000; } .bg-red-light { background:#ffcccc; color:#550000; } /* TURQUOISE */ .bg-turquoise { background:#e0fbff; color:#005a66; } .bg-turquoise-soft { background:#d4f6fc; color:#005a66; } .bg-turquoise-light { background:#c9f2fa; color:#005a66; } /* OLIVE */ .bg-olive { background:#f3f6e2; color:#3c4a17; } .bg-olive-light { background:#eef3d3; color:#3c4a17; } /* ============================================ HOVER OPTIONNEL ============================================ */ .wo-card-orga:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.12); } /* Images responsives dans le bloc organisation */ .cke_contents { max-height: 350px !important; /* hauteur exprès plus petite pour mobile */ overflow-y: auto !important; } /* Sur grands écrans on agrandit un peu */ @media (min-width: 768px) { .cke_contents { max-height: 550px !important; } } /* ============================ Boutons WoS unifiés ============================ */ .btn-wos { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; font-size: 14px; font-weight: 600; border-radius: 6px; border: none; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.15); } .btn-wos:hover { background: #155c87; } .btn-wos-secondary { background: white; color: #1c76ad; border: 2px solid #1c76ad; padding: 10px 18px; border-radius: 8px; font-size: 15px; cursor: pointer; transition: 0.2s ease; font-weight: 500; } .btn-wos-secondary:hover { background: #e8f4fb; } /* Bleu (action neutre) */ .btn-blue { background: #1c76ad; color: white; } .btn-blue:hover { background: #1c76ad; box-shadow: 0 4px 8px rgba(0,0,0,0.25); } /* Rouge (action critique) */ .btn-red { background: #ef4444; color: white; } .btn-red:hover { background: #dc2626; box-shadow: 0 4px 8px rgba(0,0,0,0.25); } /* Select stylé */ .btn-select { padding: 8px 14px; background: #1f2937; color: white; border: 1px solid #4b5563; border-radius: 6px; } .btn-select:hover { border-color: #9ca3af; } /* ============================ Organisation des blocs ============================ */ .export-buttons { display: flex; gap: 15px; margin-top: 20px; } .filter-select { margin-top: 20px; display: flex; align-items: center; gap: 10px; } /* ============================ Select WoS (style moderne) ============================ */ .wos-select { appearance: none; background-color: #f3f4f6; /* gris clair */ border: 1px solid #d1d5db; /* gris bordure */ color: #374151; /* gris foncé */ padding: 10px 14px; padding-right: 40px; /* espace pour flèche */ border-radius: 10px; font-size: 14px; font-weight: 500; cursor: pointer; min-width: 180px; max-width: 220px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); transition: 0.2s ease-in-out; background-image: url("data:image/svg+xml,%3Csvg fill='%236b7280' height='20' width='20' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .wos-select:hover { border-color: #9ca3af; background-color: #f9fafb; } .wos-select:focus { outline: none; border-color: #3b82f6; /* bleu WoS */ box-shadow: 0 0 0 3px rgba(59,130,246,0.3); } .subtitle-grey { margin-top: 12px; color: #6b7280; } .charts-controls { margin-top: 25px; display: flex; gap: 15px; flex-wrap: wrap; align-items: center; } .export-buttons { display: flex; gap: 20px; margin-top: 22px; } .sitemap-list { columns: 2; column-gap: 40px; list-style: disc; padding-left: 20px; } @media (max-width: 768px) { .sitemap-list { columns: 1; } } .sitemap-list li { margin-bottom: 6px; } .sitemap-list a { text-decoration: none; } .sitemap-list a:hover { text-decoration: underline; } .card-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; } .event-meta, .event-dates { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: .9rem; opacity: .85; margin-bottom: .75rem; margin-top: 10px; } .event-dates { margin-bottom: 1.25rem; } .event-desc { font-size: .9rem; line-height: 1.5; opacity: .9; margin-bottom: 1.5rem; } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin: 1.25rem 0; } .stat { background: rgba(0,0,0,.04); border-radius: .85rem; padding: .9rem .75rem; text-align: center; } .stat-value { font-size: 1.4rem; font-weight: 700; margin-bottom: .25rem; } .stat-label { font-size: .7rem; opacity: .7; } .hall-item { padding: .75rem 0; border-bottom: 1px solid rgba(0,0,0,.06); } .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .5rem; padding: .75rem 1.25rem; border-radius: .85rem; background: #1c76ad; color: #fff; text-decoration: none; } .card--dynamic { display: flex; flex-direction: column; gap: 1rem; } .topic-title { font-weight: 600; font-size: 1rem; } .topic-excerpt { font-size: .9rem; opacity: .85; line-height: 1.5; margin-top: -12px; } .topic-meta { font-size: .85rem; opacity: .75; } .badge-alliance { color: #1c76ad; margin-right: .25rem; } .hall-list { list-style: none; padding: 0; margin: 0; } .hall-tournament { font-size: .8rem; opacity: .6; margin-bottom: .15rem; } .hall-winner { font-size: .9rem; display: flex; gap: .35rem; align-items: center; } /* ================================ HEADER ================================== */ .gestion-header { background: var(--surface); color: var(--text); padding: 24px; border-radius: 16px; margin-bottom: 28px; box-shadow: var(--shadow); line-height: 1.6; } .gestion-header h1 { margin: 0 0 6px 0; font-size: 1.9rem; font-weight: 800; } .subtitle { color: #64748b; margin-bottom: 12px; } .admin-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; } @media (prefers-color-scheme: dark) { body:not(.dark) { --text-main: #f3f4f6; --text-secondary: #cbd5e1; --text-muted: #9ca3af; --card-bg: #1e293b; } } /* ========================================= FIX GLOBAL SELECT — force dark réel ========================================= */ body.dark select, body.dark select.wo-input { background: #1f2937 !important; background-color: #1f2937 !important; color: #ffffff !important; border-color: #374151 !important; appearance: none; -webkit-appearance: none; -moz-appearance: none; color-scheme: dark; /* 🔥 empêche Chrome de forcer light */ } /* ================================ Boutons visibles uniquement tablette + PC ================================ */ @media (max-width: 767px) { .admin-buttons--desktop-only { display: none !important; } } /* === Ko-fi button inside dynamic card === */ .kofi-button-wrapper { display: flex; justify-content: center; align-items: center; margin-top: 1rem; } /* lien cliquable */ .kofi-button-wrapper a { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; } /* image Ko-fi */ .kofi-button-wrapper img { width: 100%; max-width: 220px; /* taille idéale desktop */ height: auto; border-radius: 12px; transition: transform 0.2s ease, box-shadow 0.2s ease; } /* hover discret */ .kofi-button-wrapper img:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); } /* mobile */ @media (max-width: 480px) { .kofi-button-wrapper img { max-width: 180px; } } /* =============================== Organisation – images CKEditor =============================== */ /* Cas 1 : image SEULE dans un

→ grande image */ .org-content p > img:only-child { display: block; max-width: 100% !important; height: auto !important; margin: 0 auto; } /* Cas 2 : image DANS du texte → icône / drapeau */ .org-content p img:not(:only-child) { display: inline !important; width: auto !important; max-width: none !important; height: 1em !important; margin: 0 4px 0 0 !important; vertical-align: middle; } /* Contenu public des pages alliance */ .alliance-content { line-height: 1.35; } .alliance-content p { margin: 0.25em 0; } .alliance-content br { line-height: 1.1; } /* ZARKOX */ /* ================================ SH6 — Page Membres (responsive) ================================ */ .sh6-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; } .sh6-pagehead{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; } .sh6-pagehead__left h1{ margin:0 0 6px 0; } .sh6-muted{ color: var(--text-2); margin:0; } .sh6-pill{ display:inline-flex; align-items:center; gap:10px; padding:10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; white-space:nowrap; } .sh6-pill__label{ color: var(--text-2); font-size: 14px; } .sh6-pill__value{ font-weight: 800; } .sh6-pagehead__actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .sh6-import-form{ display:flex; align-items:center; gap:8px; } .sh6-import-form input[type="file"]{ max-width:180px; font-size:13px; } .sh6-diff{ background: rgba(192,57,43,.12); color: #c0392b; font-weight: 700; } /* ========================================================= TABLE WRAP — CSS 2 (remplacement) ========================================================= */ /* Conteneur de scroll */ .sh6-table-wrap{ width: 100%; overflow-x: scroll; /* 🔑 force le scroll horizontal */ overflow-y: visible; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; /* 🔑 garde la barre visible */ border-radius: var(--r-sm); } /* Table plus large que l'écran */ .sh6-table{ min-width: 1100px; /* 🔑 force le débordement */ width: 100%; } /* ===== Scrollbar visible (WebKit) ===== */ .sh6-table-wrap::-webkit-scrollbar{ height: 12px; } .sh6-table-wrap::-webkit-scrollbar-track{ background: var(--surface-2); border-radius: 10px; } .sh6-table-wrap::-webkit-scrollbar-thumb{ background: rgba(120,120,120,.45); border-radius: 10px; border: 2px solid var(--surface-2); } .sh6-table-wrap::-webkit-scrollbar-thumb:hover{ background: rgba(120,120,120,.7); } /* ===== Firefox ===== */ .sh6-table-wrap{ scrollbar-width: auto; scrollbar-color: rgba(120,120,120,.6) var(--surface-2); } /* ========================================================= TABLE — CSS 2 (remplacement) ========================================================= */ .sh6-table thead th{ text-align:left; font-weight:700; font-size:13px; letter-spacing:.02em; color:var(--text-2); background:var(--surface-2); border-bottom:1px solid var(--line); padding:12px 12px; position:sticky; top:0; z-index:5; white-space:nowrap; } .sh6-table tbody td{ /* padding:12px 12px; */ border-bottom:1px solid var(--line); vertical-align:middle; white-space:nowrap; } .sh6-table tbody tr:hover{ background:rgba(0,0,0,.03); } @media (prefers-color-scheme: dark){ .sh6-table tbody tr:hover{ background:rgba(255,255,255,.04); } } /* Sticky 1ère colonne — CSS 2 */ .sh6-table thead th:first-child{ position:sticky; left:0; z-index:8; background:var(--surface-2); } .sh6-table tbody td:first-child{ position:sticky; left:0; z-index:4; background:var(--surface); border-right:1px solid var(--line); } .sh6-table tbody tr:hover td:first-child{ background:rgba(0,0,0,.03); } @media (prefers-color-scheme: dark){ .sh6-table tbody tr:hover td:first-child{ background:rgba(255,255,255,.04); } } /* ========================================================= TEXTE / MÉDIAS ========================================================= */ .sh6-name{ font-weight:700; } .sh6-name-link{ font-weight:700; } .sh6-mono{ font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:13px; } .sh6-stove-img{ display:block; height:40px; width:auto; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); padding:2px; /* margin-left: 34px; */ } /* ========================================================= TRI — inchangé (CSS 2 identique) ========================================================= */ .sh6-sortable{ cursor:pointer; user-select:none; position:relative; padding-right:22px; } .sh6-sortable::after{ content:"↕"; position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:12px; color:var(--text-2); opacity:.7; } .sh6-sortable.is-asc::after{ content:"▲"; color:var(--primary); opacity:1; } .sh6-sortable.is-desc::after{ content:"▼"; color:var(--primary); opacity:1; } /* ========================================================= SEARCH BAR — CSS 2 (remplacement) ========================================================= */ .sh6-search{ margin:14px 0 18px; } .sh6-search input{ width:100%; padding:12px 14px; border-radius:16px; border:1px solid var(--line); background:var(--surface); color:var(--text); box-shadow:var(--shadow); outline:none; transition:box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease); } .sh6-search input::placeholder{ color:var(--text-2); } .sh6-search input:focus{ border-color:var(--primary-600); box-shadow:0 0 0 3px rgba(28,118,173,.18), var(--shadow); } /* ========================================================= RESPONSIVE HEADER — CSS 2 ========================================================= */ @media (max-width:900px){ .sh6-pagehead{ flex-direction:column; align-items:stretch; } .sh6-pagehead__actions{ justify-content:flex-start; } .sh6-import-form input[type="file"]{ max-width:100%; } } /* ========================================================= FORCE TABLE MODE — CSS 2 ========================================================= */ .sh6-mobile-only{ display:none !important; } .sh6-desktop-only{ display:block !important; } /* ========================================================= ACCORDÉON MEMBRES (mobile) ========================================================= */ .sh6-member-card { background: var(--surface); border-radius: 14px; margin-bottom: 12px; overflow: hidden; box-shadow: var(--shadow); } .sh6-member-header { width: 100%; padding: 14px; background: none; border: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .sh6-member-body { display: none; padding: 14px; border-top: 1px solid var(--line); } .sh6-member-card.open .sh6-member-body { display: block; } .sh6-chevron { font-size: 20px; transition: transform .2s; } .sh6-member-card.open .sh6-chevron { transform: rotate(180deg); } /* ================================ SH6 — Page membre (profil) ================================ */ .sh6-form-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; } .sh6-form-grid label{ display:flex; flex-direction:column; gap:6px; font-weight:600; } .sh6-form-grid input{ padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--surface); } .sh6-form-actions{ grid-column:1 / -1; margin-top:10px; } .sh6-data-list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; } .sh6-data-list li{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line); } .sh6-data-chef{ grid-column:1 / -1; gap:14px; } .sh6-data-chef img{ height:80px; border-radius:12px; border:1px solid var(--line); cursor:zoom-in; } @media (max-width: 720px){ .sh6-form-grid, .sh6-data-list{ grid-template-columns: 1fr; } } /* ========================================================= FIX RÉEL — GOOGLE / SAFARI TRANSLATE ========================================================= */ .translate-block{ background-color: var(--surface) !important; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .translate-block [style], .translate-block font{ color: var(--text) !important; background-color: transparent !important; opacity: 1 !important; filter: none !important; } .translate-block p, .translate-block li, .translate-block span, .translate-block div{ color: var(--text) !important; } .translate-title{ color: var(--text) !important; font-weight: 800; } .translate-subtitle{ color: var(--text-2) !important; font-weight: 700; } .translate-note{ background-color: var(--surface-2) !important; color: var(--text-2) !important; border: 1px solid var(--line); } @media (prefers-color-scheme: dark){ .translate-block, .translate-block *{ color: var(--text) !important; } } /* ================================ SH6 — Furnace timeline diagram ================================ */ .sh6-furnace-timeline{ margin-top: 10px; } .sh6-furnace-timeline__wrap{ position: relative; padding: 14px 10px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; } .sh6-furnace-timeline__line{ position: relative; display: inline-block; height: 6px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); margin: 34px 14px 12px 14px; min-width: max-content; } .sh6-furnace-timeline__marker{ display: none; } .sh6-furnace-node{ position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; width: 110px; margin: 0 4px; vertical-align: top; flex-shrink: 0; } .sh6-furnace-node__top{ display: inline-flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 8px; white-space: nowrap; } .sh6-furnace-node__icon{ width: 26px; height: 26px; object-fit: contain; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); padding: 2px; } .sh6-furnace-node__badge{ font-weight: 800; font-size: 12px; color: var(--text); white-space: nowrap; } .sh6-furnace-node__date{ font-size: 11px; color: var(--text-2); white-space: nowrap; } @media (max-width: 820px){ .sh6-furnace-node{ width: 96px; } .sh6-furnace-node__icon{ width: 24px; height: 24px; } .sh6-furnace-node__badge{ font-size: 11px; } } /* ================================ SH6 — Heatmap valeurs numériques ================================ */ .sh6-rank-high-1 { background: #7f1d1d22; } .sh6-rank-high-2 { background: #8b1a1a22; } .sh6-rank-high-3 { background: #991b1b22; } .sh6-rank-high-4 { background: #b91c1c22; } .sh6-rank-high-5 { background: #c2410c22; } .sh6-rank-high-6 { background: #d9770622; } .sh6-rank-high-7 { background: #ea580c22; } .sh6-rank-high-8 { background: #f59e0b22; } .sh6-rank-high-9 { background: #fbbf2422; } .sh6-rank-high-10 { background: #fde68a22; } .sh6-rank-high-11 { background: #fef3c722; } .sh6-rank-high-12 { background: #fff7ed22; } .sh6-rank-high-13 { background: #fffaf022; } .sh6-rank-high-14 { background: #fffdf722; } .sh6-rank-high-15 { background: #ffffff22; } .sh6-rank-high-16 { background: #ffffff18; } .sh6-rank-high-17 { background: #ffffff12; } .sh6-rank-high-18 { background: #ffffff0c; } .sh6-rank-high-19 { background: #ffffff08; } .sh6-rank-high-20 { background: transparent; } .sh6-rank-low-1 { background: #064e3b22; } .sh6-rank-low-2 { background: #065f4622; } .sh6-rank-low-3 { background: #04785722; } .sh6-rank-low-4 { background: #05966922; } .sh6-rank-low-5 { background: #16a34a22; } .sh6-rank-low-6 { background: #22c55e22; } .sh6-rank-low-7 { background: #4ade8022; } .sh6-rank-low-8 { background: #86efac22; } .sh6-rank-low-9 { background: #bbf7d022; } .sh6-rank-low-10 { background: #dcfce722; } .sh6-rank-low-11 { background: #ecfeff22; } .sh6-rank-low-12 { background: #f0fdfa22; } .sh6-rank-low-13 { background: #f7fffc22; } .sh6-rank-low-14 { background: #ffffff22; } .sh6-rank-low-15 { background: #ffffff18; } .sh6-rank-low-16 { background: #ffffff12; } .sh6-rank-low-17 { background: #ffffff0c; } .sh6-rank-low-18 { background: #ffffff08; } .sh6-rank-low-19 { background: #ffffff05; } .sh6-rank-low-20 { background: transparent; } .sh6-num{ transition: background-color .25s ease; border-radius: 6px; padding: 4px 6px; } /* ========================= SH6 — Mobile heatmap ========================= */ .sh6-mobile-heat{ padding: 4px 6px; border-radius: 6px; margin-bottom: 2px; } .sh6-mobile-rank-very-high{ background: rgba(220, 53, 69, 0.18); } .sh6-mobile-rank-high{ background: rgba(255, 193, 7, 0.18); } .sh6-mobile-rank-mid{ background: rgba(255, 235, 59, 0.20); } .sh6-mobile-rank-low{ background: rgba(40, 167, 69, 0.18); } @media (prefers-color-scheme: dark){ .sh6-mobile-rank-very-high{ background: rgba(220,53,69,.25); } .sh6-mobile-rank-high{ background: rgba(255,193,7,.25); } .sh6-mobile-rank-mid{ background: rgba(255,235,59,.25); } .sh6-mobile-rank-low{ background: rgba(40,167,69,.25); } } /* ========================================================= RECRUTEMENT SH6 — STYLES DÉDIÉS (SANS CONFLITS) ========================================================= */ /* =============================== CONTAINER GLOBAL =============================== */ .sh6-rec-center{ width: 100%; margin: 0; padding: 0; } /* =============================== CARTES INTRO & FORMULAIRE =============================== */ .sh6-rec-intro, .sh6-rec-form-card{ padding: 10px 20px; } @media (max-width: 768px){ .sh6-rec-intro, .sh6-rec-form-card{ padding: 24px 20px; } } .sh6-rec-intro-text{ margin-top: 14px; max-width: 820px; line-height: 1.6; font-size: .95rem; } /* =============================== TITRES DE SECTION =============================== */ .sh6-rec-form .wo-section-title{ margin-top: 36px; margin-bottom: 18px; font-size: 1.1rem; } /* =============================== CHAMPS & ESPACEMENTS =============================== */ .sh6-rec-form .wo-field{ margin-bottom: 22px; } .sh6-rec-form .wo-input, .sh6-rec-form .wo-textarea{ width: 100%; border-radius: 18px; padding: 14px 18px; background: var(--surface-2); border: 1px solid var(--line); font-size: .95rem; transition: border-color .15s ease, box-shadow .15s ease; } .sh6-rec-form .wo-input:focus, .sh6-rec-form .wo-textarea:focus{ outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(28,118,173,.18), 0 10px 24px rgba(28,118,173,.22); } .sh6-rec-form .wo-textarea{ min-height: 140px; resize: vertical; } /* =============================== RADIO — CARTES CLIQUABLES =============================== */ .sh6-rec-form .wo-radio-group{ display: grid; gap: 14px; } .sh6-rec-form .wo-radio{ display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; transition: background .15s ease, border-color .15s ease; } .sh6-rec-form .wo-radio:hover{ background: rgba(28,118,173,.06); border-color: var(--primary-600); } /* =============================== CHECKBOX ALLIANCE =============================== */ .sh6-rec-form .wo-check{ display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: .9rem; } /* =============================== UPLOAD FICHIER =============================== */ .sh6-rec-form .wo-input-file{ width: 100%; padding: 16px; border-radius: 18px; background: var(--surface-2); border: 1px dashed var(--line); } .sh6-rec-form .wo-input-file::file-selector-button{ background: var(--primary); color: #fff; border: none; border-radius: 12px; padding: 10px 14px; margin-right: 12px; cursor: pointer; } /* =============================== ACTIONS (BOUTON) =============================== */ .sh6-rec-form .wo-actions{ margin-top: 36px; margin-bottom: 12px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } /* =============================== MODALE SUCCÈS =============================== */ .rec-success{ position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 9999; } .rec-success-card{ background: var(--surface); padding: 32px; border-radius: 22px; max-width: 420px; width: calc(100% - 40px); text-align: center; box-shadow: var(--shadow); } .rec-success-card h2{ margin-top: 0; } .rec-success-card p{ line-height: 1.6; margin: 14px 0 22px; } .status-new { background:#3498db; } .status-ok { background:#2ecc71; } .status-wait { background:#f39c12; } .status-ko { background:#e74c3c; } /* ------------------------- REORG MODE ------------------------- */ .wo-drag-handle{ display: none; margin-right: 10px; font-size: 18px; opacity: .55; user-select: none; } body.wo-reorg .wo-drag-handle{ display: inline-flex; align-items: center; } body.wo-reorg .demande-card{ cursor: grab; } body.wo-reorg .demande-card:active{ cursor: grabbing; } /* ------------------------- FOLDERS UI ------------------------- */ .wo-folder{ margin-top: 14px; } .wo-folder__head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid rgba(120,120,120,.15); } .wo-folder__title{ display: flex; align-items: center; gap: 10px; } .wo-folder__name{ font-weight: 700; } .wo-folder__actions{ display: flex; gap: 8px; flex-wrap: wrap; } .wo-folder__btn{ padding: 6px 10px; } .wo-folder__list{ padding: 10px; display: grid; gap: 10px; } /* ------------------------- MODAL SHEET (mobile/tablette) ------------------------- */ .wo-sheet .wo-modal__content.wo-sheet__content{ max-height: 85vh; overflow: auto; } .wo-sheet__grab{ width: 46px; height: 5px; border-radius: 999px; margin: 6px auto 10px auto; background: rgba(120,120,120,.35); } @media (max-width: 980px){ .wo-sheet{ align-items: flex-end; } .wo-sheet .wo-modal__content.wo-sheet__content{ width: 100%; max-width: 720px; margin: 0 auto; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 18px; border-top-right-radius: 18px; } } /* ===================================================== TOOLTIP FIX — FORCE VISIBILITY ===================================================== */ .wo-tooltip{ display:inline-flex; cursor:help; font-size:14px; position:relative; user-select:none; } /* la bulle */ .wo-tooltip::after{ content: attr(data-tooltip); position: fixed; /* viewport */ background:#1e1e1e; color:#fff; padding:6px 8px; border-radius:6px; font-size:12px; white-space: pre-line; max-width: min(320px, calc(100vw - 24px)); box-sizing: border-box; opacity:0; pointer-events:none; transition: opacity .15s ease; z-index:99999; } .wo-tooltip.show::after{ opacity:1; } .wo-tooltip::after{ left: var(--tt-left); top: var(--tt-top); transform: translate(-50%, -100%); } /* ========================= MODALE ADMIN ========================= */ .sh6-modal{ position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; } .sh6-modal.hidden{ display: none; } .sh6-modal-backdrop{ position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); } .sh6-modal-card{ position: relative; background: #fff; border-radius: 12px; padding: 20px; width: 100%; max-width: 520px; z-index: 1; box-shadow: 0 10px 40px rgba(0,0,0,.2); } .sh6-edit-btn{ padding: 4px 10px; font-size: 0.9rem; border-radius: 6px; border: 1px solid #ccc; background: #f5f7fa; cursor: pointer; } .sh6-edit-btn:hover{ background: #e9eef5; } /* ========================================== Recruitment Admin – Card Identity (isolé) Prefix: ra- ========================================== */ .ra-card-left{ display: flex; align-items: center; } .ra-status{ display: flex; align-items: center; } .ra-status-dot{ width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .ra-status-new { background:#3b82f6; } .ra-status-ok { background:#22c55e; } .ra-status-wait { background:#f59e0b; } .ra-status-ko { background:#ef4444; } .ra-avatar{ width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: #0f172a; box-shadow: 0 2px 6px rgba(0,0,0,.18); } .ra-identity{ display: flex; flex-direction: column; line-height: 1.2; } .ra-pseudo-line{ display: flex; align-items: center; gap: 8px; } .ra-pseudo{ font-weight: 600; font-size: 15px; } .ra-stove{ width: 34px; height: 34px; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); } .ra-server{ font-size: 13px; opacity: 0.75; } @media (max-width: 640px){ .ra-avatar{ width: 48px; height: 48px; } .ra-stove{ width: 28px; height: 28px; } } /* ===== Scroll horizontal AU-DESSUS ===== */ .sh6-scroll-top{ overflow-x:auto; overflow-y:hidden; height:14px; margin: 0 0 6px 0; } .sh6-scroll-top__inner{ height:1px; } .sh6-table-wrap{ overflow-x:auto; overflow-y:visible; width:100%; } /* Fix: le modal ne doit JAMAIS bloquer la page quand il est hidden */ #sh6ImageModal[hidden]{ display: none !important; } /* Bonus sécurité: si un overlay traîne, il ne doit pas capturer les clics */ #sh6ImageModal[hidden] *{ pointer-events: none !important; } /* =============================== SCROLL HORIZONTAL HAUT (SH6) =============================== */ .sh6-table-topscroll { width: 100%; height: 14px; /* ⬅️ indispensable */ overflow-x: auto; /* ⬅️ indispensable */ overflow-y: hidden; scrollbar-gutter: stable; } .sh6-table-topscroll__inner { height: 1px; /* ⬅️ force le scroll */ } .wo-footer__link { color: inherit; text-decoration: none; } .wo-footer__link:hover { text-decoration: underline; } /* ============================= HERO BANNER SH6 ============================= */ .sh6-hero { width: 100%; margin: 0 0 24px 0; background: #ebf2fd; /* background: linear-gradient(#ffffff, #f8fafc); */ /* padding: 14px; */ border-radius: 18px; /* box-shadow: 0 12px 40px rgba(0,0,0,.12); */ } .sh6-hero-actu { width: 100%; margin: 0 0 0 0; /* background: #ebf2fd; */ /* background: linear-gradient(#ffffff, #f8fafc); */ /* padding: 14px; */ border-radius: 18px; /* box-shadow: 0 12px 40px rgba(0,0,0,.12); */ } .sh6-hero-lead { width: 100%; margin: 0 0 24px 0; /* background: #ebf2fd; */ /* background: linear-gradient(#ffffff, #f8fafc); */ /* padding: 14px; */ border-radius: 18px; /* box-shadow: 0 12px 40px rgba(0,0,0,.12); */ } .sh6-hero img { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 12px; /* box-shadow: 0 10px 30px rgba(0,0,0,.08); */ } .sh6-hero-actu img { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 12px; /* box-shadow: 0 10px 30px rgba(0,0,0,.08); */ } .sh6-hero-lead img { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 150px 150px 150px 150px; /* box-shadow: 0 10px 30px rgba(0,0,0,.08); */ } /* ============================= IMAGE SECONDAIRE — SH6 ============================= */ .sh6-hero-2 { width: 100%; display: flex; justify-content: center; /* centre l’image */ margin: 30px 0 20px 0; } .sh6-hero-2 img { display: block; width: 100%; max-width: 680px; /* ← TAILLE MAX de l’image */ height: auto; box-shadow: 0 10px 30px rgba(0,0,0,.08); border-radius: 12px; } /* ============================= INTRO RECRUTEMENT — STABLE ============================= */ .sh6-rec-intro { display: flex; align-items: center; gap: 24px; } /* Texte */ .sh6-rec-intro__text { flex: 1; min-width: 0; } /* Avatar */ .sh6-rec-intro__avatar { flex: 0 0 140px; display: flex; align-items: center; justify-content: center; margin: 0; } .sh6-rec-intro__avatar img { width: 100%; height: auto; max-width: 140px; object-fit: contain; display: block; } /* 📱 MOBILE — image plus grande et plus basse */ @media (max-width: 768px) { .sh6-rec-intro { flex-direction: row; align-items: stretch; } .sh6-rec-intro__avatar { flex: 0 0 140px; /* ⬅️ plus large */ align-self: flex-end; /* collée en bas */ margin-top: 24px; /* ⬅️ descend encore */ } .sh6-rec-intro__avatar img { width: 140px; height: auto; display: block; } } /* ====================================================== SUIVI PIN — FORMULAIRE ====================================================== */ .suivi-pin-card { margin-top: 24px; text-align: center; } .suivi-pin-card .wo-field { max-width: 260px; margin-left: auto; margin-right: auto; } .pin-error { color: var(--danger); margin-top: 8px; font-size: 0.95em; } /* ====================================================== MODALE DE SUIVI ====================================================== */ .suivi-modal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 9999; align-items: center; justify-content: center; padding: 16px; } .suivi-modal-card { background: var(--surface); color: var(--text); width: 100%; max-width: 420px; padding: 22px; border-radius: var(--radius); position: relative; box-shadow: var(--shadow); } /* ===== Close ===== */ .modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--text-2); font-size: 18px; cursor: pointer; } .modal-close:hover { color: var(--text); } /* ====================================================== HEADER MODALE (AVATAR + STOVE) ====================================================== */ .suivi-header { display: flex; justify-content: center; margin-bottom: 12px; } .suivi-avatar-wrap { position: relative; width: 84px; height: 84px; } .suivi-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); background: var(--surface-2); } .suivi-stove { position: absolute; bottom: -2px; right: -2px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); } /* ====================================================== CONTENU MODALE ====================================================== */ #suiviName { text-align: center; font-size: 1.1em; margin: 8px 0 4px; word-break: break-word; } .suivi-status { margin: 14px 0; padding: 10px; border-radius: var(--r-sm); font-weight: 600; text-align: center; font-size: 0.95em; color: #fff; } .suivi-date { font-size: 0.9em; color: var(--text-2); text-align: center; margin-bottom: 10px; } .suivi-comment { margin-top: 14px; background: var(--surface-2); padding: 12px; border-radius: var(--r-sm); font-size: 0.95em; line-height: 1.4; } /* ====================================================== RESPONSIVE ====================================================== */ @media (min-width: 600px) { .suivi-avatar-wrap { width: 96px; height: 96px; } .suivi-stove { width: 30px; height: 30px; } } /* ============================= HONEYPOT INVISIBLE ============================= */ .sh6-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Sécurité UX */ .sh6-login-card form { position: relative; } .sh6-modal__overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 999; } .sh6-modal__content { position: relative; z-index: 1000; } /* === Inline furnace icon alignment (SAFE) === */ .sh6-inline-stove{ display: inline-flex; align-items: center; gap: 6px; } .sh6-inline-stove__sep{ opacity: .6; } .sh6-request__stove{ height: 22px; width: auto; vertical-align: middle; } /* ===================================================== SH6 HELP MODAL — MOBILE FIX (NO REGRESSION) ===================================================== */ .sh6-request-modal{ position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; } .sh6-request-modal__panel{ width: min(520px, 92vw); max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* 📱 Mobile : bottom-sheet ergonomique */ @media (max-width: 600px){ .sh6-request-modal{ align-items: flex-end; } .sh6-request-modal__panel{ width: 100%; max-width: none; max-height: 85vh; border-radius: 18px 18px 0 0; } } /* ===================================================== SH6 IMAGE MODAL — MOBILE FRIENDLY ===================================================== */ #sh6ImageModal{ z-index: 6000; } #sh6ImageModal .sh6-modal__content{ max-width: min(90vw, 640px); max-height: 88vh; padding: 16px; } #sh6ImageModalImg{ max-width: 100%; max-height: 75vh; object-fit: contain; } /* Mobile */ @media (max-width: 600px){ #sh6ImageModal .sh6-modal__content{ width: 100%; height: auto; max-height: 100vh; border-radius: 12px; } } #pinInput { font-size: 16px; } /* ============================= MODALE WELCOME SH6 ============================= */ .sh6-welcome-modal { position: fixed; inset: 0; display: none; /* 👈 IMPORTANT : cachée par défaut */ justify-content: center; align-items: center; z-index: 9999; } .sh6-welcome-content { position: relative; max-width: 520px; width: 100%; max-height: 100%; } .sh6-welcome-content img { width: 100%; height: auto; border-radius: 18px; display: block; } /* Bouton fermer */ .sh6-welcome-close { position: absolute; top: -14px; /* right: -14px; */ right: 0px; width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--card-bg, #111); color: #fff; font-size: 18px; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,0.4); } .sh6-welcome-close:hover { transform: scale(1.05); } .sh6-info-link { display: flex; justify-content: center; /* centre horizontalement */ margin-top: 12px; } .sh6-info-link a { position: absolute; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--primary); text-decoration: none; } .sh6-info-link a:hover { text-decoration: underline; } .sh6-required-note { /* margin: 8px 0 16px; */ font-size: 0.85rem; font-style: italic; color: var(--text-muted); text-align: center; } .sh6-required-note::before { content: "* "; font-weight: 600; color: var(--primary); } .sh6-rec-intro-text { white-space: pre-line; } /* ===================================================== SH6 — Latest Progress Card (Modern / Responsive) ===================================================== */ /* ---------- Variables thème ---------- */ :root { --sh6-bg: #ffffff; --sh6-bg98: #ffffff; --sh6-bg-soft: #f6f8fb; --sh6-border: #e5e7eb; --sh6-text: #111827; --sh6-text-muted: #6b7280; --sh6-accent: #2563eb; } @media (prefers-color-scheme: dark) { :root { --sh6-bg: #0f172a; --sh6-bg98: #1e252b; --sh6-bg-soft: #111827; --sh6-border: #1f2933; --sh6-text: #e5e7eb; --sh6-text-muted: #9ca3af; --sh6-accent: #60a5fa; } } /* ---------- Card ---------- */ .sh6-latest-progress { /* background: linear-gradient( 180deg, var(--sh6-bg), var(--sh6-bg-soft) ); */ background: var(--surface); border: 1px solid var(--sh6-border); border-radius: 18px; padding: 22px 22px 24px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); } /* ---------- Title ---------- */ .sh6-request__h2 { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.2px; margin-bottom: 18px; color: var(--sh6-text); } /* ---------- Grid ---------- */ .sh6-lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } /* ---------- Item ---------- */ .sh6-lp-item { /* background: var(--sh6-bg); */ background: var(--surface); border: 1px solid var(--sh6-border); border-radius: 14px; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .sh6-lp-item98 { background: var(--sh6-bg98); border: 1px solid var(--sh6-border); border-radius: 14px; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .sh6-lp-item:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } /* ---------- Main line ---------- */ .sh6-lp-main { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .sh6-lp-main strong { font-size: 0.95rem; font-weight: 600; color: var(--sh6-text); } .sh6-lp-value { font-size: 1rem; font-weight: 700; color: var(--sh6-accent); } /* ---------- Sub lines ---------- */ .sh6-lp-sub { font-size: 0.88rem; line-height: 1.3; color: var(--sh6-text-muted); display: flex; gap: 6px; align-items: center; white-space: nowrap; } /* ---------- Muted block ---------- */ .sh6-lp-muted { background: transparent; border-style: dashed; /* text-align: center; */ } .sh6-lp-muted strong { font-weight: 600; color: var(--sh6-text-muted); } /* ---------- Color classes from JS ---------- */ .sh6-pos-1 { color: #26ba38; } .sh6-pos-2 { color: #1d90da; } .sh6-pos-3 { color: #f98b1e; } .sh6-pos-4 { color: #15803d; } .sh6-pos-5 { color: #14532d; } .sh6-neg-1 { color: #fca5a5; } .sh6-neg-2 { color: #f87171; } .sh6-neg-3 { color: #ef4444; } .sh6-neg-4 { color: #dc2626; } .sh6-neg-5 { color: #7f1d1d; } .sh6-neutral { color: var(--sh6-text-muted); } .sh6-fc-1 { color: #26ba38; } /* +0.1 / +0.2 */ .sh6-fc-2 { color: #7d63ed; } /* +0.3 / +0.4 */ .sh6-fc-3 { color: #d96b34; } /* +1.0 → +1.4 */ .sh6-fc-4 { color: #ff0000; } /* +2.0 et + */ /* ---------- Responsive tweaks ---------- */ @media (max-width: 520px) { .sh6-lp-main { flex-direction: column; align-items: flex-start; } .sh6-lp-value { font-size: 1.05rem; } } /* === LP ITEM – spacing fin === */ .sh6-lp-item .sh6-lp-main { margin-bottom: 6px; } .sh6-lp-item .sh6-lp-value { display: block; margin-bottom: 6px; } .sh6-lp-item .sh6-lp-sub { line-height: 1.4; } .sh6-stove-wrap{ display:flex; align-items:center; gap:8px; } .sh6-stove-fc{ font-weight:600; font-size:0.85rem; opacity:0.85; } /* =============================== iOS FIX — prevent zoom on input =============================== */ input, textarea, select { font-size: 16px !important; } .sh6-diff0{ margin-left:6px; font-size:12px; opacity:.85; white-space:nowrap; font-weight: 700; } .sh6-diff0.up{ color:#16a34a; } .sh6-diff0.down{ color:#dc2626; } .heatmap-wrap{ overflow:auto; border:1px solid rgba(0,0,0,.12); border-radius:12px; padding:10px; background:#fff; } .sh6-chart-notice{ margin:8px 0 16px; font-size:14px; opacity:.85; } .sh6-pill__sep{ margin: 0 6px; opacity: .5; } .sh6-pill__power{ font-weight: 600; } .sh6-demo-disabled { opacity: 0.6; cursor: not-allowed; } /* ===================================================== SH6 — DEMO PIN MODAL ===================================================== */ #demoPinModal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; } #demoPinModal .sh6-modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px); } #demoPinModal .sh6-modal__content { position: relative; width: 92%; max-width: 420px; padding: 20px; border-radius: 14px; background: white; color: var(--wo-text-main); box-shadow: 0 10px 40px #3F69AF; } #demoPinModal h2 { margin-bottom: 12px; font-size: 1.2rem; } #demoPinModal p { font-size: 0.95rem; line-height: 1.4; opacity: 0.9; } #demoPinModal input { width: 100%; margin-top: 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--wo-border); background: var(--wo-input-bg); color: var(--wo-text-main); } #demoPinModal input::placeholder { opacity: 0.6; } #demoPinModal .wos-btn { margin-top: 12px; } /* ===================================================== SH6 — DEMO MODE (PAGE) ===================================================== */ .sh6-demo-disabled { opacity: 0.6; cursor: not-allowed; } form.sh6-form-grid input:disabled, form.sh6-form-grid select:disabled, form.sh6-form-grid textarea:disabled { background: var(--wo-input-disabled-bg, rgba(0,0,0,0.05)); color: var(--wo-text-muted); cursor: not-allowed; } /* Empêcher le bouton d’attirer l’œil */ form.sh6-form-grid button:disabled { opacity: 0.5; pointer-events: none; } /* ===================================================== SH6 — DEMO BANNER ===================================================== */ .sh6-demo-banner { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 10px 14px; border-radius: 10px; background: linear-gradient( 135deg, rgba(255, 165, 0, 0.15), rgba(255, 200, 120, 0.15) ); border: 1px dashed rgba(255, 165, 0, 0.4); color: var(--wo-text-main); font-size: 0.9rem; } .sh6-demo-banner strong { font-weight: 600; } /* ========================= SH6 — Hall of Fame (weekly progression) Add-on (safe) ========================= */ .sh6-hof-head{ margin-bottom: 10px; } .sh6-hof-title{ margin: 0 0 6px 0; font-size: 1.15rem; font-weight: 800; } .sh6-hof-subtitle{ margin: 0; } .sh6-hof-item{ padding: 14px 16px 16px; } .sh6-hof-h3{ margin: 0 0 10px 0; font-size: 0.98rem; font-weight: 800; color: var(--text); } /* Liste “comme sur ton screenshot” : numéro à gauche, valeur à droite */ .sh6-hof-list{ margin: 0; padding-left: 18px; /* laisse la place aux numéros */ display: grid; gap: 8px; } .sh6-hof-list li{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; box-shadow: 0 6px 18px rgba(17,27,24,.04); } /* Nom joueur (garde la ligne propre) */ .sh6-hof-name{ font-weight: 700; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Valeur à droite */ .sh6-hof-delta{ font-weight: 800; color: var(--primary); white-space: nowrap; } /* “None / vide” */ .sh6-hof-empty{ color: var(--text-2); font-weight: 700; border-style: dashed; background: var(--surface-2); } /* Mobile : un peu plus compact */ @media (max-width: 520px){ .sh6-hof-list li{ padding: 8px 9px; } .sh6-hof-delta{ font-size: 0.95rem; } } /* ===================================================== FIX — DEMO PIN MODAL (dark / light compliant) ===================================================== */ #demoPinModal .sh6-modal__content { background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow); } /* Inputs cohérents avec le thème */ #demoPinModal input { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); } #demoPinModal input::placeholder { color: var(--text-2); } /* Bouton */ #demoPinModal .wo-btn, #demoPinModal .wos-btn { background: var(--primary); color: #fff; } /* ========================================================= SH6 CALENDAR — FORCE COMPACT MODE (override whiteout-merged defaults) ========================================================= */ .wo-card.sh6-cal-wrap { padding: 8px; margin-bottom: 20px; } /* Réduit l’espace entre les lignes */ .wo-card.sh6-cal-wrap .sh6-cal-rows { gap: 4px; } /* Ligne = beaucoup plus compacte */ .wo-card.sh6-cal-wrap .sh6-cal-row { min-height: 26px; align-items: center; } /* Grille plus basse */ .wo-card.sh6-cal-wrap .sh6-cal-grid { min-height: 22px; padding: 0; } /* Cellules de fond très discrètes */ .wo-card.sh6-cal-wrap .sh6-cal-cell { height: 20px; border-radius: 10px; } /* Barre événement compacte */ .wo-card.sh6-cal-wrap .sh6-cal-bar { height: 20px; padding: 0 6px; font-size: 0.75rem; line-height: 1; border-radius: 10px; box-shadow: 0 3px 8px rgba(0,0,0,.18); } /* Icônes PNG bien visibles mais petites */ .wo-card.sh6-cal-wrap .sh6-cal-bar img { width: 30px; height: 30px; margin-right: 6px; flex: 0 0 auto; } /* Texte bien aligné verticalement */ .wo-card.sh6-cal-wrap .sh6-cal-bar span { display: inline-flex; align-items: center; } /* ========================= CARROUSEL DISCORD – STABLE & RESPONSIVE ========================= */ .wo-carousel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .wo-carousel__slide { flex: 0 0 100%; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; padding: 12px; } .wo-carousel__slide img { max-height: 520px; /* 🔑 empêche les images géantes */ max-width: 100%; width: auto; height: auto; object-fit: contain; border-radius: 12px; background: var(--wo-card-bg, transparent); } /* Mobile */ @media (max-width: 768px) { .wo-carousel__slide img { max-height: 380px; } } /* Dots */ .wo-carousel__dots { display: flex; gap: 8px; justify-content: center; padding: 10px 12px; flex-wrap: wrap; } .wo-carousel__dot { width: 10px; height: 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; opacity: 0.75; cursor: pointer; } .wo-carousel__dot.is-active { background: var(--brand, #60a5fa); opacity: 1; } /* ========================================================= TRANSFERT — LISTE RESPONSIVE (DIV BASED) ========================================================= */ .transfert-box { padding: 16px; } .transfert-list { display: flex; flex-direction: column; gap: 8px; } /* Une ligne = Group + States (rapprochés) */ .transfert-row { display: grid; grid-template-columns: auto 1fr; column-gap: 50px; align-items: center; padding: 7px 14px; border-radius: 10px; background: rgb(124 170 252 / 17%); border: 1px solid rgba(0,0,0,0.08); } /* Colonnes */ .transfert-col { font-size: 0.95rem; white-space: nowrap; } .transfert-group { font-weight: 600; } .transfert-states { text-align: left; opacity: 0.9; } /* Groupe du serveur actif */ .transfert-row.is-active { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.35); } /* Texte explicatif sous les groupes */ .transfert-info, .transfert-seo-text { margin-top: 14px; font-size: 0.9rem; } /* ================= MOBILE ================= */ @media (max-width: 640px) { /* Toujours sur UNE SEULE LIGNE */ .transfert-row { grid-template-columns: auto 1fr; column-gap: 10px; } .transfert-col { font-size: 0.9rem; } } /* ================= DARK MODE ================= */ body.dark-mode .transfert-row { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); } body.dark-mode .transfert-row.is-active { background: rgba(34,197,94,0.18); } /* ========================= ADMIN SUBMENU ========================= */ .wo-has-submenu { position: relative; } .wo-submenu { position: absolute; top: 100%; left: 0; background: var(--card-bg, #fff); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.15); list-style: none; padding: 8px 0; min-width: 200px; display: none; z-index: 999; } .wo-submenu li { width: 100%; } .wo-submenu a { display: block; padding: 10px 16px; white-space: nowrap; } .wo-has-submenu:hover .wo-submenu { display: block; } /* Dark mode */ @media (prefers-color-scheme: dark) { .wo-submenu { background: #1e1f23; } } /* ========================= SH6 — LEADERS (BLUE WoS) ========================= */ /* alignement propre des cartes */ .wo-grid-center { justify-items: center; } /* taille homogène */ .sh6-leader-card { width: 100%; max-width: 340px; text-align: center; transition: transform .25s ease; } /* R5 = chef (mise en avant propre) */ .sh6-leader-card--r5 { transform: scale(1.04); box-shadow: 0 22px 50px rgba(28,118,173,.28); } /* ========================= AVATAR — BLEU WoS ========================= */ .sh6-avatar { border-radius: 50%; border: 4px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient( 135deg, #1C76AD, #7fa6c3, #bad3f3 ) border-box; box-shadow: 0 0 22px rgba(28,118,173,.35), inset 0 0 0 1px rgba(255,255,255,.25); transition: transform .25s ease, box-shadow .25s ease; } /* hover clean */ .sh6-leader-card:hover .sh6-avatar { transform: scale(1.05); box-shadow: 0 0 34px rgba(28,118,173,.55), inset 0 0 0 1px rgba(255,255,255,.35); } /* ========================= GRID FIX (FINAL) ========================= */ /* R5 : toujours centré */ .wo-grid.wo-grid-1 { display: flex; justify-content: center; margin-bottom: 48px; } /* R4 : vraie grille fluide */ .wo-grid.wo-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); justify-content: center; justify-items: center; gap: 32px; } /* cartes strictement identiques */ .sh6-leader-card { margin: 0; } /* ========================= BADGE FOURNAISE ========================= */ .sh6-avatar-wrapper { position: relative; display: inline-block; } .sh6-stove-badge { position: absolute; bottom: -6px; right: -6px; width: 44px; height: 44px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); } /* ========================= RESPONSIVE ========================= */ @media (max-width: 640px) { .sh6-leader-card--r5 { transform: scale(1.02); } .sh6-stove-badge { width: 40px; height: 40px; } } /* ========================= DARK MODE (AUTO) ========================= */ @media (prefers-color-scheme: dark) { .sh6-avatar { box-shadow: 0 0 26px rgba(127,166,195,.45), inset 0 0 0 1px rgba(255,255,255,.08); } .sh6-leader-card--r5 { box-shadow: 0 22px 60px rgba(127,166,195,.35); } } .sh6-role { display: inline-block; margin-top: 6px; padding: 4px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; background: rgba(28,118,173,.12); color: #1C76AD; } /* ========================= SH6 — RANK BADGES ========================= */ .sh6-name { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; } .sh6-rank { font-size: .7rem; font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; line-height: 1; } /* R5 = boss */ .sh6-rank--r5 { background: linear-gradient(135deg, #1C76AD, #7fa6c3); color: #fff; box-shadow: 0 4px 14px rgba(28,118,173,.45); } /* R4 = élite */ .sh6-rank--r4 { background: transparent; color: #1C76AD; border: 1px solid #7fa6c3; } /* Dark mode safe */ body.dark .sh6-rank--r4 { color: #bad3f3; border-color: #bad3f3; }