@charset "UTF-8";
:host, .sl-theme-dark {
  --sl-color-background-50: #0c111d;
  --sl-color-background-100: #111726;
  --sl-color-background-150: #131a2b;
  --sl-color-background-200: #151d30;
  --sl-color-background-250: #172034;
  --sl-color-background-300: #192339;
  --sl-color-background-350: #1b263d;
  --sl-color-background-400: #1d2842;
  --sl-color-background-450: #1f2b47;
  --sl-color-background-500: #202e4b;
  --sl-color-background-550: #233150;
  --sl-color-background-600: #253454;
  --sl-color-background-650: #273759;
  --sl-color-background-700: #29395e;
  --sl-color-background-750: #2b3c62;
  --sl-color-background-800: #2d3f67;
  --sl-color-background-850: #2f426b;
  --sl-color-background-900: #304570;
  --sl-color-background-950: #334775;
  --sl-color-default-50: #bfbfbf;
  --sl-color-default-100: #ffffff;
  --sl-color-default-150: #ffffff;
  --sl-color-default-200: #ffffff;
  --sl-color-default-250: #ffffff;
  --sl-color-default-300: #ffffff;
  --sl-color-default-350: #ffffff;
  --sl-color-default-400: #ffffff;
  --sl-color-default-450: #ffffff;
  --sl-color-default-500: #ffffff;
  --sl-color-default-550: #ffffff;
  --sl-color-default-600: #ffffff;
  --sl-color-default-650: #ffffff;
  --sl-color-default-700: #ffffff;
  --sl-color-default-750: #ffffff;
  --sl-color-default-800: #ffffff;
  --sl-color-default-850: #ffffff;
  --sl-color-default-900: #ffffff;
  --sl-color-default-950: #ffffff;
  --sl-color-primary-50: #162b67;
  --sl-color-primary-100: #1e398a;
  --sl-color-primary-150: #1f3d92;
  --sl-color-primary-200: #21409a;
  --sl-color-primary-250: #2344a2;
  --sl-color-primary-300: #2547aa;
  --sl-color-primary-350: #264bb2;
  --sl-color-primary-400: #284eba;
  --sl-color-primary-450: #2a51c2;
  --sl-color-primary-500: #2c55ca;
  --sl-color-primary-550: #2f59d1;
  --sl-color-primary-600: #375fd3;
  --sl-color-primary-650: #3f66d5;
  --sl-color-primary-700: #476cd7;
  --sl-color-primary-750: #4f73d8;
  --sl-color-primary-800: #5779da;
  --sl-color-primary-850: #5f80dc;
  --sl-color-primary-900: #6786de;
  --sl-color-primary-950: #708ddf;
  --sl-color-success-50: #0c8a60;
  --sl-color-success-100: #10b881;
  --sl-color-success-150: #10c388;
  --sl-color-success-200: #11ce90;
  --sl-color-success-250: #12d997;
  --sl-color-success-300: #13e49f;
  --sl-color-success-350: #19eba5;
  --sl-color-success-400: #23eca9;
  --sl-color-success-450: #2eecad;
  --sl-color-success-500: #39edb2;
  --sl-color-success-550: #44eeb6;
  --sl-color-success-600: #4fefba;
  --sl-color-success-650: #5af0be;
  --sl-color-success-700: #65f1c3;
  --sl-color-success-750: #70f2c7;
  --sl-color-success-800: #7af3cb;
  --sl-color-success-850: #85f4cf;
  --sl-color-success-900: #90f5d4;
  --sl-color-success-950: #9bf6d8;
  --sl-color-neutral-50: #6e7889;
  --sl-color-neutral-100: #9ca3af;
  --sl-color-neutral-150: #a1a8b3;
  --sl-color-neutral-200: #a6adb7;
  --sl-color-neutral-250: #acb2bc;
  --sl-color-neutral-300: #b1b7c0;
  --sl-color-neutral-350: #b6bcc4;
  --sl-color-neutral-400: #bcc1c9;
  --sl-color-neutral-450: #c1c6cd;
  --sl-color-neutral-500: #c7cbd1;
  --sl-color-neutral-550: #ccd0d6;
  --sl-color-neutral-600: #d1d5da;
  --sl-color-neutral-650: #d7dade;
  --sl-color-neutral-700: #dcdfe3;
  --sl-color-neutral-750: #e1e4e7;
  --sl-color-neutral-800: #e7e9eb;
  --sl-color-neutral-850: #eceef0;
  --sl-color-neutral-900: #f2f3f4;
  --sl-color-neutral-950: #f7f8f8;
  --sl-color-warning-50: #b77707;
  --sl-color-warning-100: #f59e09;
  --sl-color-warning-150: #f5a111;
  --sl-color-warning-200: #f5a418;
  --sl-color-warning-250: #f5a71f;
  --sl-color-warning-300: #f6aa26;
  --sl-color-warning-350: #f6ad2e;
  --sl-color-warning-400: #f6af35;
  --sl-color-warning-450: #f7b23c;
  --sl-color-warning-500: #f7b543;
  --sl-color-warning-550: #f7b84a;
  --sl-color-warning-600: #f7bb52;
  --sl-color-warning-650: #f8be59;
  --sl-color-warning-700: #f8c060;
  --sl-color-warning-750: #f8c367;
  --sl-color-warning-800: #f9c66e;
  --sl-color-warning-850: #f9c976;
  --sl-color-warning-900: #f9cc7d;
  --sl-color-warning-950: #facf84;
  --sl-color-danger-50: #881138;
  --sl-color-danger-100: #b6174a;
  --sl-color-danger-150: #c0184f;
  --sl-color-danger-200: #cb1953;
  --sl-color-danger-250: #d61b58;
  --sl-color-danger-300: #e01c5c;
  --sl-color-danger-350: #e32563;
  --sl-color-danger-400: #e4306b;
  --sl-color-danger-450: #e63b73;
  --sl-color-danger-500: #e7457a;
  --sl-color-danger-550: #e85082;
  --sl-color-danger-600: #ea5b8a;
  --sl-color-danger-650: #eb6591;
  --sl-color-danger-700: #ed7099;
  --sl-color-danger-750: #ee7ba0;
  --sl-color-danger-800: #ef86a8;
  --sl-color-danger-850: #f190b0;
  --sl-color-danger-900: #f29bb7;
  --sl-color-danger-950: #f3a6bf;
  --sl-color-text-50: #262626;
  --sl-color-text-100: #333333;
  --sl-color-text-150: #393939;
  --sl-color-text-200: #3f3f3f;
  --sl-color-text-250: #454545;
  --sl-color-text-300: #4b4b4b;
  --sl-color-text-350: #515151;
  --sl-color-text-400: #575757;
  --sl-color-text-450: #5d5d5d;
  --sl-color-text-500: #636363;
  --sl-color-text-550: #696969;
  --sl-color-text-600: #6f6f6f;
  --sl-color-text-650: #757575;
  --sl-color-text-700: #7b7b7b;
  --sl-color-text-750: #818181;
  --sl-color-text-800: #878787;
  --sl-color-text-850: #8d8d8d;
  --sl-color-text-900: #939393;
  --sl-color-text-950: #999999;
}

