@charset "UTF-8";
:root {
  color-scheme: dark light;
  --hex-gs-00: #000000;
  --rgb-gs-00: 0, 0, 0;
  --hex-gs-01: #252423;
  --rgb-gs-01: 37, 36, 35;
  --hex-gs-02: #272421;
  --rgb-gs-02: 39, 36, 33;
  --hex-gs-03: #2E2E2E;
  --rgb-gs-03: 46, 46, 46;
  --hex-gs-04: #333333;
  --rgb-gs-04: 51, 51, 51;
  --hex-gs-05: #404040;
  --rgb-gs-05: 64, 64, 64;
  --hex-gs-06: #534F4F;
  --rgb-gs-06: 83, 79, 79;
  --hex-gs-07: #5A5A5A;
  --rgb-gs-07: 90, 90, 90;
  --hex-gs-08: #727272;
  --rgb-gs-08: 114, 114, 114;
  --hex-gs-09: #A6A6A6;
  --rgb-gs-09: 166, 166, 166;
  --hex-gs-10: #BFBFBF;
  --rgb-gs-10: 191, 191, 191;
  --hex-gs-11: #D3D3D3;
  --rgb-gs-11: 211, 211, 211;
  --hex-gs-12: #E2E2E2;
  --rgb-gs-12: 226, 226, 226;
  --hex-gs-13: #E6E6E6;
  --rgb-gs-13: 230, 230, 230;
  --hex-gs-14: #ECEBE8;
  --rgb-gs-14: 236, 235, 232;
  --hex-gs-15: #F2F2F2;
  --rgb-gs-15: 242, 242, 242;
  --hex-gs-16: #FAFAFA;
  --rgb-gs-16: 250, 250, 250;
  --hex-gs-17: #FFFFFF;
  --rgb-gs-17: 255, 255, 255;
  --font-body: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-code: Menlo, monospace;
  --fs-xxxxl: 3.2rem;
  --fs-xxxl: 2.5rem;
  --fs-xxl: 2rem;
  --fs-xl: 1.5rem;
  --fs-l: 1.25rem;
  --fs-m: 1rem;
  --fs-s: 1rem;
  --fs-xs: .875rem;
  --fs-xxs: .75rem;
  --duration: 0.5s;
  --timing: ease;
}
*, * :before, * :after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  font-weight:inherit
}
html {
  font-family: var(--font-body);
  font-size: 1.2em;
  line-height: 1.4;
}
html, body {
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
  color: var(--text-color);
  background-color:var(--bg-color);
  transition:
    color var(--duration) var(--timing),
    background var(--duration) var(--timing);
}
body {
    scrollbar-gutter:stable
}
::-moz-selection {
  background-color: var(--logo-color);
  color: var(--bg-color);
  text-shadow: none;
}
::selection {
  background-color: var(--logo-color);
  color: var(--bg-color);
  text-shadow: none;
}
canvas,
img,
svg,
video {
  vertical-align: middle;
}
.page {
    width: 100%;
    min-height:100dvh
}
a,
a:visited {
  color: var(--a-color);
}
header {
  width: 100%;
  position: fixed;
  top: 0;
  background-color: var(--header-bg-color);
  box-shadow: 1px 1px 22px -1px rgba(0,0,0,0.5);
}
header h1 {
  width: 186px;
  padding: 4px 18px 10px;
  display: block;
  line-height: 1.2;
  color: var(--logo-color);
}
header a {
  width: 100%;
  display: inline-block;
}
header nav {
  position: absolute;
  top: 16px;
  right: 34px;
}
header ul li {
  list-style: none;
}
header nav a {
  color: var(--a-color);
  text-decoration: none;
}
dark-mode-toggle { 
  --dark-mode-toggle-light-icon: url('theme_switch2dark.svg');
  --dark-mode-toggle-dark-icon: url('theme_switch2light.svg');
  position: absolute;
  top: 4px;
  right: 6px; 
  opacity: .9;
  z-index: 2;
}
#check {
    opacity: 0;
    vertical-align: middle;
}
.toggle:after {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  content: ' '; /* important */
  background: url(icon-liste.svg) no-repeat top left;
  background-size: contain;
  color: var(--accent-color);
  vertical-align: baseline;
}
#check:checked + .toggle::after {
  background-image: url(icon-croix.svg);
}
#check:checked + .toggle + .menu {
  display: block;
}

