:root {
  --coul-base: HSL(267, 35%, 49%);
  --coul-base-fond: HSL(267, 30%, 62%);
  --coul-base-desat: HSL(267, 10%, 49%);
  --coul-base-sombre: HSL(267, 35%, 40%);
  --coul-texte-base: #181818;
}

body {
  font-size: var(--step-0);
  padding: var(--space-s-m);
  color: var(--coul-texte-base);
  font-family: Amaranth;
}

section,
footer {
  margin-top: var(--space-m);
}

section p:first-of-type {
  text-indent: var(--space-m);
}
h1 {
  font-size: var(--step-5);
  z-index: 1;
}
.E {
  color: var(--coul-base);
  display: inline-block;
  transform: rotate(7deg) translateY(.16ex);
  text-transform: uppercase;
  background-color: rgba(132, 132, 132, 0.14);
  clip-path: circle(50% at 50% 50%);
  height: 2.617ex;
  width: 2.617ex;
  line-height: -0.5ex;
  text-align: center;
  bottom: 1rem;
  margin-left: -.64ex;
  margin-right: -.618ex;
}
h2 {
  font-size: var(--step-2);
}

h3 {
  font-size: var(--step-1);
}

a {
  color: var(--coul-base);
}

h5 {
  color: var(--coul-base);
}
i {
  font-style: italic;
}

strong {
  color: var(--coul-base-sombre);
}

li {
  padding-left: var(--space-m);
  background-image: linear-gradient(
    to right,
    var(--coul-base) 0%,
    var(--coul-base) var(--space-s),
    rgba(255, 255, 255, 0) var(--space-s),
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 100% var(--space-3xs);
  background-repeat: no-repeat;
  background-position: left 0.618rem;
}

p,
ul {
  margin-top: var(--space-xs);
}

li ul {
margin-top:0;
  margin-bottom: var(--space-xs);
}

li ul li {
  color: var(--coul-base-desat);
  padding-left: var(--space-s);
  background-image: linear-gradient(
    to right,
    var(--coul-texte-base) 0%,
    var(--coul-texte-base) var(--space-xs),
    rgba(255, 255, 255, 0) var(--space-xs),
    rgba(255, 255, 255, 0) 100%
  );
}

body > footer {
  margin-bottom: calc(0px - var(--space-s-m));
  color: whitesmoke;
  font-size: var(--step--1);
  text-align: center;
}

body > aside {
  background-image: linear-gradient(
    to right,
    var(--coul-base-desat) 0%,
    var(--coul-base-desat) var(--space-xl),
    rgba(255, 255, 255, 0) var(--space-xl),
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 100% var(--space-3xs);
  background-repeat: no-repeat;
  padding-top: var(--space-2xs-xs);
  margin-top: var(--space-s-m);
  font-size: var(--step--1);
}

dl {
  margin-top: var(--space-3xs);
}

dt {
  font-style: italic;
}

dd {
  color: dimgrey;
}
.colonned {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: var(--space-s-m);
  grid-auto-rows: auto;
}

.colonned header {
  grid-column: 1/-1;
}

.adonf {
  background-color: var(--coul-base-fond);
  margin-left: calc(0px - var(--space-s-m));
  margin-right: calc(0px - var(--space-s-m));
  padding: var(--space-s-m);
}

.adonf li {
  background-image: linear-gradient(
    to right,
    #fff 0%,
    #fff var(--space-s),
    rgba(255, 255, 255, 0) var(--space-s),
    rgba(255, 255, 255, 0) 100%
  );
}

.contacts {
  background-color: transparent;
  padding-top: calc(var(--space-3xs) - 1px);
  padding-bottom: calc(var(--space-3xs) - 1px);
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

a[href^="tel"] {
  font-size: 0.89em;
}