/* Application mobile LBCVL — charte graphique du site
   (bleu #1864af, rouge #e10a19, Roboto, fond blanc, pied de page bleu) */
:root {
  --bleu: #1864af;
  --bleu-fonce: #124a82;
  --bleu-tres-fonce: #0e3863;
  --bleu-clair: #2d92cb;
  --rouge: #e10a19;
  --texte: #333333;
  --titre: #000000;
  --gris: #909090;
  --gris-clair: #999999;
  --fond: #ffffff;
  --fond-leger: #f5f5f5;
  --bord: #e5e5e5;
  --sep: #efefef;
  --niv-ligue: #f2c500;
  --niv-national: #00a6e8;
  --d-libre: #1864af;
  --d-cadre: #7b3fa0;
  --d-bande: #0f8a5f;
  --d-3bandes: #e10a19;
  --d-5quilles: #e67e22;
  --d-equipes: #0097b2;
  --d-ligue: #5b6670;
  --haut-entete: 60px;
  --haut-onglets: 62px;
  --sur: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Coquille d'application : seul <main> défile, l'en-tête et la barre d'onglets
   restent en place (un menu « position: fixed » se décale sur mobile quand la
   barre d'adresse du navigateur apparaît ou disparaît). */
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: 'Roboto', system-ui, sans-serif;
  font-size: 16px; line-height: 1.45;
  color: var(--texte); background: #e9edf2;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--bleu); }
button { font: inherit; color: inherit; }
svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
[hidden] { display: none !important; }

/* Cadre « téléphone » centré sur grand écran */
.app {
  position: relative; max-width: 520px; margin: 0 auto;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--fond); box-shadow: 0 0 40px rgba(0, 0, 0, .08);
}

/* ---------- En-tête (comme la bannière du site) ---------- */
.entete {
  position: relative; z-index: 20; flex: none;
  height: calc(var(--haut-entete) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 12px 0 14px;
  display: flex; align-items: center; justify-content: space-between;
  background: #fff;
  border-top: 3px solid var(--rouge);
  border-bottom: 3px solid var(--bleu);
}
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.marque img { height: 40px; width: auto; }
.marque-texte { display: flex; flex-direction: column; line-height: 1.1; padding-left: 10px; border-left: 1px solid #d4dbe3; }
.marque-ligue { color: var(--bleu); font-weight: 900; font-size: 18px; text-transform: uppercase; letter-spacing: .01em; }
.marque-region { color: var(--rouge); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; }
.btn-icone {
  position: relative; display: grid; place-items: center;
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: transparent; color: var(--bleu); cursor: pointer;
}
.btn-icone:active { background: var(--fond-leger); }
.pastille { position: absolute; top: 8px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--rouge); border: 2px solid #fff; }

main {
  flex: 1; min-height: 0; overflow-y: auto; outline: none;
  -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain;
}

/* ---------- Titres de section (style « module-title » du site) ---------- */
.titre-section {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 18px 16px 10px;
}
.titre-section h1 {
  margin: 0; font-size: 22px; font-weight: 900; color: var(--titre);
  text-transform: uppercase; letter-spacing: .02em;
  position: relative; padding-bottom: 6px;
}
.titre-section h1::after { content: ''; position: absolute; left: 0; bottom: 0; width: 42px; height: 3px; background: var(--rouge); }
.sous-titre { color: var(--gris); font-size: 13px; }
.btn-texte {
  display: inline-flex; align-items: center; gap: 4px; border: 0; background: none;
  color: var(--bleu); font-size: 14px; font-weight: 500; cursor: pointer; padding: 6px 4px;
}
.btn-texte svg { width: 18px; height: 18px; }
.btn-texte.tourne svg { animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.btn-lien { border: 0; background: none; color: var(--bleu); font-size: 13px; cursor: pointer; padding: 2px 4px; text-decoration: underline; }

/* ---------- Actualités ---------- */
.actus { padding: 0 16px 8px; }
.une {
  display: block; position: relative; border-radius: 12px; overflow: hidden;
  background: var(--bleu-tres-fonce); color: #fff; text-decoration: none;
  margin-bottom: 16px; cursor: pointer; border: 0; width: 100%; padding: 0; text-align: left;
}
.une-img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; display: block; background: #dfe6ee; }
.une-texte {
  position: absolute; inset: auto 0 0 0; padding: 40px 16px 14px;
  background: linear-gradient(transparent, rgba(8, 30, 56, .92));
}
.une-etiquette { display: inline-block; background: var(--rouge); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 3px 8px; border-radius: 3px; margin-bottom: 6px; }
.une h2 { margin: 0 0 4px; font-size: 20px; line-height: 1.2; font-weight: 700; }
.une time { font-size: 12px; opacity: .85; }
.carte-actu {
  display: flex; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: 0; border-bottom: 1px solid var(--sep);
  padding: 12px 0; color: inherit;
}
.carte-actu:last-child { border-bottom: 0; }
.carte-actu img, .carte-actu .sans-image {
  width: 96px; height: 76px; border-radius: 8px; object-fit: cover; flex: none; background: var(--fond-leger);
}
.sans-image { display: grid; place-items: center; color: var(--bleu); }
.sans-image svg { width: 30px; height: 30px; opacity: .5; }
.carte-actu h3 { margin: 0 0 3px; font-size: 15px; line-height: 1.25; color: var(--titre); font-weight: 700; }
.carte-actu time { font-size: 12px; color: var(--gris-clair); }
.carte-actu p {
  margin: 3px 0 0; font-size: 13px; color: var(--gris); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.squelette { background: linear-gradient(90deg, #eef1f4 25%, #f7f9fb 50%, #eef1f4 75%); background-size: 200% 100%; animation: luit 1.2s infinite; border-radius: 8px; }
@keyframes luit { to { background-position: -200% 0; } }
.message-vide { text-align: center; color: var(--gris); padding: 30px 16px; font-size: 14px; }
.message-vide strong { display: block; color: var(--texte); margin-bottom: 4px; font-size: 15px; }
.maj { font-size: 12px; color: var(--gris-clair); text-align: center; margin: 4px 0 18px; }

/* Invitation aux notifications */
.invite {
  margin: 0 16px 16px; padding: 14px; border-radius: 12px;
  background: #eef5fc; border: 1px solid #cfe1f3; display: flex; gap: 12px; align-items: flex-start;
}
.invite .ico-rond { background: var(--bleu); color: #fff; }
.invite p { margin: 0 0 8px; font-size: 14px; }
.invite-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--bleu); color: #fff; border: 1px solid var(--bleu-tres-fonce);
  border-radius: 6px; padding: 9px 14px; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none;
}
.btn:active { background: var(--bleu-fonce); }
.btn.secondaire { background: #fff; color: var(--bleu); border-color: #cfe1f3; }
.btn.danger { background: #fff; color: var(--rouge); border-color: #f1c4c7; }
.btn svg { width: 18px; height: 18px; }

/* ---------- Agenda ---------- */
.agenda-outils { position: sticky; top: 0; z-index: 10; background: #fff; padding: 0 16px 8px; border-bottom: 1px solid var(--sep); }
.segments { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--fond-leger); border-radius: 10px; padding: 3px; }
.segments button { border: 0; background: none; padding: 8px 4px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--gris); cursor: pointer; }
.segments button[aria-selected="true"] { background: #fff; color: var(--bleu); font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.periode { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 8px; }
.periode-libelle { text-align: center; display: flex; flex-direction: column; align-items: center; }
.periode-libelle strong { font-size: 16px; color: var(--titre); }
.periode-libelle strong::first-letter { text-transform: uppercase; }
.btn-rond { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--bord); background: #fff; color: var(--bleu); display: grid; place-items: center; cursor: pointer; }
.btn-rond:active { background: var(--fond-leger); }
.filtres { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
.filtres::-webkit-scrollbar { display: none; }
.filtre {
  flex: none; border: 1px solid var(--bord); background: #fff; color: var(--texte);
  border-radius: 20px; padding: 5px 12px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.filtre i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--bleu)); }
.filtre[aria-pressed="true"] { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.filtre[aria-pressed="true"] i { background: #fff; }

.ag-liste { padding: 4px 16px 6px; }
.jour { margin-top: 14px; }
.jour-titre {
  display: flex; align-items: center; gap: 10px; margin: 0 0 8px;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--bleu);
}
.jour-titre .num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--bleu); color: #fff; font-size: 16px; font-weight: 900; letter-spacing: 0; }
.jour-titre.auj .num { background: var(--rouge); }
.jour-titre small { color: var(--gris); font-weight: 400; text-transform: none; letter-spacing: 0; }
.evt {
  display: flex; gap: 10px; align-items: stretch; background: #fff;
  border: 1px solid var(--bord); border-left: 4px solid var(--c, var(--bleu));
  border-radius: 8px; padding: 9px 10px 9px 11px; margin-bottom: 6px;
}
.evt-corps { flex: 1; min-width: 0; }
.evt-disc { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c, var(--bleu)); }
.evt-cat { font-weight: 700; color: var(--titre); font-size: 15px; line-height: 1.25; }
.evt-lib { font-size: 13px; color: var(--texte); }
.evt-lieu { display: flex; align-items: center; gap: 3px; font-size: 13px; color: var(--gris); margin-top: 2px; }
.evt-lieu svg { width: 14px; height: 14px; }
.evt-code {
  align-self: center; flex: none; min-width: 44px; text-align: center;
  font-weight: 900; font-size: 13px; padding: 6px 6px; border-radius: 5px; color: #1d1d1d;
}
.evt-code.ligue { background: var(--niv-ligue); }
.evt-code.national { background: var(--niv-national); color: #00263d; }
.vide-periode { text-align: center; padding: 30px 10px 20px; color: var(--gris); font-size: 14px; }
.vide-periode svg { width: 40px; height: 40px; opacity: .35; display: block; margin: 0 auto 6px; }

.grille-mois { padding: 10px 12px 2px; }
.grille-mois .jours-sem, .grille-mois .cases { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.jours-sem span { text-align: center; font-size: 11px; font-weight: 700; color: var(--gris); text-transform: uppercase; padding-bottom: 4px; }
.case {
  aspect-ratio: 1 / 1; border: 0; border-radius: 8px; background: var(--fond-leger);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 14px; font-weight: 500; color: var(--texte); cursor: pointer; padding: 0;
}
.case.hors { background: none; color: #c9c9c9; cursor: default; }
.case.we { background: #eaf2fa; }
.case.auj { outline: 2px solid var(--rouge); outline-offset: -2px; font-weight: 900; }
.case.choisi { background: var(--bleu); color: #fff; }
.points { display: flex; gap: 2px; height: 6px; }
.points i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.case.choisi .points i { box-shadow: 0 0 0 1px #fff; }
.legende { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; font-size: 12px; color: var(--gris); margin: 14px 16px 2px; }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.niv { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }
.niv.ligue { background: var(--niv-ligue); }
.niv.national { background: var(--niv-national); }
.source { text-align: center; font-size: 11px; color: var(--gris-clair); margin: 6px 16px 18px; }

/* ---------- Comité directeur ---------- */
.groupe { padding: 0 16px 6px; }
.groupe h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: #fff;
  background: var(--bleu); margin: 8px 0 10px; padding: 7px 12px; border-radius: 6px;
}
.membre { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--sep); }
.membre:last-child { border-bottom: 0; }
.avatar {
  width: 68px; height: 68px; flex: none; border-radius: 50%; overflow: hidden;
  background: linear-gradient(145deg, var(--bleu), var(--bleu-tres-fonce));
  color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 22px;
  border: 3px solid #fff; box-shadow: 0 0 0 1px var(--bord);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.membre-info { min-width: 0; flex: 1; }
.membre-nom { margin: 0; font-size: 16px; font-weight: 700; color: var(--titre); }
.membre-fct { color: var(--rouge); font-weight: 500; font-size: 14px; }
.membre-detail { color: var(--gris); font-size: 13px; }
.contacts { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.contact {
  display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--bleu);
  font-size: 13px; background: #f3f7fb; border-radius: 6px; padding: 6px 9px; word-break: break-all;
}
.contact svg { width: 16px; height: 16px; }

/* ---------- Compétitions & blocs ---------- */
.bloc { margin: 0 16px 16px; border: 1px solid var(--bord); border-radius: 12px; padding: 14px; }
.bloc h2 { margin: 0 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--bleu); }
.bloc-texte { margin: 0 0 10px; font-size: 14px; color: var(--gris); }
.ligne-lien {
  display: flex; align-items: center; gap: 12px; padding: 10px 0; text-decoration: none; color: var(--texte);
  border-bottom: 1px solid var(--sep);
}
.ligne-lien:last-child { border-bottom: 0; padding-bottom: 2px; }
.ligne-lien strong { display: block; font-size: 15px; font-weight: 500; color: var(--titre); }
.ligne-lien small { display: block; font-size: 12px; color: var(--gris); }
.ligne-lien > span:nth-child(2) { flex: 1; }
.ico-rond { width: 38px; height: 38px; border-radius: 10px; background: #eaf2fa; color: var(--bleu); display: grid; place-items: center; flex: none; }
.ico-rond svg { width: 20px; height: 20px; }
.chevron { color: #c4c4c4; width: 20px; height: 20px; }
.etat { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 10px; }
.etat i { width: 10px; height: 10px; border-radius: 50%; background: var(--gris); }
.etat.on i { background: #2ea44f; }
.etat.off i { background: var(--rouge); }
.etapes { margin: 6px 0 0; padding-left: 20px; font-size: 14px; color: var(--texte); }
.etapes li { margin-bottom: 4px; }

/* ---------- Pied de page (à l'image du site) ---------- */
.pied { background: var(--bleu); color: #fff; padding: 22px 18px 0; margin-top: 18px; font-size: 14px; }
.pied-logo { background: #fff; border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; }
.pied-logo img { display: block; width: 100%; max-width: 330px; margin: 0 auto; }
.pied-titre { margin: 0 0 8px; }
.pied-contact { list-style: none; margin: 0 0 14px; padding: 0; }
.pied-contact li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 11px; line-height: 1.4; }
.pied-contact svg { width: 18px; height: 18px; margin-top: 1px; opacity: .9; }
.pied a { color: #fff; }
.pied-contact a { word-break: break-all; }
.pied-liens { display: flex; flex-wrap: wrap; gap: 6px 4px; border-top: 1px solid rgba(255, 255, 255, .2); padding: 12px 0; }
.pied-liens a { text-decoration: none; font-weight: 500; padding: 4px 10px; border-radius: 20px; background: rgba(255, 255, 255, .12); font-size: 13px; }
.copyright { margin: 0 -18px; padding: 14px 18px; background: var(--bleu-tres-fonce); color: rgba(255, 255, 255, .7); font-size: 12px; text-align: center; }
.copyright a { color: #fff; text-decoration: none; }

/* ---------- Barre d'onglets ---------- */
.onglets {
  position: relative; z-index: 30; flex: none;
  height: calc(var(--haut-onglets) + var(--sur)); padding-bottom: var(--sur);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: #fff; border-top: 1px solid var(--bord);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .05);
}
.onglets a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-decoration: none; color: var(--gris); font-size: 11px; font-weight: 500; position: relative;
}
.onglets a[aria-current="page"] { color: var(--bleu); font-weight: 700; }
.onglets a[aria-current="page"]::before {
  content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--rouge);
}
.onglets svg { width: 24px; height: 24px; }

/* ---------- Lecture d'article ---------- */
.feuille {
  position: fixed; inset: 0; z-index: 40; background: #fff;
  max-width: 520px; margin: 0 auto; display: flex; flex-direction: column;
  animation: monte .22s ease-out;
}
@keyframes monte { from { transform: translateY(30px); } }
.feuille-barre {
  display: flex; align-items: center; justify-content: space-between;
  padding: env(safe-area-inset-top, 0px) 6px 0; height: calc(54px + env(safe-area-inset-top, 0px));
  border-bottom: 3px solid var(--bleu); font-weight: 700; color: var(--bleu);
}
.feuille-corps { flex: 1; overflow-y: auto; padding: 0 0 calc(30px + var(--sur)); }
.art-img { width: 100%; display: block; max-height: 60vh; object-fit: contain; background: var(--fond-leger); }
.art-texte { padding: 16px; }
.art-texte h1 { font-size: 23px; line-height: 1.2; margin: 0 0 6px; color: var(--titre); }
.art-texte time { color: var(--gris-clair); font-size: 13px; }
.art-contenu { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--texte); overflow-wrap: anywhere; }
.art-contenu img { height: auto; border-radius: 8px; }
.art-contenu table { width: 100%; border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; }
.art-contenu td, .art-contenu th { border: 1px solid var(--bord); padding: 5px; }
.art-actions { padding: 0 16px; }

.outil-cadre { flex: 1; width: 100%; border: 0; background: #fff; }
.feuille-barre a.btn-icone { text-decoration: none; }
.zone-outil { background: linear-gradient(135deg, #eef5fc, #fff); border-color: #cfe1f3; }
.zone-outil .btn { width: 100%; margin-top: 4px; padding: 12px 14px; font-size: 15px; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--haut-onglets) + var(--sur) + 12px); z-index: 50;
  background: #222; color: #fff; padding: 10px 16px; border-radius: 22px; font-size: 14px; max-width: 90%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}

@media (min-width: 521px) {
  body { padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}