.menu {
  position: absolute;
  display: none;
  top: 48px;
  right: -28px;
  border-radius: 4px;
}
.menu a {
  padding: 12px 22px;
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: 
    /* background-color var(--duration) var(--timing), */
    padding var(--duration) var(--timing);
}
.menu a:hover,
.menu a:active,
.menu a:focus {
  background-color: rgba(var(--menu-hover-bg), 1);
}
main {
  margin-top: 60px;
  margin-bottom: 64px;
}
#intro {
  min-height: 442px;
  padding-bottom: 1rem;
}
#intro h2 {
  padding: 54px 18px 8px;
  display: block;
  line-height: 1.2;
  text-align: center;
}
#intro p {
  font-size: var(--fs-xxxl);
  font-weight: 300;
  line-height: 1;
  text-align: center;
  margin-bottom: 1.1rem;
}
#intro ul {
  font-size: var(--fs-l);
  font-weight: 200;
  line-height: 1;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
  list-style: none;
}
#intro ul li {
  display: inline;
}
#intro ul li:not(:last-child):after {
  content: ' /';
  color: var(--accent-color);
}
.hr {
  padding: 22px 16px 16px;
  text-align: center;
}

#presentation h3 {
  color: var(--header-color-1);
}
#offre h3,
#partenaires h3,
#infos h3 {
  color: var(--header-color-3);
}
.presentation {
  padding: 0 16px 24px;
}
.presentation h3 {
  font-weight: 500;
  line-height: 1.1;
}
.presentation h4 {
  font-size: var(--fs-m);
  font-weight: 400;
  line-height: inherit;
}
.presentation div p:before {
  content: '// ';
  color: var(--accent-color);
}
.presentation div p {
  margin-top: 1rem;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.25;
}
.presentation dl dt {
  margin-top: 1rem;
  color: var(--dt-color);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: .5rem;
}
.presentation dl dd {
  font-size: var(--fs-xs);
  font-weight: 300;
  line-height: 1.4;
}
#offre dl dd:before {
  content: '✔ '; /* coloriable */
  content: '✔️ '; /* emoji */
  color: var(--accent-color-2);
}
#clients {
  background: linear-gradient(to top, rgba(var(--rgb-clients), 1), rgba(var(--rgb-clients), .0) 200px);
}
#clients h3 {
  color: var(--header-color-4);
}
#clients ul {
  margin: 18px auto;
  display: flex;
  flex-flow: wrap;
  gap: 10px;
  justify-content: flex-start;
  font-size: var(--fs-s);
  font-weight: 200;
  list-style: none;
}
#clients ul li:before {
  content: '+ ';
  color: var(--accent-color-1);
}
#clients ul li {
  flex-basis: auto;
}
.partenaires p {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  padding: 0;
  margin: 0;
}
.partenaires p a {
  color: var(--logos-color);
  padding: 5px;
  width: calc(50% - 10px);
  max-width: 220px;
  min-width: 140px;
  margin-top: 10px;
  margin-right: 10px;
  right: 10px;
  text-align: center;
  border-radius: 4px;
  transition:
    color var(--duration) var(--timing),
    background var(--duration) var(--timing);
}
.partenaires p a:hover {
  background-color: var(--partenaires-bg-color);
}
footer {
  width: 100%;
  padding: 5px 6px 7px;
  background-color: var(--footer-bg-color);
  position: fixed;
  bottom: 0;
}
.contact {
  width: 100%;
}
.contact a {
  vertical-align: middle;
  color: var(--text-color);
}
.contact .button {
  display: inline-block;
  width: calc(50% - 5px);
  margin: 0;
  bottom: 4px;
  color: var(--btn-txt-color);
  background: var(--btn-bg-color);
  border: 0;
  border-radius: 4px;
  font-size: var(--fs-xxs);
  text-align: center;
}
.contact .button:has(.phone) {
  margin-right: 3px;
}
.contact .button .icon {
  display: inline-block;
  margin-top: -4px;
  margin-left: -.5rem;
}
.contact .button .icon:before {
  font-size: var(--fs-xl);
  display: inline-block;
  rotate: -11.6deg;
  vertical-align: sub;
}
.contact .button .icon.phone:before {
  content: "📱";
}
.contact .button .icon.email:before {
  content: "📧";
  margin-left: -5px;
  margin-right: 6px;
}

