/* =========================================================================
   /RAM Club — charte /RAM JA (21/10/2026)
   Même famille que le logiciel /RAM JA : angles droits, ombres dures décalées,
   barre du bas flottante foncée avec curseur citron qui suit le doigt.
   Les couleurs restent celles du club (réglées dans app.js) : ce fichier ne
   change que les formes, les ombres et la navigation. Chargé après app.css.
   ========================================================================= */
:root { --r: 0px; --rb: 0px; --ram-hard: rgba(0, 0, 0, .55); }

/* ---------- angles droits partout (sauf avatars et petites pastilles) ---------- */
*, *::before, *::after { border-radius: 0 !important; }
.av, .cam, .avbtn, .dot, .live i, .dots i, .tabs .cnt, .medal { border-radius: 50% !important; }

/* ---------- titres d'affiche ---------- */
.top h1 { transform: rotate(-1.2deg); transform-origin: left center; }

/* ---------- boutons « sticker » : ombre dure rose, qui s'écrase à l'appui ---------- */
.btn:not(.ghost), .addfab, .ib.acc {
  box-shadow: 4px 4px 0 var(--accent2, var(--hot));
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn.hot { box-shadow: 4px 4px 0 var(--accent); }
.btn:not(.ghost):active, .addfab:active, .ib.acc:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--accent2, var(--hot)); }
.btn.ghost { box-shadow: inset 0 0 0 1.5px var(--line); }

/* ---------- cartes : bord fin et ombre dure, comme les fiches de /RAM JA ---------- */
.card { border: 1px solid var(--line); box-shadow: 5px 5px 0 var(--ram-hard); }
.sheet { border-top: 3px solid var(--accent); }

/* ---------- pastilles d'en-tête (crest du club) et stories : carrés penchés ---------- */
.crest { transform: rotate(-3deg); box-shadow: 3px 3px 0 var(--accent2, var(--hot)); }
.ring { transform: rotate(-2deg); box-shadow: 4px 4px 0 var(--ram-hard); }
.story:nth-child(even) .ring { transform: rotate(2deg); }

/* ---------- barre du bas façon /RAM JA ----------
   Plus foncée que les cartes pour bien ressortir, curseur citron carré avec ombre rose,
   et toute la barre grossit un peu pendant qu'on glisse le doigt dessus. */
