/* ==========================================================================
   funact — coquille d'application de "Mon espace"
   Feuille du rail de navigation et de la zone de contenu poses par shell.js.
   Voir l'en-tete de ce fichier pour le pourquoi de cette mise en page.

   DEUX LARGEURS, ET UNE SEULE NAVIGATION

     >= 1024px  le rail est la, colle a gauche, toujours visible.
     < 1024px   le rail devient un tiroir, ouvert par le hamburger.

   C'est le MEME rail dans les deux cas, et c'est le point : le hamburger de
   mobile ouvre exactement ce que le bureau montre a gauche. Auparavant il
   ouvrait le tiroir de nav.js, qui ignorait Participant, Spectateurs,
   Organisateur et la liste des evenements — deux navigations differentes selon
   la taille de l'ecran, pour le meme compte.

   .app-bar (fleche de retour nommee + hamburger) accompagne le tiroir sous
   1024px et disparait au-dessus : une fleche "monter d'un cran" n'a aucun sens
   a cote d'un rail qui montre deja tous les crans.
   ========================================================================== */

/* Le corps cesse de centrer une carte : la coquille occupe l'ecran. */
body.has-shell {
  display:block; padding:0; margin:0;
  min-height:100dvh; background:var(--bg);
}
/* La carte n'a plus lieu d'etre sur ces pages ; si une page en garde une, elle
   redevient un simple panneau dans le flux. */
body.has-shell .card {
  max-width:none; width:auto; margin:0; border:none;
  border-radius:0; box-shadow:none; background:transparent; padding:0;
}

.shell { min-height:100dvh; }

/* --- La barre de nav.js dans la coquille -------------------------------------
   Elle est posee dans .shell-main, donc au-dessus de l'en-tete de page.

   Deux corrections indispensables :

   1. Ses marges negatives (-32px) sont calibrees pour mordre le padding de
      .card. Il n'y a plus de carte : telles quelles, elles la feraient
      deborder de 32px de chaque cote.

   2. Elle ne sert QUE sous 1024px, la ou le rail est replie en tiroir. Son
      hamburger ouvre ce tiroir (voir onMenu dans nav.js), sa fleche remonte
      d'un cran. Au-dessus, le rail est pose : les deux commandes n'ajoutent
      plus rien et feraient deux navigations concurrentes a l'ecran. */
body.has-shell .app-bar { margin:0; padding:6px 14px; }
@media (min-width:1024px) { body.has-shell .app-bar { display:none; } }

/* Pas de fleche de retour sur les pages a coquille : le rail replie contient
   deja tous les crans — les trois profils, la liste des evenements — et l'on y
   saute directement au lieu de remonter un a un. La barre n'y garde donc que le
   hamburger.

   SCOPE A body.has-shell, ET C'EST ESSENTIEL. Sur emitter.html et
   checkpoint*.html — qui n'ont pas de coquille — cette fleche n'est PAS une
   navigation : elle coupe le suivi GPS et libere le poste (voir stopTracking
   dans emitter.html, releaseCheckpoint dans checkpoint-core.js). La masquer la
   priverait un benevole du seul geste qui rend son poste a un autre appareil. */
body.has-shell .app-bar-back { display:none; }

/* --- Rail ------------------------------------------------------------------ */

.rail {
  display:flex; flex-direction:column; gap:2px;
  background:var(--surface); border-right:1px solid var(--line);
  /* Zones sures consommees ici plutot que dans le seul mode tiroir : dans l'app
     Android, un rail pose en permanence sur une tablette passe sous l'horloge
     exactement comme un rail sorti en tiroir sur un telephone. Sur PC les deux
     retraits valent 0 et rien ne bouge. Meme jetons que .nav-panel, definis en
     tete de nav.css ; le repli a 0px couvre les pages qui ne la chargent pas. */
  padding:calc(14px + var(--safe-top, 0px)) 12px calc(16px + var(--safe-bottom, 0px));
}

/* Croix de fermeture + marque sur une seule ligne. Voir buildRail dans shell.js
   pour le pourquoi de la croix et de sa position. */
.rail-head { display:flex; align-items:center; gap:6px; min-height:40px; margin-bottom:8px; }

.rail-close {
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  /* -4px alignent son centre sur celui du hamburger de la barre du haut, qui
     mord lui aussi sur le padding de son conteneur (voir .app-bar-menu dans
     nav.css) : la croix apparait la ou le doigt vient d'appuyer. */
  width:40px; height:40px; margin-left:-4px; padding:0;
  border:none; border-radius:var(--radius-sm); background:transparent;
  color:var(--ink-dim); cursor:pointer;
}
.rail-close:hover { background:var(--surface-2); color:var(--ink); }

