@charset "UTF-8"; /* ========================================================================= TennisTour - Tournoi Permanent Feuille de style du template front. Theme sombre si l'OS est en sombre, clair sinon. L'attribut data-theme pose sur par le bouton de bascule prime sur le reglage de l'OS. ========================================================================= */ /* ---------------------------------------------------------------- FONTS */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../font/Inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../font/Inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* --------------------------------------------------------------- TOKENS */ /* Palette claire : valeurs de base, toujours definies ici. */ :root { --page: #E6EAEF; --bg: #F1F5F9; --surface: #FFFFFF; --surface2: #F8FAFC; --border: #E2E8F0; --text: #0F172A; --muted: #5B6B7F; --accent: #16A34A; --accentInk: #FFFFFF; --accentSoft: rgba(22,163,74,.10); --winbg: #DCFCE7; --winfg: #15803D; --lossbg: #FEE2E2; --lossfg: #B91C1C; --inputbg: #FFFFFF; --stripe: rgba(71,85,105,.18); --veil0: rgba(3,36,19,.58); --veil1: rgba(3,36,19,.88); --heroInk: #FFFFFF; --shadow: 0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.08); --shadowUp: 0 -6px 20px rgba(15,23,42,.10); --fft0-bg: #A58EA1; --fft0-fg: #EFF6FF; --fft15-bg: #25E32B; --fft15-fg: #EFF6FF; --fft30-bg: #2563EB; --fft30-fg: #EFF6FF; --fft40-bg: #F59E0B; --fft40-fg: #2A1705; --fftNC-bg: #64748B; --fftNC-fg: #F8FAFC; --r-sm: 8px; --r-md: 11px; --r-lg: 14px; --r-xl: 16px; --sidebar: 248px; --bottomnav: 64px; color-scheme: light; } /* Palette sombre : suit l'OS, sauf si le clair a ete force. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --page: #0B1220; --bg: #0F172A; --surface: #1E2938; --surface2: #172033; --border: #334155; --text: #F1F5F9; --muted: #94A3B8; --accent: #22C55E; --accentInk: #052E14; --accentSoft: rgba(34,197,94,.14); --winbg: rgba(34,197,94,.16); --winfg: #86EFAC; --lossbg: rgba(248,113,113,.14); --lossfg: #FCA5A5; --inputbg: #0F172A; --stripe: rgba(148,163,184,.20); --veil0: rgba(8,14,26,.45); --veil1: rgba(8,14,26,.90); --shadow: 0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.35); --shadowUp: 0 -6px 20px rgba(0,0,0,.40); color-scheme: dark; } } /* Bascule manuelle : prime dans les deux sens. */ :root[data-theme="dark"] { --page: #0B1220; --bg: #0F172A; --surface: #1E2938; --surface2: #172033; --border: #334155; --text: #F1F5F9; --muted: #94A3B8; --accent: #22C55E; --accentInk: #052E14; --accentSoft: rgba(34,197,94,.14); --winbg: rgba(34,197,94,.16); --winfg: #86EFAC; --lossbg: rgba(248,113,113,.14); --lossfg: #FCA5A5; --inputbg: #0F172A; --stripe: rgba(148,163,184,.20); --veil0: rgba(8,14,26,.45); --veil1: rgba(8,14,26,.90); --shadow: 0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.35); --shadowUp: 0 -6px 20px rgba(0,0,0,.40); color-scheme: dark; } /* ----------------------------------------------------------------- BASE */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--page); color: var(--text); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { border: none; height: auto; max-width: 100%; } a { color: var(--accent); text-decoration: none; font-weight: 500; } a:hover { color: var(--winfg); text-decoration: none; } h1, h2, h3, h4 { margin: 0; color: var(--text); letter-spacing: -.2px; } h1 { font-size: 19px; font-weight: 700; } h2 { font-size: 17px; font-weight: 700; margin: 18px 0 12px; } h3 { font-size: 15px; font-weight: 600; } h4 { font-size: 14px; font-weight: 600; } input, select, button, textarea { font-family: inherit; font-size: inherit; } input::placeholder { color: var(--muted); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; } .clr { clear: both; } .left { float: left; } .right { float: right; } .bold { font-weight: 700; } .italic { font-style: italic; } .justify { text-align: justify; } .error { color: var(--lossfg); margin: 4px 0; } .must_be_fill { background-color: var(--lossbg); } /* ----------------------------------------------------- APP SHELL / PAGE */ #page { height: 100vh; height: 100dvh; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto auto; grid-template-areas: "main" "footer" "bottomnav"; background: var(--page); } #pathway { padding: 0 14px; } #pathway:empty { display: none; } /* --- Barre du haut --- */ #header { position: absolute; top: 0; left: 0; right: 0; z-index: 41; background: var(--bg); border-bottom: 1px solid var(--border); max-width: 1200px; } #top { padding: 0 14px; } #top:empty { display: none; } #menu_top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; min-height: 58px; } .brand { display: flex; align-items: center; gap: 10px; min-width: 0; } .brand-logo { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--accent); box-shadow: inset -5px -5px 0 rgba(0,0,0,.12); } .brand-logo img { width: 100%; height: 100%; display: block; border-radius: 50%; } .brand-text { display: flex; flex-direction: column; min-width: 0; } .brand-name { font: 700 16px/1.2 Inter; color: var(--text); letter-spacing: -.2px; } .brand-baseline { font: 500 10px/1.3 Inter; color: var(--muted); } #menu_top h1 { font: 700 16px/1.2 Inter; color: var(--text); margin: 0; } .topbar-spacer { flex: 1; } /* Bouton de bascule de theme */ .theme-toggle { width: 38px; height: 38px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; padding: 0; transition: background .15s ease, border-color .15s ease, color .15s ease; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle svg { width: 18px; height: 18px; display: block; } .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; } } /* --- Zone principale --- */ #main { grid-area: main; min-height: 0; display: flex; background: var(--bg); margin-top: 75px; } #page:has(.hero) #main{ margin-top: 0px; } #wrapper { flex: 1; min-width: 0; display: flex; flex-direction: column; } #maincolumn-only, #maincolumn { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 14px 22px; width: 100%; max-width: 880px; margin: 58px auto; text-align: left; } #right { padding: 0 14px 22px; } footer { grid-area: footer; background: var(--bg); } #footer { padding: 12px 14px; color: var(--muted); font-size: 12px; text-align: center; border-top: 1px solid var(--border); } #footer:empty, #footer_notice:empty { display: none; } #footer a { color: var(--muted); } /* ------------------------------------------------------------ NAVIGATION */ /* Deux conteneurs : .nav-side (sidebar desktop), .nav-bottom (onglets mobile) */ .nav-side { display: none; } .nav-bottom { grid-area: bottomnav; z-index: 45; background: var(--bg); border-top: 1px solid var(--border); box-shadow: var(--shadowUp); padding-bottom: env(safe-area-inset-bottom); } /* Liste generee par l'element Menu */ .menu_image { min-width: 0; } .menu_horizontal { list-style: none; display: flex; margin: 0; padding: 0; width: 100%; } .menu_horizontal li { flex: 1 1 0; min-width: 0; background: none; float: none; } .menu_horizontal a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: var(--bottomnav); padding: 6px 2px; font: 600 10.5px/1.2 Inter; color: var(--muted); text-align: center; text-decoration: none; border-radius: var(--r-md); transition: color .15s ease, background .15s ease; } .menu_horizontal a svg { width: 20px; height: 20px; display: block; } .menu_horizontal a img { width: 20px; height: 20px; object-fit: contain; } .menu_horizontal a:hover { color: var(--text); } .menu_horizontal a.active { color: var(--accent); background: var(--accentSoft); text-decoration: none; } .menu_horizontal a .nav-label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ------------------------------------------------------------------ HERO */ .hero { position: relative; margin: -4px -14px 16px; padding: 126px 18px 22px; max-height: 110px; display: flex; flex-direction: column; justify-content: flex-end; background-image: url('../images/background_tennis.webp'); background-size: cover; background-position: center; color: var(--heroInk); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--veil0), var(--veil1)); } .hero > * { position: relative; } .hero h2 { margin: 0; font: 700 24px/1.15 Inter; color: var(--heroInk); letter-spacing: -.5px; } .hero p { margin: 5px 0 0; font: 400 13px/1.5 Inter; color: rgba(255,255,255,.75); } /* --------------------------------------------------------------- BOUTONS */ .button-1, .button-15, .btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--r-md); background: var(--accent); background-image: none; color: var(--accentInk); font: 600 13px/1 Inter; letter-spacing: normal; text-decoration: none; cursor: pointer; white-space: nowrap; user-select: none; -webkit-user-select: none; touch-action: manipulation; transition: filter .15s ease, background .15s ease, border-color .15s ease; } .button-1:hover, .button-15:hover, .btn:hover { filter: brightness(1.08); background-image: none; color: var(--accentInk); text-decoration: none; } .button-1:active, .button-15:active, .btn:active { filter: brightness(.94); background-image: none; } .button-1:focus-visible, .button-15:focus-visible, .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accentSoft); } .button-1:disabled, .button-15:disabled, .btn:disabled { opacity: .45; cursor: default; filter: none; } /* Variante secondaire / annulation */ .cancel, .btn-ghost { background: transparent; border-color: var(--border); color: var(--text); } .cancel:hover, .btn-ghost:hover { background: var(--surface2); border-color: var(--accent); color: var(--text); filter: none; } /* Ancien bouton "transparent" utilise par l'element Authentification */ .button.transparent { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: var(--r-md); border: 1px solid var(--border); background: transparent; color: var(--text); font: 600 13px/1 Inter; cursor: pointer; } .button.transparent:hover { border-color: var(--accent); } /* ------------------------------------------------- SELECTEUR DE TOURNOI */ .tournament-switch { display: flex; flex-wrap: wrap; gap: 6px; padding: 3px; margin: 0 0 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); } .tournament-switch a { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px; border-radius: var(--r-sm); background: transparent; color: var(--muted); font: 600 12.5px/1 Inter; text-decoration: none; white-space: nowrap; } .tournament-switch a:hover { color: var(--text); background: var(--surface2); } .tournament-switch a.is-active { background: var(--accent); color: var(--accentInk); text-decoration: none; } /* ------------------------------------------------------------ BADGE FFT */ .fft-badge { display: inline-block; padding: 3px 8px; border-radius: 6px; font: 600 11px/1.3 Inter; white-space: nowrap; text-align: center; background: var(--fft40-bg); color: var(--fft40-fg); } .fft-badge.s0 { background: var(--fft0-bg); color: var(--fft0-fg); } .fft-badge.s15 { background: var(--fft15-bg); color: var(--fft15-fg); } .fft-badge.s30 { background: var(--fft30-bg); color: var(--fft30-fg); } .fft-badge.s40 { background: var(--fft40-bg); color: var(--fft40-fg); } .fft-badge.sNC { background: var(--fftNC-bg); color: var(--fftNC-fg); } /* --------------------------------------------------------- LISTES/CARTES */ .list-defi { max-height: none; } .list-defi ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .list-defi ul > li { max-width: none; min-height: 0; margin: 0; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); } .list-defi ul > li.highlight { border-color: var(--accent); box-shadow: var(--shadow), inset 0 0 0 1px var(--accent); } .header_list { font: 600 11px/1.4 Inter; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); width: 100%; margin: 14px 0 6px; } .header_list:first-child { margin-top: 0; } .avatar { float: none; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--surface2); object-fit: cover; flex: none; } /* ------------------------------------------------ LIGNES DE CLASSEMENT */ .rank-row { display: grid; grid-template-columns: 22px 44px 32px minmax(0,1fr) 42px 64px; align-items: center; gap: 7px; } .rank-pos { font: 700 15px/1 Inter; color: var(--text); text-align: center; } .rank-id { display: flex; flex-direction: column; min-width: 0; gap: 2px; } .rank-name { font: 600 13px/1.25 Inter; color: var(--text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; } .rank-sub { font: 400 11.5px/1.3 Inter; color: var(--muted); } .rank-action { display: flex; justify-content: flex-end; } .rank-action .button-1 { height: 36px; padding: 0 14px; font-size: 12px; } .rank-me { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: var(--r-sm); background: var(--accentSoft); color: var(--accent); font: 600 11px/1 Inter; white-space: nowrap; } /* ------------------------------------------------------ CARTE DE MATCH */ /* Bloc score : une ligne par joueur (gagnant en premier), un set par cellule de largeur fixe, donc les sets s'alignent en colonnes. */ .opponents { display: grid; grid-template-columns: minmax(0,1fr); grid-template-areas: "board" "date" "act"; gap: 10px; line-height: 1.4; max-height: none; } .scoreboard { grid-area: board; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .sb-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: var(--r-md); background: var(--surface2); } .sb-row.sb-winner { background: var(--winbg); } .sb-id { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .opponents .avatar { width: 30px; height: 30px; padding: 0; } .opponents .who { flex: 1; min-width: 0; font: 600 13px/1.3 Inter; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-winner .who { font-weight: 700; color: var(--winfg); } .sb-sets { display: flex; gap: 4px; flex: none; } .sb-set { position: relative; width: 26px; text-align: center; font: 500 15px/1.2 Inter; font-variant-numeric: tabular-nums; color: var(--muted); } .sb-set.sb-won { font-weight: 700; color: var(--text); } .sb-winner .sb-set.sb-won { color: var(--winfg); } .sb-set .tb { position: absolute; top: -5px; right: -1px; font: 600 9.5px/1 Inter; color: var(--muted); } .opponents span.date { grid-area: date; position: static; top: 0; display: block; width: 100%; padding: 8px 0 0; border-top: 1px solid var(--border); font: 500 11.5px/1.5 Inter; color: var(--muted); text-align: left; } .opponents .match-actions { grid-area: act; display: flex; flex-wrap: wrap; gap: 8px; } .opponents .match-actions .button-1 { flex: 1 1 auto; } .opponents .match-actions .wait-note { font: 500 12px/1.5 Inter; color: var(--muted); } /* Etat vide */ .list-defi ul > li.empty-state { text-align: center; color: var(--muted); padding: 26px 16px; font: 400 13px/1.6 Inter; } /* ---------------------------------------------------------------- PROFIL */ .profile-card { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); } .profile-avatar { width: 72px; height: 72px; flex: none; border-radius: 50%; border: 1px solid var(--border); object-fit: cover; background: var(--surface2); } .profile-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .profile-name { font: 700 16px/1.2 Inter; color: var(--text); } .profile-meta { font: 400 12.5px/1.5 Inter; color: var(--muted); } .profile-meta strong { color: var(--text); font-weight: 600; } /* ----------------------------------------------------- FORMULAIRES/AUTH */ .blockFormAuth, .blockFormCart { max-width: 460px; margin: 0 auto 18px; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; text-align: left; } .blockFormAuth h4, .blockFormCart h4 { margin: 0; padding: 14px 16px; background: var(--surface2); border-bottom: 1px solid var(--border); font: 600 14px/1.3 Inter; color: var(--text); } .blockFormAuth > div, .blockFormCart > div { padding: 16px; } .blockFormAuth form, .blockFormCart form { margin: 0; } .blockFormLabel { margin-bottom: 4px; } .blockFormLabel label { display: block; font: 500 12px/1.4 Inter; color: var(--muted); } .blockFormInput { margin-bottom: 14px; } .blockFormInput label { display: block; } .blockFormAuth input, .blockFormCart input, .blockFormInput input, .blockFormInput select, .modal-container input, .modal-container select { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--inputbg); color: var(--text); font: 400 13px/1 Inter; outline: none; } .blockFormAuth input:focus, .blockFormInput input:focus, .blockFormInput select:focus, .modal-container select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accentSoft); } .blockFormAuth input[type=checkbox], .blockFormAuth input[type=radio], .modal-container input[type=checkbox], .modal-container input[type=radio] { width: auto; height: auto; accent-color: var(--accent); } .blockFormAuth input[type=submit], .blockFormCart input[type=submit] { background: var(--accent); color: var(--accentInk); border-color: transparent; font-weight: 600; cursor: pointer; } .message { max-width: 640px; margin: 0 auto 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--accentSoft); border: 1px solid var(--accent); color: var(--text); font: 500 12.5px/1.5 Inter; text-align: center; } /* -------------------------------------------------------------- MODALE */ .modal { display: none; } .modal.is-open { display: block; } .modal-back { position: fixed; inset: 0; z-index: 80; background: rgba(4,8,16,.62); } .modal-container { position: fixed; z-index: 81; top: 50%; left: 50%; transform: translate(-50%,-50%); width: calc(100% - 32px); max-width: 420px; max-height: calc(100% - 48px); overflow-y: auto; padding: 0 0 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: 0 30px 70px rgba(0,0,0,.45); line-height: 1.5; color: var(--text); text-align: left; } .modal-title { width: 100%; margin-bottom: 14px; padding: 14px 18px; background: var(--surface2); border-bottom: 1px solid var(--border); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: none; font: 700 15px/1.3 Inter; color: var(--text); } .modal-container p { margin: 0 18px; font: 400 13px/1.6 Inter; color: var(--muted); } .modal-container table { width: calc(100% - 36px); margin: 0 18px; border-collapse: separate; border-spacing: 6px; } .modal-container th { font: 600 11px/1.3 Inter; color: var(--muted); text-align: center; } .modal-container td { min-width: 0; text-align: center; } .modal-container td label { display: block; } .modal-container select { height: 44px; text-align: center; padding: 0 6px; } .modal-container input[type="text"] { width: 100%; } .modal-container textarea { display: block; width: calc(100% - 36px); margin: 12px 18px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--inputbg); color: var(--text); font: 400 13px/1.5 Inter; resize: vertical; outline: none; } .modal-container textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accentSoft); } .modal-container .modal-hint { margin-top: 6px; font-size: 11.5px; text-align: right; } /* Le 
 historique servait a espacer les boutons de la modale */
.modal-container pre,
.modal-actions {
  display: flex;
  gap: 10px;
  margin: 16px 18px 0;
  font-family: Inter, sans-serif;
}
.modal-container pre .button-1,
.modal-actions .button-1 { flex: 1; }
.modal-container a { min-width: 0; }
.modal-container a:hover { color: var(--accentInk); }

/* -------------------------------------------------------------- DIVERS */
.scrollDown { display: none; }
.article img { max-width: 100%; height: auto; }
.logo { max-width: 100%; height: auto; }
.red { color: var(--lossfg); }
.small { font-size: 11.5px; color: var(--muted); }
.opaque { opacity: 1; }

/* ====================================================================== */
/*  DESKTOP : sidebar a gauche, contenu a droite                          */
/* ====================================================================== */
@media only screen and (min-width: 900px) {

  #page {
    grid-template-columns: var(--sidebar) 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "sidebar main"
      "sidebar footer";
  }
  
  #header {
	left: 248px;
	  
  }
  
  /* Transparence de l'header quand hero present */
