/* =================================================================
   Espace licencié — Orvault Volley-Ball
   Palette et pastilles héritées de v3.orvault-volley.fr
   Titres : Barlow Condensed · Interface : Barlow
   ================================================================= */

:root {
  --navy: #0d1e35;
  --navy-2: #152d52;
  --blue: #1e6eb5;
  --blue-lt: #3a8fd4;
  --fond: #f4f7fb;
  --carte: #ffffff;
  --carte-2: #eef3f9;
  --texte: #1c2d42;
  --discret: #5f6d7d;
  --filet: #dde7f2;
  --ent-fond: #ddeeff; --ent-texte: #1e5da0; --ent-filet: #1e6eb5;
  --mat-fond: #d8f5e4; --mat-texte: #1a7a3d; --mat-filet: #1a7a3d;
  --tou-fond: #f0e6ff; --tou-texte: #6b22b0; --tou-filet: #6b22b0;
  --aut-fond: #e9edf2; --aut-texte: #5f6d7d; --aut-filet: #9aa7b5;
  --vac-fond: #fff4dc; --vac-texte: #8a5a00;
  --abs-fond: #fde4e1; --abs-texte: #a8322b;
  --danger: #c0392b;
  --ok: #1a7a3d;
  --page: #0a1628;
  --rayon: 10px;
  --titre: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --corps: 'Barlow', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --haut-sur: env(safe-area-inset-top, 0px);
  --bas-sur: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0a1728;
    --carte: #122238;
    --carte-2: #182b44;
    --texte: #e8eef6;
    --discret: #93a3b6;
    --filet: #22374f;
    --blue: #3a8fd4;
    --blue-lt: #62a9e2;
    --ent-fond: #14304d; --ent-texte: #8cc3f5; --ent-filet: #3a8fd4;
    --mat-fond: #123a25; --mat-texte: #6fd39a; --mat-filet: #3fae6c;
    --tou-fond: #2b1d46; --tou-texte: #c4a0f2; --tou-filet: #9a6ad8;
    --aut-fond: #1d2c40; --aut-texte: #93a3b6; --aut-filet: #5b6b7f;
    --vac-fond: #3a2c10; --vac-texte: #f0c878;
    --abs-fond: #3f1d1d; --abs-texte: #f19a90;
    --danger: #e57368;
    --ok: #6fd39a;
    --page: #050b15;
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--corps);
  font-size: 15px;
  line-height: 1.45;
  color: var(--texte);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--blue-lt); outline-offset: 2px; border-radius: 4px; }
