#main {
  padding : 0 0 25px;
}

#cms .page-header h1, .page-header h2.page-header h1, .page-header h2 {
  padding : 3rem 1.5em 1em;
}

.page-content.page-cms {
  background    : var(--color-white-default);
  text-align    : justify;
  border-radius : 0 0 10px 10px;
  padding       : 1rem 4rem 4rem;
}

.page-content.page-cms:has(.header-page-cms) {
  padding : 0;
}

.page-content.page-cms .cms-box img {
  max-width : 100%
}

/**************************
CMS : Estimater mes aides et mon projet
***************************/

.header-page-cms {
  position   : relative;
  overflow   : hidden;
  min-height : 330px;
  background : linear-gradient(243deg, #00A4BC 12.96%, #2C3248 82.32%);
  color      : #fff;
}

.header-content {
  position        : relative;
  z-index         : 2;
  margin          : 0 auto;
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : 0 0 0 15%;
}

.header-text {
  text-align : left;
  padding    : 30px 0;
  width      : 800px;
}

.subtitle {
  margin                  : 0 0 8px;
  background              : linear-gradient(270deg, #D5DA23 18.58%, #C9D72A 26.87%, #A8D03D 41.95%, #74C45B 62.12%, #2CB384 86.34%, #00A99D 99.92%);
  background-clip         : text;
  -webkit-background-clip : text;
  -webkit-text-fill-color : transparent;
  font-size               : 22px;
  font-style              : normal;
  font-weight             : 700;
  line-height             : normal;
}

.subtitle span {
  color : #d5e800;
}

.header-text h1 {
  margin      : 0 0 14px;
  color       : #FFF;
  font-size   : 45px;
  font-style  : normal;
  font-weight : 700;
  line-height : 50px;
}

.description {
  color         : #FFF;
  font-size     : 16px;
  font-style    : normal;
  font-weight   : 400;
  line-height   : normal;
  margin-bottom : 35px;
  max-width     : 636px;
}

.btn-download {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  min-width       : 256px;
  height          : 45px;
  padding         : 10px 24px;
  border-radius   : 60px;
  background      : linear-gradient(267deg, #D5DA23 17.33%, #C9D72A 24.93%, #A8D03D 38.73%, #74C45B 57.21%, #2CB384 79.39%, #00A99D 91.83%);
  color           : #fff;
  font-size       : 16px;
  font-weight     : 700;
  text-decoration : none;
  transition      : transform 0.2s ease, box-shadow 0.2s ease;
  position        : relative;
  z-index         : 1;
}

.btn-download:hover {
  transform  : translateY(-2px);
  box-shadow : 0 10px 22px rgba(0, 0, 0, 0.18);
}

.header-visual {
  position : relative;
}

.header-visual img {
  display : block;
  width   : 100%;
  height  : auto;
  filter  : drop-shadow(0 18px 28px rgba(0, 0, 0, 0.25));
}

/* Dots décoratifs */
.header-text::after {
  content          : "";
  position         : absolute;
  left             : 0;
  bottom           : 0;
  width            : 20%;
  height           : 20%;
  background-image : radial-gradient(rgba(255, 255, 255, 0.22) 1.5px, transparent 1.5px);
  background-size  : 16px 16px;
  opacity          : 0.7;
}

.icon_logo_decoration {
  position : absolute;
  bottom   : -5px;
  right    : 0;
  opacity  : 0.08;
}


.cms-guide__container {
  display               : grid;
  grid-template-columns : calc(60% - 20px) calc(40% - 20px);
  padding               : 80px 0;
  background            : #fff;
  overflow              : clip;
  margin                : 0 auto;
  gap                   : 40px;
  width                 : fit-content;
  align-items           : start;
}

.container-estimate {
  max-width : 760px;
}

.guide-form {
  max-width  : 520px;
  position   : sticky;
  top        : 20px;
  align-self : start;
}


.cms-guide .container-estimate {
  position : relative;
  z-index  : 2;
  margin   : 0 auto;
}

.cms-guide h2 {
  color       : #2C3248;
  font-size   : 45px;
  font-style  : normal;
  font-weight : 700;
  line-height : 50px; /* 111.111% */
  text-align  : left;
}

/* =========================
   GRID
========================= */
.guide-grid-wrapper {
  display     : flex;
  align-items : flex-start;
  gap         : 28px;
}

.guide-grid {
  flex                  : 1;
  display               : grid;
  grid-template-columns : repeat(2, 1fr);
  gap                   : 20px;
}

.cms-guide {
  position : relative;
}

/* =========================
   CARDS
========================= */

.guide-card {
  border-radius : 20px;
  background    : #F3F7FA;
  padding       : 28px 35px;
  text-align    : center;
  min-height    : 220px;
}

.guide-card .icon {
  width           : 46px;
  height          : 46px;
  margin          : 0 auto 18px;
  border-radius   : 50%;
  background      : linear-gradient(180deg, #31c48d 0%, #7ac943 100%);
  display         : flex;
  align-items     : center;
  justify-content : center;
  color           : #fff;
  font-size       : 20px;
  font-weight     : 700;
}

.guide-card h3 {
  color       : #89BE42;
  text-align  : center;
  font-size   : 18px;
  font-style  : normal;
  font-weight : 600;
  line-height : 130%;
}

.guide-card p {
  color       : #2C3248;
  text-align  : center;
  font-size   : 15px;
  font-style  : normal;
  font-weight : 500;
  line-height : 160%; /* 24px */
}

/* =========================
   FORMULAIRE
========================= */

.guide-form {
  position      : sticky;
  top           : 100px;
  flex-shrink   : 0;
  background    : #eceff1;
  border-radius : 18px;
  padding       : 34px 24px;
  height        : fit-content;
  z-index       : 1;
}

.guide-form h3 {
  color       : #2C3248;
  text-align  : center;
  font-size   : 29px;
  font-style  : normal;
  font-weight : 700;
  line-height : 34px;
}

.guide-form h3 span {
  background              : linear-gradient(270deg, #DEDD14 0.08%, #88BF40 40.41%, #2088B4 86.11%);
  -webkit-background-clip : text;
  -webkit-text-fill-color : transparent;
}

.guide-form input {
  width         : 100%;
  height        : 54px;
  border        : none;
  border-radius : 999px;
  padding       : 0 22px;
  margin-bottom : 16px;
  background    : #fff;
  font-size     : 14px;
  color         : #252c48;
  outline       : none;
}

.guide-form input::placeholder {
  color : #999;
}

.guide-form button {
  width         : 100%;
  height        : 54px;
  border        : none;
  border-radius : 999px;
  background    : linear-gradient(90deg, #00b5b8 0%, #d2dc1f 100%);
  color         : #fff;
  font-size     : 15px;
  font-weight   : 700;
  cursor        : pointer;
  transition    : all 0.25s ease;
}

.guide-form button:hover {
  transform  : translateY(-2px);
  box-shadow : 0 10px 20px rgba(0, 0, 0, 0.12);
}

.guide-form button:disabled {
  opacity    : 0.65;
  cursor     : not-allowed;
  transform  : none;
  box-shadow : none;
}

.guide-form__message {
  margin-top    : 14px;
  padding       : 12px 16px;
  border-radius : 10px;
  font-size     : 14px;
  font-weight   : 500;
  line-height   : 1.5;
  text-align    : center;
  display       : none;
}

.guide-form__message:not(:empty) {
  display : block;
}

.guide-form__message--success {
  background : #e8f7ef;
  color      : #1a7a45;
  border     : 1px solid #b6e8ce;
}

.guide-form__message--error {
  background : #fdecea;
  color      : #b71c1c;
  border     : 1px solid #f5c6c6;
}

/* =========================
   IMAGES GUIDE
========================= */

.guide-preview {
  display : flex;
  gap     : 0;
  margin  : 40px 0 24px;
}

.guide-preview img {
  width         : 33.333%;
  display       : block;
  border-radius : 12px;
  object-fit    : cover;
}


.job-container .swiper-container {
  overflow : unset;
}


/* =========================
   BLOC BAS
========================= */

.guide-bottom {
  padding       : 28px 40px;
  border-radius : 20px;
  background    : linear-gradient(246deg, #D5DA23 -11.05%, #C9D72A -0.63%, #A8D03D 18.3%, #74C45B 43.63%, #2CB384 74.04%, #00A99D 91.1%);
}

.guide-bottom p {
  color          : #FFF;
  text-align     : center;
  font-family    : Montserrat, sans-serif;
  font-size      : 17px;
  font-style     : normal;
  font-weight    : 700;
  line-height    : 145%; /* 24.65px */
  text-transform : uppercase;
}

.guide-galerie {
  margin : 40px 0;
}

.icon_guide_logo_decoration {
  position : absolute;
  right    : 0;
  bottom   : 20%;
  opacity  : 0.08;
}

section.job-section {
  background  : var(--color-primary);
  position    : relative;
  display     : flex;
  align-items : center;
  overflow    : hidden;
}

svg.job-section_svg {
  position : absolute;
  bottom   : 0;
  left     : 0;
}

.job-section .job-container {
  padding        : 75px 0 100px;
  display        : flex;
  gap            : 40px;
  max-width      : calc(100vw - var(--container-secondary-margin));
  margin         : 0 auto;
  flex-direction : column;
}

.icon-deco-job-section {
  position : absolute;
  left     : -100px;
  top      : -100px;
}

.job-title {
  color       : #FFF;
  text-align  : center;
  font-size   : 45px;
  font-style  : normal;
  font-weight : 700;
  line-height : 50px;
  max-width   : 400px;
  margin      : 0 auto;
}

.job-section_header {
  max-width : 480px;
}

.job-section_title {
  display        : flex;
  gap            : 16px;
  flex-direction : column;
}

.job-section_description {
  color       : var(--color-white-default);
  opacity     : 0.7;
  font-size   : 15px;
  font-style  : normal;
  font-weight : 500;
  line-height : 180%;
  margin-top  : 16px;
}

.job-section__line {
  width      : 200px;
  background : var(--gradient-pro);
  height     : 3px;
}

.job-section_title span {
  color       : var(--color-white-default);
  font-size   : 26px;
  font-style  : normal;
  font-weight : 500;
  line-height : 140%;
}

a.job-link {
  display         : flex;
  flex-direction  : column;
  height          : 100%;
  justify-content : space-between;
  gap             : 15px;
}

.job-header {
  display     : flex;
  align-items : center;
  gap         : 5px;
  height      : 100%;
}

.job-header .job-title:after {
  content          : '';
  position         : absolute;
  width            : calc(100% + 15px);
  left             : -15px;
  height           : 1px;
  background-color : var(--color-secondary);
  bottom           : -5px;
  transform-origin : left;
  transform        : scaleX(0);
  transition       : transform 0.25s ease-in, width .25s ease-in, left .25s ease-in;
}

.job-section_slide:hover .job-header .job-title:after {
  transform        : scaleX(1);
  width            : calc(100%);
  left             : 0;
  transition-delay : .35s;
}

h5.job-title {
  color         : var(--color-white-default);
  font-size     : 15px;
  font-style    : normal;
  font-weight   : 700;
  line-height   : normal;
  position      : relative;
  margin-top    : 0;
  margin-bottom : 6px;
  text-align    : left;
}

.job-section_slide .job-header_svg {
  transform : rotate(45deg);
}

.job-section_slide .job-header_svg line {
  stroke-dasharray  : 9 0;
  stroke-dashoffset : 0;
  transition        : stroke-dashoffset .35s ease-out, stroke-dasharray .35s ease-out;
  transition-delay  : .35s;
}

.job-section_slide:hover .job-header_svg line {
  stroke-dashoffset : 20;
  stroke-dasharray  : 18 25;
  transition-delay  : 0s;
}

.job-section_slide .job-header_svg path {
  stroke-dasharray  : 15 15;
  stroke-dashoffset : -14;
  transition        : stroke-dasharray .25s ease-out;
  transition-delay  : .3s;
}

.job-section_slide:hover .job-header_svg path {
  stroke-dasharray : 0 15;
  transition-delay : .1s;
}

.job-section .media-container {
  overflow      : hidden;
  border-radius : 10px;
}

a.job-link:hover {
  color : var(--color-white-default);
}

a.job-link:hover .default-media {
  transform : scale(1.05);
}

.job-header_svg {
  color : var(--color-secondary);
}

.job-header_svg, .job-section .default-media {
  transition : all 0.3s ease-in-out;
}

.job-section .default-media {
  width : 100%;
}

.job-swiper-wrapper {
  display               : grid;
  grid-template-columns : repeat(5, 1fr);
  gap                   : 15px;
  margin                : 0 auto;
  max-width             : 1320px;
  position              : relative;
}