:root {
  --color--txt: #43454b;
  --color-txt-light:#b3c0c2;
  --color--turquoise: #0e808c;
  --color--bleu: #00c4d9;
  --color--bleu-clair: hsl(186, 100%, 96%);
  --color--vert: #b1ca42;
  --color--rouge: #e30613;
  --color--magenta: #df33a7;
  --color--moutarde: #cfb815;
  --color-jaune: #fcdd03;
  --color-gris: #5c5e66;
  --color--pure-black: #000;
  --color--pure-white: #fff;
  --color-fond-ecran:hsl(180.0, 33.3%, 99%);
  --font-size--200: 0.64rem;
  --font-size--300: 0.8rem;
  --font-size--400: 1rem;
  --font-size--500: 1.25rem;
  --font-size--600: 1.56rem;
  --font-size--700: 1.95rem;
  --font-size--800: 2.44rem;
  --font-size--900: 3.05rem;
  --font-size--1000: 3.81rem;
  --spacing-auto: auto;
  --ff: 'Klein', sans-serif;
  --border-radius: 0.2em;
  --width-small: 700px;
  --width-large: 1580px;
  --space-size-null: 0;
  --space-size-null: 0;
  --space-size-0: 5px;
  --space-size-1: 10px;
  --space-size-2: 20px;
  --space-size-3: 40px;
  --space-size-4: 60px;
  --space-size-5: 80px;
  --space-size-6: 100px;
  --space-size-7: 140px;
  --space-size-8: 180px;
  --space-size-9: 240px;
  --space-size-10: 300px;
  --easing: linear(0, 0.012 0.9%, 0.049 2%, 0.409 9.3%, 0.513 11.9%, 0.606 14.7%, 0.691 17.9%, 0.762 21.3%, 0.82 25%, 0.868 29.1%, 0.907 33.6%, 0.937 38.7%, 0.976 51.3%, 0.994 68.8%, 1);
  --magic-logo-w: 140px;
}

/******************************************************/
/* RESET *********************************************
/******************************************************/

*,
:after,
:before {
  box-sizing: border-box
}

* {
  font-family: inherit;
  margin: 0;
  padding: 0
}

ol[role=list],
ul[role=list] {
  list-style: '';
}

html:focus-within {
  scroll-behavior: smooth
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto
}

img,
picture {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit
}

@media (prefers-reduced-motion:reduce) {
  html:focus-within {
    scroll-behavior: auto
  }

  *,
  :after,
  :before {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important
  }
}

/******************************************************/
/* GLOBAL *********************************************
/******************************************************/

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem
}

.site-wrapper {
  position: relative;
}

.bg {
  background-image: url(../img/persos.svg);
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: 80vmin;
  inset: 0;
  pointer-events: none;
  position: fixed;
}

.site-main {
  position: relative;
  z-index: 1;
}

::-moz-selection {
  background-color: var(--color--txt);
  color: #fff
}

::selection {
  background-color: var(--color--txt);
  color: #fff
}

/******************************************************/
/* TYPOGRAPHY *****************************************
/******************************************************/

body {
  color: var(--color--txt);
  font-family: var(--ff);
  font-size: var(--font-size--400);
  font-weight: 400;
  line-height: 1.5
}

@media (min-width:480px) {
  body {
    font-size: var(--font-size--500);
  }
}

h1,
h2,
h3,
h4 {
  font-weight: 600;
  line-height: 1.25;
  margin-block: 0 0.35em;
  text-transform: uppercase
}

h1 {
  font-size: var(--font-size--700);
  margin-block: 0;
  padding-block: var(--space-size-2);
  text-align: center
}

@media screen and (min-width:900px) {
  h1 {
    font-size: var(--font-size--800)
  }
}

@media screen and (min-width:82em) {
  h1 {
    font-size: var(--font-size--900)
  }
}

h2 {
  font-size: var(--font-size--600);
  font-weight: 600
}

@media screen and (min-width:900px) {
  h2 {
    font-size: var(--font-size--700)
  }
}

h3 {
  font-size: var(--font-size--500)
}

