/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:#960018; background: url(img/fond-messery.jpg) no-repeat center center fixed; background-size: cover;}

.topbar{position:sticky; top:0; z-index:50; display:flex; gap:12px; align-items:center; padding:12px 16px; background:#111; border-bottom:1px solid rgba(255,255,255,.12)}
.topbar .back{color:#fff; text-decoration:none; font-weight:600}
.topbar h1{margin:0 auto 0 8px; font-size:20px}

.wrapper{max-width:1100px; margin:22px auto; padding:0 16px}

.contact-card{display:grid; grid-template-columns:1.2fr 1fr; gap:16px}
@media (max-width:880px){.contact-card{grid-template-columns:1fr}}
.contact-text{background:#151515; border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:16px}
.addr,.hours,.tel,.maps{margin:6px 0}
.tel a,.maps a{color:#fff; text-decoration:none}
.tel a:hover,.maps a:hover{text-decoration:underline}

.mini-map{border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.12)}
.mini-map iframe{display:block; width:100%; height:260px; filter:grayscale(10%) brightness(.95)}

.quick{margin-top:18px}
.quick .btns{display:flex; gap:10px; flex-wrap:wrap}
.btn{display:inline-block; padding:10px 14px; border-radius:999px; text-decoration:none; color:#960018; border: 2px solid #960018}
.btn.primary{background:linear-gradient(90deg, #e63946, #ff6b6b)}

.photo{margin-top:18px}
.photo-encart{height:170px; border-radius:14px; background:repeating-linear-gradient(45deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 10px, rgba(255,255,255,.05) 10px, rgba(255,255,255,.05) 20px); display:flex; align-items:center; justify-content:center; color:#bbb}

.menu{margin-top:22px}
.menu .muted{opacity:.85}

.foot{opacity:.85; padding:18px 0; text-align:center}
/* 1) Le header reste blanc, quoi qu’il arrive */
.topbar, .topbar * {
  color: #fff !important;
}

/* 2) Le bloc coordonnées reste blanc */
.contact-card, .contact-card * {
  color: #fff !important;
}

/* 3) Mettre la couleur bordeaux UNIQUEMENT sur le reste de la page */
.wrapper, .quick, .photo, .menu, .foot {
  color: #960018;
}
.wrapper h1, .wrapper h2, .wrapper h3, .wrapper h4,
.quick h2, .photo h2, .menu h2, .menu h3, .foot {
  color: #960018;
}

/* 4) Les items de menu héritent bien de la couleur du parent */
.menu-group li span,
.menu-group li em,
.menu-group li strong {
  color: inherit;
}
/* Bouton Sur place = blanc */
.btn.primary {
  background: #960018;   /* fond bordeaux */
  color: #fff !important;
  border: none;
}
/* Bannière façade : plus de hauteur + cadrage vers le haut */
.photo{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  height: clamp(460px, 38vw, 520px);  /* ↑ augmente la hauteur = moins de recadrage */
}

@media (max-width: 600px){
  .photo-encart{ height: clamp(280px, 48vw, 560px); }
  .photo-encart img{ object-position: 50% 35%; }
}
/* === FIX encart photo (Messery) — basé sur ton HTML ci-dessus === */
section.photo{ height: auto !important; }

section.photo > .photo-encart{
  height: clamp(460px, 38vw, 520px) !important;  /* ta hauteur souhaitée */
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,.25);
  background: rgba(255,255,255,.03);
}

section.photo > .photo-encart > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* remplit l'encart (un peu de crop) */
  object-position: 50% 40%;   /* ajuste le cadrage vertical : 35% = +haut, 55% = +bas */
}