/* Tennis Bros — style « club de tennis sur gazon » : crème, vert gazon, violet, typographie classique.
 * Toutes les couleurs passent par les variables ci-dessous (contrastes vérifiés, WCAG AA).
 * Pas de style en ligne dans le HTML généré : la CSP l'interdit.
 */

/* Polices variables auto-hébergées (sous-ensembles latin / latin étendu, licence OFL dans public/fonts/).
   Inter : graisses 100–900 et taille optique (dessin resserré en grand, ouvert en petit) ;
   Playfair Display : graisses 400–900, romain et italique. Inter n'a pas d'italique : tout italique passe par Playfair. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-vf-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; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-vf-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: 'Playfair Display'; font-style: italic; font-weight: 400 900; font-display: swap; src: url('/fonts/playfair-display-italic-vf-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; }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 900; font-display: swap; src: url('/fonts/playfair-display-italic-vf-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: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/fonts/playfair-display-vf-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; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/fonts/playfair-display-vf-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; }

:root {
  /* Couleurs : teintes de base */
  --bg: #F6F3EA;            /* crème, fond général */
  --bg-deep: #EFEBDF;       /* crème creusée : survol d'une ligne, zones en retrait */
  --surface: #FFFFFF;       /* cartes */
  --surface-2: #EDE8DB;     /* encarts secondaires : météo, blague, formulaires */
  --line: #DCD5C3;          /* séparateurs fins (décoratifs) */
  --line-soft: #E9E4D6;     /* filets à l'intérieur des cartes */
  --field-border: #868177;  /* contour des champs et puces : 3:1 sur blanc, crème et encarts */
  --green: #1F4D2E;         /* gazon : en-tête, principal, victoires */
  --green-2: #2A6039;       /* gazon au soleil : haut des dégradés (blanc 7,4:1, vert clair 5,5:1) */
  --green-dark: #163A22;    /* survol des boutons verts, bas des dégradés */
  --green-light: #CFE3C8;   /* texte secondaire sur vert */
  --green-tint: #E4EEE1;    /* vert à peine teinté : sélection, réaction choisie, survol */
  --purple: #5B3A7A;        /* accent : n° 1, rangs, badges */
  --purple-2: #6B4A8B;      /* haut du dégradé des avatars (blanc 7,2:1) */
  --purple-tint: #ECE5F1;   /* fond violet très clair */
  --ink: #1C2A20;           /* texte principal */
  --ink-2: #34433A;         /* texte fort secondaire : libellés de champs */
  --muted: #55624F;         /* texte secondaire (4,5:1 sur tous les fonds clairs) */
  --loss: #858174;          /* défaites (cercle vide) : 3:1 sur tous les fonds */
  --danger: #A33A2C;        /* refuser, supprimer, erreurs */
  --danger-dark: #8E3225;   /* survol */
  --danger-tint: #F5E6E2;
  --gold: #91722D; --silver: #71777B; --bronze: #A6673D; /* médailles (chiffre blanc lisible) */
  --on-green: #FFFFFF;      /* texte sur vert, violet, médailles, encre */
  /* Dégradés : lumière en haut, toujours entre deux teintes vérifiées */
  --grad-green: linear-gradient(180deg, var(--green-2) 0%, var(--green) 62%, var(--green-dark) 100%);
  --grad-green-soft: linear-gradient(180deg, var(--green-2), var(--green));
  --grad-purple: linear-gradient(160deg, var(--purple-2), var(--purple));
  /* Ombres : une seule teinte (encre), deux couches (contact net + halo doux), cinq niveaux */
  --shadow-xs: 0 1px 1px rgba(28, 42, 32, .03), 0 1px 3px rgba(28, 42, 32, .05);            /* cartes au repos */
  --shadow-sm: 0 1px 2px rgba(28, 42, 32, .06), 0 4px 10px -2px rgba(28, 42, 32, .08);      /* commutateur actif, puces, survol */
  --shadow-md: 0 2px 4px rgba(28, 42, 32, .05), 0 14px 32px -10px rgba(28, 42, 32, .18);    /* cartes qui sortent du bandeau */
  --shadow-lg: 0 4px 12px rgba(28, 42, 32, .08), 0 28px 64px -18px rgba(28, 42, 32, .32);   /* fenêtres, pop-ups, menus */
  --shadow-sheet: 0 -4px 12px rgba(28, 42, 32, .06), 0 -24px 64px -16px rgba(28, 42, 32, .3); /* panneaux du bas */
  --shadow-fab: 0 2px 4px rgba(31, 77, 46, .2), 0 10px 22px -6px rgba(31, 77, 46, .55);     /* bouton flottant */
  --shadow-primary: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(28, 42, 32, .14);  /* bouton plein */
  --inset-field: inset 0 1px 2px rgba(28, 42, 32, .04);
  --focus-ring: 0 0 0 3px rgba(31, 77, 46, .22);
  --shadow-1: var(--shadow-sm); --shadow-2: var(--shadow-md); --shadow-3: var(--shadow-lg); /* alias historiques */
  /* Typographie : deux familles, une échelle, des interlettrages fixés */
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-2xs: .6875rem; --fs-xs: .75rem; --fs-sm: .8125rem; --fs-md: .9375rem; --fs-base: 1rem;
  --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.125rem;
  --lh-tight: 1.1; --lh-snug: 1.3; --lh-body: 1.55;
  --track-caps: .14em;      /* capitales espacées : surtitres, en-têtes de tableau */
  --track-tight: -.012em;   /* titres et chiffres Playfair moyens */
  --track-display: -.022em; /* grands titres et grands chiffres Playfair */
  /* Formes */
  --radius-sm: 8px; --radius: 14px; --radius-lg: 18px;
  --radius-btn: 10px;
  --nav-h: 64px;
  --ease: 160ms cubic-bezier(.2, .7, .3, 1);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  /* Alias historiques (ne pas réutiliser) */
  --card: var(--surface); --card-2: var(--surface-2); --text: var(--ink); --accent: var(--green); --win: var(--green); --draw: var(--muted);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/var(--lh-body) var(--sans);
  min-height: 100dvh;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Chiffres alignés partout : Playfair dessine par défaut des chiffres elzéviriens qui descendent
   (1036, 6-2). Le raccourci font remet font-feature-settings à zéro, d'où !important ;
   font-variant-numeric (tabular-nums) reste libre et se cumule. */
*, *::before, *::after { font-feature-settings: "lnum" 1 !important; }
::selection { background: var(--green-light); color: var(--ink); }
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0 0 .5rem; color: var(--ink); text-wrap: balance; }
h1, h2, h3 { font-family: var(--serif); }
h1 { font-size: var(--fs-3xl); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--track-display); }
h2 { font-size: var(--fs-xl); font-weight: 700; line-height: 1.2; letter-spacing: var(--track-tight); margin-top: 1.5rem; }
h2:first-child { margin-top: 0; }
h3 { font-size: 1.0625rem; font-weight: 600; line-height: var(--lh-snug); margin-top: 1.25rem; }
p { margin: .4rem 0; text-wrap: pretty; }
a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--green-light); }
a:hover { text-decoration-color: currentColor; }
.noscript { padding: 2rem; text-align: center; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.hint { color: var(--muted); font-size: .85rem; line-height: 1.45; }
.empty { color: var(--muted); font: italic 500 .95rem/1.4 var(--serif); padding: .6rem 0; }
.error { color: var(--danger); font-weight: 600; text-align: center; }
.eyebrow {
  font: 600 var(--fs-2xs)/1.2 var(--sans); letter-spacing: var(--track-caps); text-transform: uppercase; margin: 0;
}

/* --- Icônes au trait (SVG inline, voir icon() dans app.js) --- */
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico.fill { fill: currentColor; stroke: none; }

/* --- Boutons --- */
button, input, select, textarea { font: inherit; color: inherit; }
/* :where() garde la spécificité à zéro : n'importe quelle classe reprend la main sur le fond. */
:where(button) {
  cursor: pointer;
  border: 1.5px solid var(--green);
  background: var(--surface);
  color: var(--green);
  border-radius: var(--radius-btn);
  min-height: 44px;
  padding: 0 1rem;
  font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--ease), color var(--ease), border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
@media (hover: hover) { :where(button):hover { background: var(--green-tint); } }
button:active { transform: scale(.98); }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--green); color: var(--on-green); border-color: var(--green); box-shadow: var(--shadow-primary); }
button.primary:hover { background: var(--green-dark); border-color: var(--green-dark); }
button.danger { background: var(--danger); border-color: var(--danger); color: var(--on-green); }
button.danger:hover { background: var(--danger-dark); border-color: var(--danger-dark); }
button.ghost { background: transparent; }
@media (hover: hover) { button.ghost:hover { background: var(--green-tint); } }
button.small { min-height: 44px; padding: 0 .85rem; font-size: .9rem; }
button.big { width: 100%; min-height: 50px; font-size: 1rem; }
button.link {
  background: none; border: 0; padding: 0; min-height: 0; border-radius: 0; display: inline;
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; font-weight: 600;
}
button.link:hover { text-decoration-color: var(--green); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* --- Champs --- */
input, select, textarea {
  width: 100%;
  min-height: 46px;
  padding: 0 .85rem;
  background: var(--surface);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-btn);
  color: var(--ink);
  font-size: 1rem; /* >= 16px : pas de zoom automatique sur iOS */
  box-shadow: var(--inset-field);
  transition: border-color var(--ease), box-shadow var(--ease);
}
@media (hover: hover) { input:hover, select:hover, textarea:hover { border-color: var(--ink-2); } }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green); box-shadow: var(--focus-ring); }
select {
  appearance: none; padding-right: 2.2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size: 6px 6px; background-repeat: no-repeat;
}
label { display: block; font-size: .85rem; font-weight: 500; color: var(--ink-2); margin-bottom: .75rem; }
label > input, label > select { margin-top: .3rem; }