main :is(p, dl, ol, ul) {
  margin-block: .5em .15em
}

main :is(ul, ol) {
  margin-inline-start:0;
  padding-inline-start:0;
}

.list-no-style {
  list-style: '';
}

.lh-small {
  line-height: 1.15
}

.fs-300,
.has-300-font-size {
  font-size: var(--font-size--300)
}

.fs-400,
.has-400-font-size {
  font-size: var(--font-size--400)
}

.fs-500,
.has-500-font-size {
  font-size: var(--font-size--500)
}

.fs-600,
.has-600-font-size {
  font-size: var(--font-size--600)
}

.fs-700,
.has-700-font-size {
  font-size: var(--font-size--700)
}

.fs-800,
.has-800-font-size {
  font-size: var(--font-size--800)
}

.fs-900,
.has-900-font-size {
  font-size: var(--font-size--900)
}

.fw-200 {
  font-weight: 200
}

.fw-400 {
  font-weight: 400
}

.fw-600 {
  font-weight: 600
}

.fw-900 {
  font-weight: 900
}

.text-bold,
b,
strong {
  font-weight: 600
}

.text-italic {
  font-style: italic;
}

.text-normal {
  font-style:normal;
}

.text-right {
  text-align: right
}

.text-left {
  text-align: left
}

.text-center {
  text-align: center
}

.text-uppercase {
  text-transform: uppercase
}

.text-pretty {
  text-wrap: pretty;
}

.text-balance {
  text-wrap: balance;
}

/******************************************************/
/* COLORS *********************************************
/******************************************************/

.has-txt-color,
.txt-txt {
  fill: var(--color--txt);
  color: var(--color--txt) !important
}

.bg-txt,
.has-txt-background-color {
  background-color: var(--color--txt) !important
}

.has-turquoise-color,
.txt-turquoise {
  fill: var(--color--turquoise);
  color: var(--color--turquoise) !important
}

.bg-turquoise,
.has-turquoise-background-color {
  background-color: var(--color--turquoise) !important
}

.has-vert-color,
.txt-vert {
  fill: var(--color--vert);
  color: var(--color--vert) !important
}

.bg-vert,
.has-vert-background-color {
  background-color: var(--color--vert) !important
}

.has-bleu-color,
.txt-bleu {
  fill: var(--color--bleu);
  color: var(--color--bleu) !important
}

.bg-bleu,
.has-bleu-background-color {
  background-color: var(--color--bleu) !important
}

.has-bleu-clair-color,
.txt-bleu-clair {
  fill: var(--color--bleu-clair);
  color: var(--color--bleu-clair) !important
}

.bg-bleu-clair,
.has-bleu-clair-background-color {
  background-color: var(--color--bleu-clair) !important
}

.has-vert-color,
.txt-vert {
  fill: var(--color--vert);
  color: var(--color--vert) !important
}

.bg-vert,
.has-vert-background-color {
  background-color: var(--color--vert) !important
}

.has-rouge-color,
.txt-rouge {
  fill: var(--color--rouge);
  color: var(--color--rouge) !important
}

.bg-rouge,
.has-rouge-background-color {
  background-color: var(--color--rouge) !important
}

.has-moutarde-color,
.txt-moutarde {
  fill: var(--color--moutarde);
  color: var(--color--moutarde) !important
}

.bg-moutarde,
.has-moutarde-background-color {
  background-color: var(--color--moutarde) !important
}

.has-jaune-color,
.txt-jaune {
  fill: var(--color--jaune);
  color: var(--color--jaune) !important
}

.bg-jaune,
.has-jaune-background-color {
  background-color: var(--color--jaune) !important
}

.has-gris-color,
.txt-gris {
  fill: var(--color--gris);
  color: var(--color--gris) !important
}

.bg-gris,
.has-gris-background-color {
  background-color: var(--color--gris) !important
}

.has-pure-white-color,
.txt-pure-white {
  fill: var(--color--pure-white);
  color: var(--color--pure-white) !important
}

.bg-pure-white,
.has-pure-white-background-color {
  background-color: var(--color--pure-white) !important
}