.rail-brand {
  font-family:var(--font-display); font-weight:700; font-size:21px;
  letter-spacing:.02em; text-transform:lowercase; color:var(--ink);
  /* Le padding bas qui separait la marque de la navigation vit desormais sur
     .rail-head : porte par la marque seule, il decalait la croix vers le haut. */
  text-decoration:none; padding:4px 10px 0 4px;
}
.rail-brand span { color:var(--accent); }

.rail-nav { display:flex; flex-direction:column; gap:2px; }

.rail-item {
  display:block; width:100%; text-align:left;
  padding:9px 10px; border:none; border-radius:var(--radius-sm);
  background:transparent; color:var(--ink);
  font-family:inherit; font-size:.9rem; font-weight:600;
  text-decoration:none; cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rail-item:hover { background:var(--surface-2); }
/* L'entree courante est teintee, pas seulement grasse : dans une colonne ou
   TOUT est gras, la graisse ne distingue plus rien. */
.rail-item.active { background:var(--accent-soft); color:var(--accent-ink); }
.rail-item-quiet { color:var(--ink-dim); font-weight:400; font-size:.85rem; }
.rail-item-quiet:hover { color:var(--ink); }
/* Les evenements sont un cran sous les profils : le retrait le dit sans qu'il
   faille un second niveau de boite. */
.rail-item-sub { padding-left:20px; font-weight:400; font-size:.86rem; }
.rail-item-sub.active { font-weight:600; }

/* Destination verrouillee (voir setLocked dans shell.js) : un compte dont le
   profil n'est pas encore enregistre ne peut aller nulle part. On l'estompe
   sans la retirer — le rail continue de montrer ce qui attend de l'autre cote
   du formulaire. pointer-events coupe AUSSI le survol : une entree qui
   s'allume au passage de la souris promet un clic qui ne viendra pas. */
.rail-locked {
  opacity:.4;
  cursor:default;
  pointer-events:none;
}

.rail-group { display:flex; flex-direction:column; gap:2px; }
/* Colle au groupe du dessus, avec le meme ecart qu'entre deux entrees : ces
   deux liens prolongent la liste, ils n'ouvrent pas une nouvelle section. */
.rail-links { margin-top:2px; display:flex; flex-direction:column; gap:2px; }
.rail-group-title {
  padding:0 10px 6px; color:var(--ink-dim);
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
}

/* Pousse en bas : reglages et deconnexion ne doivent pas se trouver sous le
   pouce au moment de viser un evenement. */
.rail-foot {
  margin-top:auto; padding-top:16px;
  display:flex; flex-direction:column; gap:2px;
  border-top:1px solid var(--line);
}
/* Les selecteurs de langue et de theme du pied de rail. La marge basse de
   .switch est calibree pour un formulaire ; ici les intitules suffisent. */
.rail-foot .switch { margin:0 0 4px; padding:0 10px; }
.rail-foot .rail-group-title { margin-top:10px; }

.rail-who {
  padding:8px 10px 2px; color:var(--ink-dim); font-size:.75rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* --- Zone de contenu -------------------------------------------------------- */

.shell-main { min-width:0; display:flex; flex-direction:column; }

/* Collante : le titre de la page et ses actions restent accessibles quand on
   fait defiler une longue liste d'inscrits. Meme principe que .stack sur
   results.html. */
.shell-head {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:16px 28px; min-height:64px;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.shell-title {
  flex:1; min-width:0; margin:0;
  font-size:1.35rem; line-height:1.15;
  overflow:hidden; text-overflow:ellipsis;
}
.shell-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* Les actions qui portent sur la PAGE entiere (renommer l'evenement affiche,
   le supprimer) vivent ici, pas dans le contenu. Deux raisons : elles ne
   dependent d'aucun panneau en particulier, et posees dans le flux elles se
   retrouvaient seules sur le fond gris pendant que tout le reste etait en
   cartes blanches. */
.shell-actions .action {
  display:inline-flex; align-items:center; padding:8px 14px;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink);
  font-family:inherit; font-size:.85rem; font-weight:600;
  text-decoration:none; cursor:pointer; white-space:nowrap;
}
.shell-actions .action:hover { border-color:var(--line-strong); }
.shell-actions .action:disabled { opacity:.6; cursor:default; }
/* Une suppression se signale sans crier : l'encre suffit, l'aplat rouge est
   reserve a la confirmation elle-meme (voir .dialog-confirm dans theme.css). */
.shell-actions .action-danger { color:var(--stop); }
.shell-actions .action-danger:hover { border-color:var(--stop); }

.shell-body { padding:24px 28px 48px; }
/* Borne de lecture : la coquille prend tout l'ecran, mais le contenu ne doit
   pas s'etirer indefiniment — au-dela, l'oeil doit balayer d'un bord a l'autre
   pour relier un intitule a sa valeur. */
.shell-body > * { max-width:1180px; }

/* Les panneaux de contenu (cartes blanches du tableau de bord et des vues)
   vivent dans panels.css : index.html a deja un `.panel` a elle, et n'a besoin
   ici que du rail. Voir l'en-tete de panels.css. */

/* Une page qui borne elle-meme sa largeur (results.html plafonne .wrap a
   1280px) se retrouvait amputee des 260px du rail : le tableau des resultats y
   perdait une colonne, alors que c'est precisement lui qui gagne a etre large.
   Avec le rail, la borne n'a plus lieu d'etre — c'est le rail qui borne. */
body.has-rail .wrap { max-width:none; }

/* --- Rail en tiroir, puis absent -------------------------------------------- */

.rail-scrim { display:none; }

/* Le bouton de menu d'une page s'efface des que le rail est visible : deux
   menus pour le meme contenu, l'un a gauche l'autre a droite, ne se partagent
   rien et laissent choisir au hasard. Sous 1024px le rail redevient un tiroir
   et le bouton reprend son role. */
/* SANS COMPTE sur index.html et results.html, le hamburger reste sous 1024px.
   Il n'y a la ni rail ni barre de nav.js : c'est le seul endroit ou changer de
   langue ou de theme, et un visiteur de passage y a autant droit qu'un
   titulaire de compte. Au-dessus, la place ne manque plus — le bouton
   "Mon espace" et le choix de langue tiennent dans la barre, et le tiroir n'a
   plus rien d'exclusif a offrir. */
@media (max-width:1023px) { body.anon-nav .desk-only { display:none; } }
@media (min-width:1024px) { body.anon-nav .nav-menu-btn { display:none; } }

@media (min-width:1024px) {
  body.has-rail .nav-menu-btn { display:none; }
}

@media (min-width:1024px) {
  /* Le rail est pose a demeure : il n'y a plus de tiroir a fermer, et une croix
     a cote de la marque laisserait croire qu'on peut escamoter la navigation. */
  .rail-close { display:none; }
  .rail-brand { padding-left:10px; }

  .shell { display:grid; grid-template-columns:260px 1fr; }
  /* Le rail defile independamment du contenu : une liste de trente evenements
     ne doit pas emporter la page avec elle. */
  .rail { position:sticky; top:0; height:100dvh; overflow-y:auto; }
}

@media (max-width:1023px) {
  /* Tiroir : hors ecran, ramene par .rail-open. */
  .rail {
    position:fixed; z-index:45; top:0; left:0; bottom:0; width:min(280px, 82vw);
    transform:translateX(-100%);
    /* Meme grammaire que le tiroir de nav.js dont il est le jumeau (voir
       .nav-panel dans nav.css) : la courbe arrive vite puis se pose, et la
       sortie est plus courte que l'entree. Les deux tiroirs se ressemblaient
       de loin avec un `ease` generique ; ils bougent maintenant a l'identique,
       ce qui compte parce que selon la page c'est l'un OU l'autre que le meme
       hamburger fait sortir. */
    transition:transform var(--dur-exit, 150ms) var(--ease-emphasized, cubic-bezier(.32,.72,0,1));
    box-shadow:var(--shadow-lg);
  }
  .rail-open .rail { transform:none; transition-duration:var(--dur-enter, 220ms); }
  .rail-scrim {
    display:block; position:fixed; inset:0; z-index:40;
    background:rgba(16,16,28,.45);
    opacity:0; pointer-events:none; transition:opacity var(--dur-exit, 150ms) ease;
  }
  .rail-open .rail-scrim { opacity:1; pointer-events:auto; transition-duration:var(--dur-enter, 220ms); }
  .shell-head { padding:12px 16px; }
  .shell-body { padding:16px 16px 40px; }
}

@media (max-width:639px) {
  .shell-head { padding:10px 14px; min-height:0; }
  .shell-title { font-size:1.2rem; }
  .shell-body { padding:14px 14px 36px; }
}