/* Habillage de haut de page (non collant) : fond de la bannière d'identité + logotype « Fondu » au même placement. */
.bandeau{position:relative;isolation:isolate;overflow:hidden;background:#FD3064;border-bottom:2.5px solid var(--ink);display:grid;place-items:center;min-height:max(300px,calc(100vw / 3))}
.bandeau.b-16x9{min-height:max(560px,min(calc(100vw * 9 / 16),calc(100svh - 60px)))}
.bd-fond img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.bd-c{display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 16px 30px;text-align:center;max-width:100%}
.bd-logo{display:block;width:clamp(230px,30vw,620px);height:auto;aspect-ratio:1208/540;animation:bd-pop .8s cubic-bezier(.2,.9,.25,1.25) .1s backwards}
.b-16x9 .bd-logo{width:clamp(240px,41vw,1050px)}
.bd-tag{display:inline-block;background:var(--cream,#FFF8DC);color:var(--ink);font:800 clamp(16px,1.9vw,30px)/1 var(--sans);font-stretch:82%;padding:.42em .95em .34em;transform:rotate(1.5deg);
  filter:drop-shadow(5px 5px 0 var(--ink));clip-path:polygon(0% 3%,6% 0%,14% 4%,22% 1%,31% 3%,40% 0%,49% 4%,58% 1%,67% 3%,76% 0%,85% 4%,93% 1%,100% 3%,98% 22%,100% 41%,97% 60%,100% 79%,98% 97%,90% 100%,81% 96%,72% 100%,63% 97%,54% 100%,45% 96%,36% 100%,27% 97%,18% 100%,9% 96%,0% 100%,2% 79%,0% 60%,3% 41%,0% 22%);
  animation:bd-pop .6s cubic-bezier(.2,.9,.25,1.25) .35s backwards}
.bd-tagw{filter:drop-shadow(5px 5px 0 var(--ink))}
.bd-tagw .bd-tag{filter:none}
.bd-x{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:6px}
@keyframes bd-pop{0%{opacity:0;transform:scale(.86) rotate(-3deg)}100%{opacity:1}}
@media (max-width:640px){
  .bandeau,.bandeau.b-16x9{min-height:100vw}
  .bd-logo,.b-16x9 .bd-logo{width:76vw}
  .bd-tag{font-size:17px}
}
/* le haut de tuto qui suit le bandeau passe en papier jaune pour ne pas empiler deux roses */
.bandeau + .tuto .t-hero{background:var(--butter)}
@media (prefers-reduced-motion:reduce){.bd-logo,.bd-tag{animation:none}}