/**
 * Bandeau de page.
 *
 * Le fond vient du contenu — une photo si la page en a une, l'aplat
 * marine sinon. Le décor vient du niveau — frise N2 sur les rubriques,
 * frise N3 sur leurs pages filles. Chaque frise porte son dessin
 * complet, coqs compris.
 *
 * Tous les graphismes sont posés en masque : un fichier par forme pour
 * tout le site, la couleur venant de la rubrique. Sept frises N3 ont
 * ainsi été ramenées à une seule — elles avaient la même couche alpha
 * au pixel près, seule leur couleur changeait.
 */

:root {
  /*
   * Proportions relevées dans les réglages des sliders d'origine, à la
   * largeur de référence 1216 px : 400 px de haut sur les rubriques,
   * 300 px sur les pages internes. Les paliers inférieurs suivaient
   * déjà ces rapports au pixel près — 778 × 256 et 778 × 192, 480 × 158
   * et 480 × 118 — donc « aspect-ratio » les reproduit tous sans une
   * seule requête de média. C'est ce que veut dire homothétique.
   */
  /*
   * Hauteurs relevées dans les réglages des sliders d'origine : 400 px
   * sur les rubriques, 300 sur les pages internes, à la largeur de
   * référence de 1216. En dessous, réduction proportionnelle — 337 et
   * 253 à 1024, 256 et 192 à 778, 158 et 118 à 480 — soit exactement
   * « 400 / 1216 » et « 300 / 1216 » de la largeur de fenêtre.
   *
   * Au-delà de 1216 px la proportion s'arrête : le bandeau garde sa
   * hauteur de référence, celle pour laquelle les frises sont
   * dessinées — 1920 × 400 et 1920 × 300, exactement.
   */
  --bandeau-hauteur-rubrique: min(400px, 32.895vw);
  --bandeau-hauteur-interne:  min(300px, 24.671vw);

  --bandeau-apparition: 300ms;

  /*
   * Les chemins des masques sont dans _tokens.css et non ici : dans une
   * variable, une URL relative est résolue par rapport à la feuille qui
   * la déclare. Écrite ici, « ../img/ » pointait sur assets/css/img/,
   * qui n'existe pas — les coqs et les frises restaient invisibles.
   */
}

/* Le bandeau occupe toute la fenêtre, quel que soit le conteneur qui
   l'entoure. Voir « .pleine-largeur » dans base.css. */
.bandeau {
  position: relative;
  overflow: hidden;
  width: 100vw;
  max-width: 100vw;
  height: var(--bandeau-hauteur);

  /*
   * Aucune marge en haut : la maquette fait venir l'image directement
   * sous la barre de menu, le logo la mordant par le centre.
   */
  margin-block: 0;
  margin-inline: calc(50% - 50vw);
}

.bandeau--rubrique { --bandeau-hauteur: var(--bandeau-hauteur-rubrique); }
.bandeau--interne  { --bandeau-hauteur: var(--bandeau-hauteur-interne); }

/* Sans photo, l'aplat de la charte. */
.bandeau--aplat { background-color: var(--c-marine); }

/* ---------------------------------------------------------------
 * Le fond
 * --------------------------------------------------------------- */

.bandeau__fond,
.bandeau__fond img {
  display: block;
  width: 100%;
  height: 100%;
}

.bandeau__fond img {
  object-fit: cover;

  /* Le cadrage d'origine : 45 % depuis le haut, relevé dans les
     réglages du slider. Les visages tombent au bon endroit. */
  object-position: center 45%;
}

/* ---------------------------------------------------------------
 * La frise
 *
 * Elle recouvre tout le bandeau, photo comprise, et vient donc en
 * dernier dans le balisage.
 *
 * Les fichiers font 1920 px de large sur exactement la hauteur du
 * bandeau. « cover » les pose donc à leur taille naturelle jusqu'à
 * 1920 px de fenêtre, en les recadrant sur les côtés — ce que faisait
 * déjà le slider, où la frise débordait d'un cadre de 1216. Au-delà de
 * 1920 px la frise s'agrandit et perd un peu de son haut et de son bas ;
 * « contain » l'aurait laissée flotter au milieu, et un étirement
 * aurait déformé les courbes, ce qui se voit bien davantage.
 * --------------------------------------------------------------- */

/*
 * Le décor prend la couleur de rubrique, sauf là où cette couleur est
 * aussi celle du fond — voir « --couleur-decor-hero » dans _tokens.css,
 * où la règle vit avec les rubriques plutôt qu'ici.
 */
.bandeau__frise {
  position: absolute;
  inset: 0;
  background-color: var(--couleur-decor-hero, var(--couleur-rubrique));
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.bandeau--rubrique .bandeau__frise {
  -webkit-mask-image: var(--frise-n2-fichier);
  mask-image: var(--frise-n2-fichier);
}

.bandeau--interne .bandeau__frise {
  -webkit-mask-image: var(--frise-n3-fichier);
  mask-image: var(--frise-n3-fichier);
}

/*
 * Corrigé le 3 novembre : la frise prenait « --couleur-rubrique », donc
 * le marine sur CDOS 30 comme sur une page hors rubrique — un décor
 * marine sur un aplat marine, présent et invisible. C'est ce qui
 * manquait sur l'annuaire et sur « Équipe / fonctionnement ».
 * « --couleur-decor-hero » y répond, dans _tokens.css.
 */

/* ---------------------------------------------------------------
 * L'apparition
 *
 * Les graphismes entrent en fondu, puis le fond avec le même fondu,
 * puis tout reste fixe — c'est l'ordre de la maquette d'origine, où
 * les coqs précédaient la photo.
 *
 * « both » pose l'état de départ avant que l'animation ne commence :
 * sans lui, le premier repaint montrerait tout à pleine opacité.
 * --------------------------------------------------------------- */

@keyframes cdos30-apparition {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.bandeau__frise,
.bandeau__fond {
  animation: cdos30-apparition var(--bandeau-apparition) ease-out both;
}

.bandeau__fond { animation-delay: var(--bandeau-apparition); }

/*
 * Réduction des animations : tout est là dès le premier affichage. On
 * ne raccourcit pas le fondu, on le supprime — une animation de 300 ms
 * reste une animation.
 */
@media (prefers-reduced-motion: reduce) {
  .bandeau__frise,
  .bandeau__fond { animation: none; }
}

/* ---------------------------------------------------------------
 * Sans masque — Safari ancien, ou fichier de forme absent — les
 * graphismes seraient des rectangles pleins en travers du bandeau.
 * Mieux vaut qu'ils disparaissent : la photo et l'aplat suffisent.
 * --------------------------------------------------------------- */

@supports not ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
  .bandeau__frise { display: none; }
}