@import url(typos.css);
:root {
  /* couleurs */
  --texte_so: rgb(18, 16, 12);
  --base_tei: 305;
  --base_sat: 69%;
  --base_lum: 27%;
  --col_base: hsl(var(--base_tei), var(--base_sat), var(--base_lum));
  --col_moins: hsl(
    calc(var(--base_tei) - 120),
    var(--base_sat),
    var(--base_lum)
  );
  --col_plus: hsl(
    calc(var(--base_tei) - 236),
    var(--base_sat),
    var(--base_lum)
  );
  --col_carte: hsl(var(--base_tei), 10%, var(--base_lum));
  --col_lumi: hsl(var(--base_tei), 50%, 90%);
  /* dimensions */
  --carte-h: 1040px;
  --carte-l: 745px;
  --carte-t: 25px;
  --carte-b: 70px;
  --carte-r: 35px;
  --coef: calc(2 / 5);
  --carte-h-ech: calc(var(--carte-h) * var(--coef));
  --carte-l-ech: calc(var(--carte-l) * var(--coef));
  --carte-t-ech: calc(var(--carte-t) * var(--coef));
  --carte-b-ech: calc(var(--carte-b) * var(--coef));
  --carte-r-ech: calc(var(--carte-r) * var(--coef));
  --rayon: calc(var(--carte-r-ech) - var(--carte-t-ech));
}

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  color: var(--texte_so);
  min-height: 100vh;
  min-width: 100%;
  background: linear-gradient(
    109.6deg,
    rgb(177, 173, 219) 11.2%,
    rgb(245, 226, 226) 91.1%
  );
  font-family: LindenHill;
}
.empagement {
  display: grid;
  grid-template-columns:
    [bordsperdus-start] minmax(1em, 1fr)
    [empagement-start] minmax(0, 1024px)
    [empagement-end] minmax(1em, 1fr)
    [bordsperdus-end];
}
.empagement > * {
  grid-column: empagement;
}
.empagement > .bordsperdus {
  grid-column: bordsperdus;
}
body > header {
  text-align: center;
}
body > footer {
  text-align: center;
  margin: 0.55rem 0 1rem 0;
}
.mercantique {
  background: var(--col_base);
  background-image: url("bruit2.png");
  quotes: "" "";
  filter: drop-shadow(var(--texte_so) 0.5ch 1ch 2ch);
  margin-top: 2rem;
  color: white;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30ch), 1fr));
  justify-items: center;
  align-items: center;
}
.mercantique .capy {
  filter: invert(100%) opacity(22%);
  min-height: 9rem;
  padding: 1ch;
}
.mercantique q {
  font-family: LeagueGothic;
  font-size: 2rem;
}
.mercantique .contact {
  text-align: center;
  clip-path: polygon(
    1rem 0%,
    100% 0,
    100% calc(100% - 1.11rem),
    calc(100% - 1rem) 100%,
    0 100%,
    0% 1.11rem
  );
  border: 4px double var(--texte_so);
  background-color: #efefef;
  color: black;
  transform: rotateZ(7deg);
  padding: 1ch;
}

.deck {
  display: grid;
  grid-template-columns: repeat(auto-fill, calc(var(--carte-l) * var(--coef)));
  grid-gap: 2rem;
  justify-content: space-evenly;
  margin: 2rem 0;
}
.carte {
  background-color: var(--texte_so);
  font-family: LeagueGothic;
  height: var(--carte-h-ech);
  width: var(--carte-l-ech);
  border-style: solid;
  border-width: var(--carte-t-ech);
  border-bottom-width: var(--carte-b-ech);
  border-color: var(--texte_so);
  border-radius: var(--carte-r-ech);
  display: grid;
  grid-template-rows: [illus-start] calc(var(--carte-h-ech) * (7 / 12)) [illus-end cartouche-start] 1fr [cartouche-end];
  z-index: 0;
  filter: drop-shadow(var(--texte_so) 0.5ch 1ch 2ch);
}

h1 {
  font-family: twoAm;
  font-size: 4rem;
}

.soustitre {
  font-family: midnight;
  font-size: 1.516rem;
  border-bottom: 0.5ch solid currentcolor;
  width: fit-content;
  margin-inline: auto;
}

.carte h3::before {
  display: block;
  content: "";
  background-color: #ffe86f;
  position: absolute;
  border: 2px solid var(--texte_so);
  transform: skewX(-7deg);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}
.carte > h3 {
  position: relative;
  grid-area: illus;
  place-self: end start;
  font-style: italic;
  font-weight: 400;
  margin-bottom: -1ex;
  margin-left: 0.5lh;
  padding: 0.21ex 1ex;
  z-index: 3;
  font-size: 1.44rem;
}
.carte > small {
  grid-area: illus;
  color: white;
  place-self: start end;
  margin-top: 2ex;
  margin-right: calc(var(--carte-t) * var(--coef) * -1);
  background-color: var(--col_carte);
  padding: 0.21ex 1.5ex 0.21ex 1ex;
  z-index: 2;
  font-size: 1.25em;
  border-radius: 2px 0 0 2px;
}
.carte > img,
.carte > svg {
  grid-area: illus;
  object-fit: cover;
  height: 100%;
  width: 100%;
  margin-inline: auto;
  z-index: 1;
  border-radius: var(--rayon) var(--rayon) 0 0;
}
.carte > p {
  font-family: LindenHill;
  text-wrap: pretty;
  font-style: italic;
  display: block;
  grid-area: cartouche;
  background-color: #f8e7e7;
  background-size: 80px 80px;
  font-size: 1.15rem;
  line-height: 1.21;
  color: #121318;
  padding: 3ex 2.618ex;
  width: 100%;
  overflow: hidden;
  border-radius: 0 0 var(--rayon) var(--rayon);
  border-top: 2px solid var(--texte_so);
}
.informatique small {
  background-color: var(--col_base);
}
.édition small {
  background-color: var(--col_moins);
}
.communication small {
  background-color: var(--col_plus);
}