@charset "UTF-8";
/*
  ========================================
  $Reset
  ========================================
*/
/* $Medias
   ==================================== */
/* Remove unintuitive behaviour such as gaps around media elements.  */
img,
picture,
video,
canvas,
iframe {
  display: block;
  max-width: 100%;
  width: 100%;
  object-fit: cover;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

svg {
  flex-shrink: 0;
  /* Stop icon shrinking when inside a flex container */
  max-inline-size: 100%;
}

iframe {
  border: 0;
  margin: 0 auto;
  max-inline-size: 100%;
}

/* $Links
   ==================================== */
a,
button {
  all: unset;
  cursor: pointer;
  appearance: none;
  text-decoration: none;
}

/* a:link,
a:visited,
a:focus,
a:hover,
a:active {
  color: currentColor;
} */
a:focus,
a:target {
  outline: auto;
}

/* $Misc
   ==================================== */
/* ol,
ul,
li,
menu,
p {
  //list-style-type: none;
  padding: 0;
  margin: 0;
} */
ul {
  padding-inline-start: 20px;
}

.menu-header,
.panel,
.footer-menu-1,
.footer-menu-2 {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ul:not(.article ul),
ol:not(.article ol) {
  list-style: none;
  margin: 0;
  padding: 0;
} */
.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

/*
  ========================================
  $Typography
  ========================================
*/
:root {
  --f-sm: clamp(0.75rem, 0.23vi + 0.69rem, 0.88rem);
  --f-base: 1rem;
  --f-md: clamp(1.13rem, 0.23vi + 1.07rem, 1.25rem);
  --f-lg: clamp(1.38rem, 0.23vi + 1.32rem, 1.5rem);
  --f-xl: clamp(1.63rem, 0.23vi + 1.57rem, 1.75rem);
  --f-xxxl: clamp(2.5rem, 2.27vi + 1.93rem, 3.75rem);
}

@font-face {
  font-family: "bliss-pro";
  font-weight: 400;
  src: local("bliss-pro"), url("../../../assets/fonts/blisspro-regular.woff");
  font-display: swap;
}
@font-face {
  font-family: "fslola";
  font-weight: 400;
  src: local("fslola"), url("../../../assets/fonts/fslola-regular.woff2");
  font-display: swap;
}
@font-face {
  font-family: "fslola-medium";
  font-weight: 500;
  src: local("fslola-medium"), url("../../../assets/fonts/fslola-medium.woff2");
  font-display: swap;
}
@font-face {
  font-family: "fslola-bold";
  font-weight: 700;
  src: local("fslola-bold"), url("../../../assets/fonts/fslola-bold.woff2");
  font-display: swap;
}
html {
  font-size: 16px;
}

/* Post content */
body {
  font-family: "fslola", sans-serif;
  font-size: var(--f-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  margin: 0;
  overflow-wrap: break-word;
}

h1 {
  text-wrap: balance;
}

h2,
h3,
h4,
h5,
h6,
p,
strong,
li,
figcaption {
  text-wrap: pretty;
}

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

.section :where(.title) {
  font-family: "bliss-pro", sans-serif;
  font-size: var(--f-md);
  line-height: 30px;
  text-align: center;
  text-transform: uppercase;
  display: inline-block;
  border-bottom: 3px solid currentColor;
  padding-bottom: 0.25rem;
}

.card :where(.head) {
  font-weight: 600;
  font-size: var(--f-xl);
  line-height: 1.2;
}
.card :where(.cta) {
  font-weight: 600;
  font-size: var(--f-md);
  text-align: right;
}
.card :where(.cat) {
  font-family: "bliss-pro", sans-serif;
  font-size: var(--f-base);
  line-height: 30px;
  text-transform: uppercase;
}
.card :where(.date) {
  font-family: "bliss-pro", sans-serif;
  font-size: var(--f-base);
  line-height: 30px;
}

.cta-label {
  font-weight: 600;
  font-size: var(--f-md);
}

.chapo {
  font-size: var(--f-lg);
}

/*
  ========================================
  $Theme
  ========================================
*/
:root {
  color-scheme: light dark;
  --c-white: rgb(255, 255, 255);
  --c-thamar-black: #181818;
  --c-gray-dark: rgb(75, 75, 75);
  --c-gray-light: #F5F5F5;
  --c-gray-medium: #A6A4B2;
  --c-blue-light: rgb(24, 129, 157);
  --c-blue-navy: rgb(32, 28, 63);
  --c-purple: rgba(145, 50, 140);
  --c-dark-purple: rgb(99, 33, 96);
  --c-green: rgb(103, 126, 62);
  --c-corail: rgb(235, 89, 97, 1);
  --foreground: light-dark(var(--c-gray-dark), var(--c-white));
  --background: light-dark(var(--c-white), var(--c-blue-navy));
}

body,
.theme-light,
.theme-blue-light,
.theme-blue-navy,
.theme-purple,
.theme-dark-purple,
.theme-green,
.theme-corail,
.theme-gray-light,
.section-hero {
  color: var(--foreground);
  background-color: var(--background);
}

.theme-blue-light,
.theme-blue-navy,
.theme-purple,
.theme-dark-purple,
.theme-green,
.theme-corail {
  --foreground: var(--c-white);
}

.theme-light {
  --foreground: var(--c-gray-dark);
  --background: var(--c-white);
}
.theme-light :where(.head) {
  color: var(--c-blue-light);
}
.theme-light :where(.txt-wrapper),
.theme-light :where(.cta),
.theme-light :where(.cta-picto-wrapper) {
  color: var(--c-gray-dark);
}

.theme-green {
  --background: var(--c-green);
}

.theme-blue-navy {
  --foreground: var(--c-white);
  --background: var(--c-blue-navy);
}
.theme-blue-navy :where(.head) {
  color: var(--c-white);
}
.theme-blue-navy :where(.cta-wrapper) {
  color: var(--c-white);
}

.theme-blue-light {
  --foreground: var(--c-white);
  --background: var(--c-blue-light);
}

.page-template-page-formation .section-header {
  background-color: var(--c-blue-light);
}

.theme-purple {
  --background: var(--c-purple);
}

.theme-dark-purple,
.page-template-liste-offres {
  --background: var(--c-dark-purple);
}

.theme-gray-light {
  --background: light-dark(var(--c-gray-light), var(--c-gray-dark));
}

.card-missions :where(.head),
.card-assets :where(.head) {
  color: var(--c-blue-light);
}
.card-missions :where(.details),
.card-assets :where(.details) {
  color: var(--c-gray-dark);
}
.card-missions :where(.cta),
.card-assets :where(.cta) {
  color: var(--c-white);
  background: var(--c-blue-navy);
}

/*
  ========================================
  $Layout
  ========================================
*/
:root {
  --screen: 1280px;
  --s-sm: clamp(0.5rem, calc(0.318rem + 0.909vw), 1rem);
  --s-base: clamp(1.5rem, calc(1.364rem + 0.682vw), 1.875rem);
  --s-md: clamp(1.5rem, calc(1.318rem + 0.909vw), 2rem);
  --s-lg: clamp(1.5rem, calc(0.955rem + 2.727vw), 3rem);
  --s-xl: clamp(2rem, calc(1.273rem + 3.636vw), 4rem);
  --s-xxl: clamp(3rem, calc(1.909rem + 5.455vw), 6rem);
  --s-xxxl: clamp(5rem, calc(3.182rem + 9.091vw), 10rem);
  --s-header: 7rem;
  --g-header: var(--s-base) 20px var(--s-base) 20px;
  --g-section: clamp(2rem, calc(1.818rem + 0.909vw), 2.5rem);
  --inset-top: clamp(3.25rem, calc(3.068rem + 0.909vw), 3.75rem);
  --inset-bottom: clamp(3.75rem, calc(3.568rem + 0.909vw), 4.25rem);
  --logo-width: clamp(4.313rem, calc(2.744rem + 7.841vw), 8.625rem);
  --logo-height: clamp(2.063rem, calc(1.335rem + 3.636vw), 4.063rem);
}

/* $Global
   ==================================== */
html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  display: grid;
  min-height: 100%;
  min-width: 360px;
  margin: 0;
}

/* Set display: none on line reaks used as spacing
   prevent CMS users from using extra line breaks for spacing */
br + br {
  display: none;
}

body,
header,
nav,
main,
section,
article,
div,
aside,
footer,
ul,
li,
a {
  box-sizing: border-box;
}

/* $Breakpoints
   ==================================== */
/* $Layout
   ==================================== */
.section {
  display: flex;
  flex-direction: column;
  padding: var(--inset-top) 0 var(--inset-bottom);
  gap: var(--g-section);
  justify-content: center;
  align-items: center;
}

.layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  max-width: var(--screen);
  width: 100%;
  gap: 2rem 1rem;
  margin: 0 auto;
  padding: 0 var(--s-md);
}

.panel {
  grid-column: 1/13;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gap);
}
@media screen and (width >= 768px) {
  .panel {
    grid-column: 2/12;
  }
}
@media screen and (width >= 1440px) {
  .panel {
    grid-column: 1/13;
  }
}