.has-pure-black-color,
.txt-pure-black {
  fill: var(--color--pure-black);
  color: var(--color--pure-black) !important
}

.bg-pure-black,
.has-pure-black-background-color {
  background-color: var(--color--pure-black) !important
}

.has-fond-ecran-color,
.txt-fond-ecran {
  fill: var(--color--fond-ecran);
  color: var(--color--fond-ecran) !important
}

.bg-fond-ecran,
.has-fond-ecran-background-color {
  background-color: var(--color--fond-ecran) !important
}

/******************************************************/
/* UTLITIES *******************************************
/******************************************************/

.bloc-bg {
  width:min(25vw, 120px);
}

.cols-2-wrapper {
  display: grid;
  gap:var(--space-size-4) var(--space-size-6);
}

@media(min-width:900px) {
  .cols-2-wrapper {
    grid-template-columns: 1fr 1fr;
  }
}

.cols-2-col {

}

.flow>*+* {
  margin-block-start: var(--flow-space, var(--space-size-2))
}

.flow-space-0 {
  --flow-space: 0rem
}

.flow-space-1 {
  --flow-space: 0.25rem
}

.flow-space-2 {
  --flow-space: 0.5rem
}

.flow-space-3 {
  --flow-space: 0.75rem
}

.flow-space-4 {
  --flow-space: 1rem
}

.flow-space-5 {
  --flow-space: 1.25rem
}

.flow-space-6 {
  --flow-space: 1.5rem
}

.flow-space-7 {
  --flow-space: 1.75rem
}

.flow-space-8 {
  --flow-space: 2rem
}

.flow-space-9 {
  --flow-space: 2.25rem
}

.visually-hidden {
  clip: rect(0 0 0 0);
  border: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px
}

