/* Héros mobile (option B) : photo entière en haut, texte sur bloc bleu nuit, crête laiton au-dessus du bloc. Mobile seulement. */
@media (max-width:640px){
  html body .hero{min-height:0;height:auto;display:flex;flex-direction:column;background:#273338}
  html body .hero__photo{position:relative;inset:auto;height:58svh;z-index:auto}
  html body .hero__photo::after,
  html body .hero::after{display:none}
  html body .hero__contenu{position:relative;padding:var(--space-md) var(--gutter) calc(var(--crete-h) + var(--space-xl));background:#273338}
  html body .hero__devise{margin-top:0}
  html body .hero__contenu::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:calc(var(--crete-h) + 2px);background:var(--laiton);-webkit-mask:var(--crete-masque) center bottom / 100% 100% no-repeat;mask:var(--crete-masque) center bottom / 100% 100% no-repeat;pointer-events:none}
  html body .hero__contenu::after{content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--crete-h);background:#273338;-webkit-mask:var(--crete-masque) center bottom / 100% 100% no-repeat;mask:var(--crete-masque) center bottom / 100% 100% no-repeat;pointer-events:none}
}

/* Mobile : la photo du héros occupe toute la largeur, sans décalage hérité de l'élément image. */
@media (max-width:640px){
  html body .hero__photo{left:0;right:0;width:100%;max-width:100%;margin:0}
  html body .hero__photo img{position:absolute;inset:0;left:0!important;top:0;width:100%!important;height:100%!important;max-width:none!important;margin:0!important;transform:none!important;object-fit:cover}
}

/* Mobile : les réglages propres à certaines pages (identifiants Bricks) passent après ceux-ci. */
@media (max-width:640px){
  html body .hero{position:relative!important;min-height:0!important;height:auto!important;display:flex!important;flex-direction:column!important;background:#273338!important}
  html body .hero__photo{position:relative!important;inset:auto!important;width:100%!important;height:58svh!important;z-index:auto!important}
  html body .hero__contenu{position:relative!important;background:#273338!important;padding:var(--space-md) var(--gutter) calc(var(--crete-h) + var(--space-xl))!important}
}

/* Section vide placée juste après le héros : elle ne doit pas créer d'espace. (:empty, sans :has, pour les navigateurs mobiles anciens) */
html body .hero + section.coupe-crete:empty{display:none!important}

/* Page À propos, mobile : espaces entre blocs réduits (40px + 40px → 24px + 24px). */
@media (max-width:640px){
  html body.page-id-551 .section{padding-block:var(--space-lg)}
  html body.page-id-551 .chapitre__texte,
  html body.page-id-551 .chapitre--inverse .chapitre__texte{padding-block:var(--space-lg)}
}

/* Page À propos, mobile : le héros ne réserve plus l'espace d'une crête qui n'existe pas sous lui. */
@media (max-width:640px){
  html body.page-id-551 .hero__contenu{padding-bottom:var(--space-lg)!important}
}

/* Page À propos, mobile : le bloc qui précède la crête garde la place de la crête, sans que le texte passe dessous. */
@media (max-width:640px){
  html body.page-id-551 .chapitre.coupe-crete .chapitre__texte{padding-bottom:calc(var(--crete-h) + var(--space-lg))!important}
}