.card :where(.container, .menu-header) {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}

.card-link {
  border-bottom: 2px solid transparent;
}

.card-link:focus,
.card-link:hover,
.card-link:active {
  color: currentColor;
  border-bottom: 2px solid currentColor;
}

.card-link::before {
  bottom: 0;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1;
}

/* $Flex
   ==================================== */
.section-blog :where(.meta-wrapper), .section-blog :where(.date-wrapper), .card-reference :where(.content-wrapper), .section-footer :where(.content-wrapper), .section-footer :where(.navigation) :where(ul), .section-footer :where(.socials), .section-footer :where(.socials a), .sommaire :where(.list-item), .nav-interne :where(.list-item-wrapper), .breadcrumb :where(.list) {
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--justify);
  align-items: center;
  gap: var(--gap);
}

.card-formation :where(.container), .section-blog :where(.container), .section-references :where(.container), .section-footer :where(.navigation), .agenda :where(.links-wrapper), .nav-interne :where(.list-wrapper), .section-hero-offres :where(.txt-wrapper), .section-hero-formation :where(.txt-wrapper), .section-hero-formation :where(.details-wrapper), .section-hero-formation :where(.rating-wrapper) {
  display: flex;
  flex-direction: column;
  justify-content: var(--justify);
  flex-wrap: wrap;
  align-content: center;
  gap: var(--gap);
}

/* $Grid
   ==================================== */
.card-img, .logo-wrapper :where(.panel-logos) {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);
  gap: var(--gap);
}

.section-offres :where(.heading-wrapper), .card-book :where(.container), .section-hero-hp, .page-template-formation :where(.section-hero), .page-template-formation :where(.content-wrapper), .section-hero-solution, .section-hero-solution :where(.content-wrapper), .section-hero-offres, .section-hero-offre, .section-hero-offre :where(.content-wrapper), .section-hero-formation, .section-hero-formation :where(.content-wrapper) {
  display: grid;
  gap: var(--gap);
  grid-template-columns: var(--cols);
  grid-template-rows: var(--rows);
}

/* $Helpers
   ==================================== */
.card-book :where(.txt-wrapper), .card-book :where(.media-wrapper), .sommaire :where(.icon-wrapper), .nav-interne :where(.icon-wrapper), .tab, .tab__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/*
  ========================================
  $Skiplinks
  ========================================
*/
.skiplinks {
  margin: 0;
  text-align: center;
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 999;
  transform: translateY(-100%);
  will-change: transform;
  transition: transform 0.3s ease;
}
.skiplinks:focus-within {
  transform: translateY(0);
}
.skiplinks a {
  display: block;
  padding: 0.5rem;
  text-decoration: none;
  font-size: 0.825rem;
  color: var(--c-white);
  background-color: var(--c-purple);
}
.skiplinks a:focus-visible, .skiplinks a:hover {
  background-color: var(--c-purple);
}
@media (width > 64rem) {
  .skiplinks a {
    display: inline-block;
  }
}

/*
  ========================================
  $Buttons
  ========================================
*/
/* $Main CTA
   ==================================== */
.cta:hover .cta-wrapper::after,
.card:hover .cta-wrapper::after {
  transform: scaleX(1);
  overflow: hidden;
}

.cta:hover .cta-picto,
.card:hover .cta-picto {
  color: var(--c-white);
}

.card:hover .media-wrapper {
  opacity: 0.8;
}

.cta-wrapper {
  --background: transparent;
  display: grid;
  gap: 1rem;
  height: 44px;
  align-items: center;
  color: currentColor;
  background: var(--background);
  border: 1px solid currentColor;
  position: relative;
  z-index: 1;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
}

.cta-wrapper--blue-light {
  --background: var(--c-blue-light);
  width: 75%;
}

.cta-wrapper::after {
  content: "";
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--c-blue-navy);
  border: 1px solid transparent;
  z-index: -1;
  transition: transform 400ms ease-in-out;
  transform-origin: 0% 0%;
  transform: scaleX(0);
}

.cta-picto-wrapper {
  color: currentColor;
  padding: 0.7rem 0.9rem 0.7rem 1rem;
}

.cta-picto {
  width: 20px;
  height: 20px;
}

/* $CTA with line
   ==================================== */
.cta--line {
  position: relative;
  margin-top: auto;
  align-self: flex-end;
}

.cta--line::before {
  content: "";
  display: block;
  height: 1px;
  width: 100px;
  position: absolute;
  top: 50%;
  right: 65px;
  background: currentColor;
}

.cta--line-wrapper {
  grid-template-columns: 42.4px;
}

/* $CTA with label
   ==================================== */
.cta--label-wrapper {
  grid-template-columns: 1fr 42.4px;
}

.cta-picto--label-wrapper {
  border-left: 1px solid var(--c-white);
}

.cta-label {
  padding: 0 0.75rem 1.25rem;
  height: 15px;
}

/* $Specific templates
   ==================================== */
@media screen and (width >= 768px) {
  .card-formation :where(.cta) {
    margin-top: 0;
  }
}
@media screen and (width >= 768px) {
  .card-formation :where(.cta--line) {
    align-self: center;
  }
}
.card-formation :where(.cta-wrapper--blue-light) {
  width: 100%;
}

/*
  ========================================
  $Header
  ========================================
*/
.header-navigation {
  font-family: "bliss-pro", sans-serif;
}
.header-navigation :where(a) {
  text-transform: uppercase;
}

body.scrolled-up :where(.section-header) {
  position: sticky;
  background-color: var(--c-blue-light);
}

body.has-menu-open {
  background-color: var(--c-blue-light);
}
body.has-menu-open .skiplinks,
body.has-menu-open .brand,
body.has-menu-open .logos,
body.has-menu-open .js__open-nav,
body.has-menu-open #site-content,
body.has-menu-open footer {
  visibility: hidden !important;
}
@media screen and (width >= 64rem) {
  body.has-menu-open .skiplinks,
  body.has-menu-open .brand,
  body.has-menu-open .logos,
  body.has-menu-open .js__open-nav,
  body.has-menu-open #site-content,
  body.has-menu-open footer {
    visibility: visible !important;
  }
}
body.has-menu-open :where(.icon--close) {
  display: block !important;
}
body.has-menu-open :where(.icon--open) {
  display: none !important;
}
body.has-menu-open :where(.section-header),
body.has-menu-open :where(.header-navigation) {
  color: var(--c-white);
  background-color: var(--c-blue-light);
}
body.has-menu-open :where(.section-header) {
  position: fixed;
}
body.has-menu-open li:last-child a {
  color: var(--c-white);
}