.visuellement-masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Coque ---------- */
#app {
  position: relative;
  height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  background: var(--fond);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 560px) {
  #app { box-shadow: 0 0 60px rgba(0, 0, 0, .45); }
}
#ecran { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---------- Démarrage ---------- */
.demarrage {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: var(--navy); color: #fff;
}
.demarrage img { width: 96px; height: 96px; }
.demarrage .roue { width: 26px; height: 26px; border: 3px solid rgba(255,255,255,.2); border-top-color: #fff; border-radius: 50%; animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* ---------- En-tête ---------- */
.entete {
  flex: none;
  background: var(--navy);
  color: #fff;
  padding: calc(10px + var(--haut-sur)) 18px 16px;
}
.entete-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.entete .salut { font-size: 13px; color: rgba(255, 255, 255, .62); }
.entete h1 {
  font-family: var(--titre); font-weight: 700; font-size: 27px; line-height: 1.05;
  text-transform: uppercase; letter-spacing: .005em;
}
.retour {
  display: inline-flex; align-items: center; gap: 4px; margin: -4px 0 4px -6px; padding: 6px 8px 6px 2px;
  color: rgba(255, 255, 255, .78); font-size: 14px; font-weight: 600; min-height: 36px;
}
.retour svg { width: 20px; height: 20px; fill: currentColor; }

.segment { display: flex; background: rgba(255, 255, 255, .1); border-radius: 9px; padding: 3px; margin-top: 12px; }
.segment button {
  flex: 1; text-align: center; font-size: 13px; font-weight: 600; padding: 8px 0; border-radius: 7px;
  color: rgba(255, 255, 255, .74); transition: background .18s ease, color .18s ease; min-height: 36px;
}
.segment button[aria-pressed="true"] { background: #fff; color: var(--navy); }

/* ---------- Bandeau hors ligne ---------- */
.hors-ligne {
  flex: none; background: var(--vac-fond); color: var(--vac-texte);
  font-size: 12.5px; font-weight: 600; text-align: center; padding: 6px 12px;
}

/* ---------- Corps ---------- */
.corps {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.corps > *, .feuille-contenu > * { flex-shrink: 0; }
.jour {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--discret);
  padding-top: 8px;
}
.jour:first-child { padding-top: 0; }
.planning-liste .jour {
  position: sticky; top: -14px; z-index: 1; background: var(--fond);
  margin: 0 -14px; padding: 10px 14px 6px;
}
.groupe-titre {
  font-family: var(--titre); font-size: 18px; font-weight: 700; text-transform: uppercase;
  color: var(--discret); padding-top: 8px;
}
.groupe-titre:first-child { padding-top: 0; }

.puces { display: flex; gap: 7px; overflow-x: auto; margin: 0 -14px; padding: 0 14px 2px; scrollbar-width: none; }
.puces::-webkit-scrollbar { display: none; }
.puce {
  flex: none; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; min-height: 36px;
  border: 1px solid var(--filet); background: var(--carte); color: var(--discret);
  transition: background .15s ease, color .15s ease;
}
.puce[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }

.carte { background: var(--carte); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 14px; }
.carte-lien {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  font-size: 14px; font-weight: 600; min-height: 50px;
}
.carte-lien .fleche { color: var(--blue); font-size: 19px; line-height: 1; }

/* Prochain rendez-vous */
.prochain {
  display: block; width: 100%; color: #fff; border-radius: var(--rayon); padding: 16px;
  background: linear-gradient(135deg, #14508f, #1e6eb5);
  box-shadow: 0 8px 22px rgba(30, 110, 181, .28);
}
.prochain-lbl { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.76); }
.prochain-ttl { display: block; font-family: var(--titre); font-size: 25px; font-weight: 700; line-height: 1.08; text-transform: uppercase; margin-top: 4px; text-wrap: balance; }
.prochain-meta { display: block; font-size: 13.5px; color: rgba(255,255,255,.9); margin-top: 7px; }
.prochain--vide { background: var(--carte); color: var(--texte); border: 1px solid var(--filet); box-shadow: none; }
.prochain--vide .prochain-lbl, .prochain--vide .prochain-meta { color: var(--discret); }

/* Créneau */
.creneau {
  display: grid; grid-template-columns: 50px 1fr; gap: 11px; align-items: start; width: 100%;
  background: var(--carte); border: 1px solid var(--filet); border-left: 3px solid var(--ent-filet);
  border-radius: var(--rayon); padding: 11px 12px; min-height: 58px;
  transition: background .12s ease;
}
.creneau:active { background: var(--carte-2); }
.creneau--match { border-left-color: var(--mat-filet); }
.creneau--tournoi { border-left-color: var(--tou-filet); }
.creneau--autre { border-left-color: var(--aut-filet); }
.creneau-h { font-family: var(--titre); font-size: 19px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.creneau-h small { display: block; font-family: var(--corps); font-size: 10px; font-weight: 600; color: var(--discret); letter-spacing: .06em; margin-top: 4px; }
.creneau-txt { min-width: 0; }
.creneau-t { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.28; }
.creneau-s { display: block; font-size: 13px; color: var(--discret); margin-top: 2px; }

.pastille {
  display: inline-block; vertical-align: 2px; font-size: 10px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.p-entrainement { background: var(--ent-fond); color: var(--ent-texte); }
.p-match { background: var(--mat-fond); color: var(--mat-texte); }
.p-tournoi { background: var(--tou-fond); color: var(--tou-texte); }
.p-autre { background: var(--aut-fond); color: var(--aut-texte); }

/* Présences */
.creneau--statut { grid-template-columns: 50px 1fr auto; }
.statut {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .01em;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.creneau .statut { align-self: center; }
.s-present { background: var(--mat-fond); color: var(--mat-texte); }
.s-absent { background: var(--abs-fond); color: var(--abs-texte); }
.s-incertain { background: var(--aut-fond); color: var(--aut-texte); }
.s-sans-reponse { background: var(--vac-fond); color: var(--vac-texte); }
.s-autre { background: var(--ent-fond); color: var(--ent-texte); }
.compteur { display: flex; flex-wrap: wrap; gap: 6px; }
.presence-groupe { font-size: 12.5px; font-weight: 700; color: var(--discret); margin-top: 4px; }
.membres { display: flex; flex-direction: column; margin-top: -6px; }
.membre { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 0; border-top: 1px solid var(--filet); }
.membre:first-child { border-top: 0; }
.membre .avatar { width: 34px; height: 34px; font-size: 12.5px; }
.vous {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue); margin-left: 6px; vertical-align: 1px;
}

/* Événement complémentaire */
.evenement {
  display: flex; gap: 10px; align-items: center; border-radius: var(--rayon); padding: 9px 12px;
  background: var(--ent-fond); color: var(--ent-texte);
}
.evenement--vacances { background: var(--vac-fond); color: var(--vac-texte); }
.evenement-t { display: block; font-weight: 600; font-size: 13.5px; }
.evenement-s { display: block; font-size: 12px; opacity: .85; }
.ic-mini svg { width: 18px; height: 18px; fill: currentColor; display: block; }

/* Listes */
.liste { display: flex; flex-direction: column; gap: 7px; }
.ligne {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px;
  padding: 10px 13px; background: var(--carte); border: 1px solid var(--filet); border-radius: var(--rayon);
}
button.ligne:active, a.ligne:active { background: var(--carte-2); }
.ligne-txt { min-width: 0; flex: 1; }
.ligne-nm { display: block; font-weight: 600; font-size: 14.5px; }
.ligne-sub { display: block; font-size: 13px; color: var(--discret); }
.ligne .fleche { margin-left: auto; color: var(--discret); font-size: 20px; line-height: 1; }
.ic {
  width: 36px; height: 36px; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--fond); color: var(--blue);
}
.ic svg { width: 18px; height: 18px; fill: currentColor; }
.ligne-action {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--blue); background: var(--fond);
}
.ligne-action svg { width: 19px; height: 19px; fill: currentColor; }

.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue); color: #fff; font-weight: 700; font-size: 14px;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--lg { width: 76px; height: 76px; font-family: var(--titre); font-size: 32px; }
button.avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.14); }

