/* Identité visuelle par classe.
   Les variables de couleur sont posées page par page dans overrides/main.html ;
   ce fichier ne gère que ce qui en découle : motif de bannière, pastilles de
   niveau sur les pages d'accueil, teinte des titres.

   Les motifs sont des SVG inline, sans requête réseau. Chacun évoque une
   notion du niveau : quadrillage pour la numération en 6e, triangles pour la
   symétrie en 5e, chevrons pour les translations en 4e, cercles pour Thalès
   et les fonctions en 3e. */

/* ------------------------------------------------------- motif de bannière */
[data-niveau] .md-header,
[data-niveau] .md-tabs {
  background-color: var(--niveau-fg);
  background-repeat: repeat;
  background-blend-mode: soft-light;
}

/* 6e — quadrillage : numération, repérage */
[data-niveau="6e"] .md-header,
[data-niveau="6e"] .md-tabs {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M0 0h32v32H0z" fill="none"/><path d="M0 .5h32M0 16.5h32M.5 0v32M16.5 0v32" stroke="white" stroke-opacity=".22" stroke-width="1"/></svg>');
}

/* 5e — triangles : symétrie centrale, parallélogrammes */
[data-niveau="5e"] .md-header,
[data-niveau="5e"] .md-tabs {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="36"><path d="M20 2 38 34H2z" fill="none" stroke="white" stroke-opacity=".2" stroke-width="1.4"/><path d="M0 34h40" stroke="white" stroke-opacity=".12"/></svg>');
}

/* 4e — chevrons : translations, frises */
[data-niveau="4e"] .md-header,
[data-niveau="4e"] .md-tabs {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24"><path d="M0 18 9 6l9 12 9-12 9 12" fill="none" stroke="white" stroke-opacity=".22" stroke-width="1.6"/></svg>');
}

/* 3e — cercles : Thalès, homothéties, fonctions */
[data-niveau="3e"] .md-header,
[data-niveau="3e"] .md-tabs {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36"><circle cx="18" cy="18" r="12" fill="none" stroke="white" stroke-opacity=".2" stroke-width="1.3"/><circle cx="18" cy="18" r="4" fill="none" stroke="white" stroke-opacity=".16" stroke-width="1.1"/></svg>');
}

/* --------------------------------------------------- titres et liens teintés */
[data-niveau] .md-typeset h1 { color: var(--niveau-fg); }
[data-niveau] .md-typeset h2 {
  border-bottom: 2px solid var(--niveau-clair);
  padding-bottom: .2rem;
}
[data-md-color-scheme="slate"][data-niveau] .md-typeset h1 { color: var(--niveau-clair); }

/* ------------------------------------------- pastilles sur la page d'accueil */
.niveau-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .9rem;
  margin: 1.6rem 0;
}
.niveau-carte {
  display: block;
  padding: 1rem 1.1rem;
  border-radius: .5rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-left: .35rem solid var(--c);
  text-decoration: none !important;
  color: inherit !important;
  transition: transform .12s ease, box-shadow .12s ease;
}
.niveau-carte:hover {
  transform: translateY(-2px);
  box-shadow: 0 .2rem .6rem var(--md-default-fg-color--lightest);
}
.niveau-carte strong { color: var(--c); font-size: 1.15rem; }
.niveau-carte small { color: var(--md-default-fg-color--light); }

/* Une teinte par niveau, choisie sur `data-niveau` et non sur le lien :
   celui-ci s'écrit « 6e/ » depuis l'accueil et « ../6e/ » depuis la page
   d'un cycle, et un sélecteur de préfixe manquerait la seconde forme.

   Les préfixes couvrent aussi les programmes à venir : 4e27 prend la
   couleur de la 4e, 3e28 celle de la 3e. La valeur par défaut évite qu'un
   niveau non listé sorte sans liseré ni titre coloré — `color: var(--c)`
   sans --c ne peint rien du tout. */
.niveau-carte { --c: var(--md-default-fg-color--light); }
.niveau-carte[data-niveau^="6e"] { --c: #00695C; }
.niveau-carte[data-niveau^="5e"] { --c: #1565C0; }
.niveau-carte[data-niveau^="4e"] { --c: #6A1B9A; }
.niveau-carte[data-niveau^="3e"] { --c: #C62828; }

/* Lycée : une famille de teintes distincte de celle du collège. */
.niveau-carte[data-niveau^="2de"] { --c: #00838F; }
.niveau-carte[data-niveau^="1re"] { --c: #2E7D32; }
.niveau-carte[data-niveau^="tle"] { --c: #BF360C; }   /* 5,6:1 ; #E65100 tombait à 3,8 */

/* La carte d'un cycle, sur l'accueil : elle ne mène pas à une classe mais
   à un choix, et se donne donc plus d'air et la teinte neutre du site. */
.niveau-carte--cycle {
  --c: var(--niveau-clair);
  padding: 1.4rem 1.3rem;
}
.niveau-carte--cycle strong { font-size: 1.35rem; }

/* ------------------------------------------- nom de la classe dans l'en-tête
   Material affiche le nom du site puis, au défilement, le titre de la page.
   On accole la classe au nom du site, en pastille contrastée, pour qu'on
   sache toujours dans quel niveau on se trouve. */
[data-niveau] .md-header__topic:first-child .md-ellipsis::after {
  content: attr(data-classe);
  display: inline-block;
  margin-left: .55rem;
  padding: .06rem .5rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, .22);
  font-size: .68em;
  font-weight: 700;
  letter-spacing: .04em;
  vertical-align: .12em;
  white-space: nowrap;
}
[data-niveau="6e"] .md-header__topic:first-child .md-ellipsis::after { content: "6e"; }
[data-niveau="5e"] .md-header__topic:first-child .md-ellipsis::after { content: "5e"; }
[data-niveau="4e"] .md-header__topic:first-child .md-ellipsis::after { content: "4e"; }
[data-niveau="3e"] .md-header__topic:first-child .md-ellipsis::after { content: "3e"; }

/* L'onglet de la classe courante est mis en avant. */
[data-niveau] .md-tabs__item--active .md-tabs__link {
  font-weight: 700;
  opacity: 1;
  border-bottom: 2px solid rgba(255, 255, 255, .8);
}