body {
  min-height: 100%;
  margin: 0;
  position: relative;
  background-color: var(--sl-color-background-500);
  box-sizing: border-box;
}
body h2, body h3, body h4, body span {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: bold;
  font-style: normal;
  color: var(--sl-color-success-100);
}
body h2 {
  margin: 0;
  color: var(--sl-color-success-100);
  font-size: 22px;
}
body h3 {
  margin-bottom: 10px;
  color: var(--sl-color-neutral-800);
  text-align: center;
  font-size: 18px;
}
body h3 a {
  text-decoration: underline;
  color: var(--sl-color-default-500);
}
body h3 a:hover {
  color: var(--sl-color-success-100);
}
body h4 {
  margin: 0;
  color: var(--sl-color-neutral-600);
  text-align: center;
  font-size: 16px;
}
body h4 a {
  text-decoration: underline;
  color: var(--sl-color-default-500);
}
body h4 a:hover {
  color: var(--sl-color-success-100);
}
body p, body a, body ul, body li {
  color: var(--sl-color-neutral-100);
  font-size: 16px;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  text-decoration: none;
  margin: 0;
}
body .home_page {
  height: 100%;
}

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

.content-page {
  margin: auto;
  max-width: 1000px;
  padding: 10px;
}
.content-page p, .content-page h1, .content-page h2, .content-page h3, .content-page h4, .content-page h5, .content-page h6 {
  margin-bottom: 1rem;
}
.content-page p:last-child, .content-page h1:last-child, .content-page h2:last-child, .content-page h3:last-child, .content-page h4:last-child, .content-page h5:last-child, .content-page h6:last-child {
  margin-bottom: 0;
}
.content-page h1, .content-page h2, .content-page h3 {
  margin-top: 2rem;
}
.content-page h1:first-child, .content-page h2:first-child, .content-page h3:first-child {
  margin-top: 0;
}
.content-page h4, .content-page h5, .content-page h6 {
  margin-top: 1.5rem;
}
.content-page h4:first-child, .content-page h5:first-child, .content-page h6:first-child {
  margin-top: 0;
}
.content-page ul, .content-page ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}
.content-page ul:last-child, .content-page ol:last-child {
  margin-bottom: 0;
}
.content-page li {
  margin-bottom: 0.5rem;
}
.content-page li:last-child {
  margin-bottom: 0;
}
.content-page ul ul, .content-page ol ol, .content-page ul ol, .content-page ol ul {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.button a {
  border: 0px solid var(--sl-color-success-100);
  background-color: var(--sl-color-success-50);
  border-radius: 5px;
  color: var(--sl-color-default-500);
  font-size: 14px;
  box-shadow: 0 4px 8px var(--sl-color-background-400);
  padding: 5px 10px;
  transition: box-shadow 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}
.button a:hover {
  border: 1px solid var(--sl-color-success-100);
  box-shadow: inset 0 0 2px var(--sl-color-success-950, 0.5);
  outline-offset: 2px;
  text-shadow: 1px 1px 2px var(--sl-color-background-100);
  border-radius: 5px;
  background-color: var(--sl-color-success-50);
}

.intro {
  background: var(--sl-color-background-700);
  border: 1px solid var(--sl-color-background-950);
  border-radius: 5px;
  max-width: 1000px;
  margin: 30px auto;
  padding: 20px;
}
.intro h2, .intro p {
  text-align: center;
}
.intro p {
  margin-bottom: 10px;
}
.intro p a {
  text-decoration: underline;
  color: var(--sl-color-default-500);
}
.intro p a:hover {
  color: var(--sl-color-success-100);
}
.intro .button {
  text-align: center;
  margin: 20px;
}

.team-member {
  background: var(--sl-color-background-700);
  border: 1px solid var(--sl-color-background-950);
  border-radius: 5px;
  max-width: 1000px;
  margin: 30px auto;
  padding: 20px;
  margin: auto;
}
.team-member h2, .team-member p {
  text-align: center;
}
.team-member p {
  margin-bottom: 10px;
}
.team-member div {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.team-member div p {
  text-align: justify;
}
.team-member a {
  text-decoration: underline;
  color: var(--sl-color-default-500);
}
.team-member a:hover {
  color: var(--sl-color-success-100);
}

.CGU {
  background: var(--sl-color-background-700);
  max-width: 1000px;
  margin: 10px auto;
  padding: 10px;
  border: 1px solid var(--sl-color-background-950);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: justify;
}
.CGU .essais {
  color: red;
}

.carousel {
  background: var(--sl-color-background-700);
  max-width: 1000px;
  margin: 20px auto;
  padding: 10px;
  border: 1px solid var(--sl-color-background-950);
  border-radius: 5px;
}
.carousel h2 {
  text-align: center;
}
.carousel p {
  text-align: justify;
  padding: 10px;
}
.carousel .button {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

.contact {
  max-width: 1000px;
  margin: 10px auto;
}
.contact .intro {
  background: var(--sl-color-background-700);
  border: 1px solid var(--sl-color-background-950);
  border-radius: 5px;
  max-width: 1000px;
  margin: 30px auto;
  padding: 20px;
}
.contact .intro h2, .contact .intro p {
  text-align: center;
}
.contact .intro p {
  margin-bottom: 10px;
}
.contact .intro p {
  margin: 10px;
}
.contact form {
  background: var(--sl-color-background-700);
  border: 1px solid var(--sl-color-background-950);
  border-radius: 5px;
  max-width: 1000px;
  margin: 30px auto;
  padding: 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 30px;
}
.contact form h2, .contact form p {
  text-align: center;
}
.contact form p {
  margin-bottom: 10px;
}
.contact form p {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
.contact form p input, .contact form p textarea {
  background: var(--sl-color-background-950);
  border: 1px solid var(--sl-color-background-950);
  border-radius: 5px;
  width: 100%;
}
.contact form button {
  border: 0px solid var(--sl-color-success-100);
  background-color: var(--sl-color-success-50);
  border-radius: 5px;
  color: var(--sl-color-default-500);
  font-size: 14px;
  box-shadow: 0 4px 8px var(--sl-color-background-400);
  padding: 5px 10px;
  transition: box-shadow 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}
.contact form button:hover {
  border: 1px solid var(--sl-color-success-100);
  box-shadow: inset 0 0 2px var(--sl-color-success-950, 0.5);
  outline-offset: 2px;
  text-shadow: 1px 1px 2px var(--sl-color-background-100);
  border-radius: 5px;
  background-color: var(--sl-color-success-50);
}
.contact .regles {
  margin-top: 10px;
}
.contact .regles p {
  font-size: 12px;
  color: var(--sl-color-neutral-400);
  text-align: justify;
}

.service {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding-top: 10px;
  background: var(--sl-color-background-700);
  border: 1px solid var(--sl-color-background-950);
  border-radius: 5px;
  height: 100%;
}
.service--image {
  flex: 0;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 8px 15px var(--sl-color-background-400);
  border: 1px solid var(--sl-color-background-800);
  padding: 20px;
  margin-top: 10px;
}
.service--image img {
  height: 150px;
  width: 150px;
  text-align: center;
}
.service--texte {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 15px;
  flex: 1;
}
.service--texte p {
  color: var(--sl-color-text-900);
  margin-top: 10px;
}
.service--icons {
  flex: 1;
}
.service .button {
  padding-bottom: 10px;
  flex: 0;
  margin-bottom: 10px;
}

.card {
  margin: 10px;
  gap: 10px;
}

.card .flex-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--sl-color-background-700);
  border: 1px solid var(--sl-color-background-950);
  border-radius: 5px;
  gap: 10px;
}
.card .flex-item p {
  text-align: justify;
}
.card .flex-item img {
  width: 150px;
  height: 100px;
  flex: 0;
}
.card .flex-item div {
  flex: 1;
}
.card .flex-item .button {
  flex: 0;
}

.caption {
  text-align: center;
}

.block-image-switch {
  background: var(--sl-color-background-700);
  border: 1px solid var(--sl-color-background-950);
  border-radius: 5px;
  max-width: 1000px;
  margin: 30px auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.block-image-switch h2, .block-image-switch p {
  text-align: center;
}
.block-image-switch p {
  margin-bottom: 10px;
}
.block-image-switch p {
  text-align: justify;
  padding: 20px;
}
.block-image-switch--image {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.block-image-switch--image img {
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 8px 15px var(--sl-color-background-400);
  border: 1px solid var(--sl-color-background-800);
  padding: 20px;
  width: 200px;
  height: 200px;
}
.block-image-switch--image .description {
  padding: 20px;
}
.block-image-switch--image ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}
.block-image-switch--image ul li:before {
  content: "✓";
  color: var(--sl-color-success-50);
  margin-right: 10px;
  font-size: 20px;
  font-weight: 600;
}
.block-image-switch .carousel-container {
  max-width: 100%;
  margin: 10px;
}
.block-image-switch .button {
  margin-bottom: 10px;
}

.block-vert {
  background: var(--sl-color-background-700);
  border: 1px solid var(--sl-color-background-950);
  border-radius: 5px;
  max-width: 1000px;
  margin: 30px auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  height: 100%;
  margin: 0;
}
.block-vert h2, .block-vert p {
  text-align: center;
}
.block-vert p {
  margin-bottom: 10px;
}
.block-vert--titre {
  flex: 0;
}
.block-vert--titre p {
  margin: 0;
}
.block-vert--imgBut img {
  width: 150px;
  height: 100px;
  margin-bottom: 10px;
}
.block-vert--imgBut {
  flex: 0;
}
.block-vert--description {
  flex: 1;
}
.block-vert--description ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0;
}
.block-vert--description ul li:before {
  content: "✓";
  color: var(--sl-color-success-50);
  margin-right: 10px;
  font-size: 20px;
  font-weight: 600;
}

.alert-body {
  text-align: justify;
}
.alert-body p {
  color: white;
}
.alert-body li {
  color: white;
}
.alert-body a {
  text-decoration: underline;
  color: var(--sl-color-default-500);
}
.alert-body a:hover {
  color: var(--sl-color-success-100);
}

.mentions-legales {
  background: var(--sl-color-background-700);
  border: 1px solid var(--sl-color-background-950);
  border-radius: 5px;
  max-width: 1000px;
  margin: 30px auto;
  padding: 20px;
}
.mentions-legales h2, .mentions-legales p {
  text-align: center;
}
.mentions-legales p {
  margin-bottom: 10px;
}
.mentions-legales h3 {
  margin-bottom: 10px;
}
.mentions-legales p {
  text-align: left;
}

.barreMenu {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  background: var(--sl-color-background-800);
  border-bottom: 1px solid var(--sl-color-success-100);
  padding: 10px;
}
.barreMenu a {
  border: 0px solid var(--sl-color-primary-200);
}
.barreMenu--logo img {
  height: 2.25rem;
}
.barreMenu--menu {
  list-style: none;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  z-index: 1;
}
.barreMenu--menu--niveau1 {
  list-style: none;
  padding: 0;
}
.barreMenu--menu--niveau1 a {
  padding: 10px;
}
.barreMenu--menu--niveau1 a:hover {
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
  box-shadow: inset 0 0 2px var(--sl-color-primary-950, 0.5);
  outline-offset: 15px;
  text-shadow: 1px 1px 2px var(--sl-color-background-100);
  border-radius: 5px;
  background-color: var(--sl-color-background-900);
}
.barreMenu--menu .barreMenu--menu--sousMenu--niveau2 {
  background: var(--sl-color-background-800);
  list-style: none;
  display: none;
  padding: 20px;
  margin-top: 10px;
  position: absolute;
  box-shadow: 0 8px 15px var(--sl-color-background-400);
  border: 1px solid var(--sl-color-background-800);
  border-radius: 5px;
}
.barreMenu--menu .barreMenu--menu--sousMenu--niveau2.hover-active {
  display: block;
}
.barreMenu--menu .barreMenu--menu--sousMenu--niveau2 ul {
  padding: 0;
  margin-bottom: 15px;
}
.barreMenu--menu .barreMenu--menu--sousMenu--niveau2 ul a {
  padding: 10px;
}
.barreMenu--menu .barreMenu--menu--sousMenu--niveau2 ul a:hover {
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
  box-shadow: inset 0 0 2px var(--sl-color-primary-950, 0.5);
  outline-offset: 15px;
  text-shadow: 1px 1px 2px var(--sl-color-background-100);
  border-radius: 5px;
  background-color: var(--sl-color-background-900);
}
.barreMenu--burger {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 10;
  margin-right: 1rem;
}
.barreMenu--burger span {
  width: 2rem;
  height: 0.25rem;
  background: var(--sl-color-success-100);
  border-radius: 10px;
  transition: all 0.3s linear;
  position: relative;
  transform-origin: 1px;
}
.barreMenu--burger.active span:first-child {
  transform: rotate(45deg);
}
.barreMenu--burger.active span:nth-child(2) {
  opacity: 0;
}
.barreMenu--burger.active span:nth-child(3) {
  transform: rotate(-45deg);
}

@media (max-width: 768px) {
  .barreMenu {
    justify-content: space-between;
    padding: 0 1rem;
  }
  .barreMenu--menu {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: 80%;
    max-width: 300px;
    background: var(--sl-color-background-800);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 4rem 2rem 2rem;
    transition: right 0.3s ease-in-out;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    z-index: 10;
  }
  .barreMenu--menu.active {
    right: 0;
  }
  .barreMenu--menu--niveau1 {
    width: 100%;
    padding: 0;
    margin: 0.5rem 0;
    border-bottom: 1px solid var(--sl-color-neutral-300);
  }
  .barreMenu--menu--niveau1:last-child {
    border-bottom: none;
  }
  .barreMenu--menu--niveau1 a {
    display: block;
    padding: 1rem 0;
    width: 100%;
    font-size: 1.1rem;
  }
  .barreMenu--menu .barreMenu--menu--sousMenu--niveau2 {
    position: static;
    display: none;
    width: 100%;
    min-width: auto;
    margin-top: 0;
    padding: 0 0 0 1rem;
    border: none;
    box-shadow: none;
    background: transparent;
  }
  .barreMenu--menu .barreMenu--menu--sousMenu--niveau2.active {
    display: block;
  }
  .barreMenu--menu .barreMenu--menu--sousMenu--niveau2 ul {
    margin-bottom: 0;
  }
  .barreMenu--menu .barreMenu--menu--sousMenu--niveau2 ul a {
    padding: 0.5rem 0;
    font-size: 0.9rem;
  }
  .barreMenu--burger {
    display: flex;
    z-index: 15;
  }
  .menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
  }
  .menu-overlay.active {
    opacity: 1;
    visibility: visible;
  }
}
.custom-header-media {
  min-height: 510px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.header {
  height: 250px;
  top: 30px;
}

.header_spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 280px;
  height: 280px;
  border-radius: 100%;
  border: 2px dashed var(--sl-color-background-950);
  animation: spin 35s linear infinite;
}

.header_spinner2 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 295px;
  height: 295px;
  border-radius: 100%;
  border: 4px dotted var(--sl-color-background-950);
  animation: spin 55s linear reverse infinite;
}

