/* Bandeau de page. Couleurs : --bandeau-voile et --c-surtitre-sombre,
   définis dans prod10avril.css. */
.bandeau-page {
  position: relative;
  background: var(--c-vert-900);
  color: var(--c-paper);
}
.bandeau-page--photo {
  display: flex;
  flex-direction: column;
  min-height: 420px;
}
.bandeau-page__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bandeau-page__voile {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.bandeau-page--photo .bandeau-page__voile { background: var(--bandeau-voile); }
.bandeau-page__contenu { width: 100%; padding-block: var(--e-12); }
@media (min-width: 768px) { .bandeau-page__contenu { padding-block: var(--e-16); } }

.bandeau-page__surtitre {
  margin: 0 0 var(--e-2);
  font-size: var(--t-label);
  letter-spacing: var(--a-label);
  text-transform: uppercase;
  font-weight: var(--g-fort);
  color: var(--c-surtitre-sombre);
}
.bandeau-page__titre {
  margin: 0;
  max-width: 20ch;
  font-family: var(--f-titre);
  font-size: var(--t-h1);
  line-height: var(--l-titre);
  letter-spacing: var(--a-titre);
  font-weight: var(--g-normal);
  color: var(--c-paper);
}
.bandeau-page__chapeau {
  margin: var(--e-4) 0 0;
  max-width: var(--l-max-texte);
  font-size: var(--t-lead);
  line-height: var(--l-texte);
  color: var(--c-surtitre-sombre);
}
.bandeau-page__mention {
  margin: var(--e-4) 0 0;
  font-size: var(--t-small);
  line-height: var(--l-dense);
  font-variant-numeric: tabular-nums;
  color: var(--c-surtitre-sombre);
}
.bandeau-page__credit {
  margin: var(--e-6) 0 0;
  font-size: var(--t-small);
  line-height: var(--l-dense);
  color: var(--c-surtitre-sombre);
}

/* Variante papier : la tête des partenaires (PagePartenaires.dc.html).
   Fond --c-paper, encres du texte courant, second paragraphe au corps de
   base. */
.bandeau-page--papier { background: var(--c-paper); color: var(--c-ink); }
.bandeau-page--papier .bandeau-page__contenu { padding-top: var(--e-8); }
.bandeau-page--papier .bandeau-page__surtitre { color: var(--c-ink-3); }
.bandeau-page--papier .bandeau-page__titre { color: var(--c-ink); max-width: none; }
.bandeau-page--papier .bandeau-page__chapeau { color: var(--c-ink-2); }
.bandeau-page--papier .bandeau-page__intro { font-size: var(--t-base); }

/* Variante accueil (PageAccueil.dc.html) : bannière de 720 px au bureau,
   432 px en tablette, hauteur libre en mobile ; le nom de la maison au
   corps des titres, l'accroche en h1 sur 28 caractères. */
.bandeau-page--accueil.bandeau-page--photo { min-height: auto; }
@media (min-width: 768px)  { .bandeau-page--accueil.bandeau-page--photo { min-height: 432px; } }
@media (min-width: 1280px) { .bandeau-page--accueil.bandeau-page--photo { min-height: 720px; } }
.bandeau-page--accueil .bandeau-page__surtitre {
  margin-bottom: var(--e-3);
  font-family: var(--f-titre);
  font-size: var(--t-h2);
  line-height: var(--l-titre);
  letter-spacing: var(--a-titre);
  text-transform: none;
  font-weight: var(--g-normal);
  color: var(--c-paper);
}
.bandeau-page--accueil .bandeau-page__titre { max-width: 28ch; }
.bandeau-page--accueil .bandeau-page__credit { margin-top: var(--e-4); }

/* Variante fourche (PageProduireAvecNous.dc.html) : deux liens en colonne
   sous le titre, vers les deux volets (PA-01) ; le chapeau au corps h3, en
   --c-paper ; la ligne des formes au corps de base. */
.bandeau-page__fourche {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-1);
  margin-top: var(--e-3);
}
.bandeau-page__fourche a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-min);
  font-size: var(--t-lead);
  line-height: var(--l-texte);
  color: var(--c-surtitre-sombre);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bandeau-page__fourche a:hover { color: var(--c-paper); }
.bandeau-page--fourche .bandeau-page__chapeau {
  margin-top: var(--e-6);
  max-width: 34rem;
  font-family: var(--f-titre);
  font-size: var(--t-h3);
  line-height: var(--l-titre);
  letter-spacing: var(--a-titre);
  color: var(--c-paper);
}
.bandeau-page--fourche .bandeau-page__intro {
  margin-top: var(--e-4);
  max-width: var(--l-max-texte);
  font-family: var(--f-texte);
  font-size: var(--t-base);
  line-height: var(--l-texte);
  letter-spacing: normal;
  color: var(--c-surtitre-sombre);
}

/* Variante positionnement (PageLaMaison.dc.html) : la phrase de la maison
   au corps h2, en --c-paper ; la ligne de statut au corps de base. */
.bandeau-page--positionnement .bandeau-page__surtitre { margin-bottom: 0; }
.bandeau-page--positionnement .bandeau-page__titre { margin-top: var(--e-3); }
.bandeau-page--positionnement .bandeau-page__chapeau {
  margin-top: var(--e-6);
  max-width: 34rem;
  font-family: var(--f-titre);
  font-size: var(--t-h2);
  line-height: var(--l-titre);
  letter-spacing: var(--a-titre);
  color: var(--c-paper);
}
.bandeau-page--positionnement .bandeau-page__intro {
  margin-top: var(--e-4);
  max-width: var(--l-max-texte);
  font-family: var(--f-texte);
  font-size: var(--t-base);
  line-height: var(--l-texte);
  letter-spacing: normal;
  color: var(--c-surtitre-sombre);
}

/* Lien de fin de bande, vers une partie de la page (Proposer un projet). */
.bandeau-page__action { margin: var(--e-6) 0 0; }
.bandeau-page__acces {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-1);
  margin-top: var(--e-6);
}
.bandeau-page__acces a,
.bandeau-page__action a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-min);
  font-size: var(--t-base);
  font-weight: var(--g-fort);
  color: var(--c-surtitre-sombre);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bandeau-page__acces a:hover,
.bandeau-page__action a:hover { color: var(--c-paper); }

/* --c-focus sur --c-vert-900 tombe à 2,34:1, sous les 3:1 des éléments non
   textuels (PA-07) : sur la bande sombre, le contour passe en --c-paper. */
.bandeau-page:not(.bandeau-page--papier) a:focus-visible { outline-color: var(--c-paper); }