/* Couleurs du logo */
:root { --or: #c9a665; }
body.blanc { --fond: #fff; --texte: #231f20; }
body.noir  { --fond: #000; --texte: #f2eee6; }

html, body { margin: 0; background: var(--fond); color: var(--texte); }
body { font-family: 'Josefin Sans', sans-serif; font-weight: 600; }

/* Le logo remplit l'écran sans être déformé (image 16:9) */
main { min-height: 100vh; display: grid; place-items: center; }
.logo {
  position: relative;
  width: min(100vw, 100vh * 16 / 9);
  container-type: inline-size;
}
.logo img { display: block; width: 100%; height: auto; }
body.blanc img.noir, body.noir img.blanc { display: none; }

/* Horaires dans la bande vide du cadre, sous « Fabrication artisanale ».
   Positions en % de l'image : x 28–72 %, y 69–80 %. */
.horaires {
  position: absolute;
  left: 28%; right: 28%; top: 69.5%; height: 10.5%;
  display: flex; flex-direction: column; justify-content: center;
  text-align: center; text-transform: uppercase;
  font-size: 1.8cqw; line-height: 1.5; letter-spacing: .04em;
}
.horaires p { margin: 0; }

/* Petits écrans : trop petit dans le cadre, on met les horaires sous le logo */
@container (width < 700px) {
  .horaires { position: static; font-size: 15px; padding: 1em 16px 2em; }
}