/* .section-header {
  position: relative;
}
  @media screen and (width >= 1024px) {
    .section-hero-hp :where(.media-wrapper) {
        /* padding: 4rem var(--s-md) 8rem; 
    }
 */
.section-header {
  position: relative;
  top: 0;
  min-width: 100%;
  z-index: 900;
  transition: height 0.4s ease;
  color: var(--c-white);
  background-color: transparent;
}
.section-header :where(.container, .menu-header) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: var(--s-sm) var(--s-base);
}
.section-header :where(.logo-header) {
  width: var(--logo-width);
  height: var(--logo-height);
  transition: transform 0.4s ease;
}
.section-header :where(.button-menu) {
  padding: 0.5rem;
  border: 0;
  background-color: transparent;
  color: currentColor;
}
@media (width >= 64rem) {
  .section-header :where(.button-menu) {
    display: none;
  }
}
.section-header :where(.button-menu) :where(svg) {
  width: 1.25rem;
  height: 1.25rem;
  color: currentColor;
}
.section-header :where(.button-menu) :where(.icon--close) {
  display: none;
}

/* $Navbar
   ==================================== */
.header-navigation {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  visibility: hidden;
}
.header-navigation.is-open {
  visibility: visible;
  margin-top: 3.8rem;
  padding-top: 1.5rem;
}
@media screen and (768px <= width < 1024px) {
  .header-navigation.is-open {
    margin-top: 5rem;
  }
}
@media (width >= 64rem) {
  .header-navigation {
    visibility: visible;
    flex: 1;
    position: relative;
    top: 0;
    margin-top: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}

.menu-header {
  display: grid;
  gap: 25px;
}
@media screen and (width >= 1024px) {
  .menu-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 120px;
  }
}
.menu-header :where(a) {
  border-bottom: 1px solid transparent;
}
.menu-header a[aria-current=page],
.menu-header :where(a:hover),
.menu-header :where(a:focus-visible) {
  border-bottom: 1px solid currentColor;
}

@media (width < 64rem) {
  .menu-contact {
    margin-left: 25px;
    margin-top: 16px;
  }
}
@media screen and (width >= 1024px) {
  .menu-contact {
    position: fixed;
    z-index: 998;
  }
}
.menu-contact :where(a) {
  background-color: var(--c-purple);
  padding: 0.5rem 1rem;
  border-radius: 5px;
  box-sizing: border-box;
}

.page-template-page-offre :where(.section-header) {
  background-color: var(--c-dark-purple);
}

/*
  ========================================
  $Breadcrumb
  ========================================
*/
.breadcrumb {
  position: relative;
  margin-top: 10rem;
  padding-bottom: 30px;
}
@media screen and (width >= 768px) {
  .breadcrumb {
    margin-top: 8rem;
    padding-bottom: 20px;
  }
}
.breadcrumb :where(.button) {
  z-index: 1;
  top: 0;
  border-bottom: 1px solid currentColor;
}
@media screen and (width >= 768px) {
  .breadcrumb :where(.button) {
    transform: scale(0);
  }
}
.breadcrumb :where(.button),
.breadcrumb :where(.collapse) {
  position: absolute;
  transition: transform 200ms ease-in-out;
  transform-origin: center;
}
.breadcrumb :where(.collapse) {
  transform: scale(0);
  top: -16px;
  left: 0;
}
@media screen and (width >= 768px) {
  .breadcrumb :where(.collapse) {
    transform: scale(1);
  }
}
.breadcrumb .is-visible {
  transform: scale(1);
}
.breadcrumb .is-invisible {
  transform: scale(0);
}
.breadcrumb :where(.list) {
  gap: 0;
  list-style: none;
  padding: 0;
}
.breadcrumb :where(.link) {
  text-decoration: underline;
}
.breadcrumb :where(.link[aria-current=page]) {
  cursor: default;
  pointer-events: none;
  text-decoration: none;
}

.page-template-liste-offres :where(.breadcrumb) {
  margin-top: 2rem;
}

.section-hero-formation :where(.breadcrumb) {
  margin-top: 2rem;
}

/*
  ========================================
  $Hero
  ========================================
*/
.section-hero :where(.head),
.section-hero-hp :where(.head) {
  font-size: var(--f-xxxl);
  line-height: 130%;
  font-weight: 500;
}

.section-hero-hp {
  --gap: 1rem;
  align-items: center;
  position: relative;
  margin-top: -6.1rem;
}
@media screen and (width >= 768px) {
  .section-hero-hp {
    --cols: 7fr 5fr;
  }
}
@media screen and (width >= 1440px) {
  .section-hero-hp :where(.content-wrapper) {
    padding: 3rem 0;
  }
}
.section-hero-hp :where(.txt-wrapper) {
  max-width: 625px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 28rem;
  padding-left: var(--s-md);
  padding-right: var(--s-md);
}
@media screen and (width < 768px) {
  .section-hero-hp :where(.txt-wrapper) {
    padding-bottom: 2rem;
  }
}
@media screen and (width >= 768px) {
  .section-hero-hp :where(.txt-wrapper) {
    padding-top: 18rem;
  }
}
@media screen and (width >= 1920px) {
  .section-hero-hp :where(.txt-wrapper) {
    padding-left: 103.3333333333px;
  }
}
@media screen and (768px <= width < 1024px) {
  .section-hero-hp :where(.head) {
    line-height: 115%;
  }
}
.section-hero-hp :where(.media-wrapper) {
  background-color: var(--c-green);
  padding: 0 var(--s-md);
  max-width: 440px;
}
@media screen and (768px <= width < 1024px) {
  .section-hero-hp :where(.media-wrapper) {
    margin-bottom: 6rem;
  }
}
@media screen and (width >= 768px) {
  .section-hero-hp :where(.media-wrapper) {
    padding-top: 3rem;
  }
}
@media screen and (width >= 1024px) {
  .section-hero-hp :where(.media-wrapper) {
    max-height: 70%;
    margin-bottom: 11rem;
    margin-left: 3rem;
  }
}
@media screen and (width >= 1440px) {
  .section-hero-hp :where(.media-wrapper) {
    margin-bottom: 11rem;
    margin-left: 3rem;
  }
}
.section-hero-hp :where(img) {
  object-fit: contain;
  max-height: 600px;
}

.page-template-formation :where(.section-hero) {
  --foreground: var(--c-white);
  --background: var(--c-blue-light);
  --gap: 1rem;
  margin-top: -6rem;
}
.page-template-formation :where(.content-wrapper) {
  --cols: 6fr 6fr;
}

.section-hero-solution {
  --gap: 1rem;
  margin-top: 4.25rem;
}
.section-hero-solution :where(.head) {
  text-wrap: initial;
  padding-top: 1rem;
}
@media screen and (width >= 768px) {
  .section-hero-solution :where(.content-wrapper) {
    --cols: 8fr 4fr;
  }
}
.section-hero-solution :where(.txt-wrapper) {
  text-align: center;
}
@media screen and (width < 768px) {
  .section-hero-solution :where(.txt-wrapper) {
    padding-bottom: 2rem;
  }
}
@media screen and (width >= 768px) {
  .section-hero-solution :where(.txt-wrapper) {
    text-align: left;
  }
}

.section-hero-offres {
  --gap: 1rem;
}
.section-hero-offres :where(.txt-wrapper) {
  align-items: center;
}
.section-hero-offres :where(.head) {
  text-wrap: initial;
  padding-top: 1rem;
}
.section-hero-offres :where(.chapo) {
  text-align: center;
}
@media screen and (width >= 1024px) {
  .section-hero-offres :where(.chapo) {
    max-width: 826px;
  }
}

