.site-mobile-menu { display:none; }

/* ------------------------------------------------------------------ BANNIERE
   Grand ecran : le texte est pose a gauche sur le creme, la photo occupe la
   moitie droite. Son bord gauche s'efface en degrade vers la couleur du
   fond, donc aucun cadre n'apparait : la banniere se lit comme une seule
   image en paysage sur toute la largeur de l'ecran.
   Petit ecran : le texte prend toute la largeur, la photo repasse en fond
   plein et le voile creme devient vertical. */
.site-hero { position:relative; display:flex; align-items:center;
  background:#faf9f5;
  min-height:clamp(34rem,80vh,47rem);
  padding-left:max(1.25rem,calc((100% - 72rem)/2 + 2rem));
  padding-right:max(1.25rem,calc((100% - 72rem)/2 + 2rem)); }
.site-hero-visuel { position:absolute; top:0; right:0; bottom:0; left:50%; z-index:0; overflow:hidden; }
.site-hero-visuel img { width:100%; height:100%; object-fit:cover; object-position:50% 24%; }
/* Voile creme pose sur le bord gauche de la photo : il part de la couleur
   exacte du fond, donc la jonction est invisible et la banniere se lit
   comme une seule image continue. */
.site-hero-visuel::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to right,
    rgb(250,249,245) 0%, rgba(250,249,245,.98) 7%, rgba(250,249,245,.86) 18%,
    rgba(250,249,245,.55) 32%, rgba(250,249,245,.22) 45%, rgba(250,249,245,0) 58%); }
.site-hero-texte { position:relative; z-index:1; display:flex; flex-direction:column;
  justify-content:center; max-width:36rem; padding:4rem 0; }
.site-hero h1 { font-size:clamp(2.1rem,3.1vw,3.15rem); line-height:1.1; letter-spacing:-.03em; margin:1rem 0; }
/* Un nom de commune ne doit jamais se couper sur le trait d'union. */
.site-hero h1 .insec { white-space:nowrap; }
.site-hero p { line-height:1.65; max-width:34rem; }
.site-hero .hero-baseline { font-size:clamp(1.25rem,1.9vw,1.6rem); line-height:1.3; letter-spacing:-.02em;
  color:#1c3a52; margin:.1rem 0 1.1rem; }
.site-hero .hero-price { font-size:1.35rem; font-weight:700; color:#0a5499; margin:1.4rem 0 .25rem; }
.site-hero .hero-travel { font-size:.875rem; color:#465665; }

/* Barre d'appel fixe sur mobile. Au-dela de 1024 px le bouton de l'en-tete
   reste visible, la barre est inutile. La marge basse sur le corps evite
   qu'elle recouvre la fin du pied de page. */
.barre-appel { display:none; }
@media (max-width:1023px) {
  .barre-appel { position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; gap:.6rem;
    padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom, 0px));
    background:rgba(250,249,245,.96); border-top:1px solid #e7e1d6;
    box-shadow:0 -6px 20px rgba(15,30,46,.07); }
  .barre-appel a { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
    border-radius:2rem; padding:.85rem 1rem; font-weight:600; font-size:.95rem;
    text-decoration:none; line-height:1.2; }
  .barre-appel .appel { background:#0a5499; color:#fff; }
  .barre-appel .devis { background:#fff; color:#0a5499; border:1px solid #0a5499; }
  .barre-appel svg { width:1.05rem; height:1.05rem; }
  body { padding-bottom:4.9rem; }
}
@media print { .barre-appel { display:none; } }
/* Le vert d'accent d'origine (#2e9e6b) plafonne a 3,2:1 sur le creme, sous le
   minimum de 4,5:1 exige pour du texte. Cette nuance monte a 5,9:1. */
.text-accent { color:#1c6e48; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem; }
.hero-actions a { padding:.85rem 1.3rem; border:1px solid #0a5499; border-radius:2rem; font-weight:600; color:#0a5499; }
.hero-actions a:first-child { background:#0a5499; color:white; }

/* Les reperes chiffres, juste sous le texte, dans la banniere. La grille
   s'ajuste d'elle-meme au nombre de reperes, sans case vide. */
.hero-chiffres { display:grid; grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
  gap:1.15rem 1.5rem; margin-top:2.25rem; padding-top:1.75rem;
  border-top:1px solid rgba(10,84,153,.18); max-width:33rem; }
.hero-chiffres > div { display:flex; align-items:flex-start; gap:.7rem; }
.hero-chiffres .ic { flex:none; display:inline-flex; color:#0a5499; margin-top:.1rem; }
.hero-chiffres .ic svg { width:1.5rem; height:1.5rem; }
.site-hero .hero-chiffres p { max-width:none; line-height:1.2; }
.site-hero .hero-chiffres .valeur { font-size:1.3rem; font-weight:600; letter-spacing:-.01em; }
.site-hero .hero-chiffres .libelle { margin-top:.2rem; font-size:.8125rem; line-height:1.35; color:#465665; }

.site-mobile-menu summary { padding:.65rem; border:1px solid #d5dce1; border-radius:.6rem; font-weight:600; cursor:pointer; }
.site-mobile-menu nav { position:absolute; top:100%; left:0; right:0; background:#faf9f5; padding:1rem; border-bottom:1px solid #d5dce1; display:grid; gap:.25rem; }
.site-mobile-menu nav a { padding:.8rem; border-radius:.4rem; }
.site-mobile-menu nav a:focus-visible, .hero-actions a:focus-visible { outline:3px solid #1c6e48; outline-offset:3px; }
@media(max-width:1023px) { .site-mobile-menu { display:block; } }
@media(max-width:1023px) {
  /* Sur petit ecran le texte prend toute la largeur : la photo ne passe pas
     derriere (elle serait noyee sous le voile), elle devient un bandeau
     pleine largeur juste sous le texte. */
  .site-hero { display:block; min-height:0; padding-left:1.75rem; padding-right:1.75rem; }
  .site-hero-texte { max-width:none; padding:3rem 0 2.5rem; }
  .site-hero p { max-width:none; }
  .site-hero-visuel { position:relative; top:auto; right:auto; bottom:auto; left:auto;
    height:clamp(15rem,52vw,22rem); margin:0 -1.75rem; }
  .site-hero-visuel img { object-position:50% 20%; }
  .site-hero-visuel::after { background:none; }
  .hero-chiffres { max-width:none; }
}
@media(max-width:700px) {
  .site-hero { padding-left:1.25rem; padding-right:1.25rem; }
  .site-hero-texte { padding:2.25rem 0 2rem; }
  .site-hero h1 { font-size:2.1rem; }
  .site-hero-visuel { height:clamp(14rem,58vw,20rem); margin:0 -1.25rem; }
  .hero-actions a { text-align:center; flex:1 1 auto; }
  .hero-chiffres { gap:1rem 1.25rem; margin-top:1.9rem; padding-top:1.5rem; }
  .site-hero .hero-chiffres .valeur { font-size:1.15rem; }
}