/* ==========================================================================
   Media Queries for Responsive Design.
   ========================================================================== */
@media only screen and (max-width: 340px) { 
  main {
    margin-bottom: 74px;
  }
  .contact .button {
    display: block;
    width: calc(100%);
    margin-top: 4px;
  }
}
@media only screen and (max-width: 260px) { 
  .toggle {
    color: transparent;
  }
}
@media only screen and (max-height: 250px) and (max-width: 1100px)  { 
  .menu a {
    padding: 2px 22px;
  }
  main {
    margin-bottom: 4px;
  }
}
@media only screen and (min-height: 250px) and (max-height: 308px) and (max-width: 1100px) { 
  .menu a {
    padding: 8px 22px;
  }
}
@media only screen and (max-height: 360px) { 
  footer {
    position: static;
  }
}

@media (min-width: 440px) {
  .flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: first baseline;
    gap: 10px 20px;
  }
  .flex  dl {
    min-width: 200px;
  }
}
@media only screen and (min-width: 524px) {
  #intro h2 svg {
    max-width: 366px;
  }
  #clients ul li {
    width: calc(50% - 10px);
  }
}
@media only screen and (min-width: 720px) {
  #presentation .savoir-faire {
    display: flex;
    gap: 30px;
    justify-content: space-between;
    margin: auto calc(10%/2);
  }
  #presentation .savoir-faire p {
    width: 30%;
  }
  #presentation h3 {
    color: var(--hex-fg-1);
    margin: auto calc(10%/2);
    font-size: var(--fs-xl);
  }
}
@media only screen and (min-width: 960px) {
  #clients ul li {
    width: calc(25% - 10px);
  }
  h3 {
    font-size: var(--fs-xxl);
  }
  #infos h4 {
    font-size: var(--fs-xl);
  }
}
@media only screen and (min-width: 1100px) {
  #intro h2 {
    padding-top: 60px;
  }
  #intro h2 svg {
    max-width: 533px;
  }
  #intro p {
    font-size: var(--fs-xxxxl);
    font-weight: 200;
  }
  #intro ul {
    line-height: 1.1;
    max-width: 800px;
  }
  #clients ul {
    margin: 1rem 0 1rem calc(10%/2);
    justify-content: flex-start;
    font-size: var(--fs-m);
  }
  #clients ul li {
    width: calc(19.2%);
  }
  .partenaires p {
    margin: 1rem 0;
  }
  h3 {
    margin: auto calc(10%/2);
    font-size: var(--fs-xxxl);
  }
  .flex {
    margin: auto calc(10%/2);
  }
  #infos h4 {
    font-size: var(--fs-xxl);
    margin: -7px calc(10%/2) 0;
  }
  .menu {
    display: block;
    top: -9px;
    right: -30px;
    width: 773px;
    background: var(--header-bg-color);
    box-shadow: none;
  }
  .menu li {
    display: inline-block;
  }
}
@media print {
  *,
  *::before,
  *::after {
    background: none !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  img {
    page-break-inside: avoid;
  }
  header {
    position: static;
  }
  header > nav {
    display: none;
  }
  p,
  h2,
  h3,
  h4 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3,
  h4 {
    page-break-after: avoid;
  }
  footer {
    position: static;
  }
}