/* ============================================================
   Compléments de charte pour les pages communes à trois niveaux :
   accueil, Seconde, Première. Chargée après style.css et avant
   sombre.css ; n'emploie que les variables de la charte, si bien que
   le pendant sombre la suit sans rien ajouter.

   Ce fichier vit dans src/ et non dans le dépôt du site : une mise à
   jour depuis Git ne peut pas l'effacer.
   ============================================================ */

/* ---- Le sélecteur de niveau, dans le bandeau ---------------------- */
.niveaux{
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
}
.niveaux a{
  color:var(--ink-soft);padding:6px 9px;border-radius:7px;
  border:1px solid transparent;white-space:nowrap;
}
.niveaux a:hover{color:var(--ochre)}
.niveaux a[aria-current="page"]{
  color:var(--ochre);border-color:var(--rule);background:var(--panel);
}
/* Sur petit écran, le sélecteur se range dans le menu déroulant. */
.site-nav .niveaux{padding:10px 0 4px;border-top:1px dotted var(--rule);margin-top:6px}
@media (min-width:860px){
  .site-nav .niveaux{padding:0;border:none;margin:0 0 0 clamp(8px,1.4vw,18px);
    padding-left:clamp(10px,1.6vw,22px);border-left:1px solid var(--rule)}
}

/* ---- L'état de chargement d'une page remplie par l'API ------------ */
.etat-documents{
  font-family:var(--mono);font-size:.82rem;letter-spacing:.04em;color:var(--ink-soft);
  margin-top:22px;
}
.etat-documents[hidden]{display:none}

/* ---- Les tuiles de l'accueil ------------------------------------- */
.tuiles{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  margin-top:6px;
}
.tuile{
  display:flex;flex-direction:column;gap:10px;
  background:var(--panel);border:1px solid var(--rule);
  border-left:5px solid var(--accent,var(--ochre));border-radius:13px;
  padding:24px 24px 22px;box-shadow:var(--shadow-soft);
  color:var(--ink);text-decoration:none;
  transition:transform .16s ease,box-shadow .2s ease;
}
.tuile:hover{transform:translateY(-2px);box-shadow:var(--shadow);color:var(--ink)}
.tuile:nth-child(1){--accent:var(--teal)}
.tuile:nth-child(2){--accent:var(--blue)}
.tuile:nth-child(3){--accent:var(--plum)}
.tuile .classe{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent,var(--ochre));
}
.tuile h2{
  font-family:var(--display);font-weight:600;font-size:1.35rem;line-height:1.2;
  letter-spacing:-.01em;margin:0;
}
.tuile p{color:var(--ink-soft);font-size:.96rem;margin:0}
.tuile .aller{
  margin-top:auto;padding-top:10px;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent,var(--ochre));
}

/* Le soulignement animé des liens du bandeau n'a pas lieu d'être sur le
   sélecteur : c'est un cadre qui marque la page courante. */
.site-nav .niveaux a::after{display:none}