/* Navigation entre pages et tableau de bord d'accueil. */

  /* ===================== SCREEN ===================== */
  .screen-frame{
    background:var(--dex-red-darker);
    border-radius:16px;
    padding:8px;
    box-shadow:inset 0 3px 10px rgba(0,0,0,0.5);
  }
  .screen{
    position:relative;
    background:linear-gradient(180deg, var(--screen) 0%, var(--screen-edge) 100%);
    border-radius:11px;
    overflow:hidden;
    padding:16px 16px 12px;
  }
  .screen-boot{ animation: boot-in 520ms ease-out 1; }
  @keyframes boot-in{
    0%{opacity:0; filter:brightness(1.8);}
    100%{opacity:1; filter:brightness(1);}
  }

  /* ---- Pages : de simples sections affichées/masquées. Pas de routeur, donc
     l'app continue de marcher hors ligne et en file://. ---- */
  .page-nav{
    display:flex;
    gap:6px;
    margin-bottom:14px;
    border-bottom:1px solid var(--card-border);
    padding-bottom:8px;
    flex-wrap:wrap;
  }
  .page-tab{
    font-family:var(--font-body);
    font-size:12.5px;
    font-weight:700;
    color:var(--ink-soft);
    background:transparent;
    border:1px solid transparent;
    border-radius:7px;
    padding:7px 13px;
    cursor:pointer;
    transition:background 120ms, color 120ms;
  }
  /* Le survol posait un gris en dur, qui virait au blanc en thème sombre et
     que base.css devait rattraper. Une carte à demi opaque sur le fond de
     l'écran donne le même relief dans les deux thèmes, sans rattrapage. */
  .page-tab:hover{
    background:color-mix(in srgb, var(--card) 55%, transparent);
    color:var(--ink);
  }
  .page-tab.active{
    background:var(--card);
    border-color:var(--card-border);
    color:var(--dex-red-deep);
    box-shadow:0 2px 6px -3px rgba(20,20,30,0.35);
  }
  .page-tab:focus-visible{ outline:2.5px solid var(--dex-red); }
  .page{ display:none; }
  .page.active{ display:block; animation:page-in 200ms ease-out; }
  @keyframes page-in{ 0%{opacity:0; transform:translateY(4px);} 100%{opacity:1; transform:none;} }

  /* ---- En-tête d'un Pokédex de jeu (régional / national) ---- */
  .scope-head{
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    margin-bottom:10px;
  }
  .scope-title{
    font-family:var(--font-body);
    font-size:16px; font-weight:800; color:var(--ink);
    flex:1; min-width:180px;
  }
  .scope-title small{
    display:block;
    font-family:var(--font-data);
    font-size:9.5px; font-weight:600; letter-spacing:.14em;
    text-transform:uppercase; color:var(--ink-faint);
    margin-top:2px;
  }
  .scope-note{
    font-size:11.5px;
    line-height:1.45;
    color:var(--ink-soft);
    background:var(--card);
    border:1px solid var(--card-border);
    border-left:3px solid var(--chrome-lo);
    border-radius:0 10px 10px 0;
    padding:8px 11px;
    margin:0 0 12px;
  }
  .scope-note.warn{
    border-left-color:var(--gold-deep);
    background:color-mix(in srgb, var(--gold) 12%, var(--card));
  }

  /* ---- Page d'accueil ---- */
  .home-hero{ margin-bottom:16px; }
  .home-eyebrow{
    font-family:var(--font-data);
    font-size:10px; letter-spacing:.16em; text-transform:uppercase;
    font-weight:600; color:var(--ink-faint);
  }
  .home-title{
    font-family:var(--font-body);
    font-size:23px; font-weight:800; color:var(--ink);
    letter-spacing:-.015em;
    margin:2px 0 4px;
  }
  .home-sub{ font-size:13px; color:var(--ink-soft); margin:0; line-height:1.45; }

  /* L'invitation de l'accueil : se connecter, et prendre l'application.
     Le ton d'une carte ordinaire, pas d'une banniere — elle vit au milieu des
     autres blocs de l'accueil et ne doit pas leur passer devant. Elle
     disparait entierement dans l'application une fois connecte : il n'y reste
     alors plus rien a proposer. */
  .home-invite{
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:11px;
    padding:14px 16px;
    margin-bottom:18px;
  }
  .home-invite-mot{
    font-size:13px; color:var(--ink-soft); line-height:1.5;
    margin:0 0 12px;
  }
  .home-invite-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
  /* Le bouton Discord est taille pour une modale, ou il occupe toute la
     largeur. Ici il partage la rangee avec le telechargement. */
  .home-invite-actions .discord-btn{ width:auto; margin:0; flex:1 1 240px; }
  /* Un lien porte la mise en forme d'un bouton : .toggle-btn ne pose pas de
     display, et un <a> reste en ligne — d'ou la hauteur qui ne tombait pas
     juste a cote du bouton Discord. */
  .home-invite-app{
    display:inline-flex; align-items:center; justify-content:center;
    text-decoration:none; padding:12px 16px;
  }


  .home-gauges{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
  .home-gauge{
    flex:1; min-width:190px;
    display:flex; align-items:center; gap:14px;
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:11px;
    padding:14px 16px;
    box-shadow:0 8px 18px -14px rgba(20,20,30,0.4);
  }
  .home-gauge .gauge{ width:64px; height:64px; }
  .home-gauge .gauge-value{ font-size:13px; }
  .home-gauge.shiny .gauge .fill{ stroke:var(--gold-deep); }
  .home-gauge-label{ display:flex; flex-direction:column; line-height:1.2; }
  .home-gauge-label strong{
    font-size:24px; font-weight:800; color:var(--ink);
    letter-spacing:-.015em; font-variant-numeric:tabular-nums;
  }
  .home-gauge.shiny .home-gauge-label strong{ color:var(--gold-deep); }
  .home-gauge-label span{ font-size:12px; color:var(--ink-soft); }
  .home-gauge-label em{
    font-style:normal; font-size:11px; font-weight:600;
    color:var(--ink-faint); margin-top:3px;
  }

  /* Chaque titre ouvre sa section : c'est lui qui pose la respiration, et non
     la section précédente. Sans cette marge, « Reprendre » se collait au
     journal juste au-dessus et se lisait comme sa dernière ligne. */
  .home-section-title{
    font-family:var(--font-data);
    font-size:10px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--ink-faint); font-weight:600;
    margin:26px 0 9px;
  }
  .home-gens{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
    gap:8px;
  }
  .home-gen{
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:10px;
    padding:9px 12px;
    cursor:pointer;
    text-align:left;
    font-family:var(--font-body);
    transition:transform 120ms, box-shadow 120ms;
  }
  .home-gen:hover{ transform:translateY(-1px); box-shadow:0 8px 16px -12px rgba(20,20,30,0.4); }
  .home-gen:focus-visible{ outline:2.5px solid var(--dex-red); }
  .home-gen-name{
    font-size:12px; font-weight:700; color:var(--ink);
    letter-spacing:-.01em; margin-bottom:6px;
  }
  .home-gen-row{ display:flex; align-items:center; gap:7px; margin-top:3px; }
  .home-gen-row .tag{ font-size:10px; width:13px; text-align:center; }
  /* Le creux d'une barre est celui du modèle : le fond de l'écran, cerné
     d'un filet à l'intérieur. Le gris en dur qu'il remplace obligeait
     base.css à repeindre la barre en thème sombre. */
  .home-bar{
    flex:1; height:7px; border-radius:4px;
    background:var(--screen); overflow:hidden;
    box-shadow:inset 0 0 0 1px var(--card-border);
  }
  .home-bar i{ display:block; height:100%; border-radius:4px; background:var(--caught); transition:width 400ms; }
  .home-bar.shiny i{ background:linear-gradient(90deg,#ffcf5c,var(--gold-deep)); }
  .home-gen-num{
    font-family:var(--font-data); font-size:10px; color:var(--ink-soft);
    font-variant-numeric:tabular-nums;
    min-width:52px; text-align:right;
  }
  /* « Reprendre » ferme la page : ses raccourcis sont posés sur un fond à eux,
     pour se lire comme un bloc d'actions et non comme trois boutons égarés
     sous le journal. */
  .home-actions{
    display:flex; gap:8px; flex-wrap:wrap;
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:11px;
    padding:12px;
  }


/* ---- Le defi du jour ------------------------------------------------------
   Un Pokemon tire au hasard dans un jeu tire au hasard, le meme pour tout le
   monde, et RIEN D'OBLIGATOIRE. Le ton de la carte porte cela : elle ne crie
   pas, elle n'a pas de compte a rebours, et rien n'y rougit quand on saute un
   jour. C'est une invitation posee sur l'accueil, pas une tache.

   D'ou le fond de carte ordinaire plutot qu'une couleur d'alerte : elle vit au
   milieu des autres blocs, a la meme hauteur de voix. */
.defi{ margin-bottom:18px; }

.defi-carte{
  display:flex; align-items:center; gap:14px;
  padding:13px 15px;
  background:var(--card); border:1px solid var(--card-border); border-radius:12px;
}
/* Releve : un liseré vert a gauche, et rien de plus. Une carte qui change
   entierement de couleur donnerait a l'accueil un air de tableau de bord. */
.defi-carte.releve{ border-left:3px solid var(--caught); }

.defi-sprite{
  flex:0 0 auto; width:64px; height:64px;
  display:grid; place-items:center;
  background:var(--screen); border-radius:10px;
}
.defi-sprite img{ width:58px; height:58px; object-fit:contain; }

.defi-corps{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.defi-nom{
  font-family:var(--font-body); font-size:17px; font-weight:700; color:var(--ink);
}
.defi-jeu{ font-family:var(--font-data); font-size:11px; color:var(--ink-soft); }
.defi-etat{ font-family:var(--font-body); font-size:12.5px; color:var(--ink-faint); }

.defi-actions{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }

.defi-compte{
  margin:7px 2px 0;
  font-family:var(--font-data); font-size:10.5px; color:var(--ink-faint);
}

/* Sous 560 px la carte se plie : le nom et le jeu passent sous le sprite, et
   les boutons prennent toute la largeur plutot que de compresser le nom a
   trois caracteres. */
@media (max-width:560px){
  .defi-carte{ flex-wrap:wrap; }
  .defi-actions{ width:100%; justify-content:flex-end; }
}

/* ---- Les defis passes -----------------------------------------------------
   Une grille de vignettes, parce que c'est la PHOTO qu'on revient regarder :
   une liste de noms et de dates ne se relit pas. */
.defis-card{ width:min(660px, 94vw); }
.defis-note{
  font-family:var(--font-data); font-size:11px; color:var(--ink-soft);
  margin:0 0 12px;
}
.defis-grille{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
  gap:10px; max-height:min(56vh, 420px); overflow-y:auto; padding:2px;
}
.defi-passe{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:9px 6px;
  background:var(--screen); border:1px solid var(--card-border); border-radius:9px;
}
/* Releve : le meme lisere vert que la carte du jour, en haut cette fois — la
   vignette occupe la gauche. */
.defi-passe.releve{ border-top:2px solid var(--caught); }
.defi-passe .chasse-photo{ margin-left:0; width:76px; height:54px; }
.defi-passe-nom{
  font-family:var(--font-body); font-size:12px; color:var(--ink);
  text-align:center; overflow-wrap:anywhere;
}
.defi-passe-jour{ font-family:var(--font-data); font-size:9.5px; color:var(--ink-faint); }

/* Le lien vers l'historique, dans la ligne du compte. Un bouton nu : c'est une
   phrase, pas une commande, et un bouton dessine y ferait une seconde action
   concurrente de « Relever ». */
.defi-lien{
  border:none; background:none; padding:0; cursor:pointer;
  font-family:var(--font-data); font-size:10.5px; color:var(--ink-soft);
  text-decoration:underline;
}
.defi-lien:hover{ color:var(--ink); }