#page:has(.hero) #header {
  background: transparent;
  border-bottom: none;
}

  /* La sidebar */
  .nav-side {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px 14px;
    position: relative;
    background-image: url('../images/background_tennis_2.webp');
    background-size: cover;
    background-position: center;
    border-right: 1px solid var(--border);
    overflow: hidden;
  }
  .nav-side::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--veil0), var(--veil1));
  }
  .nav-side > * { position: relative; }
  .nav-side .brand-name { color: #FFFFFF; }
  .nav-side .brand-baseline { color: rgba(255,255,255,.62); }
  .nav-side .nav-quote {
    margin-top: auto;
    font: 400 12px/1.6 Inter;
    color: rgba(255,255,255,.70);
  }

  /* Le menu devient une liste verticale */
  .nav-side .menu_horizontal { flex-direction: column; gap: 4px; }
  .nav-side .menu_horizontal li { flex: none; width: 100%; }
  .nav-side .menu_horizontal a {
    flex-direction: row;
    justify-content: flex-start;
    gap: 11px;
    height: 42px;
    padding: 0 12px;
    font: 600 13px/1 Inter;
    color: rgba(255,255,255,.78);
  }
  .nav-side .menu_horizontal a:hover { color: #FFFFFF; background: rgba(255,255,255,.08); }
  .nav-side .menu_horizontal a.active { color: #86EFAC; background: rgba(134,239,172,.16); }
  .nav-side .menu_horizontal a svg { width: 18px; height: 18px; }

  /* Plus de barre d'onglets en bas */
  .nav-bottom { display: none; }

  #menu_top { min-height: 62px; padding: 12px 24px; }
  #menu_top .brand { display: none; } /* la marque est deja dans la sidebar */
  #menu_top h1 { font-size: 18px; }

  #main { grid-area: main; min-height: 0;}

  #maincolumn-only, #maincolumn { padding: 0px 24px 28px; max-width: 1100px; margin: 0; }

  .hero { margin: 0 -24px 20px; padding: 34px 24px 26px; max-height: 120px; }
  .hero h2 { font-size: 28px; }

  h2 { font-size: 19px; }

  /* Le classement respire davantage */
  .rank-row { gap: 12px; }
  .rank-name { font-size: 14px; }
  .list-defi ul > li { padding: 14px 16px; }

  /* Carte de match : bloc score a gauche, actions a droite */
  .opponents {
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas:
      "board act"
      "date date";
    gap: 12px;
  }
  .opponents .match-actions { flex-wrap: nowrap; align-self: center; }
  .opponents .match-actions .button-1 { flex: none; }
  /* Bloc score web : joueur 1 a gauche (gagnant), score au centre,
     joueur 2 a droite. Les deux lignes s'ouvrent dans une grille
     commune : pour chaque set, le score du joueur de gauche puis celui
     du joueur de droite occupent deux colonnes voisines ("6-3 4-6").
     Les colonnes des sets non joues restent vides (0 px), le score
     reste donc centre entre les deux noms. */
  .scoreboard {
    display: grid;
    grid-template-columns: minmax(0,1fr) repeat(6, auto) minmax(0,1fr);
    align-items: center;
    gap: 0;
    padding: 6px;
    border-radius: var(--r-md);
    background: var(--surface2);
  }
  .sb-row, .sb-sets { display: contents; }

  .sb-id { grid-row: 1; padding: 4px 10px 4px 4px; border-radius: var(--r-md); }
  .sb-row:first-child .sb-id { grid-column: 1; margin-right: 18px; }
  .sb-row:last-child .sb-id {
    grid-column: 8;
    flex-direction: row-reverse;
    padding: 4px 4px 4px 10px;
    margin-left: 18px;
  }
  .sb-row:last-child .who { text-align: right; }
  .sb-winner .sb-id { background: var(--winbg); }

  .sb-set { grid-row: 1; width: auto; font-size: 16px; }
  .sb-row:first-child .sb-set { text-align: right; }
  .sb-row:first-child .sb-set:not(:first-child) { padding-left: 16px; }
  .sb-row:last-child .sb-set { text-align: left; }
  .sb-row:last-child .sb-set:not(.sb-pending)::before {
    content: "\2013";
    padding: 0 4px;
    font-weight: 400;
    color: var(--muted);
  }
  .sb-row:first-child .sb-set:nth-child(1) { grid-column: 2; }
  .sb-row:last-child .sb-set:nth-child(1) { grid-column: 3; }
  .sb-row:first-child .sb-set:nth-child(2) { grid-column: 4; }
  .sb-row:last-child .sb-set:nth-child(2) { grid-column: 5; }
  .sb-row:first-child .sb-set:nth-child(3) { grid-column: 6; }
  .sb-row:last-child .sb-set:nth-child(3) { grid-column: 7; }

  /* tie-break : exposant dans le flux (plus besoin de preserver une colonne) */
  .sb-set .tb { position: relative; top: -7px; right: auto; margin-left: 1px; }

  /* match en attente : un "vs" au centre */
  .sb-row:first-child .sb-set.sb-pending { display: none; }
  .sb-row:last-child .sb-set.sb-pending {
    grid-column: 2 / 8;
    text-align: center;
    font-size: 0;
  }
  .sb-row:last-child .sb-set.sb-pending::after {
    content: "vs";
    font: 600 12px/1 Inter;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .tournament-switch { max-width: 620px; }
  .profile-card { max-width: 560px; }
}

/* Tres grands ecrans */
@media only screen and (min-width: 1440px) {
  :root { --sidebar: 272px; }
  #maincolumn-only, #maincolumn { max-width: 1180px; }
}

/* Petits telephones */
@media only screen and (max-width: 380px) {
  .rank-row { grid-template-columns: 20px 40px 28px minmax(0,1fr) 36px 58px; gap: 6px; }
  .rank-action .button-1 { height: 34px; padding: 0 11px; font-size: 11.5px; }
  .menu_horizontal a { font-size: 9.5px; }
}

/* Impression */
@media print {
  .nav-side, .nav-bottom, #header, footer, .theme-toggle { display: none; }
  #maincolumn-only { overflow: visible; height: auto; }
}

/* ------------------------------------------------------- AJUSTEMENTS */
/* Intitule de tournoi dans l'historique : simple titre, pas une carte */
.list-defi ul > li.header_list {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}
.profile-info .fft-badge { align-self: flex-start; }

/* --------------------------------------------- CLASSEMENT EN TABLEAU */
/* Une seule carte, lignes separees, en-tete de colonnes.
   Mobile  : # | FFT | avatar | joueur (+ V/D) | points | action
   Desktop : # | FFT | avatar | joueur | V | D | points | action   */
.rank-list ul {
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.rank-list ul > li.rank-row {
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}
.rank-list ul > li.rank-row:last-child { border-bottom: none; }
.rank-list ul > li.rank-row.highlight {
  background: var(--accentSoft);
  box-shadow: inset 3px 0 0 var(--accent);
}
.rank-list ul > li.rank-head {
  padding-top: 9px;
  padding-bottom: 9px;
  background: var(--surface2);
}
.rank-head > span,
.rank-head .rank-pos {
  font: 500 10.5px/1.2 Inter;
  color: var(--muted);
  letter-spacing: .02em;
}
.rank-stat {
  font: 600 13px/1 Inter;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rank-w, .rank-l { display: none; }
.rank-sub { font-variant-numeric: tabular-nums; }

/* Menu de la position "menu-top", dans la barre du haut */
.topbar-menu { display: flex; align-items: center; min-width: 0; }
.topbar-menu:empty { display: none; }
.topbar-menu .menu_horizontal { width: auto; gap: 4px; }
.topbar-menu .menu_horizontal li { flex: none; }
.topbar-menu .menu_horizontal a {
  flex-direction: row;
  height: 38px;
  padding: 0 10px;
  gap: 6px;
  font: 600 12.5px/1 Inter;
}
.topbar-menu .menu_horizontal a svg { width: 18px; height: 18px; }

@media only screen and (min-width: 900px) {
  .rank-row { grid-template-columns: 30px 56px 38px minmax(0,1fr) 72px 72px 72px 96px; }
  .rank-w, .rank-l { display: block; }
  .rank-sub { display: none; }
  .rank-name { display: block; white-space: nowrap; text-overflow: ellipsis; }
  .rank-list ul > li.rank-row { padding: 11px 16px; }
  .rank-stat { font-size: 13.5px; }
}
/* ----------------------------------- BARRE DU HAUT : position "top" */
/* Elements de la position "top" (langue, deconnexion), alignes a droite */
#menu_top #top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
}
#menu_top #top:empty { display: none; }
#top .logout { order: 2; }
.logout-link {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: 600 12.5px/1 Inter;
  white-space: nowrap;
}
.logout-link:hover { border-color: var(--accent); color: var(--accent); }

/* Selecteur de langue (element ToolsKit) : liste deroulante sous le drapeau */
.formLanguage {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}
.formLanguage > img { display: block; height: 12px; width: auto; }
.formLanguage ul {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
.formLanguage li a { display: flex; align-items: center; padding: 8px 10px; border-radius: var(--r-sm); }
.formLanguage li a:hover, .formLanguage li.selected a { background: var(--surface2); }
.formLanguage li img { display: block; height: 12px; width: auto; }

/* --------------------------------------- ARTICLE DE L'ELEMENT CONTENT */
.article {
  margin: 0 0 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  color: var(--text);
  font: 400 13px/1.6 Inter;
}
.article h3 { margin: 0 0 6px; font: 700 15px/1.3 Inter; color: var(--text); }
.article h3 + br { display: none; }
.article p { margin: 0 0 8px; }

/* Le hero passe en tete de page, meme si un article est place avant lui */
#maincolumn-only { display: flex; flex-direction: column; }
#maincolumn-only > * { flex-shrink: 0; }
#maincolumn-only > .hero { order: -1; }

/* ------------------------------------- BARRE DU HAUT COMPACTE (mobile) */
@media only screen and (max-width: 899px) {
  #menu_top { gap: 8px; padding: 8px 12px; }
  .brand { flex-shrink: 1; }
  .brand-baseline { display: none; }
  .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
  .topbar-menu .nav-label { display: none; }
  .topbar-menu .menu_horizontal a { padding: 0 9px; }
  .formLanguage { padding: 0 8px; }
  .logout-link { padding: 0 10px; font-size: 12px; }
}

/* ------------------------------------------ CORRECTIFS DE LARGEUR */
/* Les enfants de la grille ne doivent pas elargir la piste au-dela de l'ecran */
#page > * { min-width: 0; }

/* Barre du haut : seule la marque se compresse, les actions gardent leur taille */
.topbar-menu,
#menu_top #top,
.formLanguage,
.logout-link,
.theme-toggle { flex-shrink: 0; }

@media only screen and (max-width: 899px) {
  /* specificite superieure a ".menu_horizontal a .nav-label" */
  .topbar-menu .menu_horizontal a .nav-label { display: none; }
}
@media only screen and (max-width: 420px) {
  /* ecran etroit : le logo seul suffit */
  #menu_top .brand-text { display: none; }
}

/* ------------------------------------------------------------ PAGE PROFIL */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
.profile-form { display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin:0 auto 10px auto; min-width:450px; }
.profile-form .profile-card { max-width: none; }
.profile-avatar-wrap { position: relative; flex: none; }
.avatar-edit {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: var(--accent);
  color: var(--accentInk);
  cursor: pointer;
}
.avatar-edit svg { width: 15px; height: 15px; }
.avatar-edit:hover { filter: brightness(1.08); }
.profile-avatar-wrap:focus-within .avatar-edit { box-shadow: 0 0 0 3px var(--accentSoft); }
.avatar-remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 12px/1.3 Inter;
  color: var(--muted);
  cursor: pointer;
}
.avatar-remove input { accent-color: var(--accent); }

.profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.stat-value { font: 700 24px/1 Inter; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-label { font: 500 12px/1.3 Inter; color: var(--muted); text-align: center; }
.stat-win .stat-value { color: var(--winfg); }
.stat-loss .stat-value { color: var(--lossfg); }

.profile-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.profile-section h3 { margin: 0; font: 700 14px/1.3 Inter; color: var(--text); }
.field { display: flex; flex-direction: column; gap: 7px; }
.field-label { font: 500 12px/1.3 Inter; color: var(--muted); }
.choice-group { display: flex; flex-wrap: wrap; gap: 6px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.choice span {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface2);
  color: var(--text);
  font: 600 12.5px/1 Inter;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.choice span:hover { border-color: var(--accent); }
.choice input:checked + span { background: var(--accentSoft); border-color: var(--accent); color: var(--accent); }
.choice input:focus-visible + span { box-shadow: 0 0 0 3px var(--accentSoft); }

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font: 500 13px/1.4 Inter;
  color: var(--text);
  cursor: pointer;
}
.toggle {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
  margin: 0;
  border-radius: 24px;
  background: var(--border);
  cursor: pointer;
  transition: background .15s ease;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .15s ease;
}
.toggle:checked { background: var(--accent); }
.toggle:checked::after { transform: translateX(18px); }
.toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accentSoft); }

.profile-actions { display: flex; justify-content: flex-end; }
.profile-actions .button-1 { min-width: 140px; }
.message.message-error { background: var(--lossbg); border-color: var(--lossfg); }