.screen { padding: calc(1rem + var(--safe-t)) 1rem 1rem; max-width: 560px; margin: 0 auto; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow-xs); }
.form { background: var(--surface-2); border-color: transparent; box-shadow: none; }
.form button[type="submit"] { margin-top: .25rem; }

/* --- Connexion --- */
.auth .hero { text-align: center; padding: 2rem 0 1rem; }
.auth .hero img { border-radius: 16px; }
.auth .hero h1 { margin-top: .75rem; color: var(--green); }
.auth .hero p { color: var(--muted); margin: 0; font-family: var(--serif); font-style: italic; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--surface-2); border-radius: 12px; padding: 4px; margin: 1rem 0; }
.segmented button { border: 0; background: transparent; min-height: 44px; color: var(--muted); font-weight: 500; }
.segmented button.active { background: var(--surface); color: var(--green); box-shadow: var(--shadow-sm); font-weight: 600; }

/* --- En-tête vert pleine largeur --- */
#view-app { padding: 0; max-width: none; }
/* La carte n° 1 remonte de 2.4rem (1rem de marge de main + 1.4rem de vert) : le bandeau garde 1.4rem de vert libre sous le sous-titre. */
.masthead { background: var(--grad-green); color: var(--on-green); padding: calc(.9rem + var(--safe-t)) 1rem 2.8rem; }
.masthead-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.mast-text { min-width: 0; text-align: left; }
.masthead .eyebrow { color: var(--green-light); }
.mast-title { font: 700 1.75rem/1.1 var(--serif); letter-spacing: var(--track-display); margin: .25rem 0 0; color: var(--on-green); }
.mast-sub { font: italic 500 1.05rem/1.2 var(--serif); color: var(--green-light); margin: .15rem 0 0; }
.topbar-actions { display: flex; align-items: center; gap: .35rem; flex: none; }
.masthead button { color: var(--on-green); border-color: rgba(207, 227, 200, .6); background: transparent; }
.masthead button:hover { background: rgba(255, 255, 255, .1); }
.masthead #btn-admin { min-height: 32px; padding: 0 .55rem; font-size: .72rem; letter-spacing: .04em; border-radius: 8px; }
.masthead .eyebrow { white-space: nowrap; }
@media (max-width: 400px) { .masthead .eyebrow { letter-spacing: .1em; font-size: .66rem; } }
.icon-btn { position: relative; width: 44px; padding: 0; border: 0; }
.icon-btn .ico { width: 24px; height: 24px; }
.masthead .icon-btn { border: 0; }
.profile-btn { padding: 0; width: 44px; border: 0 !important; }
.profile-btn .avatar { width: 40px; height: 40px; margin: 0; border: 1.5px solid var(--green-light); background: transparent; color: var(--on-green); font-size: .95rem; }

main { max-width: 560px; margin: 0 auto; padding: 1rem 1rem calc(var(--nav-h) + var(--safe-b) + 1.5rem); }

/* --- Navigation du bas --- */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 -1px 0 var(--line), 0 -10px 30px -14px rgba(28, 42, 32, .18);
  padding: 4px 4px calc(4px + var(--safe-b));
}
.bottom-nav button {
  position: relative; border: 0; background: transparent; border-radius: var(--radius-btn);
  min-height: 54px; color: var(--muted); flex-direction: column; gap: 3px; font-size: .75rem; font-weight: 500; padding: 4px;
}
.bottom-nav button .ico { width: 24px; height: 24px; }
.bottom-nav button.active { color: var(--green); font-weight: 600; }
.bottom-nav button.active::after { content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; background: var(--green); border-radius: 2px; }

/* --- Avatars --- */
.avatar {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--grad-purple); color: var(--on-green);
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 .95rem/1 var(--serif); vertical-align: middle;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
img.avatar { background: var(--surface-2); }
.avatar.sm { width: 26px; height: 26px; font-size: .72rem; margin-right: .35rem; }
.avatar.lg { width: 88px; height: 88px; font-size: 2.2rem; }
.profile-head { display: flex; align-items: center; gap: 1rem; margin: .25rem 0 1rem; }
.profile-head h2 { font-size: 1.5rem; margin: 0; }
.name-big { font: 700 1.35rem/1.2 var(--serif); letter-spacing: var(--track-tight); margin: 0; }
.stack { display: grid; gap: .5rem; }

