... (eyebrow, h1, p inchangés)
⚠️ FORMAT DES BANNIÈRES : 1920×760 (ratio ~2,5:1).
C'est le ratio réel du bloc hero, donc quasiment aucun
recadrage sur desktop. Une image 16:9 se ferait rogner
en haut et en bas et couperait le bouquet.
⚠️ COMPOSITION : sujet dans le TIERS DROIT, mur vide à
gauche (c'est là que se pose le texte). Fond clair,
tonalité alignée sur la bannière Roses Rouges pour que
toutes les collections se ressemblent.
⚠️ MOBILE — LA HAUTEUR DU BANDEAU EST LE POINT CRITIQUE.
Le titre est superposé à gauche, dans le bandeau (gain
de place). Ça ne fonctionne QUE si le bandeau reste
court : à 250 px de haut il reste plus de la moitié de
la largeur en mur vide. Testé à 480 px -> l'image large
se fait zoomer à l'extrême, le bouquet remplit tout le
cadre et il n'y a plus de place pour le texte.
NE PAS AUGMENTER --band au-delà de ~300 px.
La description reste sous le bandeau, en flux normal.
⚠️ SPÉCIFICITÉ : la règle générale
`.page-hero.has-photo > *:not(.page-hero-photo)` vaut
3 classes (0,3,0). Toute règle mobile qui doit la
surcharger (position, etc.) doit atteindre au moins ce
niveau — d'où le `:not(.page-hero-photo)` ajouté sur le
sélecteur du h1, qui n'a pas de classe à lui.
══════════════════════════════════════════════════════ */
.page-hero.has-photo{
position:relative;
overflow:hidden;
min-height:clamp(360px,39vw,700px);
display:flex;
flex-direction:column;
justify-content:center;
align-items:flex-start;
text-align:left;
padding:clamp(2rem,5vw,3.5rem) clamp(1.5rem,7vw,5rem);
background:#efe9e0; /* fond de secours pendant le chargement */
}
.page-hero-photo{position:absolute;inset:0;z-index:0}
.page-hero-photo img{
width:100%;height:100%;
object-fit:cover;
object-position:center center;
display:block;
}
/* Voile crème depuis la gauche : le texte reste lisible,
le bouquet garde ses couleurs d'origine. */
.page-hero-photo::after{
content:'';
position:absolute;inset:0;
background:linear-gradient(90deg,
rgba(250,246,241,.92) 0%,
rgba(250,246,241,.82) 32%,
rgba(250,246,241,.40) 54%,
rgba(250,246,241,0) 74%);
}
.page-hero.has-photo > *:not(.page-hero-photo){
position:relative;z-index:2;
margin-left:0;margin-right:0;
}
.page-hero.has-photo .page-hero-eyebrow{color:#a0503a}
.page-hero.has-photo h1{color:#2e2a27;text-align:left;max-width:16ch}
.page-hero.has-photo h1 em{color:#a0503a}
.page-hero.has-photo p{color:#5c534d;text-align:left;max-width:30rem}
.page-hero.has-photo .petal{opacity:.5}
/* ── MOBILE ───────────────────────────────────────────────
Bandeau court + titre superposé à gauche sur le mur vide.
La description passe sous le bandeau. */
@media (max-width:768px){
.page-hero.has-photo{
--band:clamp(210px,52vw,280px);
display:block;
min-height:0;
padding:0 0 1.4rem;
background:#faf6f1;
overflow:visible;
}
.page-hero-photo{
position:relative;inset:auto;
height:var(--band);
overflow:hidden;
}
/* 74 % : garde le bouquet entier à droite ET laisse
~55 % de la largeur en mur vide à gauche. */
.page-hero-photo img{object-position:74% center}
.page-hero-photo::after{
background:linear-gradient(90deg,
rgba(250,246,241,.88) 0%,
rgba(250,246,241,.70) 32%,
rgba(250,246,241,.20) 50%,
rgba(250,246,241,0) 64%);
}
/* Titre dans le bandeau, calé à gauche.
Les deux sélecteurs atteignent (0,3,x) pour passer
devant la règle générale ci-dessus. */
.page-hero.has-photo .page-hero-eyebrow:not(.page-hero-photo){
position:absolute;z-index:3;
top:calc(var(--band) * .30);
left:1.35rem;right:auto;
margin:0;padding:0;
max-width:58%;
}
.page-hero.has-photo h1:not(.page-hero-photo){
position:absolute;z-index:3;
top:calc(var(--band) * .43);
left:1.35rem;right:auto;
margin:0;padding:0;
max-width:58%;
font-size:clamp(1.5rem,7.2vw,2rem);
line-height:1.12;
}
/* Description sous le bandeau, en flux normal */
.page-hero.has-photo p:not(.page-hero-eyebrow){
padding:1.1rem 1.35rem 0;
margin:0;
max-width:100%;
}
.page-hero.has-photo .petals-container{display:none}
}