.tabs {
  border: 1px solid var(--line);
  background: color-mix(in srgb, color-mix(in srgb, var(--bg) 45%, #000) 92%, transparent);
  box-shadow: 5px 5px 0 var(--ram-hard);
  transform-origin: 50% 100%;
  transition: transform .22s cubic-bezier(.2, .9, .3, 1.25), box-shadow .22s;
}
.tabs.drag { transform: scale(1.07) translateY(-3px); box-shadow: 7px 7px 0 var(--ram-hard); }
/* club aux couleurs claires (app.js pose color-scheme: light sur la page) : barre claire, un ton sous les cartes */
:root[style*="color-scheme: light"] { --ram-hard: rgba(0, 0, 0, .16); }
:root[style*="color-scheme: light"] .tabs { background: color-mix(in srgb, color-mix(in srgb, var(--card) 84%, var(--fg)) 94%, transparent); }
.pill { background: var(--accent) !important; box-shadow: 3px 3px 0 var(--accent2, var(--hot)); top: 6px; bottom: 6px; }
.tabs button { z-index: 1; transition: color .2s; }
.tabs button[aria-current="page"] { color: var(--on-accent); }
.tabs.drag button[aria-current="page"] { color: var(--muted); }
.tabs.drag button.hov { color: var(--on-accent); }
.tabs button svg { transition: transform .15s; }
.tabs.drag button.hov svg { transform: scale(1.15); }
.tabs .cnt { box-shadow: none; border: 0; }   /* pastille : un simple rond rouge avec le nombre, sans contour */

/* ---------- logo /RAM Club ---------- */
.powered img { background: transparent; padding: 0; height: 46px; }
.ram-logo { display: block; height: 52px; width: auto; }
.ram-about { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 0 6px; color: var(--muted); font-size: 13px; text-align: center; }
.ram-about b { font-family: var(--f-sub); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; color: var(--fg); }

/* écran de lancement : logo /RAM Club pendant le chargement */
.ram-splash { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; background: #0B0B0B; transition: opacity .35s ease, visibility .35s; }
.ram-splash img { width: min(62%, 260px); transform: rotate(-2deg); animation: ram-in .5s cubic-bezier(.2, .9, .3, 1.2) both; }
.ram-splash.out { opacity: 0; visibility: hidden; }
@keyframes ram-in { from { opacity: 0; transform: rotate(-6deg) scale(.86); } to { opacity: 1; transform: rotate(-2deg) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .tabs, .btn, .addfab, .ram-splash img { transition: none !important; animation: none !important; }
}

/* =========================================================================
   VERSION ORDINATEUR (1024 px et plus) : menu latéral à gauche, contenu centré,
   fenêtres au centre de l'écran. Pratique pour écrire des articles, créer des
   sondages et administrer le club au clavier et à la souris.
   ========================================================================= */
@media (min-width: 1024px) {
  :root { --side: 248px; }
  body { display: block; padding: 0; background: var(--bg); }
  .phone { width: 100%; height: 100%; border: 0; border-radius: 0; padding-left: var(--side); }

  /* menu latéral : la barre du bas devient un rail vertical foncé */
  .tabs, :root[style*="color-scheme: light"] .tabs {
    position: absolute; left: 0; top: 0; bottom: 0; right: auto; width: var(--side);
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px;
    padding: calc(132px + env(safe-area-inset-top, 0px)) 14px 96px;
    border: 0; border-right: 1px solid var(--line); box-shadow: none; transform: none !important;
    background: color-mix(in srgb, var(--bg) 40%, #000);
    -webkit-backdrop-filter: none; backdrop-filter: none; touch-action: auto;
  }
  :root[style*="color-scheme: light"] .tabs { background: color-mix(in srgb, var(--card) 90%, var(--fg)); }
  .tabs::before {
    content: ""; position: absolute; left: 22px; top: calc(26px + env(safe-area-inset-top, 0px)); width: 176px; height: 80px;
    background: var(--rail-logo, url("img/ram-club-blanc.png")) left center / contain no-repeat;
  }
  
  .tabs button {
    flex: none; flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 50px; padding: 0 16px;
    font-size: 17px; letter-spacing: .03em; color: var(--muted);
  }
  .tabs button:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 9%, transparent); }
  .tabs button[aria-current="page"], .tabs button[aria-current="page"]:hover { color: var(--on-accent); background: transparent; }
  .tabs .cnt { position: static; margin-left: auto; }
  .tabs .pill { left: 14px !important; right: 14px; top: 0 !important; bottom: auto !important; width: auto !important; }

  /* barre du haut, bandeaux et bouton « Ajouter du contenu » : dans la colonne de droite */
  .top { left: var(--side); padding-left: max(28px, calc((100% - var(--side) - 760px) / 2)); padding-right: max(20px, calc((100% - var(--side) - 760px) / 2)); }
  .nstack { left: calc(var(--side) + 24px); right: 24px; max-width: 520px; margin-left: auto; }
  .addfab { left: 14px; right: auto; width: calc(var(--side) - 28px); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .phone.fab #main { padding-bottom: 40px; }
  #main { padding-bottom: 40px; }

  /* contenu centré sur une colonne lisible */
  #main > * { max-width: 760px; margin-left: auto; margin-right: auto; }
  .pad { padding: 16px 24px 40px; gap: 22px; }

  /* fenêtres : au centre de l'écran, plus de feuille qui monte du bas */
  .back { position: fixed; left: var(--side); align-items: center; justify-content: center; padding: 32px; }
  .back .sheet { width: min(640px, 100%); max-height: 86vh; border: 1px solid var(--line); border-top: 3px solid var(--accent); box-shadow: 8px 8px 0 var(--ram-hard); }
  .back .grab { display: none; }
  .back.viewer { left: 0; padding: 0; }
  .foot { padding-left: max(24px, calc((100% - 760px) / 2)); padding-right: max(24px, calc((100% - 760px) / 2)); }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .back.anim .sheet { animation: ram-pop .22s cubic-bezier(.2, .9, .3, 1.2); }
}
@keyframes ram-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- tablette (481 à 1023 px) : plein écran, contenu centré, barre du bas centrée ---------- */
@media (min-width: 481px) and (max-width: 1023px) {
  body { display: block; padding: 0; background: var(--bg); }
  .phone { width: 100%; height: 100%; border: 0; border-radius: 0; }
  #main > * { max-width: 680px; margin-left: auto; margin-right: auto; }
  .tabs, .addfab { left: max(16px, calc(50% - 300px)); right: max(16px, calc(50% - 300px)); }
  .top { padding-left: max(16px, calc(50% - 340px)); padding-right: max(12px, calc(50% - 340px)); }
  .back { align-items: center; justify-content: center; padding: 24px; }
  .back .sheet { width: min(600px, 100%); max-height: 86%; border: 1px solid var(--line); border-top: 3px solid var(--accent); box-shadow: 8px 8px 0 var(--ram-hard); }
  .back .grab { display: none; }
  .back.viewer { padding: 0; }
}

/* ---------- bloc « Compte /RAM » en haut du profil ---------- */
.ram-acc { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent); box-shadow: 5px 5px 0 var(--ram-hard); }
.ram-acc[hidden] { display: none; }
.ram-acc .grow { min-width: 160px; display: flex; flex-direction: column; gap: 2px; }
.ram-acc b { font-family: var(--f-sub); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; color: var(--muted); }
.ram-acc span { font-weight: 600; overflow-wrap: anywhere; }
.ram-acc small { color: var(--muted); font-size: 12px; }
.ram-acc-logo { height: 34px; width: auto; flex: none; }

/* =========================================================================
   Messagerie façon WhatsApp (22/10/2026)
   Bulle carrée = nom + badges + message + heure ; avatar dehors ; messages
   enchaînés empilés sans avatar ni nom ; apparition en petit « pop ».
   ========================================================================= */
.chat { gap: 2px; padding-top: 12px; }
.chat > .note, .chat > .lphelp { margin-bottom: 8px; }
.msg { gap: 8px; align-items: flex-start; margin-top: 12px; }
.msg.cont { margin-top: 4px; }
.msg .grow { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.msg.me .grow { align-items: flex-end; }
.msg .avsp { flex: none; width: 34px; }
/* même colonne pour l'avatar (cadre de trophée compris) et l'espace qui le remplace : les bulles s'alignent */
.msg > .av, .msg > .avsp { margin: 2px !important; }
.daysep { display: flex; justify-content: center; margin: 16px 0 4px; }
.daysep span { font-family: var(--f-sub); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; background: var(--card2); color: var(--muted); border: 1px solid var(--line); box-shadow: 2px 2px 0 var(--ram-hard); }
.msg .av.sm { flex: none; }
.bubw { max-width: 86%; }
.bub {
  display: flex; flex-direction: column; gap: 3px; margin-top: 0;
  padding: 7px 10px 6px; background: var(--card); border: 1px solid var(--line);
  box-shadow: 3px 3px 0 var(--ram-hard); white-space: normal; text-align: left;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.bub .hd { gap: 6px; margin-bottom: 1px; }
.bub .hd .nm { color: var(--accent); font-weight: 700; }
.bub .tx { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; }
.bub time { align-self: flex-end; font-size: 11px; line-height: 1; color: var(--muted); margin-top: 1px; }
.bub .quote { margin-top: 0; }
.bub .mph { margin-top: 2px; width: 230px; }
.msg.me .bub { background: var(--accent); color: var(--on-accent); border-color: transparent; box-shadow: 3px 3px 0 var(--accent2, var(--hot)); }
.msg.me .bub time { color: color-mix(in srgb, var(--on-accent) 62%, transparent); }
.msg.me .bub .quote { background: color-mix(in srgb, var(--on-accent) 12%, transparent); color: var(--on-accent); border-left-color: var(--on-accent); }
.msg .reacts { margin-top: 5px; }
/* apparition : la bulle arrive du bas en grossissant un peu (de la gauche pour les autres, de la droite pour moi) */
@keyframes ramPopL { from { opacity: 0; transform: translate(-14px, 10px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes ramPopR { from { opacity: 0; transform: translate(14px, 10px) scale(.94); } to { opacity: 1; transform: none; } }
.msg.in { animation: ramPopL .32s cubic-bezier(.2, 1.1, .35, 1.15) both; }
.msg.me.in { animation-name: ramPopR; }
@media (prefers-reduced-motion: reduce) { .msg.in { animation: fade .2s; } }

/* ---------- barre du bas : pictogramme noir sur le curseur citron (jamais jaune sur jaune) ---------- */
.tabs button[aria-current="page"] svg { color: var(--on-accent); }
.tabs.drag button[aria-current="page"] svg { color: var(--muted); }
.tabs.drag button.hov svg { color: var(--on-accent); }

/* ---------- fond de l'appli : motif fixe (points, quadrillage, diagonales ou uni), comme /RAM JA ----------
   Le motif reste immobile pendant que le contenu défile ; il prend la couleur du texte du club, très atténuée. */
.motif { position: absolute; inset: 0; pointer-events: none; z-index: 0; --mc: color-mix(in srgb, var(--fg) 8%, transparent); }
:root[data-motif="dots"] .motif, :root:not([data-motif]) .motif { background: radial-gradient(var(--mc) 1px, transparent 1.3px) 0 0 / 7px 7px; }
:root[data-motif="grid"] .motif { background: linear-gradient(var(--mc) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, var(--mc) 1px, transparent 1px) 0 0 / 56px 56px; }
:root[data-motif="stripes"] .motif { --mc: color-mix(in srgb, var(--fg) 4%, transparent); background: repeating-linear-gradient(-45deg, var(--mc) 0 3px, transparent 3px 26px); }
:root[data-motif="plain"] .motif { background: none; }
/* motifs /RAM (padel, tennis, padel et tennis) : tuiles sans couture en masque, colorées par le thème ;
   ::before porte les pictogrammes (couleur du texte), ::after les traces d'accent (couleur d'accent du club) */
:root[data-motif="ram-padel"] { --mk: url(motifs/w30/padel-base.png); --ma: url(motifs/w30/padel-accent.png); }
:root[data-motif="ram-tennis"] { --mk: url(motifs/w30/tennis-base.png); --ma: url(motifs/w30/tennis-accent.png); }
:root[data-motif="ram-mixte"] { --mk: url(motifs/w30/mixte-base.png); --ma: url(motifs/w30/mixte-accent.png); }
:root[data-motif^="ram-"] .motif { background: none; }
:root[data-motif^="ram-"] .motif::before, :root[data-motif^="ram-"] .motif::after { content: ''; position: absolute; inset: 0;
  -webkit-mask: var(--mk) 0 0 / 800px 800px repeat; mask: var(--mk) 0 0 / 800px 800px repeat; background: color-mix(in srgb, var(--fg) 9%, transparent); }
:root[data-motif^="ram-"] .motif::after { -webkit-mask-image: var(--ma); mask-image: var(--ma); background: color-mix(in srgb, var(--accent) 14%, transparent); }
#main, .foot { position: relative; z-index: 1; }
.motifs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.motifs button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border: 1.5px solid var(--line); background: var(--card2); font-family: var(--f-sub); font-weight: 600; font-size: 12px; color: var(--fg); }
.motifs button[aria-pressed="true"] { border-color: var(--accent); box-shadow: 3px 3px 0 var(--accent2, var(--hot)); }
.motifs i { width: 100%; height: 38px; background-color: var(--bg); --mc: color-mix(in srgb, var(--fg) 22%, transparent); }
.motifs i.dots { background-image: radial-gradient(var(--mc) 1px, transparent 1.3px); background-size: 7px 7px; }
.motifs i.grid { background-image: linear-gradient(var(--mc) 1px, transparent 1px), linear-gradient(90deg, var(--mc) 1px, transparent 1px); background-size: 14px 14px; }
.motifs i.stripes { background-image: repeating-linear-gradient(-45deg, var(--mc) 0 2px, transparent 2px 9px); }
.motifs i[class^="ram-"] { position: relative; overflow: hidden; }
.motifs i[class^="ram-"]::before { content: ''; position: absolute; inset: 0; background: var(--mc); -webkit-mask: var(--mi) 0 0 / 320px 320px; mask: var(--mi) 0 0 / 320px 320px; }
.motifs i.ram-padel { --mi: url(motifs/w30/padel-base.png); } .motifs i.ram-tennis { --mi: url(motifs/w30/tennis-base.png); } .motifs i.ram-mixte { --mi: url(motifs/w30/mixte-base.png); }

/* ---------- retour en arrière en glissant depuis le bord gauche ---------- */
#main.swipe-back, #top.swipe-back, .foot.swipe-back { transition: none !important; }
#main.swipe-done, #top.swipe-done, .foot.swipe-done { transition: transform .18s ease-out !important; }
.phone.swiping::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--sw, 0px); z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent); }

/* =========================================================================
   Plein écran dans tous les formats (22/10/2026)
   L'appli occupe tout l'écran, quel que soit l'appareil : elle est posée sur
   l'écran entier (et pas sur la hauteur du document, que l'iPhone raccourcit
   dans l'appli installée). Le contenu passe sous la barre d'accueil et sous
   l'encoche ; seuls les textes et les boutons gardent leurs marges de sécurité.
   ========================================================================= */
.phone { position: fixed; inset: 0; width: auto; height: auto; border: 0; border-radius: 0; }
/* paysage (téléphone et iPad) : marges à gauche et à droite pour l'encoche et les coins arrondis */
#main { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.top { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
.foot { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.phone.kb .foot { padding-bottom: 10px; }
.tabs, .addfab { left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); }
.nstack { left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); }
/* la barre de navigation passe au-dessus de tout le contenu, bouton « Ajouter du contenu » compris,
   avec un petit espace entre les deux (ombre dure de la barre comprise) */
.tabs { z-index: 8; }
.addfab { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
.phone.fab #main { padding-bottom: calc(170px + env(safe-area-inset-bottom, 0px)); }
#main { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
.phone.notabs #main { padding-bottom: 0; }
@media (min-width: 481px) and (max-width: 1023px) {
  .top { padding-left: max(16px, env(safe-area-inset-left, 0px), calc(50% - 340px)); padding-right: max(12px, env(safe-area-inset-right, 0px), calc(50% - 340px)); }
  .tabs, .addfab { left: max(16px, env(safe-area-inset-left, 0px), calc(50% - 300px)); right: max(16px, env(safe-area-inset-right, 0px), calc(50% - 300px)); }
}
@media (min-width: 1024px) {
  .phone { padding-left: calc(var(--side) + env(safe-area-inset-left, 0px)); }
  .tabs, :root[style*="color-scheme: light"] .tabs { left: 0; right: auto; padding-left: calc(14px + env(safe-area-inset-left, 0px)); width: calc(var(--side) + env(safe-area-inset-left, 0px)); padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .addfab { left: calc(14px + env(safe-area-inset-left, 0px)); right: auto; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .top { left: calc(var(--side) + env(safe-area-inset-left, 0px)); }
  .nstack { left: calc(var(--side) + 24px); right: max(24px, env(safe-area-inset-right, 0px)); }
  #main, .phone.fab #main { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
}

/* =========================================================================
   Identité du club (22/10/2026)
   Barre du haut : titre et sous-titre seuls, précédés du logo entier du club
   sur téléphone et tablette. Sur ordinateur, le logo est en haut du menu
   latéral : pas de doublon dans la barre du haut.
   ========================================================================= */
.toplogo { display: block; flex: none; height: 38px; width: auto; max-width: 128px; object-fit: contain; object-position: left center; margin-right: 4px; }
@media (min-width: 1024px) { .toplogo { display: none; } .modebtn { display: none; } }
/* aperçus des logos dans « Apparence du club » : sur fond sombre et sur fond clair */
.lkl { display: flex; align-items: center; justify-content: center; height: 72px; margin-top: 8px; padding: 10px; border: 1px solid var(--line); }
.lkl.dk { background: #0B0B0B; }
.lkl.lt { background: #F3F5FA; }
.lkl img { max-height: 100%; max-width: 100%; object-fit: contain; }
/* le fond de la page reprend celui du club */
html, body { background: var(--bg); }
/* iPhone (iOS 26), appli installée : la fenêtre est plus courte que l'écran de la hauteur de la barre d'état
   (bug WebKit 301108), et l'iPhone ne dessine rien en dessous. Une page au moins aussi haute que l'écran
   récupère tout l'écran : on la rallonge de la hauteur de la barre d'état (100lvh au plus). */
@media (display-mode: standalone) {
  html { min-height: min(100lvh, calc(100% + env(safe-area-inset-top, 0px))); }
}
/* barre du bas : marge confortable avec les coins arrondis de l'écran du téléphone */
@media (max-width: 480px) {
  .tabs, .addfab { left: max(14px, env(safe-area-inset-left, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); }
  .tabs { bottom: calc(max(12px, env(safe-area-inset-bottom, 0px) - 6px) + 8px); }
  .addfab { bottom: calc(max(12px, env(safe-area-inset-bottom, 0px) - 6px) + 88px); }
}

/* ---------- actualiser en tirant vers le bas : indicateur sous la barre du haut ---------- */
.ptr { position: absolute; left: 50%; z-index: 4; width: 34px; height: 34px; display: grid; place-items: center; opacity: 0; pointer-events: none;
  background: var(--card); border: 1px solid var(--line); box-shadow: 3px 3px 0 var(--accent2, var(--hot)); transform: translate(-50%, -34px); }
.ptr i { width: 16px; height: 16px; border: 2.5px solid var(--accent); border-top-color: transparent; border-radius: 50% !important; }
.ptr.spin i { animation: ptrSpin .7s linear infinite; }
@keyframes ptrSpin { to { transform: rotate(360deg); } }
.ptr.ptr-back, #main.ptr-back { transition: transform .25s ease, opacity .25s ease; }

/* ---------- séries de messages façon WhatsApp (22/10/2026) ----------
   Nom en haut du premier message, avatar en bas à côté du dernier, et une pointe anguleuse
   (bulle de BD) sur ce dernier message, tournée vers l'avatar ; à droite pour mes messages. */
.msg { align-items: flex-end; }
.bub.tail { position: relative; }
.msg:not(.me) .bub.tail::before, .msg:not(.me) .bub.tail::after { content: ''; position: absolute; bottom: -1px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.msg:not(.me) .bub.tail::before { left: -12px; width: 12px; height: 13px; background: var(--line); }
.msg:not(.me) .bub.tail::after { left: -10px; bottom: 0; width: 11px; height: 11px; background: var(--card); }
.msg.me .bub.tail::after { content: ''; position: absolute; right: -11px; bottom: 0; width: 11px; height: 12px; background: var(--accent); clip-path: polygon(0 0, 100% 100%, 0 100%); }
.msg.me .bubw { margin-right: 10px; }
.msg.me .reacts { margin-right: 10px; }
.msg, .msg.me { overflow: visible; }   /* la pointe dépasse de la bulle */

/* ---------- barre de saisie des discussions : bandeau opaque, comme la barre du haut, sur toute la largeur ---------- */
.phone > .foot { background: var(--bg); }
.phone.withfoot #main { padding-bottom: 0; }
/* photo de profil du club : remplit tout le cercle (les coins d'une image carrée sont rognés) */
.av.club.logo, .crest.logo { background-size: cover; background-color: transparent; }
.av { background-size: cover; background-position: center; background-repeat: no-repeat; }

/* ---------- trophées : chaque section sur un fond uni (les trophées pas encore obtenus restent lisibles) ---------- */
.tsec { background: var(--card); border: 1px solid var(--line); box-shadow: 5px 5px 0 var(--ram-hard); padding: 4px 14px; }
.tsec .tro:last-child, .tsec .item:last-child { border-bottom: 0; }
.thero.tsec { padding: 14px; }
.frames.tsec { padding: 6px 10px 14px; }

/* ---------- boutons « contour » : plus de bouton transparent sur le fond à motif ----------
   Fond plein ton sur ton : un gris à peine plus clair que le fond en mode sombre, la couleur du fond en mode clair. */
.btn.ghost { background: color-mix(in srgb, var(--fg) 7%, var(--bg)); }
:root[style*="color-scheme: light"] .btn.ghost { background: var(--bg); }
.thero .grow > .muted.small { display: block; }   /* points et trophées sur deux lignes distinctes */

/* =========================================================================
   Onglets sur ordinateur, comme la fiche tournoi de /RAM JA (22/10/2026) :
   une rangée d'onglets carrés posée sur une grande carte ; l'onglet actif
   prend la couleur du club, un trait de la même couleur le relie à la carte.
   ========================================================================= */
@media (min-width: 1024px) {
  #main > .seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 18px 0 0; margin-bottom: 0; overflow: visible; background: var(--bg); border-bottom: 2px solid var(--accent); }
  #main > .seg button { min-height: 42px; padding: 0 16px; border: 2px solid var(--line); border-bottom: 0; background: var(--card2); color: var(--muted);
    font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; box-shadow: none !important; transform: none !important; }
  #main > .seg button:hover { color: var(--fg); background: var(--card); }
  #main > .seg button[aria-selected="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
  #main > .seg + * { background: var(--card); border: 1px solid var(--line); border-top: 0; box-shadow: 6px 6px 0 var(--ram-hard); margin-bottom: 40px; }
  #main > .seg + * .card { box-shadow: 3px 3px 0 var(--ram-hard); }
}

/* accueil : la frise de raccourcis respire sous la barre du haut (titre, notifications) */
.stories { padding-top: 20px; }
/* liste des groupes de discussion : tous dans la même carte (ordinateur), séparés par un trait */
.lis > .li:last-child { border-bottom: 0; }
/* téléphone et tablette : même carte opaque, ton sur ton, que sur ordinateur (le motif ne passe plus derrière le texte) */
@media (max-width: 1023px) {
  .lis { background: var(--card); border: 1px solid var(--line); box-shadow: 4px 4px 0 var(--ram-hard); margin: 12px 0 18px; }
  .lis > .li { border-bottom: 1px solid var(--line); }
}
/* palmarès : chaque résultat dans son propre cadre uni */
.palm .res { background: var(--card); border: 1px solid var(--line); padding: 8px 12px; margin-bottom: 8px; box-shadow: 3px 3px 0 var(--ram-hard); }
.palm .swipe { border-bottom: 0; margin-bottom: 8px; gap: 8px; }
.palm .swipe .res { margin-bottom: 0; box-shadow: none; }
/* ordinateur (souris) : pas de glissement, la corbeille est toujours visible au bout de la ligne */
@media (hover: hover) and (pointer: fine) {
  .palm .swipe { overflow: visible; gap: 0; box-shadow: 3px 3px 0 var(--ram-hard); }
  .palm .swipe .res { flex: 1 1 auto; min-width: 0; }
  .palm .swipe .del { flex: 0 0 48px; border-radius: 0; background: var(--card); color: var(--muted); border: 1px solid var(--line); border-left: 0; cursor: pointer; transition: background .15s, color .15s; }
  .palm .swipe .del:hover { background: var(--hot); color: var(--on-hot); }
  .palm .swipehint { display: none; }
}

/* =========================================================================
   VERSION ORDINATEUR, direction artistique de /RAM JA (22/10/2026)
   - menu principal : colonne étroite et sombre, logo /RAM Club en haut,
     pictogramme au-dessus du libellé, sans contour ;
   - pages à onglets (Groupes, Agenda, École, Club) : sous-menu latéral plus
     large, un ton plus clair, sans contour, comme le menu d'un tournoi ;
   - logo du club au centre de la barre du haut ;
   - notifications : panneau pleine hauteur qui glisse depuis la droite.
   ========================================================================= */
@media (min-width: 1024px) {
  :root { --side: 92px; --sub: 236px; }
  /* menu principal */
  .tabs, :root[style*="color-scheme: light"] .tabs {
    width: calc(var(--side) + env(safe-area-inset-left, 0px)); padding: calc(108px + env(safe-area-inset-top, 0px)) 0 calc(96px + env(safe-area-inset-bottom, 0px)) env(safe-area-inset-left, 0px);
    align-items: center; gap: 4px; border: 0 !important; box-shadow: none !important; background: color-mix(in srgb, var(--bg) 35%, #000);
  }
  :root[style*="color-scheme: light"] .tabs { background: #14161C; }
  .tabs::before { left: calc(12px + env(safe-area-inset-left, 0px)); top: calc(22px + env(safe-area-inset-top, 0px)); width: 68px; height: 62px; background: url("img/ram-club-blanc.png") center / contain no-repeat !important; }
  .tabs .pill { display: none !important; }
  .tabs button {
    flex-direction: column; justify-content: center; gap: 5px; width: 72px; min-height: 60px; padding: 8px 2px; position: relative;
    font-family: var(--f-body); font-weight: 600; font-size: 11px; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .62); background: transparent;
  }
  .tabs button svg { width: 22px; height: 22px; }
  .tabs button:hover { color: #fff; background: rgba(255, 255, 255, .06); }
  .tabs button[aria-current="page"], .tabs button[aria-current="page"]:hover { color: #fff; background: rgba(255, 255, 255, .09); }
  .tabs button[aria-current="page"] svg { color: var(--accent); }
  .tabs button[aria-current="page"]::before { content: ''; position: absolute; left: -10px; top: 14px; bottom: 14px; width: 4px; background: var(--accent); }
  .tabs .cnt { position: absolute; top: 4px; right: 10px; margin: 0; }
  /* bouton « Ajouter du contenu » : en bas du menu, pictogramme et libellé */
  .addfab { left: calc(10px + env(safe-area-inset-left, 0px)) !important; width: 72px !important; right: auto !important; bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    flex-direction: column; gap: 4px; min-height: 66px; padding: 8px 4px; font-size: 10px; line-height: 1.1; text-align: center; white-space: normal; }
  /* barre du haut : logo du club au centre */
  .top { position: absolute; }
  .toplogo, .toplogo.sub { display: block !important; position: absolute; left: 50%; top: calc(50% + env(safe-area-inset-top, 0px) / 2); transform: translate(-50%, -50%); height: 44px; max-width: 200px; margin: 0; }
  /* sous-menu des pages à onglets */
  .phone.hassub { padding-left: calc(var(--side) + var(--sub) + env(safe-area-inset-left, 0px)); }
  .phone.hassub .top { left: calc(var(--side) + var(--sub) + env(safe-area-inset-left, 0px)); }
  #main > .seg {
    position: fixed !important; top: 0 !important; bottom: 0; left: calc(var(--side) + env(safe-area-inset-left, 0px)); width: var(--sub); z-index: 6;
    display: flex; flex-direction: column; flex-wrap: nowrap; gap: 4px; margin: 0; max-width: none;
    padding: calc(96px + env(safe-area-inset-top, 0px)) 14px 24px; border: 0 !important; overflow-y: auto;
    background: color-mix(in srgb, var(--fg) 6%, var(--bg));
  }
  #main > .seg button {
    width: 100%; justify-content: flex-start; gap: 13px; min-height: 48px; padding: 0 16px; border: 0 !important;
    font-family: var(--f-sub); font-weight: 700; font-size: 17px; letter-spacing: .06em; text-transform: uppercase;
    color: color-mix(in srgb, var(--fg) 72%, transparent); background: transparent; position: relative; z-index: 0;
  }
  #main > .seg button svg { width: 21px; height: 21px; flex: none; }
  #main > .seg button:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 9%, transparent); }
  /* onglet actif : bandeau de la couleur du club légèrement penché, comme dans /RAM JA */
  #main > .seg button[aria-selected="true"] { color: var(--on-accent); background: transparent; }
  #main > .seg button[aria-selected="true"]::before { content: ''; position: absolute; inset: 3px 4px; background: var(--accent); transform: rotate(-1.5deg); box-shadow: 3px 3px 0 var(--accent2, var(--hot)); z-index: -1; }
  #main > .seg + * { border-top: 1px solid var(--line); margin-top: 18px; }
  /* notifications : panneau latéral pleine hauteur, depuis la droite */
  .back.side { left: 0 !important; justify-content: flex-end; align-items: stretch; padding: 0 !important; }
  .back.side .sheet { width: min(440px, 92vw); height: 100%; max-height: none !important; border: 0 !important; border-left: 3px solid var(--accent) !important;
    box-shadow: -8px 0 0 var(--ram-hard) !important; padding-top: env(safe-area-inset-top, 0px); }
  .back.side.anim .sheet { animation: ramSlideL .26s cubic-bezier(.2, .9, .3, 1) !important; }
  .back.side .grab { display: none; }
}
@keyframes ramSlideL { from { transform: translateX(100%); } to { transform: none; } }
/* fermeture du volet latéral : il ressort par la droite */
@media (min-width: 1024px) {
  .back.side.out { animation: ramFadeOut .22s ease-in forwards; pointer-events: none; }
  .back.side.out .sheet { animation: ramSlideOut .22s cubic-bezier(.4, 0, .9, .6) forwards !important; }
}
@keyframes ramSlideOut { to { transform: translateX(100%); } }
@keyframes ramFadeOut { to { opacity: 0; } }
/* ordinateur : le sous-menu glisse en entrant (page qui en a un) et en sortant (page qui n'en a pas) */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  #main > .seg.seg-in { animation: ramSegIn .26s cubic-bezier(.2, .8, .2, 1); }
  #main > .seg.seg-out { animation: ramSegOut .24s cubic-bezier(.4, 0, .9, .6) forwards; pointer-events: none; }
}
@media (min-width: 1024px) { #main > .seg.seg-out { pointer-events: none; } }
@keyframes ramSegIn { from { transform: translateX(-100%); } }
@keyframes ramSegOut { to { transform: translateX(-100%); } }
/* téléphone et tablette : le logo du club n'est affiché que sur les écrans principaux */
.toplogo.sub { display: none; }

/* =========================================================================
   VERSION ORDINATEUR — mêmes menus que /RAM JA, mesure pour mesure (23/10/2026)
   Menu principal 84 px : logo en haut, éléments 68 × 58 px, pictogramme sur le
   libellé ; élément actif = bloc plein couleur d'accent, ombre dure décalée.
   En bas : mode jour / nuit, profil, sortie.
   Sous-menu 238 px, un ton plus clair, uni : encadré du titre en haut,
   éléments en texte normal ; élément actif = bloc plein penché, ombre dure.
   ========================================================================= */
.rbot, .segt { display: none; }
@media (min-width: 1024px) {
  :root { --side: 84px; --sub: 238px; }
  .tabs, :root[style*="color-scheme: light"] .tabs {
    width: calc(var(--side) + env(safe-area-inset-left, 0px)); gap: 4px; align-items: center;
    padding: calc(92px + env(safe-area-inset-top, 0px)) 0 calc(230px + env(safe-area-inset-bottom, 0px)) env(safe-area-inset-left, 0px);
    background: color-mix(in srgb, var(--bg) 30%, #000) !important;
  }
  :root[style*="color-scheme: light"] .tabs { background: #16181F !important; }
  .tabs::before { left: calc(10px + env(safe-area-inset-left, 0px)); top: calc(16px + env(safe-area-inset-top, 0px)); width: 64px; height: 60px; }
  .tabs button[data-t="me"] { display: none; }
  /* .rbot est hors de la barre d'onglets : sans display:flex ici, ses icônes restaient collées à gauche */
  .tabs button, .rbot button {
    display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 4px; width: 68px; min-height: 58px; padding: 7px 2px; border: 0; position: relative;
    font: 600 10.5px/1.15 var(--f-body); letter-spacing: 0; text-transform: none; text-align: center; color: rgba(255, 255, 255, .66); background: transparent; box-shadow: none;
    transition: background .15s, color .15s;
  }
  .tabs button svg, .rbot button svg { width: 22px; height: 22px; color: inherit; }
  .tabs button:hover, .rbot button:hover { background: rgba(255, 255, 255, .06); color: #fff; }
  .tabs button[aria-current="page"], .tabs button[aria-current="page"]:hover, .rbot button[aria-current="page"] {
    background: var(--accent); color: var(--on-accent); box-shadow: 3px 3px 0 var(--accent2, var(--hot));
  }
  .tabs button[aria-current="page"] svg, .rbot button[aria-current="page"] svg { color: var(--on-accent); }
  .tabs button[aria-current="page"]::before { display: none; }
  .rbot { display: flex; flex-direction: column; align-items: center; gap: 4px; position: absolute; z-index: 9; left: env(safe-area-inset-left, 0px); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: var(--side); }
  .rbot .sep { display: block; width: 36px; height: 1px; background: rgba(255, 255, 255, .1); margin: 6px 0; }
  .rbot .av.sm { width: 30px; height: 30px; font-size: 12px; margin: 0 !important; }
  .rbot button[aria-current="page"] .av { box-shadow: 0 0 0 2px var(--on-accent); }
  .addfab { bottom: calc(232px + env(safe-area-inset-bottom, 0px)) !important; left: calc(8px + env(safe-area-inset-left, 0px)) !important; width: 68px !important; box-shadow: 3px 3px 0 var(--accent2, var(--hot)); }
  /* sous-menu */
  #main > .seg {
    width: var(--sub); padding: calc(22px + env(safe-area-inset-top, 0px)) 12px 16px; gap: 4px;
    background: color-mix(in srgb, var(--fg) 5%, var(--bg)) !important; -webkit-mask-image: none !important; mask-image: none !important;
  }
  #main > .seg .segt { display: grid; gap: 3px; margin: 0 0 18px; padding: 14px 14px 12px; background: color-mix(in srgb, var(--fg) 6%, transparent); min-width: 0; }
  #main > .seg .segt span { font-family: var(--f-sub); font-weight: 700; text-transform: uppercase; letter-spacing: .2em; font-size: 10.5px; color: var(--accent2, var(--hot)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #main > .seg .segt b { font-family: var(--f-display); font-weight: 400; font-style: italic; text-transform: uppercase; font-size: 22px; line-height: 1.02; color: var(--fg); overflow-wrap: anywhere; }
  #main > .seg button {
    min-height: 0; padding: 11px 14px; gap: 13px; border: 1px solid transparent !important;
    font: 600 14.5px/1.4 var(--f-body); letter-spacing: 0; text-transform: none; color: color-mix(in srgb, var(--fg) 85%, transparent);
  }
  #main > .seg button svg { width: 21px; height: 21px; opacity: .9; }
  #main > .seg button:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--fg); }
  #main > .seg button[aria-selected="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent) !important; transform: rotate(-1.5deg); box-shadow: 3px 3px 0 var(--accent2, var(--hot)); }
  #main > .seg button[aria-selected="true"]::before { display: none; }
  #main > .seg button[aria-selected="true"] svg { opacity: 1; }
}

/* ---------- téléphone et iPad : la barre d'onglets prend toute la largeur de l'écran ---------- */
@media (max-width: 1023px) {
  #main > .seg { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
    padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
    -webkit-mask-image: none; mask-image: none; }
  #main > .seg button { flex: 1 0 auto; justify-content: center; }
}
/* téléphone : chaque onglet garde son petit pictogramme ; s'ils ne tiennent pas tous, la barre défile au doigt */
@media (max-width: 480px) {
  #main > .seg { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 6px;
    padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
  #main > .seg button { flex: 1 0 auto; padding: 0 12px; gap: 6px; scroll-snap-align: start; }
  #main > .seg button svg { display: inline-block; width: 16px; height: 16px; flex: none; }
}

/* =========================================================================
   STYLE DE L'INTERFACE (Profil › Affichage), comme /RAM JA :
   street dosé par défaut, épuré (sans ombres dures ni inclinaisons), full street (plus marqué)
   ========================================================================= */
:root[data-style="epure"] { --ram-hard: transparent; }
:root[data-style="epure"] :is(.top h1, .crest, .ring, .story:nth-child(even) .ring, .tilt, .poster .big, .datepill, .stamp) { transform: none !important; }
:root[data-style="epure"] :is(.tilt, .poster .big, .stamp, .bd.done, .segt b) { font-style: normal; }
:root[data-style="epure"] #main > .seg button[aria-selected="true"], :root[data-style="epure"] #main > .seg button[aria-selected="true"]::before { transform: none !important; box-shadow: none !important; }
:root[data-style="epure"] :is(.crest, .tabs button[aria-current="page"], .rbot button[aria-current="page"], .motifs button[aria-pressed="true"], .btn, .addfab) { box-shadow: none !important; }
:root[data-style="street"] { --ram-hard: rgba(0, 0, 0, .8); }
:root[data-style="street"][style*="color-scheme: light"] { --ram-hard: rgba(0, 0, 0, .28); }
:root[data-style="street"] .top h1 { transform: rotate(-2.5deg); }
:root[data-style="street"] .kicker { display: inline-block; transform: rotate(-1.5deg); }
:root[data-style="street"] :is(.card, .lis, .palm .res, #main > .seg + *) { box-shadow: 7px 7px 0 var(--ram-hard) !important; }
:root[data-style="street"] .btn:not(.ghost) { box-shadow: 4px 4px 0 var(--accent2, var(--hot)); }
/* full street : les sous-titres (nom du club au-dessus de « Groupes », « Cours, équipes et événements »…)
   deviennent des étiquettes surlignées, comme les sur-titres de /RAM JA */
:root[data-style="street"] :is(.top h1 .sub, #main > .seg .segt span) { display: inline-block; justify-self: start; width: fit-content; max-width: 100%; background: var(--hot); color: var(--on-hot); padding: 2px 8px; transform: rotate(-1.5deg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* le sous-titre surligné passe sous le gros titre, avec un peu d'air (il chevauchait la fin du titre) ;
   seulement le sous-titre du titre : le logo du club (img.toplogo.sub) n'est jamais surligné ni penché */
:root[data-style="street"] .top h1 .sub { display: block !important; margin-top: 7px; }
:root[data-style="street"] #main > .seg .segt { gap: 8px; }

/* téléphone et tablette : le contenu des pages à onglets (Agenda, École, Club…) dans un cadre uni ton sur ton,
   comme sur ordinateur et comme la liste des groupes ; le motif ne passe plus derrière le texte */
@media (max-width: 1023px) {
  #main > .seg + .pad { background: var(--card); border: 1px solid var(--line); box-shadow: 4px 4px 0 var(--ram-hard); margin: 12px 10px 24px; }
  #main > .seg + .pad .card { box-shadow: 3px 3px 0 var(--ram-hard); }
}

/* ordinateur : « Ajouter du contenu » devient un bouton carré « + », en bas, juste à droite du menu latéral
   (et du sous-menu quand la page en a un) */
@media (min-width: 1024px) {
  .addfab { left: calc(var(--side) + 18px + env(safe-area-inset-left, 0px)) !important; right: auto !important; bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important;
    width: 58px !important; height: 58px; min-height: 58px !important; padding: 0 !important; border-radius: 0 !important; justify-content: center; z-index: 7; }
  .phone.hassub .addfab { left: calc(var(--side) + var(--sub) + 18px + env(safe-area-inset-left, 0px)) !important; }
  .addfab span { display: none; }
  .addfab svg { width: 28px !important; height: 28px !important; }
}

/* équipes : fil chronologique des rencontres (en direct, à venir, résultats), séparé par mois */
.tl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.tl-sec { min-width: 0; }
.tl-sec > .kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tl-sec > .kicker svg { width: 16px; height: 16px; }
.tl-sec.tl-live > .kicker { color: var(--hot); }
.tl-month { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; font-family: var(--f-sub); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tl-month::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.tl-sec > .tl-month:first-of-type { margin-top: 0; }

/* ---------- Soin du 23/10 ---------- */
/* Bénévoles : le bouton passe sous la phrase quand la place manque,
   au lieu d'écraser « Tu veux aider à l'organisation ? » en colonne d'un mot par ligne */
.volu > .grow { flex: 1 1 190px; min-width: 0; }
.volu > .btn { flex: 1 1 auto; white-space: normal; }

/* Bouton « Ajouter du contenu » sur téléphone et tablette : un carré « + » à droite,
   au-dessus de la barre d'onglets, qui ne masque plus le bas des publications.
   Le libellé reste lu par les lecteurs d'écran (aria-label). */
@media (max-width: 1023px) {
  .addfab { left: auto !important; right: max(16px, env(safe-area-inset-right, 0px)) !important;
    width: 58px; height: 58px; min-height: 58px; padding: 0; border-radius: 0; gap: 0;
    box-shadow: 4px 4px 0 var(--accent2, var(--hot)); }
  .addfab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .addfab svg { width: 28px; height: 28px; }
  .fab #main { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
}

/* notifications : avatar centré sur sa ligne, lignes séparées, texte bien aligné */
.nrow { align-items: center !important; gap: 12px; margin-top: 0 !important; padding: 12px 10px; border-bottom: 1px solid var(--line); }
.nrow > .av, .nrow > .medal { align-self: center !important; margin: 0 !important; }
.nrow .grow { line-height: 1.35; }
.nrow time { margin-top: 2px; }
.nrow .st.no { flex: none; align-self: center; }

/* Onglets compacts sur téléphone (4 onglets ou plus) : tous dans la largeur de l'écran, pictogrammes seuls,
   l'onglet ouvert affiche aussi son titre (26/10/2026) */
@media (max-width: 1023px) {
  .seg.ico { overflow: visible; -webkit-mask-image: none; mask-image: none; gap: 6px; }
  .seg.ico button { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 6px; transition: flex-grow .3s cubic-bezier(.3, 1.3, .5, 1), background .2s; }
  .seg.ico button[aria-selected="true"] { flex-grow: 2.6; }
  .seg.ico button svg { flex: none; }
  .seg.ico button:not([aria-selected="true"]) .lb { display: none; }
  .seg.ico .lb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
}

/* bulle avec sa pointe : l'ombre décalée suit toute la forme, pointe comprise (sinon la pointe flotte
   sur l'ombre de la bulle) (26/10/2026) */
.bub.tail { box-shadow: none; filter: drop-shadow(3px 3px 0 var(--ram-hard)); }
.msg.me .bub.tail { box-shadow: none; filter: drop-shadow(3px 3px 0 var(--accent2, var(--hot))); }
/* la pointe se cale sur le bord extérieur de la bulle (bordure de 1 px comprise) : le bas de la bulle et
   le bas de la pointe forment une seule ligne droite, sans petite marche */
.msg.me .bub.tail::after { right: -12px; bottom: -1px; width: 12px; height: 13px; }
.msg:not(.me) .bub.tail::after { left: -11px; bottom: 0; width: 12px; height: 12px; }
/* texte des messages : même taille et même couleur partout (groupes, direct, commentaires) */
.bub .tx { font-size: var(--t2, 15px); color: inherit; }

/* Full street : la carte « Investissement » garde son cadre (bronze, argent, or…) en plus de l'ombre décalée
   (l'ombre forcée des cartes en full street effaçait le cadre, dessiné lui aussi en box-shadow) */
:root[data-style="street"] #main .tcard.cf1 { box-shadow: 0 0 0 2px #C8834B, 7px 7px 0 var(--ram-hard) !important; }
:root[data-style="street"] #main .tcard.cf2 { box-shadow: 0 0 0 2px #DDE3EA, 0 0 0 4px #8E99A6, 7px 7px 0 var(--ram-hard) !important; }
:root[data-style="street"] #main .tcard.cf3 { box-shadow: 0 0 0 2px #F2C230, 0 0 0 4px var(--bg), 0 0 0 6px #F2C230, 7px 7px 0 var(--ram-hard) !important; }
:root[data-style="street"] #main .tcard.cf4 { box-shadow: 0 0 0 2px #7FE3D8, 0 0 0 4px var(--bg), 0 0 0 6px #3FB8C9, 0 0 14px 6px rgba(127, 227, 216, .2), 7px 7px 0 var(--ram-hard) !important; }
:root[data-style="street"] #main .tcard.cf5 { box-shadow: 0 0 0 2px #6FB7FF, 0 0 0 4px #A78BFA, 0 0 0 6px var(--bg), 0 0 0 7px #6FB7FF, 0 0 18px 8px rgba(111, 183, 255, .25), 7px 7px 0 var(--ram-hard) !important; }

/* =========================================================================
   DISCUSSIONS plus digestes, façon WhatsApp, style /RAM gardé (27/10/2026)
   groupes, commentaires sous une publication, direct des rencontres
   ========================================================================= */
/* 1. séries compactes : 2 px entre deux messages d'une même personne ; l'ombre décalée seulement sous le
      dernier message de la série (celui qui a la pointe) ; l'heure sur la ligne du texte quand elle y tient */
.msg.cont { margin-top: 0; }
.bub:not(.tail), .msg.me .bub:not(.tail) { box-shadow: none; }
.bub { flex-direction: row; flex-wrap: wrap; align-items: flex-end; column-gap: 10px; row-gap: 3px; }
.bub > .hd, .bub > .quote, .bub > .mph { flex: 0 0 100%; }
.bub > .tx { flex: 0 0 auto; max-width: 100%; min-width: 0; }
.bub > time { flex: none; margin-left: auto; white-space: nowrap; }
/* 2. mes bulles calmées : couleur du club fondue dans la carte, texte normal, heure atténuée ;
      la couleur vive reste pour l'ombre, le bouton d'envoi et les actions */
:root { --mebub: color-mix(in srgb, var(--accent) 25%, var(--card)); }
.msg.me .bub { background: var(--mebub); color: var(--fg); border-color: transparent; }
.msg.me .bub time { color: var(--muted); }
.msg.me .bub .quote { background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--muted); border-left-color: var(--accent); }
.msg.me .bub.tail::after { background: var(--mebub); }
/* 3. séparateur de jour discret, collé sous la barre du haut pendant le défilement */
.daysep { position: sticky; top: var(--segt, 0px); z-index: 3; margin: 12px 0 6px; pointer-events: none; }
.daysep span { border: 0; box-shadow: none; font-size: 11px; padding: 3px 10px; background: color-mix(in srgb, var(--fg) 10%, var(--bg)); }
/* 4. réactions compactes : une petite étiquette à cheval sur le bas de la bulle (le menu de l'appui long,
      .reacts.big, ne change pas) ; la bulle garde de la place en bas pour que l'heure ne soit jamais cachée */
.msg.hasre .bub { padding-bottom: 14px; }
.msg .reacts:not(.big) { display: inline-flex; flex-wrap: nowrap; gap: 1px; align-self: flex-start; margin: -11px 0 0 12px; padding: 1px 3px; position: relative; z-index: 1;
  background: var(--card); border: 1px solid var(--line); box-shadow: 2px 2px 0 var(--ram-hard); }
.msg.me .reacts:not(.big) { align-self: flex-end; margin: -11px 20px 0 0; }
.msg .reacts:not(.big) .react { min-height: 26px; padding: 0 5px; background: transparent; border-radius: 0 !important; font-size: 13px; box-shadow: none; line-height: 1; }
.msg .reacts:not(.big) .react.on { box-shadow: inset 0 -2px 0 var(--accent); font-weight: 700; }

/* discussions, suite (27/10/2026) */
/* coches de mes messages : grises (envoyé, reçu), de couleur quand tous les autres membres ont lu */
.bub time .tk { display: inline-block; vertical-align: -3px; margin-left: 4px; font-style: normal; color: var(--muted); }
.bub time .tk svg { width: 15px; height: 15px; stroke-width: 2.2; }
.bub time .tk.rd { color: #2F9BFF; }
/* apparition d'un message : la bulle gonfle depuis sa pointe (en bas à gauche, ou en bas à droite pour les miens) */
.msg.in { animation: none; }
.msg.in .bub { animation: bubPop .42s cubic-bezier(.2, 1.35, .4, 1) both; transform-origin: 0 100%; }
.msg.me.in .bub { transform-origin: 100% 100%; }
.msg.in > .av { animation: fade .3s both; }
@keyframes bubPop { 0% { transform: scale(.15); opacity: 0; } 35% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .msg.in .bub { animation: fade .2s; } }
/* « … est en train d'écrire » : la bulle et ses trois points qui sautillent, le nom à côté */
.msg.typing { margin-top: 10px; }
.msg.typing .bubw { align-items: flex-end; gap: 10px; }
.bub.typ { flex-direction: row; gap: 5px; align-items: center; padding: 11px 12px; min-height: 0; }
.bub.typ i { width: 7px; height: 7px; border-radius: 50% !important; background: var(--muted); animation: typDot 1.2s infinite ease-in-out; }
.bub.typ i:nth-child(2) { animation-delay: .15s; }
.bub.typ i:nth-child(3) { animation-delay: .3s; }
@keyframes typDot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.typ-l { font-size: 12px; color: var(--muted); padding-bottom: 4px; white-space: nowrap; }
/* glisser pour répondre : la bulle suit le doigt, la flèche « répondre » apparaît derrière */
.bubw { position: relative; transition: transform .25s cubic-bezier(.2, 1.2, .4, 1); }
.bubw.swiping { transition: none; }
.bubw::before { content: ''; position: absolute; left: -38px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50% !important;
  background: var(--card2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 9l-5 4 5 4M5 13h9a5 5 0 015 5'/%3E%3C/svg%3E") center / 16px no-repeat;
  opacity: var(--rp, 0); transform: scale(calc(.5 + var(--rp, 0) * .5)); pointer-events: none; }
.msg.me.in { animation: none; }

/* avatar cliquable (ouvre le profil) : même place et même allure qu'un avatar simple */
.avlink { display: inline-flex; flex: none; padding: 0; border: 0; background: none; border-radius: 50% !important; cursor: pointer; }
.msg > .avlink { margin: 2px !important; align-self: flex-end; }
.msg.in > .avlink { animation: fade .3s both; }

/* glisser son message vers la gauche : le « i » des infos apparaît à droite */
.bubw::after { content: ''; position: absolute; right: -40px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50% !important;
  background: var(--card2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E") center / 16px no-repeat;
  opacity: var(--ri, 0); transform: scale(calc(.5 + var(--ri, 0) * .5)); pointer-events: none; }
/* panneau « Infos du message » */
.info-msg { padding: 4px 6px 14px !important; }
.info-msg .msg { margin: 0; justify-content: flex-end; }
.info-sec { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); }
.info-sec > .kicker { display: flex; align-items: center; gap: 6px; }
.info-sec > .kicker svg { width: 16px; height: 16px; }
.info-sec > .kicker .rd, .info-sec > .kicker:has(.rd) svg { color: #2F9BFF; }