.section-hero-offre {
  --gap: 1rem;
  margin-top: -6.1rem;
}
.section-hero-offre :where(.head) {
  text-wrap: initial;
  padding-top: 1rem;
}
@media screen and (width >= 768px) {
  .section-hero-offre :where(.content-wrapper) {
    --cols: 8fr 4fr;
  }
}
.section-hero-offre :where(.txt-wrapper) {
  text-align: center;
}
@media screen and (width < 768px) {
  .section-hero-offre :where(.txt-wrapper) {
    padding-bottom: 2rem;
  }
}
@media screen and (width >= 768px) {
  .section-hero-offre :where(.txt-wrapper) {
    text-align: left;
  }
}
.section-hero-offre :where(.media-wrapper) {
  align-self: end;
}
.section-hero-offre :where(img) {
  height: auto;
}

.section-hero-formation {
  --gap: 1rem;
}
.section-hero-formation :where(.head) {
  text-wrap: initial;
  padding-top: 1rem;
}
@media screen and (width >= 1024px) {
  .section-hero-formation :where(.content-wrapper) {
    --cols: 8fr 4fr;
  }
}
.section-hero-formation :where(.txt-wrapper) {
  --gap: 5px;
}
@media screen and (width < 768px) {
  .section-hero-formation :where(.txt-wrapper) {
    padding-bottom: 2rem;
    --gap: 30px;
  }
}
.section-hero-formation :where(.head) {
  text-align: center;
}
@media screen and (width >= 768px) {
  .section-hero-formation :where(.head) {
    text-align: left;
  }
}
.section-hero-formation :where(.cta) {
  align-self: start;
  padding-top: 5px;
  padding-bottom: 30px;
}
.section-hero-formation :where(.details-wrapper) {
  --gap: 0px 30px;
}
@media screen and (width >= 768px) {
  .section-hero-formation :where(.details-wrapper) {
    flex-direction: row;
  }
}
.section-hero-formation :where(p) {
  margin-block-start: 5px;
  margin-block-end: 5px;
}
.section-hero-formation :where(.icon-wrapper) {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}
.section-hero-formation :where(.rating-wrapper) {
  align-self: end;
  --gap: 10px;
  padding: 0 30px 30px 30px;
  border-radius: 200px 200px 0 0;
  background: var(--c-purple);
}
@media screen and (768px <= width < 1024px) {
  .section-hero-formation :where(.rating-wrapper) {
    max-width: 50%;
  }
}
.section-hero-formation :where(.rating-wrapper) :where(blockquote) {
  margin-inline-start: 0;
  margin-inline-end: 0;
}
.section-hero-formation :where(.rating-wrapper) :where(.author) {
  font-weight: 700;
}
.section-hero-formation :where(.note-wrapper) {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}
.section-hero-formation :where(.note-wrapper) :where(p) {
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
}
.section-hero-formation :where(.note-wrapper) :where(span) {
  font-size: 34px;
  font-weight: 700;
  line-height: 130%;
}
.section-hero-formation :where(.note-wrapper) :where(svg) {
  margin-left: -2rem;
}
@media screen and (width >= 1024px) {
  .section-hero-formation :where(.note-wrapper) :where(svg) {
    margin-left: -3rem;
  }
}

/*
  ========================================
  $Logos on homepage
  ========================================
*/
.logo-wrapper {
  position: absolute;
  width: 100%;
  bottom: 40px;
}
@media screen and (width < 768px) {
  .logo-wrapper {
    bottom: 455px;
  }
}
.logo-wrapper :where(.layout-logos) {
  gap: 0;
}
.logo-wrapper :where(.layout-logos) :where(ul) {
  list-style: none;
}
.logo-wrapper :where(.panel-logos) {
  grid-column: 1/13;
  --cols: 5;
  --gap: 0 0.5rem;
  padding: 0 1rem;
  margin: 0;
  position: relative;
  z-index: 1;
  align-items: center;
}
@media screen and (width >= 768px) {
  .logo-wrapper :where(.panel-logos) {
    --gap: 1rem;
    padding: 1rem 1rem 0;
  }
}
.logo-wrapper :where(img) {
  object-fit: contain;
  max-height: 91px;
}
@media screen and (width >= 768px) {
  .logo-wrapper :where(img) {
    max-width: 80%;
  }
}

.button-plus-wrapper {
  grid-column: 7;
}

.accordion {
  grid-column: 1/13;
  padding-bottom: 1rem;
}

.tab {
  position: relative;
}

.tab__content {
  max-height: 0;
  min-width: 100%;
  will-change: height;
  overflow: hidden;
  transition: all 0.35s;
  padding-bottom: 1rem;
}

.is-high {
  max-height: 20rem;
}

.tab__label {
  cursor: pointer;
  position: absolute;
  bottom: -2rem;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  padding: 0.2rem 0.2rem 0.3rem 0.4rem;
  color: var(--c-blue-navy);
  background-color: var(--c-white);
}

.tab__label::after {
  content: "✕";
  margin-top: 1.5rem;
  width: 1em;
  height: 1em;
  text-align: center;
  transform: rotate(44deg);
  transition: all 0.35s;
}

.accordion:hover .tab__label::after {
  transform: rotate(0deg);
}

.will-rotate {
  transform: rotate(0deg);
}

@media screen and (width < 768px) {
  .accordion {
    display: none;
  }
  .panel-logos {
    --cols: 3;
    --rows: 1;
  }
  .panel-logos :where(li:nth-child(4)),
  .panel-logos :where(li:nth-child(5)) {
    display: none;
  }
}
/*
  ========================================
  $Diagonal box
  ========================================
*/
.diagonal-box {
  transform: skewY(4deg);
}
.diagonal-box :where(.diagonal-content) {
  transform: skewY(-4deg);
}

.page-template-accueil .diagonal-box {
  margin-top: -25rem;
}
@media screen and (width < 768px) {
  .page-template-accueil .diagonal-box {
    padding: 80px 0;
  }
}
@media screen and (768px <= width < 1024px) {
  .page-template-accueil .diagonal-box {
    padding: 180px 0;
  }
}
@media screen and (width >= 1024px) {
  .page-template-accueil .diagonal-box {
    padding: 220px 0;
  }
}
@media screen and (width >= 1440px) {
  .page-template-accueil .diagonal-box {
    padding: 190px 0;
  }
}
@media screen and (width >= 1920px) {
  .page-template-accueil .diagonal-box {
    padding: 210px 0;
  }
}

.page-template-page-solution :where(.diagonal-box) {
  margin-top: -18rem;
  padding: 80px 0 20px;
}
@media screen and (768px <= width < 1024px) {
  .page-template-page-solution :where(.diagonal-box) {
    padding: 110px 0 50px;
  }
}
@media screen and (width >= 1024px) {
  .page-template-page-solution :where(.diagonal-box) {
    padding: 120px 0;
  }
}
@media screen and (width >= 1920px) {
  .page-template-page-solution :where(.diagonal-box) {
    padding: 160px 0;
  }
}

.page-template-page-offre :where(.diagonal-box) {
  padding-bottom: 5.5rem;
}