.mg-null {margin: var(--space-size-null)}
.mg-b-null {margin-block: var(--space-size-null)}
.mg-b-start-null {margin-block-start: var(--space-size-null)}
.mg-b-end-null {margin-block-end: var(--space-size-null)}
.mg-i-null {margin-inline: var(--space-size-null)}
.mg-i-start-null {margin-inline-start: var(--space-size-null)}
.mg-i-end-null {margin-inline-end: var(--space-size-null)}
.mg-0 {margin: var(--space-size-0)}
.mg-b-0 {margin-block: var(--space-size-0)}
.mg-b-start-0 {margin-block-start: var(--space-size-0)}
.mg-b-end-0 {margin-block-end: var(--space-size-0)}
.mg-i-0 {margin-inline: var(--space-size-0)}
.mg-i-start-0 {margin-inline-start: var(--space-size-0)}
.mg-i-end-0 {margin-inline-end: var(--space-size-0)}
.mg-1 {margin: var(--space-size-1)}
.mg-b-1 {margin-block: var(--space-size-1)}
.mg-b-start-1 {margin-block-start: var(--space-size-1)}
.mg-b-end-1 {margin-block-end: var(--space-size-1)}
.mg-i-1 {margin-inline: var(--space-size-1)}
.mg-i-start-1 {margin-inline-start: var(--space-size-1)}
.mg-i-end-1 {margin-inline-end: var(--space-size-1)}
.mg-2 {margin: var(--space-size-2)}
.mg-b-2 {margin-block: var(--space-size-2)}
.mg-b-start-2 {margin-block-start: var(--space-size-2)}
.mg-b-end-2 {margin-block-end: var(--space-size-2)}
.mg-i-2 {margin-inline: var(--space-size-2)}
.mg-i-start-2 {margin-inline-start: var(--space-size-2)}
.mg-i-end-2 {margin-inline-end: var(--space-size-2)}
.mg-3 {margin: var(--space-size-3)}
.mg-b-3 {margin-block: var(--space-size-3)}
.mg-b-start-3 {margin-block-start: var(--space-size-3)}
.mg-b-end-3 {margin-block-end: var(--space-size-3)}
.mg-i-3 {margin-inline: var(--space-size-3)}
.mg-i-start-3 {margin-inline-start: var(--space-size-3)}
.mg-i-end-3 {margin-inline-end: var(--space-size-3)}
.mg-4 {margin: var(--space-size-4)}
.mg-b-4 {margin-block: var(--space-size-4)}
.mg-b-start-4 {margin-block-start: var(--space-size-4)}
.mg-b-end-4 {margin-block-end: var(--space-size-4)}
.mg-i-4 {margin-inline: var(--space-size-4)}
.mg-i-start-4 {margin-inline-start: var(--space-size-4)}
.mg-i-end-4 {margin-inline-end: var(--space-size-4)}
.mg-5 {margin: var(--space-size-5)}
.mg-b-5 {margin-block: var(--space-size-5)}
.mg-b-start-5 {margin-block-start: var(--space-size-5)}
.mg-b-end-5 {margin-block-end: var(--space-size-5)}
.mg-i-5 {margin-inline: var(--space-size-5)}
.mg-i-start-5 {margin-inline-start: var(--space-size-5)}
.mg-i-end-5 {margin-inline-end: var(--space-size-5)}
.mg-6 {margin: var(--space-size-6)}
.mg-b-6 {margin-block: var(--space-size-6)}
.mg-b-start-6 {margin-block-start: var(--space-size-6)}
.mg-b-end-6 {margin-block-end: var(--space-size-6)}
.mg-i-6 {margin-inline: var(--space-size-6)}
.mg-i-start-6 {margin-inline-start: var(--space-size-6)}
.mg-i-end-6 {margin-inline-end: var(--space-size-6)}
.mg-7 {margin: var(--space-size-7)}
.mg-b-7 {margin-block: var(--space-size-7)}
.mg-b-start-7 {margin-block-start: var(--space-size-7)}
.mg-b-end-7 {margin-block-end: var(--space-size-7)}
.mg-i-7 {margin-inline: var(--space-size-7)}
.mg-i-start-7 {margin-inline-start: var(--space-size-7)}
.mg-i-end-7 {margin-inline-end: var(--space-size-7)}
.mg-8 {margin: var(--space-size-8)}
.mg-b-8 {margin-block: var(--space-size-8)}
.mg-b-start-8 {margin-block-start: var(--space-size-8)}
.mg-b-end-8 {margin-block-end: var(--space-size-8)}
.mg-i-8 {margin-inline: var(--space-size-8)}
.mg-i-start-8 {margin-inline-start: var(--space-size-8)}
.mg-i-end-8 {margin-inline-end: var(--space-size-8)}
.mg-9 {margin: var(--space-size-9)}
.mg-b-9 {margin-block: var(--space-size-9)}
.mg-b-start-9 {margin-block-start: var(--space-size-9)}
.mg-b-end-9 {margin-block-end: var(--space-size-9)}
.mg-i-9 {margin-inline: var(--space-size-9)}
.mg-i-start-9 {margin-inline-start: var(--space-size-9)}
.mg-i-end-9 {margin-inline-end: var(--space-size-9)}
.mg-i-10 {margin-inline: var(--space-size-10)}
.mg-i-start-10 {margin-inline-start: var(--space-size-10)}
.mg-i-end-10 {margin-inline-end: var(--space-size-10)}

