@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/barlow-condensed-700-normal-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:"Barlow Condensed";font-style:normal;font-weight:700;font-display:optional;src:url("../fonts/barlow-condensed-700-normal-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:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/barlow-400-normal-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:"Barlow";font-style:normal;font-weight:400;font-display:optional;src:url("../fonts/barlow-400-normal-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:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/barlow-700-normal-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:"Barlow";font-style:normal;font-weight:700;font-display:optional;src:url("../fonts/barlow-700-normal-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}

/* ============================================================
   assets/css/webapp.css · Le langage « webapp » de RC Loisir
   ============================================================
   Chargé APRES app.css : il ne remplace rien, il surcharge. Même esprit que la page de la journée (polices Barlow, boutons et
   champs de 44 px, cartes arrondies, couleur d'accent du site), plus une barre de navigation en bas sur téléphone et des
   transitions d'une page à l'autre. Tout ce qui est nouveau est préfixé (tab*, webapp) ; le reste ne touche que des
   propriétés d'apparence. Rien ne change un texte, un lien ni une règle.
   Contrôle : php tools/sonde-webapp.php */

:root {
  --f-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --f-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tab-h: 64px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}

/* ── Le fond et les polices ─────────────────────────────── */
body {
  font-family: var(--f-body);
  background:
    radial-gradient(900px 480px at 85% -8%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%),
    radial-gradient(700px 420px at -10% 30%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
h1, h2, .page-title, .section-title, .brand-name {
  font-family: var(--f-display);
  letter-spacing: .01em;
}
.page-title { font-size: clamp(2rem, 7vw, 3.1rem); line-height: 1.02; text-transform: uppercase; font-weight: 700; margin-bottom: 8px; }
.section-title { font-size: clamp(1.4rem, 4.5vw, 1.8rem); text-transform: uppercase; font-weight: 700; margin: 36px 0 16px; }
.section-title svg { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--primary) 55%, transparent)); }

/* ── Les cartes, les boutons, les champs ────────────────── */
.card {
  border-radius: 18px;
  border-color: color-mix(in srgb, var(--text) 12%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--text) 7%, transparent), color-mix(in srgb, var(--text) 3%, transparent));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 10%, transparent) inset, 0 10px 30px rgba(0, 0, 0, .22);
}
.card-hover { transition: transform .25s var(--ease-out), border-color .2s, box-shadow .25s; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 14%, transparent) inset, 0 16px 40px rgba(0, 0, 0, .32); }
.btn { min-height: 44px; border-radius: 12px; font-weight: 700; transition: transform .15s var(--ease-out), background-color .2s, box-shadow .25s, filter .2s; }
.btn:active { transform: scale(.97); }
.btn-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 92%, #fff), var(--primary)); box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 38%, transparent); }
.btn-primary:hover { filter: brightness(1.06); box-shadow: 0 8px 26px color-mix(in srgb, var(--primary) 50%, transparent); }
.form-input, input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=tel], input[type=url], input[type=date], input[type=datetime-local], select, textarea {
  border-radius: 12px;
}
.form-input, input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=tel], input[type=url], select { min-height: 44px; }
.badge { border-radius: 999px; font-weight: 700; }

/* ── Entrée en douceur du contenu (une seule fois, sans bloquer) ── */
@media (prefers-reduced-motion: no-preference) {
  main .card, main .page-title, main .section-title { animation: webapp-entree .45s var(--ease-out) both; }
  main .card:nth-child(2) { animation-delay: .05s; } main .card:nth-child(3) { animation-delay: .1s; }
  main .card:nth-child(4) { animation-delay: .15s; } main .card:nth-child(n+5) { animation-delay: .2s; }
  @keyframes webapp-entree { from { opacity: 0; transform: translateY(10px); } }
  /* D'une page à l'autre : un fondu court (navigateurs qui savent), et la barre du haut et celle du bas restent en place. */
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
  .topnav { view-transition-name: topnav; }
  .tabbar { view-transition-name: tabbar; }
}

/* ── La barre du bas (téléphone) ────────────────────────── */
.tabbar { display: none; }
@media (max-width: 860px) {
  body.has-tabbar { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); }
  .tabbar {
    display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); align-items: stretch;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 4800;
    height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); padding: 6px 6px env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--bg2) 82%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .35);
  }
  .tab {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 48px; border-radius: 14px; color: var(--text-muted); text-decoration: none; font-size: .7rem; font-weight: 700;
    letter-spacing: .03em; text-transform: uppercase; -webkit-tap-highlight-color: transparent;
    transition: color .2s, background-color .2s, transform .15s var(--ease-out);
  }
  .tabbar-club .tab-lbl { font-size: .6rem; letter-spacing: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tab:active { transform: scale(.94); }
  .tab-ico { position: relative; display: grid; place-items: center; width: 44px; height: 28px; border-radius: 999px; transition: background-color .25s, transform .3s var(--ease-out); }
  .tab.on { color: var(--text); }
  .tab.on .tab-ico { background: var(--primary); color: var(--on-primary); transform: translateY(-2px); box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 55%, transparent); }
  .tab-pastille { position: absolute; top: -5px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #1a0a0a; font-size: .68rem; line-height: 18px; text-align: center; font-weight: 800; letter-spacing: 0; }
  .tab:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
  /* Les boutons flottants des autres lots passent AU-DESSUS de la barre, jamais dessous. */
  body.has-tabbar .pf-flottant { bottom: calc(var(--tab-h) + 14px + env(safe-area-inset-bottom, 0px)); }
  body.has-tabbar #rc-asst-fab, body.has-tabbar #rc-asst-launch { bottom: calc(var(--tab-h) + 14px + env(safe-area-inset-bottom, 0px)); }
  /* « Ma carte » : une pastille ronde (le libellé reste pour les lecteurs d'écran) ; sinon barre, bouton et assistant s'empilent. */
  body.has-tabbar .pf-flottant { width: 48px; padding: 0; min-width: 48px; justify-content: center; }
  body.has-tabbar .pf-flottant span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.has-tabbar .rc-asst-label { display: none; }   /* l'assistant : la pastille seule, pas son étiquette qui s'empile avec la barre */
  body.has-tabbar .pwa-install { bottom: calc(var(--tab-h) + 82px + env(safe-area-inset-bottom, 0px)); }
  body.has-tabbar .footer { padding-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { .tab, .tab-ico, .btn, .card-hover { transition: none !important; } }

/* Mode club : la barre du bas porte les espaces ; le bandeau du haut n'a plus besoin de la rangée des espaces (on garde les rubriques de l'espace). */
@media (max-width: 860px) { body:has(.tabbar-club) .club-nav__groupes { display: none; } }