/*
  ========================================
  $Sommaire
  ========================================
*/
.sommaire {
  position: relative;
  z-index: 1;
  margin-top: -2rem;
}
@media screen and (768px <= width < 1024px) {
  .sommaire {
    margin-top: -3rem;
  }
}
@media screen and (width >= 1024px) {
  .sommaire {
    margin-top: -5rem;
  }
}
.sommaire :where(.wrapper) {
  grid-column: 1/13;
  display: grid;
  grid-template-columns: subgrid;
  border-radius: 0 200px 0 0;
}
.sommaire :where(.panel-sommaire) {
  grid-column: 2/12;
  padding: 30px 0;
}
@media screen and (width >= 1024px) {
  .sommaire :where(.panel-sommaire) {
    grid-column: 3/11;
  }
}
@media screen and (width >= 1440px) {
  .sommaire :where(.panel-sommaire) {
    grid-column: 4/10;
  }
}
.sommaire :where(.head) {
  text-transform: uppercase;
}
.sommaire :where(.list-wrapper) {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sommaire :where(.list-item) {
  flex-wrap: nowrap;
  align-items: baseline;
  --gap: 0.5rem;
  padding: 5px 5px 0 0;
}
.sommaire :where(.icon-wrapper) {
  width: 16px;
  height: 16px;
  min-width: 16px;
  background-color: var(--c-corail);
  border-radius: 8px;
}
.sommaire :where(.list-item:hover) .icon-wrapper,
.sommaire :where(.list-item:active) .icon-wrapper,
.sommaire :where(.list-item:focus) .icon-wrapper {
  background-color: var(--c-blue-light);
}
.sommaire :where(.list-item:hover) a,
.sommaire :where(.list-item:active) a,
.sommaire :where(.list-item:focus) a {
  text-decoration: underline;
}
.sommaire :where(.icon) {
  width: auto;
}

.page-template-page-formation :where(.sommaire) {
  margin-top: 60px;
}

.nav-interne {
  position: relative;
}
.nav-interne :where(.list-wrapper) {
  position: absolute;
  z-index: 50;
  top: -3.5rem;
  left: var(--s-md);
  right: var(--s-md);
  max-width: var(--screen);
  flex-wrap: nowrap;
  list-style: none;
  padding-inline-start: 0;
}
@media screen and (width >= 1024px) {
  .nav-interne :where(.list-wrapper) {
    flex-direction: row;
  }
}
@media screen and (width >= 1440px) {
  .nav-interne :where(.list-wrapper) {
    left: calc(1440px - var(--screen) - var(--s-md));
    right: calc(1440px - var(--screen) - var(--s-md));
  }
}
@media screen and (width >= 1920px) {
  .nav-interne :where(.list-wrapper) {
    left: calc((1920px - var(--screen)) / 2 - var(--s-md));
    right: calc((1920px - var(--screen)) / 2 - var(--s-md));
  }
}
.nav-interne :where(.list-item) {
  flex: 1;
  border-width: 1px;
  border-style: unset;
  border-color: var(--c-corail);
}
@media screen and (width >= 1440px) {
  .nav-interne .list-item-1::before {
    content: "";
    width: 58px;
    border-bottom: solid 1px var(--c-corail);
    position: absolute;
    left: -58px;
    top: 50%;
    z-index: 1;
  }
  .nav-interne .list-item-3::after {
    content: "";
    width: 60px;
    border-bottom: solid 1px var(--c-corail);
    position: absolute;
    right: -60px;
    top: 50%;
    z-index: 1;
  }
}
@media screen and (width >= 1024px) {
  .nav-interne .list-item-1::after,
  .nav-interne .list-item-3::before {
    content: "";
    width: 70px;
    border-bottom: solid 1px var(--c-corail);
    position: absolute;
    top: 26%;
    z-index: 1;
    transform: rotate(90deg);
  }
}
@media screen and (width >= 1280px) {
  .nav-interne .list-item-1::after,
  .nav-interne .list-item-3::before {
    width: 60px;
    top: 26%;
  }
}
.nav-interne .list-item-1::after {
  left: -30px;
}
@media screen and (width >= 1280px) {
  .nav-interne .list-item-1::after {
    left: -30px;
  }
}
.nav-interne .list-item-3::before {
  content: "";
  right: -30px;
}
@media screen and (width >= 1280px) {
  .nav-interne .list-item-3::before {
    right: -30px;
  }
}
@media screen and (width >= 1440px) {
  .nav-interne :where(.dot) {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background-color: var(--c-corail);
    position: absolute;
    top: 40%;
    z-index: 1;
  }
}
.nav-interne :where(.dot--left) {
  left: -70px;
}
@media screen and (width >= 1280px) {
  .nav-interne :where(.dot--left) {
    left: -70px;
  }
}
.nav-interne :where(.dot--right) {
  right: -70px;
}
@media screen and (width >= 1440px) {
  .nav-interne :where(.dot--right) {
    right: -70px;
  }
}
.nav-interne :where(.list-item-1) {
  border-top-style: solid;
}
@media screen and (width < 1024px) {
  .nav-interne :where(.list-item-1) {
    border-left-style: solid;
  }
}
.nav-interne :where(.list-item-1),
.nav-interne :where(.list-item-2) {
  border-right-style: solid;
}
@media screen and (width >= 1024px) {
  .nav-interne :where(.list-item-2) {
    border-bottom-style: solid;
  }
}
.nav-interne :where(.list-item-2),
.nav-interne :where(.list-item-3) {
  border-left-style: solid;
}
@media screen and (width < 1024px) {
  .nav-interne :where(.list-item-3) {
    border-right-style: solid;
    border-bottom-style: solid;
  }
}
@media screen and (width >= 1024px) {
  .nav-interne :where(.list-item-3) {
    border-top-style: solid;
  }
}
.nav-interne :where(.list-item-wrapper) {
  flex-wrap: nowrap;
  align-items: center;
  --gap: 30px;
  --justify: space-between;
  flex: 1;
  font-size: var(--f-xl);
  font-weight: 700;
  background-color: var(--c-gray-light);
  color: var(--c-blue-light);
  padding: 30px 20px;
  margin: 8px;
}
.nav-interne :where(.list-item-wrapper-1),
.nav-interne :where(.list-item-wrapper-3) {
  border-radius: 30px 30px 0 0;
}
.nav-interne :where(.list-item-wrapper-2) {
  border-radius: 0 0 30px 30px;
}
.nav-interne :where(.icon-wrapper) {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background-color: var(--c-purple);
  border-radius: 22px;
}
.nav-interne :where(.list-item:hover) .icon-wrapper,
.nav-interne :where(.list-item:active) .icon-wrapper,
.nav-interne :where(.list-item:focus) .icon-wrapper {
  background-color: var(--c-corail);
}
.nav-interne :where(.list-item:hover) a,
.nav-interne :where(.list-item:active) a,
.nav-interne :where(.list-item:focus) a {
  text-decoration: underline;
}
.nav-interne :where(.icon) {
  width: auto;
}

/*
  ========================================
  $Article
  ========================================
*/
.article-content {
  grid-column: 1/13;
  padding-bottom: 30px;
}
@media screen and (768px <= width < 1024px) {
  .article-content {
    grid-column: 2/12;
  }
}
@media screen and (width >= 1024px) {
  .article-content {
    grid-column: 3/11;
    padding-top: 50px;
  }
}
@media screen and (width >= 1440px) {
  .article-content {
    grid-column: 4/10;
  }
}
.article-content :where(h2),
.article-content :where(h3) {
  color: var(--c-blue-light);
  font-weight: 700;
  padding-top: 20px;
}
.article-content :where(h2) {
  font-size: 34px;
  line-height: 1.3;
}
.article-content :where(h3) {
  font-size: 24px;
}

.article-blocs {
  grid-column: 1/13;
}
@media screen and (768px <= width < 1024px) {
  .article-blocs {
    grid-column: 2/12;
  }
}

.card-img {
  --gap: 1rem;
  padding-bottom: 2rem;
}
@media screen and (width >= 1024px) {
  .card-img {
    --cols: 2;
  }
}
.card-img :where(.title) {
  font-size: var(--f-lg);
  font-weight: 700;
  color: var(--c-blue-light);
  padding-bottom: 1.5rem;
}
.card-img :where(.action-wrapper) {
  position: relative;
}
.card-img :where(.action) {
  font-family: "bliss-pro", sans-serif;
  color: var(--c-white);
  text-transform: uppercase;
  border-radius: 0 12px 12px 0;
  background: #3F5124;
  padding: 4px 8px 4px 16px;
  margin-left: 1.5rem;
}
.card-img :where(.action-icon) {
  position: absolute;
  top: -4px;
  left: 0;
}
.card-img :where(img) {
  height: auto;
}

@media screen and (width < 1024px) {
  .card-img--left :where(.media-wrapper) {
    order: 2;
  }
}

.article-content :where(.encadre) {
  background-color: var(--c-gray-light);
  color: var(--c-gray-dark);
  margin: 60px 0;
  padding: 30px;
  border-radius: 30px 0;
}
.article-content :where(.encadre) :where(h2),
.article-content :where(.encadre) :where(h3) {
  padding-top: 0;
}
.article-content :where(.encadre) :where(h2) {
  padding-bottom: 1rem;
}
.article-content :where(.encadre) :where(ul),
.article-content :where(.encadre) :where(p) {
  margin: 0.5rem;
}
.article-content :where(.encadre) :where(.link) {
  color: var(--c-blue-light);
  text-decoration: underline;
  font-weight: 700;
}
.article-content :where(.encadre) :where(.wrapper) {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
.article-content :where(.encadre) :where(.media-wrapper) {
  margin: 0;
}
.article-content :where(.encadre--blue) {
  background-color: var(--c-blue-light);
  color: var(--c-white);
}
.article-content :where(.encadre--blue) :where(h2),
.article-content :where(.encadre--blue) :where(h3),
.article-content :where(.encadre--blue) :where(a) {
  color: var(--c-white);
}
.article-content :where(.encadre--img-right) :where(.wrapper) {
  justify-content: space-between;
}

/*
  ========================================
  $Agenda
  ========================================
*/
.agenda {
  margin-top: 30px;
  margin-bottom: 60px;
}
.agenda :where(.wrapper) {
  grid-column: 1/13;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: end;
  justify-items: start;
  gap: 1rem;
  color: var(--c-white);
  border-radius: 0 0 0 200px;
  background: #677E3E;
  padding: 30px 25px 60px 40px;
}
@media screen and (width >= 768px) {
  .agenda :where(.wrapper) {
    padding: 30px 84px 60px 84px;
  }
}
.agenda :where(.subwrapper) {
  position: relative;
  grid-column: 1/13;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  align-items: end;
  justify-items: start;
}
@media screen and (width >= 768px) {
  .agenda :where(.subwrapper) {
    flex-direction: row;
  }
}
@media screen and (width >= 1024px) {
  .agenda :where(.subwrapper) {
    grid-column: 1/13;
  }
}
@media screen and (width >= 1280px) {
  .agenda :where(.subwrapper) {
    grid-column: 2/12;
  }
}
.agenda :where(.content-wrapper) {
  flex: 1;
}
@media screen and (width >= 1024px) {
  .agenda :where(.content-wrapper) {
    flex: 2;
  }
}
.agenda :where(.title) {
  font-size: 34px;
  font-weight: 700;
  line-height: 130%;
}
.agenda :where(.details) {
  margin-block-end: 0;
}
.agenda :where(.links-wrapper) {
  flex: 1;
  z-index: 2;
  --gap: 7px;
}
@media screen and (width < 768px) {
  .agenda :where(.links-wrapper) {
    padding-top: 1rem;
  }
}
.agenda :where(.cta-wrapper) {
  --background: var(--c-blue-light);
}
@media screen and (width < 1024px) {
  .agenda :where(.cta-label) {
    padding: 0 0.5rem 1.25rem;
  }
}
.agenda :where(.form-button) {
  text-decoration: underline;
  align-self: flex-end;
}
.agenda :where(.icon-hand) {
  position: absolute;
  z-index: 1;
  top: -9.26rem;
  right: -9rem;
}
@media screen and (width < 768px) {
  .agenda :where(.icon-hand) {
    display: none;
  }
}
@media screen and (768px <= width < 1024px) {
  .agenda :where(.icon-hand) {
    top: -1.8rem;
    right: -3.5rem;
  }
}
@media screen and (width >= 1024px) {
  .agenda :where(.icon-hand) {
    top: -6rem;
    right: -5rem;
  }
}
@media screen and (width >= 1280px) {
  .agenda :where(.icon-hand) {
    top: -5.9rem;
    right: -4rem;
  }
}

dialog {
  position: fixed;
  inset: 50%;
  z-index: 1000;
  width: 100%;
  max-width: 90vw;
  max-height: 80dvh;
  transform: translate(-50%, -1%);
  overflow: auto;
  border-radius: 1rem;
  padding: 4rem 1rem 1rem 1rem;
}
@media screen and (width >= 1280px) {
  dialog {
    max-width: 60vw;
  }
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.75);
}
dialog :where(.button) {
  transform: rotate(45deg);
  position: fixed;
  right: 1rem;
  top: 1rem;
  width: 3rem;
  height: 3rem;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2rem;
  border: 1px solid var(--c-thamar-black);
  background-color: var(--c-thamar-black);
  color: var(--c-white);
  transition: background 0.3s ease, color 0.3s ease;
  cursor: pointer;
}
dialog :where(.button):hover {
  text-decoration: none;
}
dialog :where(.button):hover, dialog :where(.button):focus-visible {
  background-color: var(--c-white);
  color: var(--c-thamar-black);
}
dialog :where(.button) :where(svg) {
  width: 1.5rem;
  height: 1.5rem;
}

html:has(dialog[open]),
body:has(dialog[open]) {
  overflow: hidden;
}

/*
  ========================================
  $Footer
  ========================================
*/
.section-footer {
  border-top: 1px solid var(--c-blue-navy);
  padding-top: 1rem;
}
.section-footer :where(.container) {
  --cols: 1;
  --gap: 1rem;
  grid-column: 1/13;
  align-items: start;
  padding: var(--f-lg) 0;
}
@media screen and (width >= 1024px) {
  .section-footer :where(.container) {
    grid-template-columns: 2fr 3fr 7fr;
  }
}
.section-footer :where(.logo) {
  object-fit: contain;
  width: auto;
}
.section-footer :where(.content-wrapper) {
  flex-direction: column;
  align-items: start;
  --gap: 1rem;
}
.section-footer :where(.head) {
  font-size: var(--f-lg);
  font-weight: 600;
}
.section-footer :where(.icon-label) {
  font-weight: 600;
}
.section-footer :where(.footer-menu-1) {
  font-weight: 600;
}
.section-footer :where(.navigation) {
  align-content: start;
  --gap: 0.5rem;
}
@media screen and (width >= 1440px) {
  .section-footer :where(.navigation) {
    padding-left: 100px;
  }
}
.section-footer :where(.navigation) li::before {
  content: "⠂";
  display: inline-block;
}
.section-footer :where(.socials) {
  --gap: 2rem;
}
@media screen and (width >= 1024px) {
  .section-footer :where(.socials) {
    flex-wrap: nowrap;
  }
}
.section-footer :where(.socials a) {
  flex-wrap: nowrap;
  --gap: 0.65rem;
}
.section-footer :where(.socials svg) {
  height: 28px;
  overflow: visible;
}
.section-footer :where(.social-linkedin) {
  padding-bottom: 7px;
}

.footer-menu-1 a,
.footer-menu-2 a {
  border-bottom: 1px solid transparent;
}

.footer-menu-1 a:hover,
.footer-menu-1 a:focus-visible,
.footer-menu-2 a:hover,
.footer-menu-2 a:focus-visible {
  border-bottom: 1px solid currentColor;
}

/*
  ========================================
  $Reference
  ========================================
*/
.section-references :where(.container) {
  --gap: 1.5rem;
}
@media screen and (768px <= width < 1024px) {
  .section-references :where(.container) {
    --gap: 0;
  }
}
@media screen and (width >= 1024px) {
  .section-references :where(.container) {
    --gap: 0.5rem;
  }
}
@media screen and (width >= 1440px) {
  .section-references :where(.container) {
    --gap: 1.5rem;
  }
}

.panel-references {
  --cols: 1;
  --gap: 30px;
  padding-bottom: 40px;
}
@media screen and (width >= 768px) {
  .panel-references {
    grid-column: 2/12;
  }
}
@media screen and (width >= 1024px) {
  .panel-references {
    --cols: 2;
  }
}
@media screen and (width >= 1440px) {
  .panel-references {
    grid-column: 1/13;
  }
}

.card-reference :where(.container) {
  padding: 30px;
}
.card-reference :where(.content-wrapper) {
  --justify: space-between;
  --gap: 1rem;
}
@media screen and (width >= 768px) {
  .card-reference :where(.content-wrapper) {
    flex-wrap: nowrap;
  }
}
.card-reference :where(.txt-wrapper) {
  color: var(--c-gray-dark);
}
@media screen and (width >= 1024px) {
  .card-reference :where(.txt-wrapper) {
    flex: 2;
  }
}
@media screen and (width >= 1024px) {
  .card-reference :where(.media-wrapper) {
    flex: 2;
  }
}
.card-reference :where(.media) {
  object-fit: contain;
  height: 200px;
  filter: drop-shadow(1px 0px 5px #000000);
}
@media screen and (width >= 768px) {
  .card-reference :where(.media) {
    max-height: 150px;
  }
}

.card-reference:hover :where(.container),
.card-reference:focus :where(.container),
.card-reference:active :where(.container) {
  background-color: var(--c-gray-light);
}

/*
  ========================================
  $Expertise
  ========================================
*/
.panel-expertise {
  --cols: 1;
  padding-bottom: 40px;
}
@media screen and (width >= 768px) {
  .panel-expertise {
    --cols: 2;
    grid-column: 2/12;
  }
}
@media screen and (width >= 1280px) {
  .panel-expertise {
    --cols: 4;
    grid-column: 2/12;
  }
}
@media screen and (width >= 1440px) {
  .panel-expertise {
    --cols: 4;
    grid-column: 1/13;
  }
}

.card-expertise {
  position: relative;
}
.card-expertise :where(.container) {
  display: flex;
  flex-direction: column;
  height: var(--height);
  --height: 350px;
  padding: 25px;
  margin: 10px;
  /* @include a.bp(medium/large) {
    --height: 300px;
  } */
}
@media screen and (width >= 1440px) {
  .card-expertise :where(.container) {
    --height: 350px;
  }
}
.card-expertise :where(.txt-wrapper),
.card-expertise :where(.cta),
.card-expertise :where(.cta-picto-wrapper) {
  color: var(--c-gray-dark);
}
.card-expertise :where(.cta-picto-wrapper) {
  padding: 0.7rem 0.75rem 0.8rem 0.8rem;
}
.card-expertise .cta-picto {
  width: 15px;
  height: 22.5px;
}

@media screen and (width >= 768px) {
  .card-expertise:nth-child(1)::before {
    content: "";
    width: 58px;
    border-bottom: solid 1px var(--c-corail);
    position: absolute;
    left: -58px;
    top: 50%;
    z-index: 1;
  }
  .card-expertise:nth-child(4)::after {
    content: "";
    width: 60px;
    border-bottom: solid 1px var(--c-corail);
    position: absolute;
    right: -60px;
    top: 50%;
    z-index: 1;
  }
}
@media screen and (width >= 768px) {
  .card-expertise:nth-child(1) :where(.dot),
  .card-expertise:nth-child(4) :where(.dot) {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background-color: var(--c-corail);
    position: absolute;
    top: 46%;
    z-index: 1;
  }
  .card-expertise:nth-child(1) :where(.dot) {
    left: -70px;
  }
  .card-expertise:nth-child(4) :where(.dot) {
    right: -70px;
  }
}
@media screen and (width >= 768px) {
  .card-expertise:nth-child(1)::after,
  .card-expertise:nth-child(4)::before {
    content: "";
    width: 185.4px;
    border-bottom: solid 1px var(--c-corail);
    position: absolute;
    z-index: 1;
    transform: rotate(90deg);
  }
  .card-expertise:nth-child(1)::after {
    top: 24.9%;
    left: -92.5px;
  }
  .card-expertise:nth-child(4)::before {
    right: -92.5px;
    bottom: 24.9%;
  }
}
.card-expertise {
  border-width: 1px;
  border-style: unset;
  border-color: var(--c-corail);
}

.card-expertise:nth-child(1) {
  border-top-style: solid;
}
.card-expertise:nth-child(1) :where(.container) {
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

.card-expertise:nth-child(2) :where(.container) {
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;
}

.card-expertise:nth-child(3) :where(.container) {
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

.card-expertise:nth-child(4) {
  border-bottom-style: solid;
}
.card-expertise:nth-child(4) :where(.container) {
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;
}

@media screen and (width < 768px) {
  .card-expertise:nth-child(1) {
    border-right-style: solid;
    border-left-style: solid;
  }
  .card-expertise:nth-child(2) {
    border-right-style: solid;
    border-left-style: solid;
  }
  .card-expertise:nth-child(3) {
    border-right-style: solid;
    border-left-style: solid;
  }
  .card-expertise:nth-child(4) {
    border-right-style: solid;
    border-left-style: solid;
  }
}
@media screen and (width >= 768px) {
  .card-expertise:nth-child(1) {
    border-right-style: solid;
  }
  .card-expertise:nth-child(3) {
    border-right-style: solid;
  }
}
@media screen and (width >= 1280px) {
  .card-expertise:nth-child(2) {
    border-bottom-style: solid;
    border-right-style: solid;
  }
  .card-expertise:nth-child(3) {
    border-top-style: solid;
  }
}
/*
  ========================================
  $Formation
  ========================================
*/
.panel-books {
  --cols: 1;
  --gap: 1.5rem;
  padding-bottom: 40px;
}
@media screen and (width >= 1024px) {
  .panel-books {
    --cols: 2;
  }
}

.card-book :where(.container) {
  --cols: 1fr;
  --gap: 2rem;
  height: 100%;
  place-content: center;
  padding: var(--s-base);
}
@media screen and (width >= 768px) {
  .card-book :where(.container) {
    --cols: 3fr 2fr;
    --gap: 0.5rem;
    padding: var(--s-base) 0 var(--s-base) var(--s-sm);
  }
}
.card-book :where(.cta-wrapper) {
  width: 215px;
  margin-top: auto;
}
.card-book :where(.cta-label),
.card-book :where(.cta-picto-wrapper) {
  color: var(--c-white);
}
.card-book :where(.txt-wrapper) {
  gap: var(--s-sm);
  text-align: center;
}
@media screen and (width >= 768px) {
  .card-book :where(.txt-wrapper) {
    text-align: left;
    align-items: start;
  }
}
@media screen and (width < 768px) {
  .card-book :where(.head) {
    text-wrap: balance;
  }
}
@media screen and (width >= 768px) {
  .card-book :where(.media-wrapper) {
    align-items: end;
  }
}
.card-book :where(.media) {
  max-width: 200px;
  object-fit: contain;
}

/*
  ========================================
  $Blog
  ========================================
*/
.section-blog :where(.container) {
  --gap: 0;
  height: 410px;
}
@media screen and (width < 768px) {
  .section-blog :where(.container) {
    height: auto;
  }
}
@media screen and (width >= 1440px) {
  .section-blog :where(.container) {
    height: 370px;
  }
}
.section-blog :where(.meta-wrapper) {
  --justify: space-between;
  padding-top: 5px;
}
.section-blog :where(.date-wrapper) {
  --gap: 0.25rem;
}
.section-blog :where(.picto-date) {
  width: 15px;
  height: 13px;
  padding-right: 5px;
}
.section-blog :where(.panel-blog) {
  --cols: 1;
  --gap: 70px 25px;
  padding-bottom: 40px;
}
@media screen and (768px <= width < 1024px) {
  .section-blog :where(.panel-blog) {
    --cols: 2;
  }
}
@media screen and (width >= 1024px) {
  .section-blog :where(.panel-blog) {
    --cols: 3;
  }
}

.card-blog :where(.txt-wrapper) {
  display: flex;
  flex-direction: column-reverse;
}

/*
  ========================================
  $Agency
  ========================================
*/
.section-agency :where(.txt-wrapper) {
  grid-column: 1/13;
}
@media screen and (768px <= width < 1024px) {
  .section-agency :where(.txt-wrapper) {
    grid-column: 2/12;
  }
}
@media screen and (width >= 1024px) {
  .section-agency :where(.txt-wrapper) {
    grid-column: 2/7;
  }
}
@media screen and (width >= 1440px) {
  .section-agency :where(.txt-wrapper) {
    grid-column: 1/7;
  }
}
.section-agency :where(.card-agency-head) {
  font-weight: 600;
  font-size: var(--f-xl);
  line-height: 1.2;
}
.section-agency :where(.media-wrapper) {
  grid-column: 1/13;
}
@media screen and (768px <= width < 1024px) {
  .section-agency :where(.media-wrapper) {
    grid-column: 2/12;
  }
}
@media screen and (width >= 1024px) {
  .section-agency :where(.media-wrapper) {
    grid-column: 7/12;
  }
}
@media screen and (width >= 1440px) {
  .section-agency :where(.media-wrapper) {
    grid-column: 7/13;
  }
}
.section-agency :where(.cta--small) {
  width: 204px;
}
.section-agency :where(.links-wrapper) {
  list-style-type: none;
  padding-inline-start: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-top: 3.75rem;
  display: flex;
}
@media screen and (width < 768px) {
  .section-agency :where(.links-wrapper) {
    flex-direction: column;
  }
}
.section-agency :where(.links-wrapper) :where(.head) {
  font-size: var(--f-lg);
}
.section-agency :where(.links-wrapper) :where(.media) {
  width: 100px;
  height: auto;
}
.section-agency :where(.links-wrapper) :where(.card:hover) .cta-wrapper::after {
  background-color: var(--c-purple);
}
.section-agency :where(.links-wrapper) :where(.container) {
  gap: 1rem;
}
.section-agency :where(.links-wrapper) :where(.card) {
  flex: 1;
}
.section-agency :where(.links-wrapper) :where(.cta) {
  margin-top: 1rem;
}

.gallery {
  padding-bottom: var(--s-md);
}
.gallery :where(img) {
  height: 250px;
  grid-column: span 6;
}
@media screen and (width >= 768px) {
  .gallery :where(img:first-child) {
    grid-area: a;
  }
  .gallery :where(img:nth-child(2)) {
    grid-area: b;
  }
  .gallery :where(img:nth-child(3)) {
    grid-area: c;
  }
  .gallery :where(img:nth-child(4)) {
    grid-area: d;
  }
  .gallery :where(img:nth-child(5)) {
    grid-area: e;
  }
  .gallery :where(img:last-child) {
    grid-area: f;
  }
}
@media screen and (768px <= width < 1024px) {
  .gallery {
    grid-template-areas: ". a a a a a b b b b b ." ". c c c c c d d d d d ." ". e e e e e f f f f f .";
  }
}
@media screen and (width >= 1024px) {
  .gallery {
    gap: 0;
    grid-template-areas: ". a a a a a b b b c c ." ". a a a a a d e e f f .";
  }
  .gallery :where(img) {
    height: 200px;
  }
  .gallery :where(img:first-child) {
    height: 400px;
  }
}
@media screen and (width >= 1440px) {
  .gallery {
    grid-template-areas: "a a a a a a b b b c c c" "a a a a a a d d e e f f";
  }
}

/*
  ========================================
  $Formation
  ========================================
*/
.panel-formations {
  --cols: 1;
  --gap: 20px;
}
@media screen and (width >= 768px) {
  .panel-formations {
    grid-column: 2/12;
  }
}
@media screen and (width >= 1440px) {
  .panel-formations {
    grid-column: 1/13;
  }
}

.card-formation :where(.container) {
  padding: 20px;
  --gap: 1.5rem;
}
@media screen and (width >= 768px) {
  .card-formation :where(.container) {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
@media screen and (768px <= width < 1024px) {
  .card-formation :where(.container) {
    --gap: 0;
  }
}
@media screen and (width >= 1024px) {
  .card-formation :where(.container) {
    --gap: 0.5rem;
  }
}
@media screen and (width >= 1440px) {
  .card-formation :where(.container) {
    --gap: 1.5rem;
  }
}
@media screen and (width >= 1024px) {
  .card-formation :where(.head) {
    max-width: 80%;
  }
}
.card-formation :where(.head:not(:first-of-type)) {
  border-top: 1px solid #FFF;
}
.card-formation :where(.content-wrapper) {
  flex: 2;
}
@media screen and (768px <= width < 1024px) {
  .card-formation :where(.content-wrapper) {
    max-width: 350px;
  }
}

.card-formation:not(:last-child) {
  border-bottom: 1px solid #FFF;
}

.card-formation .cta-wrapper::after,
.card-formation .cta-wrapper::after,
.card-formation .cta-wrapper::after {
  background: var(--c-purple);
}

/*
  ========================================
  $Card Offre
  ========================================
*/
.section-offres {
  display: flex;
  flex-direction: column;
  margin-top: 27rem;
  padding: var(--inset-top) 0 var(--inset-bottom);
  gap: var(--g-section);
  justify-content: center;
  align-items: center;
}
@media screen and (width >= 768px) {
  .section-offres {
    margin-top: 19rem;
  }
}
@media screen and (width >= 1024px) {
  .section-offres {
    margin-top: 6rem;
  }
}
.section-offres :where(.heading-wrapper) {
  padding-top: 1.875rem;
  --gap: 1rem;
}
@media screen and (width >= 1024px) {
  .section-offres :where(.heading-wrapper) {
    --cols: 4fr 8fr;
  }
}
.section-offres :where(.title) {
  font-family: "fslola-medium", sans-serif;
  font-size: 48px;
  line-height: 62px;
  color: var(--c-blue-light);
}
.section-offres :where(.chapo) {
  margin-block-start: 0;
  margin-block-end: 0;
  color: light-dark(var(--c-gray-dark), var(--c-white));
  font-family: "fslola", sans-serif;
  font-size: var(--f-base);
  font-weight: 700;
  line-height: 24px;
}

.panel-offres {
  padding-inline-start: 0;
  list-style-type: none;
  grid-column: 1/13;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gap);
  --gap: 1rem;
}
@media screen and (width >= 768px) {
  .panel-offres {
    --cols: 2;
  }
}

.card-offre {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 250px;
  padding: 30px;
  gap: 15px;
  border: 1px solid var(--c-gray-medium);
}
.card-offre :where(.txt-wrapper),
.card-offre :where(.cta),
.card-offre :where(.cta-picto-wrapper) {
  color: var(--c-gray-dark);
}
.card-offre :where(.cta-picto-wrapper) {
  padding: 0.7rem 0.75rem 0.8rem 0.8rem;
}
.card-offre .cta-picto {
  width: 15px;
  height: 22.5px;
}

.card-offre--link:hover,
.card-offre--link:active,
.card-offre--link:focus {
  background-color: var(--c-blue-navy);
}

.card-offre--link:hover .cta-wrapper::after,
.card-offre--link:active .cta-wrapper::after,
.card-offre--link:focus .cta-wrapper::after {
  background: var(--c-purple);
}

.card-offre.theme-blue-light :where(.txt-wrapper),
.card-offre.theme-blue-light :where(.cta),
.card-offre.theme-blue-light :where(.cta-picto-wrapper) {
  color: var(--c-white);
}

.card-offre:first-child {
  border-radius: 30px 30px 0 0;
}

.card-offre:last-child {
  border-radius: 0 0 30px 30px;
}

@media screen and (width >= 768px) {
  .card-offre:nth-child(2) {
    border-radius: 30px 30px 0 0;
  }
}

@media screen and (width >= 768px) {
  .panel-6-blocs :where(.card-offre:nth-child(5)) {
    border-radius: 0 0 30px 30px;
  }
}

@media screen and (width >= 768px) {
  .panel-4-blocs :where(.card-offre:nth-child(3)) {
    border-radius: 0 0 30px 30px;
  }
}

/*# sourceMappingURL=style.css.map */