/* Bannière d'accueil.

   Un bandeau illustré en tête de l'accueil et de la page d'accueil de chaque
   classe — nulle part ailleurs : sur une page de séance, il repousserait le
   cours sous la ligne de flottaison sans rien apprendre à personne.

   L'image est posée par overrides/main.html, à partir de la clé `hero` du
   préambule de la page. C'est tools/site.py qui l'y écrit, en choisissant la
   déclinaison de couleur qui va avec le niveau (tools/bannieres.py). */

/* `margin-bottom` : le titre de la page vient juste dessous, et Material ne
   lui laisse qu'un centimètre de blanc — trop peu sous une image pleine
   largeur. Le supplément se pose sur la bannière et non sur le titre : sur le
   site du professeur, le chiffrement remplace le contenu de l'article jusqu'à
   la saisie du mot de passe, et un sélecteur qui viserait le <h1> n'y
   trouverait rien. */
.hero-banner {
  position: relative;
  line-height: 0;                    /* pas de blanc sous l'image en ligne */
  margin-bottom: .6rem;
}

/* Le dessin fait 1200 × 240, soit 5:1, mais on n'en montre que les 80 % du
   haut : d'où le rapport 1200/192 imposé à la boîte, le `cover` qui déborde
   et le `top` qui décide du bord sacrifié. Le bandeau y gagne d'être plus
   ramassé, et la Corse d'y tenir en grand : tools/bannieres.py l'agrandit de
   moitié et remonte sa pointe nord sous le bord haut, le tiers sud passant
   sous la coupe. Une Corse entière dans un bandeau de 6:1 serait minuscule ;
   les deux tiers nord s'y voient.

   La hauteur reste calculée depuis la largeur, sans jamais être fixée : le
   plafond de 340 px arrête la croissance au-delà de 2100 px de large, sur un
   écran où le bandeau finirait par occuper tout l'écran d'entrée. Le `cover`
   rogne alors un peu plus par le bas, toujours du même côté. */
.hero-img {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 192;
  max-height: 340px;
  object-fit: cover;
  object-position: top;
}

/* ------------------------------------------------- titre posé sur l'image */

/* Facultatif, et éteint par défaut : le gabarit ne pose ce bloc que si la
   page déclare `hero_titre`. tools/site.py ne le fait pas — le titre reste
   dans la page, où il est un vrai <h1>, lu par les lecteurs d'écran et repris
   par la recherche. Sur le site du professeur il y a une raison de plus : le
   chiffrement masque le contenu tant que le mot de passe n'est pas donné, et
   un titre posé sur l'image passerait, lui, en clair.

   Pour l'allumer malgré tout, ajouter `hero_titre:` au préambule d'une page.
   Le texte s'aligne sur la colonne de contenu et se tient à gauche : la Corse
   occupe le milieu du dessin, de 47 % à 53 % de sa largeur. */
.hero-texte {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 61rem;                  /* la largeur de grille de Material */
  margin: 0 auto;
  padding: 0 1.2rem;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 1px 4px rgb(0 0 0 / 55%);
}
.hero-texte h1 {
  margin: 0;
  font-size: clamp(1.1rem, 3.2vw, 2rem);
  font-weight: 700;
  color: inherit;                    /* et non la teinte de niveau des titres */
}
.hero-texte p {
  margin: .3em 0 0;
  font-size: clamp(.7rem, 1.6vw, .9rem);
  opacity: .85;
}

/* Sur un téléphone, le bandeau ne fait plus que 70 px de haut : un titre posé
   dessus y serait illisible. Il repasse alors sous l'image, en flux normal. */
@media screen and (max-width: 44.9375em) {
  .hero-texte {
    position: static;
    color: var(--md-default-fg-color);
    text-shadow: none;
    padding: .8rem 1.2rem 0;
  }
}