.header_spinner4 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 310px;
  height: 310px;
  border-radius: 100%;
  border: 2px dotted var(--sl-color-background-950);
  animation: spin 55s linear infinite;
}

.header_spinner3 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 270px;
  height: 270px;
  border-radius: 100%;
  border: 2px dashed var(--sl-color-background-950);
  animation: spin 200s linear reverse infinite;
}

#header_img {
  position: absolute;
  width: 250px;
  height: 250px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.header_main .header_controlbox {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
  width: 100%;
  height: 100%;
  top: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  padding-top: 30px;
}

.authContainer span.author {
  display: block;
  text-align: center;
  font-size: 1.8rem;
  letter-spacing: 0.24rem;
  text-transform: uppercase;
  color: var(--sl-color-default-500);
}
.authContainer span.subAuth {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.07rem;
  color: var(--sl-color-success-100);
  padding-bottom: 10px;
}
.authContainer p.accroche {
  display: block;
  text-align: center;
  font-size: 1.3rem;
  border-top: solid 1px var(--sl-color-success-100);
  padding-top: 10px;
}

@keyframes bounce {
  0% {
    transform: translate(-50%, -50%) scaleX(1);
  }
  50% {
    transform: translate(-50%, -50%) scaleX(-1);
  }
  100% {
    transform: translate(-50%, -50%) scaleX(1);
  }
}
.header_spinner .innersphere1 {
  width: 7px;
  height: 7px;
  top: -1.5%;
  left: 50%;
  background: var(--sl-color-success-100);
  border-radius: 100%;
}