/* --- Carte n° 1, sortie du bandeau vert --- */
.leader-card {
  display: flex; align-items: center; gap: 1rem;
  background: var(--surface); border-radius: 0 0 16px 16px; padding: 1rem 1.1rem;
  margin: -2.4rem 0 1.25rem; box-shadow: var(--shadow-2); border: 1px solid var(--line); border-top: 0;
}
.leader-card .avatar { width: 64px; height: 64px; font-size: 1.6rem; }
.leader-info { min-width: 0; flex: 1; }
.leader-info .eyebrow { color: var(--purple); }
.leader-name { font: 700 1.375rem/1.2 var(--serif); letter-spacing: var(--track-tight); margin: .2rem 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-name button.link { text-decoration: none; }
.leader-meta { color: var(--muted); font-size: .85rem; margin: 0; }
.leader-elo { font: 700 2rem/1 var(--serif); letter-spacing: var(--track-display); color: var(--green); font-variant-numeric: tabular-nums; }

/* --- Classement : tableau de résultats --- */
.rank-head {
  display: flex; justify-content: space-between; padding: 0 .25rem .45rem; margin: 0;
  border-bottom: 2px solid var(--green); color: var(--muted);
}
.ranking { list-style: none; margin: 0; padding: 0; }
.ranking .row {
  display: grid; grid-template-columns: 34px 36px minmax(0, 1fr) auto;
  grid-template-areas: "rank avatar name elo" "rank avatar meta elo";
  align-items: center; column-gap: .7rem; row-gap: 1px;
  padding: .7rem .35rem; border-bottom: 1px solid var(--line);
}
.ranking .row.me { background: var(--surface); box-shadow: inset 3px 0 0 var(--green); }
.ranking .avatar { grid-area: avatar; }
.ranking .rank { grid-area: rank; text-align: center; font: italic 600 1.15rem/1 var(--serif); color: var(--purple); }
.ranking .name-cell { grid-area: name; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.ranking .name { font-size: 1rem; text-decoration: none; }
.ranking .motto { display: block; max-width: 100%; font: italic 500 .86rem/1.3 var(--serif); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranking .elo { grid-area: elo; font: 700 1.2rem/1 var(--serif); letter-spacing: var(--track-tight); color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.ranking .meta { grid-area: meta; color: var(--muted); font-size: .8rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ranking .form { display: inline-flex; gap: 4px; align-items: center; }
.ranking .row.unranked .rank { color: var(--muted); font-style: normal; }
.medal {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
  color: var(--on-green); font: 700 .8rem/1 var(--sans); font-style: normal; letter-spacing: -.02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(28, 42, 32, .18);
}
.medal.gold { background: var(--gold); } .medal.silver { background: var(--silver); } .medal.bronze { background: var(--bronze); }
.bettors .row { grid-template-areas: "rank avatar name elo" "rank avatar meta elo"; }
.bettors .elo { display: inline-flex; align-items: center; gap: .3rem; }

/* Forme : victoire = point plein vert, défaite = cercle vide, nul = carré vide (lisible sans la couleur). */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.dot.win { background: var(--green); }
.dot.loss { border: 1.6px solid var(--loss); }
.dot.draw { border: 1.6px solid var(--muted); border-radius: 2px; }
.dot.none { width: 10px; height: 2px; border-radius: 1px; background: var(--line); }
.w { color: var(--green); } .l { color: var(--muted); } .d { color: var(--muted); }

/* --- Petit mot --- */
.motto-big { font: italic 500 1.1rem/1.4 var(--serif); margin: -.25rem 0 .25rem; overflow-wrap: anywhere; color: var(--ink); }
.motto-form { display: grid; gap: .4rem; margin: -.25rem 0 .5rem; }
.motto-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.motto-row > span:last-child { display: flex; gap: .4rem; }
#motto-count.over { color: var(--danger); font-weight: 700; }
.danger-link { color: var(--danger) !important; }

/* --- Saisie --- */
.sets { display: grid; gap: .5rem; margin: .25rem 0 .75rem; }
.set-head, .set-row { display: grid; grid-template-columns: 52px 76px 20px 76px; align-items: center; gap: .5rem; justify-content: center; }
.set-head { color: var(--muted); font-size: .8rem; text-align: center; }
.set-label { color: var(--muted); font-size: .9rem; }
.set-row input { text-align: center; font: 700 1.4rem var(--serif); letter-spacing: var(--track-tight); min-height: 52px; }
.vs { text-align: center; color: var(--muted); }
.preview { min-height: 1.4rem; font: italic 600 1.05rem/1.4 var(--serif); text-align: center; }
.preview.win { color: var(--green); } .preview.loss, .preview.draw, .preview.bad { color: var(--muted); }

/* --- Cartes de parties --- */
.list { display: grid; gap: 10px; }
.match header, .planned header { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; color: var(--muted); font-size: .85rem; }
.chip { padding: 2px 9px; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--surface-2); color: var(--muted); }
.chip.win { background: var(--green); color: var(--on-green); }
.chip.loss { background: transparent; border: 1px solid var(--loss); color: var(--muted); }
.chip.draw { background: var(--surface-2); color: var(--muted); }
.delta { margin-left: auto; font: 700 1rem var(--serif); font-variant-numeric: tabular-nums; }
.delta.up { color: var(--green); } .delta.down { color: var(--muted); }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .6rem; }
.actions > :only-child { grid-column: 1 / -1; }

/* --- Modales --- */
.modal {
  position: fixed; inset: 0; z-index: 20; background: rgba(22, 36, 27, .48);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: flex; align-items: flex-end; justify-content: center;
}
.modal-box {
  position: relative; width: 100%; max-width: 560px; max-height: 92dvh; overflow: auto;
  background: var(--bg); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-sheet);
  padding: 1.25rem 1rem calc(1.25rem + var(--safe-b));
}
/* Poignée du panneau (téléphone) */
.modal-box::before, .wpop.sheet::before { content: ''; display: block; width: 40px; height: 4px; margin: -.5rem auto .85rem; border-radius: 2px; background: var(--line); }
@media (min-width: 600px) {
  .modal { align-items: center; }
  .modal-box { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
  .modal-box::before { display: none; }
}
.modal .close, .chat-head .close, .wpop-close {
  position: absolute; top: .6rem; right: .6rem; width: 44px; min-height: 44px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 1.4rem; line-height: 1; box-shadow: var(--shadow-xs);
}
.tag { font: 600 .68rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; background: var(--purple); color: var(--on-green); border-radius: 999px; padding: 4px 8px; vertical-align: middle; margin-left: .35rem; }
.stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin: .75rem 0; } /* 4 ou 5 cases */
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .6rem .15rem; text-align: center; box-shadow: var(--shadow-xs); }
.stat b { display: block; font: 700 1.25rem/1.1 var(--serif); letter-spacing: var(--track-tight); color: var(--green); font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: .2rem; font: 600 .68rem/1.3 var(--sans); font-variant-caps: all-small-caps; letter-spacing: .06em; color: var(--muted); } /* petites capitales sans text-transform : le texte lu reste « Vaches V–D » */
.formline { display: flex; align-items: center; gap: 6px; }
table.h2h { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.h2h th, table.h2h td { padding: .5rem .3rem; text-align: center; border-bottom: 1px solid var(--line); }
table.h2h th:first-child, table.h2h td:first-child { text-align: left; }
table.h2h th { color: var(--muted); font-weight: 600; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; border-bottom: 2px solid var(--green); }

/* --- Courbe Elo --- */
.chart { width: 100%; height: auto; display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-xs); }
.chart .base { stroke: var(--muted); stroke-dasharray: 4 4; stroke-width: 1; opacity: .6; }
.chart .line { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart circle { fill: var(--green); stroke: var(--surface); stroke-width: 1.5; }
.chart .axis { fill: var(--muted); font-size: 10px; font-family: var(--sans); }
.chart .vache-dot { fill: var(--purple); stroke: var(--surface); stroke-width: 1.2; }
.chart-legend { display: flex; align-items: center; gap: .4rem; }
.chart-legend .lg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; }
.chart-legend .lg-vache { width: 8px; height: 8px; background: var(--purple); transform: rotate(45deg); display: inline-block; margin-left: .4rem; }

/* --- Admin --- */
.inline { display: grid; grid-template-columns: 1fr 1fr auto; gap: .5rem; align-items: end; }
.inline.two { grid-template-columns: 1fr auto; }
.inline label { margin: 0; }
.inline.two-equal { grid-template-columns: 1fr 1fr; margin-bottom: .1rem; }
.inline.two-equal label { margin-bottom: .75rem; }
.admin-matches { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.admin-matches li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .7rem; font-size: .9rem; }

/* --- Mise en page : une colonne sur mobile, deux à partir de 768 px --- */
.col-side h2:first-child { margin-top: 1.5rem; }
.tab { max-width: 640px; margin: 0 auto; }
@media (min-width: 768px) {
  main { max-width: 1100px; }
  .tab.two-cols { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 2rem; align-items: start; }
  .col-side { position: sticky; top: 1rem; }
  .col-side h2:first-child { margin-top: 0; }
  .col-side .weather-days { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 768px) and (max-width: 1279px) {
  /* Chat ouvert sur un écran moyen : on revient à une colonne. */
  body.chat-open .tab.two-cols { display: block; }
  body.chat-open .col-side { position: static; }
}

/* --- Agenda --- */
.calendar { background: var(--surface); }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.cal-head strong { font: 700 1.15rem var(--serif); text-transform: capitalize; }
.cal-head button { width: 44px; padding: 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow span { text-align: center; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-bottom: 4px; }
.cal-day {
  position: relative; min-height: 52px; padding: 4px 2px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); flex-direction: column; gap: 2px; font-weight: 600; font-size: .9rem;
  transition: background-color var(--ease), border-color var(--ease), box-shadow var(--ease);
}
@media (hover: hover) { .cal-day:hover { border-color: var(--green); } }
.cal-day.other { opacity: .4; }
.cal-day.past { color: var(--muted); background: var(--bg); }
.cal-day.today { border: 2px solid var(--green); }
.cal-day.selected { background: var(--grad-green-soft); color: var(--on-green); border-color: var(--green); box-shadow: var(--shadow-sm); }
.cal-day .w { line-height: 1; color: var(--green); }
.cal-day.selected .w { color: var(--on-green); }
.cal-day .w .ico { width: 15px; height: 15px; }
.cal-day .count { min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px; font-size: .7rem; line-height: 18px; background: var(--purple); color: var(--on-green); font-weight: 700; }
.planned .when { font: 700 1rem var(--serif); color: var(--green); }
.planned.mine { position: relative; }
.planned .who { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .4rem 0; }
.meta-ico { display: inline-flex; align-items: center; gap: .25rem; }

/* --- Météo --- */
.weather, .joke { background: var(--surface-2); border-color: transparent; border-radius: 14px; box-shadow: none; }
.weather-now { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.weather-now .big { color: var(--green); line-height: 0; }
.weather-now .big .ico { width: 40px; height: 40px; stroke-width: 1.4; }
.weather-now b { font: 700 1.7rem var(--serif); color: var(--green); }
.weather-days { display: grid; grid-template-columns: repeat(7, minmax(62px, 1fr)); gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.wday {
  background: var(--surface); border-radius: 10px; padding: .5rem .2rem; text-align: center; font-size: .78rem;
  border: 1px solid transparent; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.wday .d { font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.wday .ico-w { color: var(--green); line-height: 0; margin: .3rem 0; }
.wday .ico-w .ico { width: 24px; height: 24px; }
.wday .t { font-weight: 600; color: var(--ink); }
.wday .r { color: var(--muted); display: inline-flex; align-items: center; gap: 2px; }
.wday .r .ico { width: 12px; height: 12px; }
.wday .v { margin-top: 3px; font-weight: 600; font-size: .72rem; letter-spacing: .04em; }
.wday.good .v { color: var(--green); }
.wday.meh .v, .wday.bad .v { color: var(--muted); }
.wday.good { border-color: var(--green-light); }
.wday.active { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }

/* --- Pop-up météo heure par heure --- */
.wpop {
  position: fixed; z-index: 40; width: 300px; max-width: calc(100vw - 16px); max-height: 70vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: .7rem .75rem;
  box-shadow: var(--shadow-3); font-size: .85rem;
}
.wpop h4 { margin: 0 2.6rem .4rem 0; font: 700 1rem var(--serif); }
.wpop h4::first-letter { text-transform: uppercase; } /* « Lundi 2 novembre », pas « Lundi 2 Novembre » */
.wpop-close { top: .35rem; right: .35rem; }
.wpop.sheet {
  left: 0; right: 0; top: auto; width: auto; max-width: none;
  bottom: calc(var(--nav-h) + var(--safe-b)); max-height: 55vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: .9rem 1rem 1rem;
  box-shadow: var(--shadow-sheet);
}
.wpop.sheet td { padding: 6px 4px; font-size: .9rem; }
body.sheet-open main { padding-bottom: calc(55vh + var(--nav-h) + var(--safe-b) + 2rem); }
.wpop table { width: 100%; border-collapse: collapse; }
.wpop td { padding: 3px 4px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.wpop td:first-child { text-align: left; color: var(--muted); }
.wpop td.ico-w { text-align: center; color: var(--green); }
.wpop td .ico { width: 18px; height: 18px; }
.wpop tr.wet td { color: var(--purple); font-weight: 600; }

/* --- Blague --- */
.joke-q { font: 600 1.05rem/1.4 var(--serif); }
.joke-a { color: var(--green); font: italic 600 1.05rem/1.4 var(--serif); }

/* --- Chat --- */
.badge {
  position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--purple); color: var(--on-green); font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center;
}
.masthead .badge { box-shadow: 0 0 0 2px var(--green); }
.bottom-nav .badge { top: 2px; right: calc(50% - 26px); box-shadow: 0 0 0 2px var(--surface); }
.chat { position: fixed; z-index: 15; inset: 0; display: flex; flex-direction: column; background: var(--bg); padding-top: var(--safe-t); }
@media (min-width: 900px) {
  .chat { left: auto; width: 380px; border-left: 1px solid var(--line); box-shadow: -8px 0 32px rgba(28, 42, 32, .12); }
  body.chat-open main { margin-right: 380px; }
  body.chat-open .bottom-nav { right: 380px; }
}
.chat-head { position: relative; display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; background: var(--grad-green-soft); color: var(--on-green); min-height: 60px; }
.chat-head h2 { margin: 0; color: var(--on-green); font-size: 1.2rem; }
.chat-head .close { top: 50%; transform: translateY(-50%); }
.chat-list { flex: 1; overflow-y: auto; padding: .75rem 1rem; display: flex; flex-direction: column; gap: .5rem; overscroll-behavior: contain; }
.msg { display: flex; gap: .5rem; align-items: flex-end; max-width: 88%; }
.msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.msg .avatar { width: 30px; height: 30px; font-size: .8rem; margin: 0; }
.bubble { background: var(--surface); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: .45rem .7rem; min-width: 0; box-shadow: var(--shadow-xs); }
.msg.mine .bubble { background: var(--grad-green-soft); color: var(--on-green); border-color: var(--green); border-radius: 14px 14px 4px 14px; }
.bubble .who { font-size: .75rem; font-weight: 600; color: var(--purple); }
.bubble .text { white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble .when { font-size: .7rem; color: var(--muted); display: flex; gap: .5rem; align-items: center; justify-content: flex-end; margin-top: 2px; }
.msg.mine .bubble .when, .msg.mine .bubble .del { color: var(--green-light); }
.bubble .del { background: none; border: 0; min-height: 0; padding: 0; color: var(--muted); font-size: .7rem; font-weight: 600; text-decoration: underline; display: inline; }
.chat-day { align-self: center; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 2px 10px; margin: .25rem 0; }
.chat-form { display: flex; gap: .5rem; padding: .6rem .75rem calc(.6rem + var(--safe-b)); background: var(--surface); box-shadow: 0 -1px 0 var(--line), 0 -8px 24px -14px rgba(28, 42, 32, .14); }
.chat-form textarea { flex: 1; resize: none; min-height: 44px; max-height: 120px; padding: .6rem .8rem; }
.chat-form button { width: 48px; padding: 0; flex: none; }
.chat-form button .ico { width: 22px; height: 22px; }

/* --- Synchronisation agenda --- */
.ghost-link {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; padding: 0 .85rem;
  border-radius: var(--radius-btn); border: 1.5px solid var(--green); background: var(--surface); color: var(--green);
  font-weight: 600; font-size: .9rem; text-decoration: none; transition: background-color var(--ease);
}
.ghost-link { min-height: 50px; font-size: 1rem; }
.ghost-link:hover { background: var(--green-tint); }

/* --- E-mail (profil) et PIN oublié --- */
.center { text-align: center; }
.form-title { font: 600 1.2rem var(--serif); color: var(--ink); margin: 0 0 .5rem; }
.email-addr { font-weight: 600; overflow-wrap: anywhere; }
#email-box label:not(.check) { margin-top: .6rem; }

/* --- Bandeau « Installer l'appli » --- */
.install-banner {
  position: relative; display: flex; gap: .75rem; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs);
  border-radius: 12px; padding: .75rem 3rem .75rem .9rem; margin-bottom: 1rem; font-size: .9rem;
}
.install-banner > img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.install-banner b { display: block; font: 700 1rem var(--serif); margin-bottom: .15rem; }
.install-banner p { margin: .15rem 0; color: var(--muted); }
.install-banner .share-ico { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; fill: none; stroke: var(--green); stroke-width: 1.8; }
.install-banner .install-btn { margin-top: .5rem; }
.install-banner .install-close {
  position: absolute; top: .25rem; right: .25rem; width: 44px; min-height: 44px; padding: 0;
  border: 0; background: transparent; color: var(--muted); font-size: 1.3rem; line-height: 1;
}

/* --- Puces (adversaire, surface, lettres…) --- */
.field { margin-bottom: .75rem; }
.field-label { display: block; font-size: .85rem; font-weight: 500; color: var(--ink-2); margin-bottom: .35rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip-btn {
  min-height: 44px; padding: 0 .95rem; border-radius: 999px; font-weight: 500; font-size: .92rem;
  background: var(--surface); border: 1px solid var(--field-border); color: var(--ink); gap: .4rem;
}
@media (hover: hover) { .chip-btn:hover { border-color: var(--green); } }
.chip-btn[aria-checked="true"], .chip-btn[aria-pressed="true"] { background: var(--green); color: var(--on-green); border-color: var(--green); font-weight: 600; box-shadow: var(--shadow-sm); }
.chip-btn:disabled { opacity: .4; }
.chip-btn[aria-pressed="true"]:disabled { opacity: 1; cursor: default; }
.chip-btn .lock { width: 13px; height: 13px; }
.kind-switch { margin-top: 0; grid-template-columns: repeat(3, 1fr); } /* Simple · Double · Vache */
.kind-switch .ico { width: 18px; height: 18px; }

/* --- Surfaces : pastilles discrètes --- */
.sdot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; background: var(--muted); }
.s-clay { background: #B5552E; } .s-hard { background: #2F6F9F; } .s-grass { background: #3E7B3A; }
.s-synthetic { background: #7B5A99; } .s-indoor { background: #7D7A70; }
.surface-pill {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 500;
  padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink); border: 0; min-height: 0;
}
.surface-name { display: inline-flex; align-items: center; gap: .4rem; }

/* --- Vaches --- */
.letters .letter-btn { width: 44px; padding: 0; font: 700 1.05rem var(--serif); }
.vletters { display: inline-flex; gap: 3px; margin-left: .5rem; vertical-align: middle; }
.vletters i {
  font: normal 700 .85rem/22px var(--serif); width: 20px; height: 22px; text-align: center;
  border-radius: 4px; background: transparent; color: var(--loss); border: 1px solid var(--loss); /* 3:1 : lisible */
}
.vletters i.on { background: var(--green); color: var(--on-green); border-color: var(--green); }
.vache-preview { background: var(--surface); border-radius: 12px; padding: .5rem .75rem; margin-bottom: .75rem; border: 1px solid var(--line); box-shadow: var(--shadow-xs); }
.vache-preview p { display: flex; align-items: center; justify-content: space-between; margin: .25rem 0; }
.vache-preview p.ok { color: var(--green); font: italic 600 1rem var(--serif); justify-content: center; }
.vache-preview p.bad { color: var(--muted); font-size: .85rem; justify-content: center; text-align: center; }
.vache-badge { font: 600 .68rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: var(--purple); color: var(--on-green); }

/* --- Matchs prévus et paris --- */
.betbar { display: block; width: 100%; height: 8px; border-radius: 999px; overflow: hidden; margin: .55rem 0 .25rem; }
.betbar .betbar-a { fill: var(--green); }
.betbar .betbar-b { fill: var(--purple); }
.betbar-legend { display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem; margin: 0; }
.betbar-legend em { font-style: normal; color: var(--muted); }
.betbar-legend span { display: inline-flex; align-items: center; gap: .25rem; }
.betbar-legend span:nth-child(2) { color: var(--muted); }
.betbar-pct { margin: 0 0 .3rem; font-size: .75rem; }
.mybet { font-size: .88rem; margin: .3rem 0; display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.mybet.won { color: var(--green); font-weight: 600; } .mybet.lost, .mybet.refunded { color: var(--muted); }
.bet-form { background: var(--surface-2); border-radius: 12px; padding: .65rem; margin: .5rem 0; display: grid; gap: .5rem; }
.bet-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bet-row input { width: 5.5rem; min-height: 44px; text-align: center; font: 700 1.1rem var(--serif); }
.planned-link { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs); position: relative; border-radius: 10px; padding: .55rem .75rem; font-size: .88rem; margin: 0 0 .75rem; }
.planned-edit { border-top: 1px solid var(--line); margin-top: .75rem; padding-top: .75rem; }
.balls { display: inline-flex; align-items: center; gap: .2rem; }
.balls .ico { width: 1em; height: 1em; }

/* --- Notifications --- */
.notif-on { color: var(--green); font-weight: 600; display: flex; align-items: center; gap: .35rem; }
.notif-prefs { margin-top: .75rem; }
.check { display: flex; align-items: center; gap: .6rem; color: var(--ink); font-size: .95rem; margin: .4rem 0; min-height: 44px; }
.check input { width: 22px; height: 22px; min-height: 0; margin: 0; accent-color: var(--green); flex: none; box-shadow: none; }

/* --- Partage WhatsApp (seule couleur de marque, pour la reconnaître) --- */
.wa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 44px; padding: 0 .9rem; border-radius: var(--radius-btn);
  background: var(--surface); border: 1.5px solid #1E8E4E; color: #146C3A; font-weight: 600; font-size: .9rem; text-decoration: none;
  transition: background-color var(--ease);
}
.wa-btn:hover { background: rgba(30, 142, 78, .07); }
.wa-btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.share-row { margin-top: .9rem; }
.share-row .wa-btn { width: 100%; min-height: 48px; font-size: .95rem; }

/* --- Toast --- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + var(--safe-b) + 14px); transform: translateX(-50%);
  z-index: 30; background: var(--ink); color: var(--on-green); padding: .7rem 1rem; border-radius: 10px;
  font-weight: 500; max-width: calc(100% - 2rem); box-shadow: var(--shadow-3);
}
.toast.error { background: var(--danger); }
.toast.success { background: var(--green); }

/* --- Mouvement réduit --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  button:active { transform: none; }
}

/* --- Carte d'identité tennis (fiche joueur) --- */
.idcard { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0 0 .6rem; padding: .75rem .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-xs); }
.idcard dt { font: 600 .68rem/1.6 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.idcard dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.idcard-form { margin-bottom: .5rem; }

/* --- Mur de publications (« Actu ») --- */
.composer textarea { min-height: 88px; padding: .7rem .85rem; resize: vertical; }
.composer-row { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; }
.composer-row .hint { margin-left: auto; }
.post-photo-preview { margin-top: .6rem; display: grid; gap: .4rem; justify-items: start; }
.post-photo-preview img { max-width: 100%; max-height: 220px; border-radius: 10px; border: 1px solid var(--line); }
.feed { margin-top: 1rem; }
.post { padding: .85rem .9rem; }
.post-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: .6rem 0 .2rem; }
.post-photo { display: block; margin-top: .6rem; }
.post-photo img { display: block; width: 100%; max-height: 520px; object-fit: cover; border-radius: 10px; background: var(--surface-2); }
.bottom-nav button { font-size: .7rem; }

/* --- Réactions et commentaires --- */
.social { margin-top: .7rem; padding-top: .55rem; border-top: 1px solid var(--line); }
.social:empty { display: none; }
.social-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.react {
  min-height: 36px; padding: 0 .55rem; border-radius: 999px; gap: .25rem; font-size: .95rem; font-weight: 600;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.react .n { font-size: .78rem; color: var(--muted); }
.react[aria-pressed="true"] { border-color: var(--green); background: var(--green-tint); box-shadow: inset 0 0 0 1px var(--green); }
.react[aria-pressed="true"] .n { color: var(--green); }
.comment-toggle { margin-left: auto; min-height: 36px; padding: 0 .6rem; border: 0; background: transparent; color: var(--muted); font-size: .85rem; font-weight: 500; }
.comment-toggle .ico { width: 18px; height: 18px; }
.comment-toggle[aria-expanded="true"] { color: var(--green); }
.thread { margin-top: .5rem; }
.comments { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .45rem; }
.comment { display: flex; gap: .45rem; align-items: flex-start; }
.comment .avatar.sm { margin: 2px 0 0; }
.comment-body { background: var(--surface-2); border-radius: 4px 12px 12px 12px; padding: .4rem .65rem; min-width: 0; font-size: .9rem; }
.comment-body > .link { margin-right: .35rem; font-size: .85rem; }
.comment-body .text { overflow-wrap: anywhere; }
.comment-body .hint { display: block; font-size: .72rem; margin-top: 1px; }
.comment-body .hint .link { font-size: .72rem; font-weight: 500; }
.comment-form { display: flex; gap: .4rem; }
.comment-form input { min-height: 44px; }
.comment-form button { flex: none; }
.idcard { grid-template-columns: minmax(6.5rem, 36%) minmax(0, 1fr); }

/* ===================================================================== */
/* Ergonomie v2 : accueil, bouton +, annuaire, classement à deux vues    */
/* ===================================================================== */

/* La carte qui « sort » du bandeau vert n'existe que sur l'accueil et le classement :
   ailleurs, le bandeau reste court. */
body:not([data-tab="home"]):not([data-tab="ranking"]) .masthead { padding-bottom: 1.1rem; }
.lift { position: relative; margin-top: -2.4rem !important; }

/* --- Accueil : ma situation --- */
.home-me {
  background: var(--surface); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 16px 16px;
  padding: 1rem 1.1rem 1.05rem; margin-bottom: 1.1rem; box-shadow: var(--shadow-2);
}
.home-me-top { display: flex; align-items: center; gap: .8rem; }
.home-me-top .avatar { width: 48px; height: 48px; font-size: 1.2rem; }
.home-me-text { flex: 1; min-width: 0; }
.home-me-text .eyebrow { color: var(--purple); }
.home-hello { font: 700 1.35rem/1.15 var(--serif); letter-spacing: var(--track-tight); margin: .15rem 0 0; }
.home-me-top > .link { font-size: .85rem; white-space: nowrap; }
.home-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: .9rem 0 0; border-top: 1px solid var(--line); padding-top: .75rem; }
.home-stats > div { text-align: center; }
.home-stats > div + div { border-left: 1px solid var(--line); }
.home-stats dt { font: 600 .64rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.home-stats dd { margin: .2rem 0 0; font: 700 1.3rem/1.1 var(--serif); letter-spacing: var(--track-tight); color: var(--green); font-variant-numeric: tabular-nums; }
.home-stats dd sup { font-size: .55em; }
.home-stats .form-dd { display: flex; justify-content: center; align-items: center; gap: 3px; min-height: 1.4rem; }
.home-stats .balls .ico { width: .8em; height: .8em; }

/* --- Blocs de l'accueil --- */
.home-block { margin-top: 1.6rem; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; }
.block-head h2 { margin: 0; }
.see-all { font-size: .85rem; color: var(--green) !important; }
.count-pill { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--purple); color: var(--on-green); font: 700 .75rem/22px var(--sans); text-align: center; }
.count-pill[hidden] { display: none; }
.todo-card { display: flex; align-items: center; gap: .75rem; position: relative; }
.todo-card .todo-text { flex: 1; min-width: 0; }
.todo-card .todo-text p { margin: .1rem 0; }
.todo-card .eyebrow { color: var(--purple); }


/* --- Publier / filtres du fil --- */
.composer-trigger {
  width: 100%; justify-content: flex-start; gap: .65rem; min-height: 54px; padding: 0 .9rem;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-weight: 400; border-radius: 14px; box-shadow: var(--shadow-xs);
}
@media (hover: hover) { .composer-trigger:hover { border-color: var(--green); background: var(--surface); } }
.composer-trigger > span:nth-child(2) { flex: 1; text-align: left; }
.composer-trigger .avatar.sm { width: 32px; height: 32px; margin: 0; }
.composer-trigger .ico { color: var(--green); width: 22px; height: 22px; }
.composer-row { flex-wrap: wrap; }
.feed-filters { margin: .9rem 0 .2rem; }
.feed-filters .chip-btn { min-height: 38px; padding: 0 .9rem; font-size: .85rem; }

/* --- Classement : deux vues --- */
.rank-switch { background: var(--surface); box-shadow: var(--shadow-2); border: 1px solid var(--line); margin-bottom: 1.1rem; }
.rank-switch button.active { background: var(--green); color: var(--on-green); box-shadow: var(--shadow-primary); }
#panel-elo .leader-card { margin-top: 0; border-radius: 16px; border-top: 1px solid var(--line); }
.balls-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem; margin-bottom: 1.1rem; box-shadow: var(--shadow-xs); }
.balls-card .eyebrow { color: var(--purple); }
.balls-big { font: 700 2rem/1.1 var(--serif); letter-spacing: var(--track-display); color: var(--green); margin: .15rem 0; }
.balls-big .ico { width: .7em; height: .7em; }
.balls-card button { margin-top: .5rem; }

/* --- En-tête de page avec retour (saisie) --- */
.page-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.page-head h2 { margin: 0; }
.back { width: 44px; padding: 0; border-color: var(--line); color: var(--ink); }
.back .ico { width: 22px; height: 22px; }

/* --- Annuaire des joueurs --- */
.search { position: relative; margin-bottom: .7rem; }
.search .ico { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--muted); width: 20px; height: 20px; }
.search input { padding-left: 2.6rem; min-height: 50px; border-radius: 12px; box-shadow: var(--shadow-xs); }
.players-sort { margin-bottom: .6rem; }
.players-sort .chip-btn { min-height: 38px; font-size: .85rem; }
.players { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--green); }
.player-row {
  width: 100%; display: flex; align-items: center; gap: .75rem; text-align: left; font-weight: 400;
  min-height: 64px; padding: .6rem .35rem; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink);
}
.player-row:hover { background: var(--surface); }
.player-row.me { background: var(--surface); box-shadow: inset 3px 0 0 var(--green); }
.player-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.player-main b { font-weight: 600; }
.player-main .motto { font: italic 500 .86rem/1.3 var(--serif); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-main .hint { font-size: .78rem; }
.player-side { display: flex; align-items: center; gap: .5rem; }
.player-side .elo { font: 700 1.15rem var(--serif); letter-spacing: var(--track-tight); font-variant-numeric: tabular-nums; }
.player-side .medal { width: 22px; height: 22px; font-size: .72rem; }

/* --- Fiche joueur : actions --- */
.profile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .25rem 0 .75rem; }
.profile-actions > :only-child { grid-column: 1 / -1; }

/* --- Bouton central « + » --- */
.bottom-nav .fab { color: var(--green); font-weight: 600; }
.fab-circle {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-top: -18px; border-radius: 50%;
  background: var(--grad-green-soft); color: var(--on-green); box-shadow: var(--shadow-fab), 0 0 0 4px var(--surface);
  transition: transform var(--ease);
}
.fab:active .fab-circle { transform: scale(.94); }
.fab-circle .ico { width: 24px; height: 24px; stroke-width: 2; }
.fab-dot { position: absolute; top: 1px; right: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 2px var(--surface); }
.bottom-nav .fab.active::after { display: none; }

/* --- Panneau d'actions --- */
.sheet-box h2 { margin: 0 3rem .9rem 0; }
.suggest { display: grid; gap: .45rem; margin-bottom: 1rem; }
.suggest:empty { display: none; }
.suggest .eyebrow { color: var(--purple); }
.suggest-row {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; text-align: left; gap: 0 .5rem;
  min-height: 56px; padding: .55rem .8rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 12px; font-weight: 400;
  box-shadow: var(--shadow-xs); transition: border-color var(--ease), box-shadow var(--ease);
}
@media (hover: hover) { .suggest-row:hover { border-color: var(--green); box-shadow: var(--shadow-sm); background: var(--surface); } }
.suggest-row b { font-weight: 600; }
.suggest-row span { font-size: .8rem; color: var(--muted); grid-column: 1; }
.suggest-row .ico { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--muted); }
.suggest-row.first { border-color: var(--green); position: relative; }
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.action-tile {
  flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .15rem; text-align: left;
  min-height: 92px; padding: .8rem .85rem; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 400;
  box-shadow: var(--shadow-xs); transition: border-color var(--ease), box-shadow var(--ease);
}
.action-tile:hover { border-color: var(--green); box-shadow: var(--shadow-sm); background: var(--surface); }
.action-tile .ico { width: 26px; height: 26px; color: var(--green); margin-bottom: .3rem; }
.action-tile b { font-weight: 600; }
.action-tile span { font-size: .78rem; color: var(--muted); }




