:root {
  --or: #b49357;
  --brun: #946529;
  --texte: #333;
  --filet: #e3e3e3;
}

* { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  color: var(--texte);
  background: #fff;
  font-family: "Droid Serif", "Noto Serif", Georgia, "Times New Roman", serif;
  line-height: 1.7;
}

a { color: var(--brun); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }

.bandeau {
  height: 118px;
  background: #f1e6d2 url("img/banner.svg") center / cover no-repeat;
}

.logo {
  display: block;
  width: 222px;
  margin-left: 42px;
  padding-top: 15px;
}

.logo img { display: block; width: 100%; height: auto; }

.page {
  display: flex;
  gap: 55px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 18px 56px 60px 42px;
}

.lateral { flex: 0 0 260px; padding-top: 6px; }

.lateral ul { list-style: none; margin: 0; padding: 0; }

.lateral li { border-bottom: 1px solid var(--filet); }
.lateral li:first-child { border-top: 1px solid var(--filet); }

.lateral li > * {
  display: block;
  padding: 7px 22px;
  color: var(--brun);
  font-size: 1.05rem;
}

.lateral small {
  display: block;
  color: #777;
  font-size: .85rem;
  line-height: 1.4;
}

.contenu { flex: 1; min-width: 0; }

h1 {
  margin: 0 0 20px;
  padding-bottom: 2px;
  border-bottom: 3px solid var(--or);
  color: #555;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.3;
}

.annonce {
  padding: 18px 0;
  border-bottom: 1px solid var(--filet);
}

.annonce h2 {
  margin: 0 0 4px;
  color: var(--brun);
  font-size: 1.1rem;
  line-height: 1.5;
}

.annonce .meta { margin: 0 0 8px; font-size: .9rem; }

.annonce p { margin: 0 0 .6em; max-width: 70ch; text-align: justify; }

@media (max-width: 760px) {
  .logo { margin-left: 16px; width: 180px; }
  .page { flex-direction: column; gap: 24px; padding: 16px; }
  .lateral { flex-basis: auto; }
}

@media print { .bandeau { background: none; } }