.header_spinner .innersphere2 {
  width: 10px;
  height: 10px;
  top: -1.6%;
  left: 55%;
  background: var(--sl-color-success-100);
  border-radius: 100%;
}

.header_spinner .innersphere3 {
  width: 8px;
  height: 8px;
  top: 40%;
  left: -2%;
  border: 2px solid var(--sl-color-success-100);
  border-radius: 100%;
}

.header_spinner .innersphere4 {
  width: 8px;
  height: 8px;
  bottom: 2.7%;
  left: 70%;
  border: 2px solid var(--sl-color-success-100);
  background: var(--sl-color-success-100);
  border-radius: 100%;
}

.header_spinner .innersphere {
  position: absolute;
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.site-title:after {
  bottom: -80px;
}

#scroll-to-content {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  cursor: pointer;
  height: 1.5em;
  width: 3.5em;
  font-size: 1rem;
  overflow: hidden;
  opacity: 0.5;
  transform: translateX(-50%);
  animation: pulsate 1.5s ease-out infinite;
}
#scroll-to-content:before {
  content: "";
  display: block;
  position: absolute;
  left: 15px;
  bottom: 10px;
  height: 30px;
  width: 30px;
  border: 2px solid var(--sl-color-success-100);
  transform: rotate(45deg);
}