.pd-null {padding: var(--space-size-null)}
.pd-b-null {padding-block: var(--space-size-null)}
.pd-b-start-null {padding-block-start: var(--space-size-null)}
.pd-b-end-null {padding-block-end: var(--space-size-null)}
.pd-i-null {padding-inline: var(--space-size-null)}
.pd-i-start-null {padding-inline-start: var(--space-size-null)}
.pd-i-end-null {padding-inline-end: var(--space-size-null)}
.pd-0 {padding: var(--space-size-0)}
.pd-b-0 {padding-block: var(--space-size-0)}
.pd-b-start-0 {padding-block-start: var(--space-size-0)}
.pd-b-end-0 {padding-block-end: var(--space-size-0)}
.pd-i-0 {padding-inline: var(--space-size-0)}
.pd-i-start-0 {padding-inline-start: var(--space-size-0)}
.pd-i-end-0 {padding-inline-end: var(--space-size-0)}
.pd-1 {padding: var(--space-size-1)}
.pd-b-1 {padding-block: var(--space-size-1)}
.pd-b-start-1 {padding-block-start: var(--space-size-1)}
.pd-b-end-1 {padding-block-end: var(--space-size-1)}
.pd-i-1 {padding-inline: var(--space-size-1)}
.pd-i-start-1 {padding-inline-start: var(--space-size-1)}
.pd-i-end-1 {padding-inline-end: var(--space-size-1)}
.pd-2 {padding: var(--space-size-2)}
.pd-b-2 {padding-block: var(--space-size-2)}
.pd-b-start-2 {padding-block-start: var(--space-size-2)}
.pd-b-end-2 {padding-block-end: var(--space-size-2)}
.pd-i-2 {padding-inline: var(--space-size-2)}
.pd-i-start-2 {padding-inline-start: var(--space-size-2)}
.pd-i-end-2 {padding-inline-end: var(--space-size-2)}
.pd-3 {padding: var(--space-size-3)}
.pd-b-3 {padding-block: var(--space-size-3)}
.pd-b-start-3 {padding-block-start: var(--space-size-3)}
.pd-b-end-3 {padding-block-end: var(--space-size-3)}
.pd-i-3 {padding-inline: var(--space-size-3)}
.pd-i-start-3 {padding-inline-start: var(--space-size-3)}
.pd-i-end-3 {padding-inline-end: var(--space-size-3)}
.pd-4 {padding: var(--space-size-4)}
.pd-b-4 {padding-block: var(--space-size-4)}
.pd-b-start-4 {padding-block-start: var(--space-size-4)}
.pd-b-end-4 {padding-block-end: var(--space-size-4)}
.pd-i-4 {padding-inline: var(--space-size-4)}
.pd-i-start-4 {padding-inline-start: var(--space-size-4)}
.pd-i-end-4 {padding-inline-end: var(--space-size-4)}
.pd-5 {padding: var(--space-size-5)}
.pd-b-5 {padding-block: var(--space-size-5)}
.pd-b-start-5 {padding-block-start: var(--space-size-5)}
.pd-b-end-5 {padding-block-end: var(--space-size-5)}
.pd-i-5 {padding-inline: var(--space-size-5)}
.pd-i-start-5 {padding-inline-start: var(--space-size-5)}
.pd-i-end-5 {padding-inline-end: var(--space-size-5)}
.pd-6 {padding: var(--space-size-6)}
.pd-b-6 {padding-block: var(--space-size-6)}
.pd-b-start-6 {padding-block-start: var(--space-size-6)}
.pd-b-end-6 {padding-block-end: var(--space-size-6)}
.pd-i-6 {padding-inline: var(--space-size-6)}
.pd-i-start-6 {padding-inline-start: var(--space-size-6)}
.pd-i-end-6 {padding-inline-end: var(--space-size-6)}
.pd-7 {padding: var(--space-size-7)}
.pd-b-7 {padding-block: var(--space-size-7)}
.pd-b-start-7 {padding-block-start: var(--space-size-7)}
.pd-b-end-7 {padding-block-end: var(--space-size-7)}
.pd-i-7 {padding-inline: var(--space-size-7)}
.pd-i-start-7 {padding-inline-start: var(--space-size-7)}
.pd-i-end-7 {padding-inline-end: var(--space-size-7)}
.pd-8 {padding: var(--space-size-8)}
.pd-b-8 {padding-block: var(--space-size-8)}
.pd-b-start-8 {padding-block-start: var(--space-size-8)}
.pd-b-end-8 {padding-block-end: var(--space-size-8)}
.pd-i-8 {padding-inline: var(--space-size-8)}
.pd-i-start-8 {padding-inline-start: var(--space-size-8)}
.pd-i-end-8 {padding-inline-end: var(--space-size-8)}
.pd-9 {padding: var(--space-size-9)}
.pd-b-9 {padding-block: var(--space-size-9)}
.pd-b-start-9 {padding-block-start: var(--space-size-9)}
.pd-b-end-9 {padding-block-end: var(--space-size-9)}
.pd-i-9 {padding-inline: var(--space-size-9)}
.pd-i-start-9 {padding-inline-start: var(--space-size-9)}
.pd-i-end-9 {padding-inline-end: var(--space-size-9)}
.pd-i-10 {padding-inline: var(--space-size-10)}
.pd-i-start-10 {padding-inline-start: var(--space-size-10)}
.pd-i-end-10 {padding-inline-end: var(--space-size-10)}