/* Profil */
.profil-haut { text-align: center; padding-top: 2px; }
.profil-haut .avatar { margin: 4px auto 10px; }
.profil-nom { font-family: var(--titre); font-size: 26px; font-weight: 700; text-transform: uppercase; line-height: 1.05; }
.profil-lic { font-size: 13px; color: rgba(255,255,255,.62); margin-top: 3px; }
.equipes-carte { display: flex; flex-direction: column; }
.equipes-carte .rangee { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; padding: 9px 0; }
.equipes-carte .rangee + .rangee { border-top: 1px solid var(--filet); }
.equipes-carte .rangee:first-child { padding-top: 0; }
.equipes-carte .rangee:last-child { padding-bottom: 0; }
.equipes-carte .role { color: var(--discret); text-align: right; }
.champ { background: var(--carte); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 10px 13px; }
.champ-lb { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--discret); }
.champ-vl { font-size: 15px; margin-top: 2px; overflow-wrap: anywhere; }
.note { font-size: 12.5px; color: var(--discret); text-align: center; line-height: 1.5; }

/* Boutons */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px;
  border-radius: 9px; font-weight: 700; font-size: 15px; padding: 12px; text-align: center;
  transition: background .15s ease, opacity .15s ease;
}
.btn-primaire { background: var(--blue); color: #fff; }
.btn-primaire:active { background: var(--blue-lt); }
.btn-secondaire { border: 1.5px solid var(--filet); color: var(--texte); font-weight: 600; background: var(--carte); }
.btn-danger { color: var(--danger); font-weight: 600; }
.btn:disabled { opacity: .6; cursor: default; }

/* ---------- Barre d'onglets ---------- */
.onglets {
  flex: none; display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--carte); border-top: 1px solid var(--filet);
  padding: 6px 0 calc(6px + var(--bas-sur));
}
.onglet {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 50px; font-size: 11px; font-weight: 600; color: var(--discret); text-align: center;
}
.onglet svg { width: 23px; height: 23px; fill: currentColor; }
.onglet[aria-current="page"] { color: var(--blue); }

