/* Apparence du site, reprise de cours.mathro.fr : mêmes couleurs de la
   charte (vert, bleu, noir, rouge), mêmes cartes de niveau sur l'accueil. */

:root {
  /* Charte graphique, recopiée de cours.mathro.fr (themes/charte-graphique.json). */
  --vert: #047857;
  --rouge: #b91c1c;
  --bleu: #1d4ed8;
  --noir: #334155;

  --fond: #ffffff;
  --fond-doux: #f8fafc;
  --texte: #0f172a;
  --texte-doux: #475569;
  --bord: #e2e8f0;
  --accent: #1d4ed8;

  --largeur-texte: 46rem;
}

/* Pas de mode sombre : comme pour le cours, le site garde le visage du papier. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 17px/1.65 "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}

.page { max-width: var(--largeur-texte); margin: 0 auto; padding: 2rem 1.25rem 6rem; }

/* --- Navigation --------------------------------------------------------- */
.site-nav {
  border-bottom: 1px solid var(--bord);
  background: var(--fond-doux);
  font-family: system-ui, sans-serif;
  font-size: 0.9rem;
}
.site-nav > div {
  max-width: var(--largeur-texte); margin: 0 auto; padding: 0.7rem 1.25rem;
  display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; justify-content: center;
}
.site-nav a { color: var(--texte-doux); text-decoration: none; }
.site-nav a:hover { color: var(--accent); }
.site-nav .marque {
  flex-basis: 100%; text-align: center;
  font-weight: 600; font-size: 1.3rem; color: var(--texte);
}

/* --- Accueil : le menu des niveaux ---------------------------------------- */
/* Une carte par niveau : filet à gauche et fond teinté dans la couleur de la
   charte qui lui est attribuée. */
.famille-vert { --couleur: var(--vert); }
.famille-rouge { --couleur: var(--rouge); }
.famille-bleu { --couleur: var(--bleu); }
.famille-noir { --couleur: var(--noir); }

.menu-niveaux {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem;
  /* Plus large que la colonne de texte : le menu occupe l'écran. */
  width: min(82rem, calc(100vw - 2.5rem));
  margin: 2rem 0 0 50%; transform: translateX(-50%);
}
/* Deux cartes côte à côte demandent de la place ; en dessous, une seule
   colonne, dans la largeur de la page. */
@media (max-width: 76rem) {
  .menu-niveaux { grid-template-columns: 1fr; gap: 1.2rem; width: auto; margin-left: 0; transform: none; }
}

.carte-niveau {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; column-gap: 2.2rem;
  min-height: 17rem;
  padding: 2.2rem 2rem 2.2rem 2.6rem;
  border-left: 8px solid var(--couleur);
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--couleur) 6%, var(--fond));
  color: var(--couleur);
  transition: background 0.15s, transform 0.15s;
}
.carte-niveau:has(.carte-lien:hover, .carte-lien:focus-visible) {
  background: color-mix(in srgb, var(--couleur) 13%, var(--fond));
  transform: translateX(4px);
}
.carte-niveau:has(.carte-lien:focus-visible) { outline: 2px solid var(--couleur); outline-offset: 2px; }

/* Le nom du niveau couvre toute la carte. Pour l'instant c'est un bouton sans
   effet ; il deviendra un lien quand les manuels seront en ligne. */
.carte-lien {
  all: unset; cursor: pointer;
  color: inherit; text-decoration: none; outline: none;
}
.carte-lien::after { content: ""; position: absolute; inset: 0; }

/* Deux colonnes centrées sur la même ligne médiane : le numéro et le texte
   (cycle, nom, état). Un filet sépare le numéro du texte. */
.carte-numero {
  align-self: stretch; display: flex; align-items: center;
  padding-right: 2.2rem;
  border-right: 1.5px solid color-mix(in srgb, var(--couleur) 30%, transparent);
  font-size: 10rem; font-weight: 700; line-height: 0.8; letter-spacing: -0.03em;
}
.carte-numero sup { font-size: 0.36em; margin-left: 0.04em; vertical-align: 1.35em; line-height: 0; }
.carte-texte { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.carte-cycle, .carte-detail { font-family: system-ui, sans-serif; line-height: 1.2; }
.carte-cycle { font-size: 1.15rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.75; }
.carte-nom { font-size: 3.4rem; font-weight: 700; line-height: 1.05; }
.carte-detail { font-size: 1.35rem; color: var(--texte-doux); }

@media (max-width: 40rem) {
  .carte-niveau { min-height: 0; padding: 1.5rem 1rem 1.5rem 1.2rem; column-gap: 0.9rem; }
  .carte-numero { font-size: 4.4rem; padding-right: 0.9rem; }
  .carte-texte { gap: 0.3rem; }
  .carte-cycle { font-size: 0.8rem; }
  .carte-nom { font-size: 1.7rem; }
  .carte-detail { font-size: 1.05rem; }
}