.wrapper {
  position: relative;
  margin-inline: auto;
  padding-inline:var(--space-size-2);
  max-width: var(--width-large);
}

.wrapper--small {
  max-width: var(--width-small);
}

@media (max-width:781px) {
  .cacher-sur-mobile {
    display: none
  }
}

a,
button {
  color: var(--color--turquoise);
  text-decoration-color: currentColor;
  text-decoration-thickness: .01em;
  transition: color .15s var(--easing), text-decoration-color .15s var(--easing)
}

a:focus,
a:hover,
button:focus,
button:hover {
  color: var(--color--bleu);
  -webkit-text-decoration: #fff;
  text-decoration: #fff
}

.site-main a img,
.site-main a svg,
.site-footer__cal__logo {
  filter: brightness(1);
  transform: scale(1);
  transition: all .1s ease
}

.site-main a img:focus,
.site-main a img:hover,
.site-main a svg:focus,
.site-main a svg:hover,
.site-footer__cal__logo:focus,
.site-footer__cal__logo:hover {
  filter: brightness(1.1);
  transform: scale(1.04)
}

.site-main a img:active,
.site-main a svg:active,
.site-footer__cal__logo:active {
  filter: brightness(1);
  transform: scale(1)
}

.button,
button,
input[type=submit] {
  background-color: var(--color--turquoise);
  border: 0;
  border-radius: var(--border-radius);
  color: #fff;
  display: inline-block;
  filter: brightness(1);
  padding-block: .3em .2em;
  padding-inline: 1em;
  text-decoration: none;
  text-transform: uppercase;
  transform: scale(1);
  transition: all .1s ease
}

.button:focus,
.button:hover,
button:focus,
button:hover,
input[type=submit]:focus,
input[type=submit]:hover {
  color: #fff;
  cursor: pointer;
  filter: brightness(1.1);
  text-decoration: none;
  transform: scale(1.04)
}

.button:active,
button:active,
input[type=submit]:active {
  color: #fff;
  filter: brightness(1);
  transform: scale(1)
}


form label {
  font-size: var(--font-size--300);
  font-style: italic
}

form label input,
form label select,
form label textarea {
  border: 0;
  border: 1px solid var(--color--turquoise);
  border-radius: var(--border-radius);
  font-size: var(--font-size--400);
  font-style: normal;
  margin-block-start: .2em;
  max-width: 100%;
  outline: 1px solid var(--color--turquoise);
  padding-block: .25em;
  padding-inline: .35em
}

form label input:focus,
form label select:focus,
form label textarea:focus {
  border-color: var(--color--rouge);
  outline: 2px solid var(--color--rouge)
}

form label:has(:is(input, textarea, select):focus) {
  font-style: normal
}


/******************************************************/
/* SITE-HEADER ****************************************
/******************************************************/

.site-header {
  position: relative;
  z-index: 1;
  max-width: var(--width-large);
  margin-inline: auto;
  padding-block: var(--space-size-2);
}

/*.site-header::before {
  content:'';
  position: absolute;
  inset:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url(../img/maison-sauveur-chaudfontaine-small.jpg);
  background-image: -webkit-image-set(
    url("../img/maison-sauveur-chaudfontaine-small.avif") type("image/avif"),
    url("../img/maison-sauveur-chaudfontaine-small.jpg") type("image/jpeg")
  );
  background-image: image-set(
    url("../img/maison-sauveur-chaudfontaine-small.avif") type("image/avif"),
    url("../img/maison-sauveur-chaudfontaine-small.jpg") type("image/jpeg")
  );
}

@media screen and (min-width:900px) {
  .site-header::before {
    background-position: center bottom 36%;
    background-image: url(../img/maison-sauveur-chaudfontaine.jpg);
    background-image: -webkit-image-set(
      url("../img/maison-sauveur-chaudfontaine.avif") type("image/avif"),
      url("../img/maison-sauveur-chaudfontaine.jpg") type("image/jpeg")
    );
    background-image: image-set(
      url("../img/maison-sauveur-chaudfontaine.avif") type("image/avif"),
      url("../img/maison-sauveur-chaudfontaine.jpg") type("image/jpeg")
    );
  }
}*/

