/* Ajouts propres a la version en ligne : l'ecran de connexion, la mention de
   qui est connecte, la vue "tous les clubs" et la gestion des acces.
   Le reste du style est celui de l'application, repris tel quel. */

/* ---------- ecran de connexion ---------- */
.connexion{
  position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(1100px 640px at 22% -10%,#123FBE 0%,transparent 62%),
             linear-gradient(150deg,#0B2557 0%,var(--navy) 58%,#04102A 100%);
}
/* Le filet lime, signature de la marque, court en haut de l'ecran. */
.connexion::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--lime)}
.conn-carte{
  width:min(400px,100%);background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.13);border-radius:18px;
  padding:32px 30px 26px;color:#fff;backdrop-filter:blur(8px);
  box-shadow:0 26px 70px rgba(0,0,0,.36)}
.conn-logo{display:block;height:34px;width:auto;margin-bottom:22px}
.conn-carte h1{font-size:21px;margin:0 0 4px;color:#fff;letter-spacing:-.01em}
.conn-sous{color:#a9bce0;font-size:13.5px;margin-bottom:22px}
.conn-carte .field>span{color:#a9bce0}
.conn-carte .field input{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);
  color:#fff;padding:11px 13px}
.conn-carte .field input::placeholder{color:#7d92bb}
.conn-carte .field input:focus{outline:2px solid var(--lime);outline-offset:0;
  border-color:transparent}
.conn-btn{width:100%;margin-top:4px;padding:12px}
.conn-err{margin-top:12px;background:rgba(220,38,38,.16);border:1px solid rgba(248,113,113,.45);
  color:#fecaca;border-radius:10px;padding:9px 12px;font-size:13px;line-height:1.45}
.lien{display:block;margin:14px auto 0;background:none;border:0;color:#a9bce0;
  font-size:13px;cursor:pointer;text-decoration:underline}
.lien:hover{color:#fff}

/* Le choix du role, tant que la base n'est pas branchee. */
.conn-ou{display:flex;align-items:center;gap:12px;margin:24px 0 16px;
  color:#7d92bb;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em}
.conn-ou::before,.conn-ou::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.14)}
.conn-demo-txt{color:#a9bce0;font-size:13px;margin-bottom:12px;line-height:1.5}
.conn-roles{display:grid;gap:8px}
.role{text-align:left;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:11px;padding:10px 13px;cursor:pointer;color:#fff;transition:.12s}
.role:hover{background:rgba(165,232,45,.14);border-color:var(--lime)}
.role b{display:block;font-size:14px}
.role span{display:block;font-size:12px;color:#a9bce0;margin-top:1px}
.conn-pied{margin-top:22px;color:#6d82ad;font-size:12px;text-align:center}

/* ---------- qui est connecte ---------- */
.moi{display:flex;align-items:center;gap:11px}
.moi-txt{text-align:right;line-height:1.25}
.moi-txt b{display:block;font-size:13px}
.moi-txt span{display:block;font-size:11px;opacity:.7}

/* ---------- lecture seule ---------- */
body.lecture .chip{cursor:default;opacity:.75}
.lecture-seule{background:#f1f5f9;border-left:3px solid #94a3b8;border-radius:0 9px 9px 0;
  padding:9px 12px;font-size:13px;color:var(--muted);margin-bottom:14px}
/* Un champ qu'on ne peut pas remplir doit se voir au premier coup d'oeil :
   sinon l'observateur tape, et decouvre au bout de trois lignes que rien
   ne s'enregistre. */
.fiche-body input:disabled,.fiche-body select:disabled,.fiche-body textarea:disabled{
  background:#f1f5f9;color:#8fa0bb;cursor:not-allowed;border-style:dashed}
.fiche-body button:disabled{opacity:.4;cursor:not-allowed}
body.lecture .chip{cursor:not-allowed;opacity:.5}

/* ---------- tous les clubs ---------- */
#tblReseau tbody tr{cursor:default}
#tblReseau tr.ici{background:#eef4ff}
/* Un club qui n'a pas ouvert une seule fiche : ce n'est pas une ligne parmi
   les autres, c'est le premier sujet du point hebdomadaire. */
#tblReseau tr.dort td:first-child{border-left:3px solid var(--amber)}
#tblReseau tr.dort{color:#94a3b8}
#tblReseau tr.dort b{color:var(--amber)}
td.alerte{color:#b91c1c;font-weight:700}

/* ---------- equipe ---------- */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;
  margin-bottom:6px}
.aide{margin-top:10px;font-size:13px;color:var(--muted);line-height:1.5}
.roles-tab{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.role-c{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 17px;box-shadow:var(--shadow);border-top:3px solid var(--lime)}
.role-c b{display:block;margin-bottom:5px}
.role-c p{font-size:13px;color:var(--muted);line-height:1.55}

/* ---------- messages ---------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;
  background:var(--navy);color:#fff;padding:11px 18px;border-radius:11px;
  font-size:14px;box-shadow:0 12px 34px rgba(7,26,61,.3);
  border-bottom:3px solid var(--lime);max-width:min(520px,92vw)}
.toast.err{border-bottom-color:#dc2626}
.chargement{position:fixed;right:18px;bottom:18px;z-index:70;background:#fff;
  border:1px solid var(--line);border-radius:11px;padding:9px 15px;font-size:13px;
  color:var(--muted);box-shadow:var(--shadow);display:flex;align-items:center;gap:9px}
.chargement span{width:13px;height:13px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--blue);
  animation:tourne .7s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.note.muet{color:var(--muted)}

@media (max-width:900px){
  .moi-txt{display:none}
}

/* ------------------------------------------------------------------
   Gestion des acces (onglet Equipe)
   Un acces coupe doit se voir en un coup d'oeil : la ligne s'eteint,
   la pastille passe au rouge. Sinon le boss croit avoir coupe et n'a
   pas coupe.
   ------------------------------------------------------------------ */
.acces{display:inline-block;font-size:11.5px;font-weight:650;padding:3px 9px;
  border-radius:999px;white-space:nowrap}
.acces.ouvert{background:#eaf8e0;color:#3d6b00}
.acces.coupe{background:#fdeaea;color:#a11212}
#tblEquipe tr.inactif td{opacity:.55}
#tblEquipe tr.inactif td:first-child b{text-decoration:line-through}
#tblEquipe td.droite{text-align:right;white-space:nowrap}
button.mini{padding:5px 10px;font-size:12px}
button.ghost.danger{color:#a11212;border-color:#f0c9c9}
button.ghost.danger:hover{background:#fdeaea;border-color:#e09a9a}
button:disabled{opacity:.5;cursor:progress}