/* Fiche : libellés des actions sur une ligne. */
.profile-actions button { white-space: nowrap; padding: 0 .7rem; font-size: .92rem; }

/* --- Logo 28 px à gauche du titre --- */
.mast-title { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.mast-logo { width: 28px; height: 28px; border-radius: 7px; flex: none; mix-blend-mode: lighten; } /* le fond vert du SVG se fond dans le dégradé */

/* --- Filet d'accent : barre droite détachée des bords arrondis
       (une ombre interne suivait l'arrondi et dessinait un croissant) --- */
.planned.mine::before, .suggest-row.first::before,
.todo-card::before, .install-banner::before, .planned-link::before {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--green);
}
.todo-card::before, .install-banner::before, .planned-link::before { background: var(--purple); }
.planned-link::before { top: 8px; bottom: 8px; }

/* --- Saisie du score : cases compactes, « 0 » en filigrane --- */
.set-row input::placeholder { color: var(--field-border); opacity: 1; }

/* --- Connexion : bloc centré verticalement --- */
.screen.auth { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding-bottom: 3rem; }
.auth .hero { padding-top: 0; }

/* --- Qui a réagi : ligne de résumé au-dessus des réactions, liste complète en fenêtre --- */
.reacters {
  display: flex; align-items: center; gap: .4rem; width: 100%; min-height: 32px; padding: 0 0 .35rem; margin: 0;
  border: 0; border-radius: 0; background: transparent; color: var(--muted); font: 500 .82rem/1.3 var(--sans); text-align: left;
  justify-content: flex-start;
}
.reacters > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reacters:hover > span:last-child { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.reacters-emo { flex: none; letter-spacing: .05em; font-size: .9rem; }
.reacters-box h2 { margin: 0 3rem .75rem 0; }
.reacters-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--green); }
.reacters-list li { display: flex; align-items: center; gap: .7rem; min-height: 56px; padding: .4rem .25rem; border-bottom: 1px solid var(--line); }
.reacters-list li .link { flex: 1; min-width: 0; text-align: left; }
.reacters-list .reacters-emo { font-size: 1.25rem; }

/* --- Mentions « @Prénom » --- */
button.link.mention { color: var(--green); font-weight: 600; text-decoration-color: var(--green-light); }
.msg.mine button.link.mention { color: var(--on-green); text-decoration-color: var(--green-light); }
.mention-pop {
  position: fixed; z-index: 50; display: grid; gap: 2px; padding: .3rem; max-height: 260px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-3);
}
.mention-opt {
  justify-content: flex-start; gap: .55rem; min-height: 44px; padding: 0 .55rem; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink); font-weight: 500;
}
.mention-opt .avatar.sm { margin: 0; }
.mention-opt[aria-selected="true"] { background: var(--surface-2); }
@media (hover: hover) { .mention-opt:hover { background: var(--bg); } }

/* ===================================================================== */
/* Fil façon réseau social, couleurs du gazon (vert, violet, or)           */
/* ===================================================================== */

/* --- Liens (prénoms) : soulignés au survol seulement, la carte respire --- */
button.link { text-decoration-color: transparent; }
button.link:hover, button.link:focus-visible { text-decoration-color: currentColor; }

/* --- Carte du fil : en-tête, média pleine largeur, réactions --- */
.fcard { padding: .75rem 1rem .55rem; border-radius: 16px; overflow: hidden; }
.fcard .fcard-head { display: flex; align-items: center; flex-wrap: nowrap; gap: .65rem; min-height: 44px; color: var(--ink); font-size: 1rem; }
.fcard-head > .avatar, .fcard-badge { width: 38px; height: 38px; flex: none; margin: 0; }
.fcard-badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--grad-green-soft); color: var(--on-green); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.fcard-badge .ico { width: 20px; height: 20px; }
.vache .fcard-badge { background: var(--grad-purple); }
.fcard-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.fcard-title b, .fcard-name { font-weight: 600; font-size: .95rem; color: var(--ink); }
.fcard-title .eyebrow { color: var(--purple); font-size: .62rem; margin-bottom: 2px; }
.fcard-sub { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 .35rem; font-size: .78rem; color: var(--muted); }
.sub-surface { display: inline-flex; align-items: center; gap: .3rem; }
.fcard-head .delta { margin: 0; padding: 3px 9px; border-radius: 999px; font-size: .9rem; background: var(--surface-2); }
.fcard-head .delta.up { color: var(--green); background: var(--green-tint); }
.more-btn {
  flex: none; width: 40px; min-height: 40px; margin-right: -.55rem; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink);
}
.more-btn .ico { width: 22px; height: 22px; stroke-width: 3; }
.more-btn:hover { background: var(--surface-2); }
.fcard-note { margin: .6rem 0 0; }
.fcard-actions { margin-top: .7rem; }

/* --- Tableau de score façon court : fond gazon, lignes blanches discrètes --- */
.board {
  position: relative; display: grid; gap: .5rem; margin: .7rem -1rem .15rem; padding: .9rem 1.15rem;
  background: var(--grad-green-soft); color: var(--green-light);
}
.board::before { /* ligne de fond de court */
  content: ''; position: absolute; inset: 6px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 3px; pointer-events: none;
}
.board-row { position: relative; display: flex; align-items: center; gap: .6rem; min-height: 34px; }
.board-row .avatar.sm { width: 30px; height: 30px; margin: 0; font-size: .75rem; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .35); }
.board .link { color: inherit; font-size: 1rem; font-weight: 500; text-align: left; }
.board-row.winner { color: var(--on-green); }
.board-row.winner .link { font-weight: 700; }
.board-win { display: inline-flex; color: var(--on-green); }
.board-win .ico { width: 18px; height: 18px; stroke-width: 2.4; }
.board-names { min-width: 0; overflow-wrap: anywhere; }
.board-sets { margin-left: auto; display: flex; gap: .2rem; }
.board-sets b { width: 1.5rem; text-align: center; font: 500 1.35rem/1 var(--serif); }
.board-sets b.set-won { color: var(--on-green); font-weight: 700; }
.board .vletters { margin-left: auto; flex: none; }
.board .vletters i { color: var(--green-light); border-color: var(--green-light); }
.board .vletters i.on { background: var(--surface); color: var(--green); border-color: var(--on-green); }

/* --- Publication : photo pleine largeur, texte seul plus grand --- */
.fcard .post-photo { display: block; margin: .7rem -1rem 0; }
.fcard .post-photo img { display: block; width: 100%; max-height: 560px; object-fit: cover; border-radius: 0; background: var(--surface-2); }
.fcard .post-body { margin: .65rem 0 .15rem; }
.fcard .post-text { font-size: 1.06rem; line-height: 1.55; }

/* --- Réactions : emojis en sourdine tant qu'on n'a pas réagi, puis « Toi, Tom et 2 autres » --- */
.fcard .social { margin-top: .3rem; padding-top: .15rem; border-top: 0; }
.fcard .social-bar { gap: .1rem; }
.fcard .react { min-height: 40px; padding: 0 .45rem; border: 0; background: transparent; font-size: 1.2rem; }
.fcard .react > span[aria-hidden] { filter: grayscale(1); opacity: .65; transition: filter var(--ease), opacity var(--ease), transform var(--ease); }
.fcard .react:hover > span[aria-hidden], .fcard .react[aria-pressed="true"] > span[aria-hidden] { filter: none; opacity: 1; }
.fcard .react[aria-pressed="true"] { background: var(--green-tint); box-shadow: none; }
.fcard .react[aria-pressed="true"] > span[aria-hidden] { transform: scale(1.12); }
.fcard .react .n { font-size: .8rem; font-weight: 600; }
.fcard .reacters { padding: 0 0 .2rem; min-height: 28px; color: var(--ink); font-weight: 600; }
.fcard .reacters .reacters-emo { font-size: .85rem; }

/* --- Prochains matchs en pastilles rondes --- */
.stories-block { margin-top: .9rem; }
.stories-block .block-head { margin-bottom: .35rem; align-items: center; }
.stories-block h2.eyebrow { color: var(--muted); }
.stories {
  display: flex; gap: .85rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  margin: 0 -1rem; padding: .15rem 1rem .35rem;
}
.stories::-webkit-scrollbar { display: none; }
.story {
  flex: none; flex-direction: column; gap: 0; width: 72px; min-height: 0; padding: 0; border: 0; border-radius: 12px;
  background: transparent; color: var(--ink); font-weight: 400; scroll-snap-align: start;
}
.story-ring { position: relative; display: flex; width: 66px; height: 66px; padding: 2.5px; border-radius: 50%; background: var(--green); box-shadow: var(--shadow-xs); }
.story.mine .story-ring { background: conic-gradient(from 200deg, var(--green), var(--purple), var(--gold), var(--green)); }
.story-duo {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  border: 2.5px solid var(--bg); border-radius: 50%; background: var(--surface);
}
.story-duo .avatar { width: 30px; height: 30px; font-size: .75rem; box-shadow: 0 0 0 2px var(--surface); }
.story-duo .avatar + .avatar { margin-left: -9px; }
.story-bet {
  position: absolute; right: -1px; bottom: -1px; display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: var(--purple); color: var(--on-green); box-shadow: 0 0 0 2px var(--bg);
}
.story-bet .ico { width: 13px; height: 13px; }
.story-day { margin-top: .3rem; font-size: .74rem; font-weight: 600; white-space: nowrap; }
.story-time { font-size: .72rem; color: var(--muted); }
.story-add .story-ring { background: transparent; border: 1.5px dashed var(--field-border); padding: 3px; }
.story-plus { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: var(--surface); color: var(--green); }
.story-plus .ico { width: 26px; height: 26px; stroke-width: 2; }
.story:active .story-ring { transform: scale(.96); }

/* --- Météo résumée (téléphone) : une ligne, le détail s'ouvre au toucher --- */
.weather-mini {
  width: 100%; justify-content: flex-start; gap: .6rem; min-height: 48px; padding: 0 .9rem; margin: 0;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font-weight: 400; box-shadow: var(--shadow-xs);
}
.weather-mini .ico { width: 24px; height: 24px; color: var(--green); }
.wm-now b { font: 700 1.1rem var(--serif); }
.wm-verdict { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: .8rem; font-weight: 600; }
.wm-verdict.good { background: var(--green); color: var(--on-green); }
@media (min-width: 768px) { .weather-mini { display: none; } }

/* --- Menu ⋯ --- */
.more-box h2 { margin: 0 3rem .6rem 0; font-size: 1.15rem; }
.more-list { display: grid; gap: 2px; }
.more-row {
  display: flex; align-items: center; justify-content: flex-start; gap: .8rem; width: 100%; min-height: 52px; padding: 0 .8rem;
  border: 0; border-radius: 12px; background: transparent; color: var(--ink); font-weight: 500; font-size: 1rem; text-decoration: none;
}
.more-row:hover { background: var(--surface-2); }
.more-row > svg { width: 22px; height: 22px; flex: none; color: var(--green); }
.more-row > svg:not(.ico) { fill: currentColor; }
.more-row.danger-row, .more-row.danger-row > svg { color: var(--danger); }
.more-list .surface-chips { margin-top: .25rem; }