/* ---------- Feuilles ---------- */
#couche { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
#couche > * { pointer-events: auto; }
.voile { position: absolute; inset: 0; background: rgba(5, 12, 24, .52); animation: apparait .18s ease; }
.feuille {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 88%;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--carte); border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 34px rgba(5, 12, 24, .3);
  padding: 8px 16px calc(18px + var(--bas-sur));
  animation: monte .26s cubic-bezier(.22, 1, .36, 1);
  transition: transform .2s ease;
  outline: none;
}
.poignee { width: 40px; height: 5px; border-radius: 3px; background: var(--filet); margin: 2px auto 12px; }
.feuille-contenu { display: flex; flex-direction: column; gap: 11px; }
.feuille h2 { font-family: var(--titre); font-size: 25px; font-weight: 700; text-transform: uppercase; line-height: 1.08; text-wrap: balance; }
.feuille .pastille { align-self: flex-start; font-size: 11px; padding: 3px 9px; }
.cles { display: flex; flex-direction: column; }
.cle { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; padding: 9px 0; border-top: 1px solid var(--filet); }
.cle-k { color: var(--discret); flex: none; }
.cle-v { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
@keyframes monte { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes apparait { from { opacity: 0; } to { opacity: 1; } }

/* Menu */
.menu-ligne {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px;
  padding: 8px 2px; border-top: 1px solid var(--filet); font-size: 15px; font-weight: 600;
}
.menu-ligne:first-child { border-top: 0; }
.menu-ligne .ligne-sub { font-weight: 400; }
.menu-ligne .fleche { margin-left: auto; color: var(--discret); font-size: 20px; line-height: 1; }
.menu-ligne .bientot {
  margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--fond); color: var(--discret); border: 1px solid var(--filet);
}
.menu-ligne.est-bientot { opacity: .55; cursor: default; }
.menu-ligne.est-danger { color: var(--danger); }
.menu-ligne.est-danger .ic { color: var(--danger); }
.etapes { padding-left: 24px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.etapes li { padding-left: 4px; }
.etapes li::marker { font-family: var(--titre); font-weight: 700; color: var(--blue); }
.profil-haut { text-align: center; }
.menu-ligne .ligne-txt { text-align: left; }
.version { font-size: 11.5px; color: var(--discret); text-align: center; padding-top: 4px; }

/* ---------- Connexion ---------- */
.connexion-haut {
  flex: none; text-align: center; color: #fff;
  background: linear-gradient(150deg, #0a1628, #152d52 55%, #1a5296);
  padding: calc(46px + var(--haut-sur)) 24px 32px;
}
.connexion-haut img { width: 88px; height: 88px; margin: 0 auto 10px; }
.connexion-haut h1 { font-family: var(--titre); font-size: 31px; font-weight: 700; text-transform: uppercase; line-height: 1.05; }
.connexion-haut p { font-size: 13.5px; color: rgba(255,255,255,.7); margin-top: 6px; }
.formulaire { display: flex; flex-direction: column; gap: 10px; }
.saisie {
  display: block; background: var(--carte); border: 1px solid var(--filet); border-radius: 9px; padding: 9px 13px;
  transition: border-color .15s ease;
}
.saisie:focus-within { border-color: var(--blue); }
.saisie-lb { display: block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--discret); }
.saisie-ligne { display: flex; align-items: center; gap: 8px; }
.saisie input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: 16px; color: var(--texte); padding: 3px 0 1px;
}
.saisie-bascule { font-size: 12.5px; font-weight: 600; color: var(--blue); padding: 6px 2px; }
.lien { text-align: center; font-size: 14px; color: var(--blue); font-weight: 600; width: 100%; padding: 8px; }
.message { font-size: 13.5px; border-radius: 9px; padding: 10px 12px; line-height: 1.45; }
.message--erreur { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.message--ok { background: var(--mat-fond); color: var(--mat-texte); }

/* ---------- Invitation à installer ---------- */
.invitation { display: flex; gap: 12px; align-items: center; }
.invitation-txt { flex: 1; font-size: 13.5px; }
.invitation-txt b { display: block; font-size: 14.5px; }
.invitation .btn { width: auto; min-height: 38px; padding: 8px 14px; font-size: 13.5px; }
.invitation-fermer { color: var(--discret); font-size: 20px; line-height: 1; padding: 6px; }

/* ---------- États ---------- */
.etat { color: var(--discret); font-size: 14px; text-align: center; padding: 28px 12px; line-height: 1.6; }
.etat--erreur { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.etat--erreur .btn { width: auto; padding: 10px 22px; }
.squelettes { display: flex; flex-direction: column; gap: 10px; }
.squelette {
  height: 58px; border-radius: var(--rayon);
  background: linear-gradient(90deg, var(--carte) 0%, var(--carte-2) 50%, var(--carte) 100%);
  background-size: 200% 100%; animation: reflet 1.2s ease-in-out infinite;
}
.squelette--haut { height: 104px; }
@keyframes reflet { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- Annonces ---------- */
#annonces {
  position: absolute; left: 14px; right: 14px; bottom: calc(78px + var(--bas-sur)); z-index: 40;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  background: var(--navy); color: #fff; border-radius: 10px; padding: 12px 14px;
  font-size: 13.5px; text-align: center; box-shadow: 0 10px 26px rgba(5, 12, 24, .35);
  animation: monte-court .22s cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-color-scheme: dark) { .toast { background: #22374f; } }
@keyframes monte-court { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }