/**
 * Le bandeau de titre des pages.
 *
 * La feuille ne decide d'aucune couleur : la teinte, son opacite, le voile et
 * les hauteurs arrivent en regles en ligne, calcules par PHP. Ce qui est ici
 * est de la structure — un media qui couvre sans deformer, un contenu qui
 * passe devant, une encre lisible sur ce qu'on a pose dessous.
 */

/*
 * Le media sort du flux et couvre la bande.
 *
 * `.wia-page-hero` est deja `position: relative` et `overflow: hidden` dans le
 * theme : le media n'a donc rien a reparer, seulement a se poser.
 */
.eta-bandeau-fond,
.eta-bandeau-voile {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.eta-bandeau-fond {
	object-fit: cover;
	border: 0;
}

/*
 * Les plans du bandeau, ecrits une seule fois.
 *
 *   0 — le media et le decor
 *   1 — le voile qui les teinte
 *   2 — la cesure du bas
 *   3 — le contenu : surtitre, titre, chapo, fil d'Ariane
 *
 * Un seul endroit, et ce n'est pas un gout de rangement.
 *
 * Il y en a eu deux : une regle levait le contenu au-dessus du media, une
 * autre au-dessus de la cesure. La premiere portait une classe de corps de
 * plus — « le bandeau a un media » — donc elle l'emportait, avec son plan 1.
 * La cesure etant au plan 2, elle repassait devant le titre et lui mangeait
 * le bas : un titre tronque a l'ecran, et deux regles qui se lisaient
 * pourtant tres bien chacune de son cote.
 *
 * La position est posee sans condition : un contenu qui n'a rien a depasser
 * ne perd rien a etre positionne, et la regle cesse de dependre d'une classe
 * qui pourrait manquer.
 */
.wia-page-hero > .wia-wrap {
	position: relative;
	z-index: 3;
}

/* ───────── L'encre ───────── */

/*
 * Deux classes de racine, et le titre nomme explicitement : le theme lui donne
 * sa propre couleur, et une regle qui ne peindrait que le conteneur laisserait
 * un titre sombre sur une photographie sombre.
 */
body.eta-bandeau-clair .wia-page-hero,
body.eta-bandeau-clair .wia-page-hero h1,
body.eta-bandeau-clair .wia-page-hero .wia-lead,
body.eta-bandeau-clair .wia-page-hero .wia-eyebrow {
	color: #fff;
}

body.eta-bandeau-sombre .wia-page-hero,
body.eta-bandeau-sombre .wia-page-hero h1,
body.eta-bandeau-sombre .wia-page-hero .wia-lead,
body.eta-bandeau-sombre .wia-page-hero .wia-eyebrow {
	color: #12212a;
}

/* ───────── La forme ───────── */

/*
 * Le degrade du theme est une image de fond, pas une couleur : le retirer
 * demande `background-image`, et non `background` — qui emporterait aussi la
 * couleur reglee juste au-dessus.
 */
body.eta-bandeau-sans-degrade .wia-page-hero {
	background-image: none;
}

/*
 * Le filet est une jonction, pas une bordure.
 *
 * Le bandeau porte un trait en bas ; la section de contenu qui le suit en
 * porte un en haut. Ce sont deux regles, dans deux fichiers, pour un seul
 * trait a l'ecran — et le reglage n'effacait que le premier. On decochait
 * « filet sous le bandeau », et le trait restait : celui d'en dessous.
 *
 * Les deux tombent donc ensemble. Le second selecteur couvre le cas ou un
 * fil d'Ariane s'est glisse entre les deux : il est alors le voisin de la
 * section, et le bandeau ne l'est plus.
 *
 * `transparent` plutot que `none` : la bordure garde son pixel, et rien ne
 * remonte d'un pixel au moment ou l'on decoche.
 */
body.eta-bandeau-sans-filet .wia-page-hero {
	border-bottom-color: transparent;
}

body.eta-bandeau-sans-filet .wia-page-hero + .wia-section,
body.eta-bandeau-sans-filet .wia-page-hero + .eta-ariane + .wia-section {
	border-top-color: transparent;
}

body.eta-bandeau-pleine .wia-page-hero > .wia-wrap {
	max-width: none;
}

/*
 * L'alignement porte sur le texte et sur la colonne : centrer les lignes sans
 * centrer le bloc laisse un chapo large aligne a gauche sous un titre centre.
 */
body.eta-bandeau-align-centre .wia-page-hero {
	text-align: center;
}

body.eta-bandeau-align-centre .wia-page-hero .wia-lead {
	margin-inline: auto;
}

body.eta-bandeau-align-droite .wia-page-hero {
	text-align: right;
}

body.eta-bandeau-align-droite .wia-page-hero .wia-lead {
	margin-left: auto;
}

/* ───────── La cesure du bas ───────── */

/*
 * La forme est posee au ras du bord bas, sur toute la largeur.
 *
 * Un pixel de debordement en bas : entre deux surfaces de la meme couleur, un
 * arrondi de rendu laisse parfois voir un cheveu du fond du bandeau, et c'est
 * exactement la ou l'oeil cherche le raccord.
 *
 * `pointer-events: none` : la decoupe couvre une bande de plusieurs dizaines
 * de pixels, et un lien qui s'y trouverait deviendrait incliquable.
 */
/*
 * La classe est doublee, et ce n'est pas une coquetterie.
 *
 * Le theme enfant pose `.wia img, .wia svg { max-width: 100%; height: auto }`.
 * C'est une remise a zero utile — une image qui deborde de sa colonne est un
 * defaut plus courant qu'une hauteur imposee — mais elle pese une classe et un
 * element, sa feuille est chargee apres la notre, et elle annulait donc la
 * hauteur reglee ici.
 *
 * Le SVG ne disparaissait pas pour autant : il prenait la hauteur que lui
 * donne son rapport de boite, laquelle suit la largeur de l'ecran. On voyait
 * donc une decoupe d'une taille plausible qui ignorait son reglage, pendant
 * que la reserve de place sous le titre, elle, obeissait — un div n'est pas un
 * SVG. Le reglage semblait a moitie casse ; il etait entierement annule.
 *
 * Deux classes pesent plus qu'une classe et un element : la regle gagne sans
 * dependre de l'ordre de chargement, ni d'un conteneur qui pourrait manquer.
 */
.eta-cesure.eta-cesure {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	z-index: 2;
	display: block;
	width: 100%;
	height: var(--eta-cesure-h, 70px);
	pointer-events: none;
}

.eta-cesure.is-inverse {
	transform: scaleX(-1);
}

/*
 * La decoupe prend de la place — mais seulement celle qu'elle prend vraiment.
 *
 * Passer devant ne suffit pas : un titre pose a cheval sur la decoupe est
 * lisible mais illisible, la moitie des lettres sur la couleur du bandeau et
 * l'autre sur celle de la page. Il faut donc reserver du vide sous le contenu.
 *
 * Reserver la hauteur entiere etait l'erreur : le gabarit laisse deja une
 * marge basse, et la cesure la mange avant d'atteindre le texte. Une cesure de
 * soixante-dix pixels sous une marge de cinquante-six n'empietait que de
 * quatorze — on en reservait soixante-dix, et le bandeau grandissait d'autant.
 * Chaque fois qu'on montait la cesure, le bandeau montait avec elle : les deux
 * reglages se poursuivaient sans jamais se rejoindre.
 *
 * On ne reserve donc que le depassement. En dessous de la marge du gabarit, la
 * cesure ne coute plus rien en hauteur.
 */
.wia-page-hero > .wia-wrap {
	padding-bottom: max(0px, calc(var(--eta-cesure-marge, 0px) - var(--eta-hero-bas, 56px)));
}