/* --- Agenda, classement, annuaire, fiche --- */
.plan-open { margin: .5rem 0; }
.planned { position: relative; }
.planned header { padding-right: 2.25rem; }
.planned header .more-btn { position: absolute; top: .45rem; right: .55rem; margin: 0; }
.howto { margin: .5rem 0 0; }
.howto summary { display: flex; align-items: center; gap: .35rem; min-height: 44px; cursor: pointer; color: var(--muted); font-size: .85rem; font-weight: 500; list-style: none; }
.howto summary::-webkit-details-marker { display: none; }
.howto summary::after { content: ''; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) translateY(-2px); transition: transform var(--ease); }
.howto[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.howto p { margin-top: 0; }
.rank-slot { display: inline-flex; justify-content: center; width: 26px; }
.rank-num { font: italic 600 1.05rem/1 var(--serif); color: var(--purple); }
.player-side .elo { min-width: 3.1rem; text-align: right; }
.admin-link { color: var(--muted) !important; font-size: .8rem; font-weight: 500; }
.stats-note { margin-top: -.2rem; }
.modal .sync { margin-bottom: .5rem; }

/* --- Téléphone : le fil va d'un bord à l'autre, comme un fil photo --- */
@media (max-width: 599px) {
  .feed .fcard { margin-inline: -1rem; border-radius: 0; border-left: 0; border-right: 0; }
  .feed.list { gap: 8px; }
}

/* ===================================================================== */
/* Ordinateur : un seul bandeau vert collé en haut (titre · onglets · actions) */
/* ===================================================================== */
@media (min-width: 768px) {
  #view-app > .masthead {
    position: sticky; top: 0; z-index: 10; padding: calc(.45rem + var(--safe-t)) 1.25rem .45rem;
    background: var(--grad-green-soft); box-shadow: var(--shadow-sm), inset 0 -1px 0 rgba(255, 255, 255, .06);
  }
  .masthead-inner { gap: 1.25rem; min-height: 54px; }
  .mast-text { flex: none; }
  .masthead .eyebrow, .mast-sub { display: none; }
  .mast-title { margin: 0; font-size: 1.45rem; }
  .mast-logo { width: 26px; height: 26px; }

  .bottom-nav {
    position: static; z-index: auto; flex: 1; display: flex; justify-content: center; gap: .2rem;
    padding: 0; border: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .bottom-nav button {
    flex-direction: row; gap: .45rem; min-height: 44px; padding: 0 .9rem; border-radius: 999px;
    color: var(--green-light); font-size: .92rem; font-weight: 500;
  }
  .bottom-nav button .ico { width: 21px; height: 21px; }
  .bottom-nav button:hover { background: rgba(255, 255, 255, .08); color: var(--on-green); }
  .bottom-nav button.active { background: rgba(255, 255, 255, .14); color: var(--on-green); font-weight: 600; }
  .bottom-nav button.active::after { display: none; }
  .bottom-nav button .badge { position: static; margin-left: .1rem; box-shadow: none; }
  /* « Saisir » : bouton blanc, la seule action pleine du bandeau */
  .bottom-nav .fab { order: 10; margin-left: .5rem; padding: 0 1.1rem; background: var(--surface); color: var(--green); font-weight: 600; box-shadow: none; }
  .bottom-nav .fab:hover { background: var(--green-light); color: var(--green); }
  .bottom-nav .fab .fab-circle { width: auto; height: auto; margin: 0; background: transparent; color: inherit; box-shadow: none; }
  .bottom-nav .fab .fab-circle .ico { width: 20px; height: 20px; }
  .bottom-nav .fab-dot { display: none; }
  .topbar-actions { flex: none; }

  /* La barre est en haut : rien à réserver en bas, la colonne de droite colle sous le bandeau. */
  main { padding-bottom: 3rem; }
  .toast { bottom: 24px; }
  .wpop.sheet { bottom: 0; }
  .lift { margin-top: 0 !important; }
  .home-me { border-radius: 16px; border-top: 1px solid var(--line); }
  .col-side { top: calc(64px + 1rem); }
}
/* Écran moyen : onglets en icônes seules (libellés gardés pour les lecteurs d'écran). */
@media (min-width: 768px) and (max-width: 1099px) {
  .bottom-nav button { padding: 0 .8rem; }
  .bottom-nav button > span:not([class]) {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}
@media (min-width: 900px) {
  body.chat-open .bottom-nav { right: auto; }
  body.chat-open #view-app > .masthead { margin-right: 380px; }
}

/* --- Doubles : deux avatars qui se chevauchent sur la ligne de la paire --- */
.board-duo { display: inline-flex; flex: none; }
.board-duo .avatar.sm + .avatar.sm { margin-left: -9px; }

/* ===================================================================== */
/* Mon profil : en-tête, onglets, infos expliquées ; fenêtre e-mail       */
/* ===================================================================== */
.pf-head { display: flex; align-items: center; gap: 1rem; margin: .1rem 3rem 1.1rem 0; }
.pf-avatar { position: relative; flex: none; width: 84px; height: 84px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.pf-avatar:hover { background: transparent; }
.pf-avatar .avatar { width: 84px; height: 84px; font-size: 2rem; margin: 0; box-shadow: 0 0 0 3px var(--surface), var(--shadow-sm); }
.pf-avatar-cam {
  position: absolute; right: -2px; bottom: -2px; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--grad-green-soft); color: var(--on-green); box-shadow: 0 0 0 3px var(--bg);
}
.pf-avatar-cam .ico { width: 16px; height: 16px; }
.pf-id { min-width: 0; }
.pf-id .eyebrow { color: var(--purple); }
.pf-name { font: 700 var(--fs-2xl)/1.1 var(--serif); letter-spacing: var(--track-display); margin: .15rem 0 0; overflow-wrap: anywhere; }
.pf-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem .75rem; margin: .4rem 0 0; color: var(--muted); font-size: .85rem; }
.pf-meta b { font: 700 1.05rem var(--serif); color: var(--green); font-variant-numeric: tabular-nums; }
.pf-meta sup { font-size: .6em; }
.pf-tabs { grid-template-columns: repeat(3, 1fr); margin: 0 0 1rem; }

.pf-progress { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem 1rem .7rem; box-shadow: var(--shadow-xs); }
.pf-progress-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.pf-progress-top b { font: 700 1.05rem var(--serif); }
.pf-bar { display: block; width: 100%; height: 6px; margin: .55rem 0 .3rem; }
.pf-bar .bg { fill: var(--surface-2); }
.pf-bar .fg { fill: var(--green); }
.pf-progress .hint { margin: 0; }

.pf-group { margin-top: 1.4rem; }
.pf-group-head { display: flex; align-items: flex-start; gap: .6rem; margin: 0 0 .6rem; }
.pf-group-head > .ico { width: 20px; height: 20px; margin-top: 3px; color: var(--green); }
.pf-group.private .pf-group-head > .ico { color: var(--purple); }
.pf-group-head h3 { margin: 0; }
.pf-group-head .hint { margin: .05rem 0 0; }
.pf-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-xs); overflow: hidden; }
.pf-item { padding: .85rem 1rem .95rem; }
.pf-item + .pf-item, .pf-link + .pf-item { border-top: 1px solid var(--line-soft); }
.pf-item-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pf-label { font-weight: 600; }
.pf-item > .hint { margin: .15rem 0 .6rem; }
.pf-note .hint { margin: 0; }
.pf-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.pf-state {
  flex: none; padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  font: 600 .75rem/1 var(--sans); letter-spacing: .05em; font-variant-caps: all-small-caps; font-variant-numeric: tabular-nums;
}
.pf-state.ok { background: var(--green-tint); color: var(--green); }
.pf-state.todo { background: var(--purple-tint); color: var(--purple); }
.pf-state.wait { background: var(--surface-2); color: var(--muted); }
.pf-item .idcard { background: var(--bg); border-color: var(--line-soft); box-shadow: none; }
.pf-item .motto-big { margin: 0 0 .55rem; }
.pf-item .idcard-form { margin: 0; }
.pf-link {
  display: flex; align-items: center; justify-content: flex-start; gap: .75rem; width: 100%; min-height: 66px; padding: .7rem 1rem;
  border: 0; border-radius: 0; background: transparent; color: var(--ink); font-weight: 400; text-align: left;
}
.pf-link:hover { background: var(--bg-deep); }
.pf-link > .ico:first-child { width: 22px; height: 22px; color: var(--purple); }
.pf-link > .ico:last-child { width: 18px; height: 18px; color: var(--muted); }
.pf-link-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pf-link-text b { font-weight: 600; }
.pf-link-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .85rem; }
#pf-settings > h3:first-child { margin-top: 0; }
#pf-account { margin-top: .25rem; }
.todo-btns { display: flex; flex-direction: column; gap: .35rem; }

/* Fenêtre e-mail */
.email-modal { max-width: 460px; }
.email-hero {
  display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: .1rem 0 .7rem;
  border-radius: 50%; background: var(--purple-tint); color: var(--purple);
}
.email-hero .ico { width: 26px; height: 26px; }
.email-modal h2 { margin: 0 3rem .2rem 0; }
.steps { list-style: none; display: flex; gap: .45rem; padding: 0; margin: .6rem 0 1.15rem; counter-reset: step; }
.steps li {
  flex: 1; display: flex; align-items: center; gap: .4rem; padding-top: .55rem; border-top: 3px solid var(--line);
  color: var(--muted); font-size: .78rem; font-weight: 600; counter-increment: step;
}
.steps li::before {
  content: counter(step); display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); font-size: .7rem;
}
.steps li.current { color: var(--green); border-top-color: var(--green); }
.steps li.current::before { background: var(--green); color: var(--on-green); }
.steps li.done { color: var(--green); border-top-color: var(--green-light); }
.steps li.done::before { content: '✓'; background: var(--green-tint); color: var(--green); }
.why { list-style: none; display: grid; gap: .6rem; padding: 0; margin: 0 0 1.1rem; }
.why li { display: flex; align-items: flex-start; gap: .65rem; font-size: .93rem; line-height: 1.4; }
.why .ico { width: 20px; height: 20px; margin-top: 1px; color: var(--green); }
.code-input { text-align: center; font: 700 1.6rem/1 var(--serif); letter-spacing: .3em; min-height: 58px; }
.code-input::placeholder { color: var(--line); letter-spacing: .3em; }
.email-done { padding: .9rem 1rem; margin-bottom: .6rem; border-radius: var(--radius); background: var(--green-tint); }
.email-done .notif-on { margin: 0 0 .15rem; }
.email-done .email-addr { margin: 0; font: 600 1.05rem var(--serif); color: var(--ink); }
.email-modal .stack { margin-top: .6rem; }