/*
 * entete-page.css : entête de page simple (fil d'Ariane, grand titre, texte, feuillage) : formulaires (maquette 07) et page des avis (maquette 16).
 * Mobile d'abord (390 px), puis paliers à 640, 960 et 1280 px.
 */

/* ---------- Entête de page de formulaire ---------- */
.entete-formulaire{position:relative;overflow:hidden;background:var(--creme)}
.entete-formulaire .feuillage{right:-84px;top:-50px;width:190px;height:190px}
.entete-formulaire__contenu{position:relative;padding-block:16px 28px}
.entete-formulaire__tete{display:flex;flex-direction:column;align-items:flex-start;margin-top:8px}
.entete-formulaire__surtitre{margin:0}
.entete-formulaire__trait{display:none;width:44px;height:2px;margin-top:16px;border-radius:1px;background:var(--vert-lisere)}
.entete-formulaire__titre{margin-top:12px;font-size:34px;line-height:40px}
.entete-formulaire__texte{margin-top:12px;font-size:16px;line-height:26px;color:var(--texte-courant)}
@media (min-width:640px){
	.entete-formulaire__titre{font-size:44px;line-height:52px}
	.entete-formulaire__texte{max-width:640px;font-size:17px;line-height:29px}
}
@media (min-width:960px){
	.entete-formulaire__contenu{padding-block:24px 56px}
	.entete-formulaire__tete{margin-top:30px}
	.entete-formulaire__trait{display:block}
	.entete-formulaire__titre{margin-top:16px}
	.entete-formulaire__texte{margin-top:16px}
}
@media (min-width:1280px){
	.entete-formulaire .feuillage{right:-40px;top:-50px;width:380px;height:380px}
	.entete-formulaire__titre{font-size:52px;line-height:60px}
}

/* ---------- Entête avec photo (« Notre histoire ») : comme un bandeau de cure, photo à droite sur ordinateur, sous le texte sur mobile ---------- */
.entete-formulaire--photo .entete-formulaire__contenu{padding-block:16px 38px}
.entete-formulaire__grille{display:flex;flex-direction:column;align-items:flex-start}
.entete-formulaire__photo{align-self:center;width:340px;max-width:100%;margin-top:28px}
.entete-formulaire__photo .fenetre{--ratio:1/1}
@media (min-width:960px){
	.entete-formulaire--photo .entete-formulaire__contenu{padding-block:24px 68px}
	.entete-formulaire__grille{display:grid;grid-template-columns:minmax(0,1fr) clamp(400px,40vw,496px);align-items:center;gap:clamp(40px,5vw,72px)}
	.entete-formulaire__photo{width:auto;margin-top:0}
	.entete-formulaire__photo .fenetre{--ratio:12/11;max-width:none;width:calc(100% - 16px);margin:4px 8px}
}