@keyframes pulsate {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}
.banniere {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2em;
  height: 100%;
  max-width: 900px;
  margin: auto;
}
.banniere h2 {
  font-size: 24px;
  text-shadow: var(--sl-color-background-100) 1px 0 10px;
}
.banniere p {
  font-size: 20px;
  color: var(--sl-color-default-500);
}

.flex-container {
  border: none;
}
.flex-container .flex-item {
  border: none;
  display: flex;
  flex-direction: column;
}

footer {
  border-top: 1px solid var(--sl-color-success-100);
  background: var(--sl-color-background-700);
  padding-top: 10px;
  margin-top: 5px;
  padding-bottom: 10px;
}
footer div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
}
footer div div {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 5px;
}
footer div div h2 {
  font-size: 16px;
}
footer div div a, footer div div p {
  font-size: 14px;
}
footer div div a {
  text-decoration: underline;
  color: var(--sl-color-default-500);
}
footer div div a::hover {
  color: var(--sl-color-success-100);
}
@media (max-width: 768px) {
  footer {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  footer div {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  footer div div {
    width: 100%;
    max-width: 300px;
  }
  footer div div h2 {
    font-size: 18px;
    margin-bottom: 10px;
  }
  footer div div a, footer div div p {
    font-size: 16px;
    line-height: 1.4;
  }
}
@media (max-width: 480px) {
  footer {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  footer div {
    gap: 20px;
  }
  footer div div {
    max-width: 100%;
    padding: 0 15px;
  }
  footer div div h2 {
    font-size: 20px;
  }
  footer div div a, footer div div p {
    font-size: 14px;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  footer div {
    justify-content: center;
  }
  footer div div {
    max-width: 600px;
    margin: 0 auto;
  }
}
@media (min-width: 1025px) {
  footer div {
    justify-content: center;
  }
  footer div div {
    max-width: 800px;
    margin: 0 auto;
  }
}

/*DÉBUT : TIME LINE - PAGE «NOS OFFRES ET SERVICES»*/
/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 40px auto;
}
.timeline .button {
  text-align: center;
  position: relative;
  top: 30px;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: "";
  position: absolute;
  width: 6px;
  background-color: var(--sl-color-background-950);
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.timeline-container {
  padding: 10px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.timeline-container::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: var(--sl-color-background-950);
  border: 4px solid var(--sl-color-success-100);
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.left {
  padding-right: 40px;
  padding-left: 40px;
  left: -6.8%;
}
.left .content {
  flex-direction: row-reverse;
}

/* Place the container to the right */
.right {
  padding-left: 40px;
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid var(--sl-color-background-950);
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent var(--sl-color-background-950);
}

/* Add arrows to the right container (pointing left) */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid var(--sl-color-background-950);
  border-width: 10px 10px 10px 0;
  border-color: transparent var(--sl-color-background-950) transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
  left: -16px;
}

/* The actual content */
.content {
  padding: 10px;
  position: relative;
  background: var(--sl-color-background-700);
  border: 1px solid var(--sl-color-background-950);
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  gap: 10px;
}
.content img {
  width: 150px;
  height: 150px;
}
.content p {
  text-align: justify;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 1300px) {
  /* Place the timeline to the left */
  .timeline::after {
    left: 31px;
  }
  /* Full-width containers */
  .timeline-container {
    width: 80%;
    padding-left: 70px;
    padding-right: 25px;
  }
  /* Make sure that all arrows are pointing leftwards */
  .timeline-container::before {
    left: 60px;
    border: medium solid var(--sl-color-background-950);
    border-width: 10px 10px 10px 0;
    border-color: transparent var(--sl-color-background-950) transparent transparent;
  }
  /* Make sure all circles are at the same spot */
  .left::after, .right::after {
    left: 15px;
  }
  /* Make all right containers behave like the left ones */
  .left {
    left: 0%;
  }
  .right {
    left: 0%;
  }
  /* Responsive content adjustments */
  .content {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  .content img {
    width: 100px;
    height: 100px;
  }
  .content p {
    text-align: center;
    margin: 0;
  }
  /* Remove flex-direction row-reverse on mobile for left containers */
  .left .content {
    flex-direction: column;
  }
}
/* Additional responsive breakpoint for very small screens */
@media screen and (max-width: 480px) {
  .timeline-container {
    width: 85%;
    padding-left: 60px;
    padding-right: 20px;
  }
  .content {
    padding: 8px;
  }
  .content img {
    width: 80px;
    height: 80px;
  }
  .timeline::after {
    left: 25px;
  }
  .timeline-container::before {
    left: 50px;
  }
  .left::after, .right::after {
    left: 12px;
  }
}
/*FIN : TIME LINE - PAGE «NOS OFFRES ET SERVICES»*//*# sourceMappingURL=style.css.map */