:root {
  /* Couleur de fond du header */
  --brand-color: rgb(168, 183, 164);
  --brand-seconday-color: rgb(240, 238, 223);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  background-color: var(--brand-color);
  font-family: "Roboto Flex", sans-serif;
  font-size: 10px;
  color: rgb(42, 55, 55);
}

h1 {
  font-family: "Ibarra Real Nova", serif;
  font-weight: 300;
  font-size: 60px;
  line-height: 1;
  margin-bottom: 40px;
}
p {
  font-family: "Roboto Flex", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
}
/* ---------- Header ---------- */
header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

header img {
  /* Taille « design » + adaptation mobile */
  width: 299px;
  height: 68px;
  max-width: 100%;
  height: auto;
}

/* ---------- Sections ---------- */
main {
  width: 100%;
  margin: 0 auto;
}

.split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  margin: 0;
}

.split .left,
.split .right {
  flex: 1 1 45%; /* 50-50 avec un petit écart pour le gap */
}

.split .right.description,
.split .right.contact {
  margin: 1rem;
}

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

.split.description {
  background-color: var(--brand-seconday-color);
}
div.right.description {
  padding-right: 2rem;
}

.split.contact .left img {
  width: 170px;
  height: auto;
  display: block;
}

/* ---------- Coordonnées ---------- */
.contact ul {
  list-style: none;
  margin-top: 1rem;
  font-size: 12px;
  line-height: 1.5;
}

.contact a {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.contact a.phone {
  text-decoration: underline;
}

.contact li + li {
  margin-top: 0.5rem;
}

.linkbutton {
  transition: all 0.2s ease, visibility 0s;
  padding: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid #ad5025;
  background: #ad5025;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  height: 100%;
  min-height: 10px;
  min-width: 10px;
  font-weight: normal;
  font-style: normal;
  font-family: avenir-lt-w01_85-heavy1475544, sans-serif;
  font-size: 14px;
  color: #f0eedf;
  display: inline-block;
}

.linkbutton.secondary {
  border: 1px solid #2a3737;
  background: #2a3737;
}

.linkbutton:hover,
.linkbutton.secondary:hover {
  color: #2a3737;
  background: #a8b7a4;
  border: 1px solid #5c6561;
}

.icon-list,
.button-list {
  display: flex;
  gap: 1rem; /* spacing between images */
  list-style: none; /* remove bullets */
  padding: 0;
  margin: 0;
}

.icon-list li {
  margin-top: 0.5rem;
}

.icon-list img {
  display: block;
  width: 27px; /* or auto/responsive */
  height: auto;
  border-radius: 6px; /* optional */
}

/* ---------- Responsive : pile les colonnes sous 768 px ---------- */
@media (max-width: 768px) {
  .split .left,
  .split .right {
    flex: 1 1 100%;
  }
  div.right.description {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}