.site-header__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-size-4);
  margin-inline: auto;
  padding-inline: var(--space-size-2);

  .bloc-bg {
    margin-left:auto;
  }

}

@media screen and (min-width:480px) {
  .site-header__inner {
    flex-wrap: wrap;
  }
}

.site-header__logotitle {
  position: relative;
  display: flex;
  gap: var(--space-size-1);
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border-radius: 3px;
  background-color: rgba(255,255,255,0.9);
}

@media screen and (min-width:900px) {
  .site-header__logotitle {
    flex-direction: row;
    justify-content: center;
  }
}

.site-header__logo {
  width: var(--magic-logo-w);
}

.site-header__logo img {
  display: block;
  height: auto;
  transform: scale(1);
  transition: transform .1s ease;
  width: 100%;
}

.site-header__logo img:focus,
.site-header__logo img:hover {
  transform: scale(1.04)
}

.site-header__logo img:active {
  transform: scale(1)
}

.site-header__title {
  --magic-font-length: 15ch;
  /**/
  flex-shrink: 0;
  font-size: var(--font-size--400);
  font-weight: 200;
  line-height: 1.3;
  max-width: var(--magic-font-length)
}

@media screen and (min-width:900px) {
  .site-header__title {
    flex-basis: var(--magic-font-length);
    font-size: var(--font-size--600)
  }
}

@media screen and (min-width:82em) {
  .site-header__title {
    font-size: var(--font-size--700)
  }
}

/******************************************************/
/* HOMEPAGE *******************************************
/******************************************************/

.fb-logo {
  max-width: 60px;
}

/******************************************************/
/* POST-LIST ******************************************
/******************************************************/

.post-list {
  display: grid;
  gap: var(--space-size-3);
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 32rem));
  justify-content: center;
  justify-items: center;
  margin-inline: auto;
  max-width: 115rem;
  text-align: center;
}

@media (min-width:1115px) {
  .post-list {
    text-align: left;
  }
}

.post__tease {
  --flow-space: var(--space-size-0);
  width: 100%;
}

.post__title {
  padding: 0;
  color: var(--color--rouge);
  line-height: 1.35;
}

.post__title a {
  text-decoration: none
}

.post__date {
  font-weight: 200;
  line-height: 1
}

/******************************************************/
/* SITE-FOOTER ****************************************
/******************************************************/

.site-signature {
  display:flex;
  flex-direction: column;
  align-items: center;
  gap:var(--space-size-2);
}

@media (min-width:480px) {
  .site-signature {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}

.site-footer {
  position: relative;
  z-index: 1;
  margin-block-start: auto;
}

.site-footer-cal {
  width: calc(100% - 30px);
  margin-left: 15px;
  margin-top: 60px;
  padding-block: 20px;
  border-top: 1px solid #00c4d9;
  box-sizing: border-box;
}
.site-footer-cal__logo {
  position: relative;
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  width: fit-content;
  margin-inline: auto;
  font-family: Klein, sans-serif;

  &::before,
  &::after {
    content:'';
    position: absolute;
    display: block;
    width:15px;
    height:15px;
  }
  &::before {
    top:0;
    left: 0;
    background-image:url(../img/bloc-jaune.svg);
  }
  &::after {
    bottom:0;
    right: 0;
    background-image:url(../img/bloc-magenta.svg);
  }

  a {
    flex-shrink: 0;
    display:block;
    width:80px;
  }

  img {
    width: 100%;
    height:auto;
  }

  p {
    max-width: 17ch;
    margin:0;
    font-size: 15px;
  }
}