/* ==========================================================================
   Pôle Subvention — variables de design
   ========================================================================== */
:root {
  --bleu-fonce: #28386f;
  --bleu-nuit: #050d3c;
  --bleu-clair-bg: #e8edff;
  --bleu-clair-alt: #eceff5;
  --gris-fonce: #222;
  --gris-clair: #6f6f6f;
  --rouge-txt: #6f2828;
  --rouge: #e20b0f;
  --blanc: #fff;

  --radius: 6px;
  --container-max: 90rem;
  --header-padding: 50px;
  --btn-svg: 40px;

  --txt-minuscule: .6rem;
  --txt-tres-petit: .8rem;
  --txt-petit: .875rem;
  --txt: 1rem;
  --txt-moyen: 1.2rem;
  --txt-grand: 1.5rem;
  --h4: 1.7rem;
  --h3: 2rem;
  --h2: 2.5rem;
  --h1: 3.5rem;
  --hero: 5rem;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: #000;
  font-family: "Lato", sans-serif;
  background-color: var(--blanc);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: .5rem;
  padding: 0 2.5rem;
}

.section {
  padding: 5rem 2.5rem;
}

.h1,
.h2 {
  color: var(--bleu-fonce);
  font-family: "Pacifico", sans-serif;
  font-weight: 400;
  margin: 0 0 1.7rem;
  line-height: 1;
}

.h1 {
  font-size: var(--h1);
}

.h2 {
  font-size: var(--h2);
  max-width: 500px;
  margin-bottom: 0;
}

.h2.gris {
  color: var(--gris-clair);
}

.txt {
  font-size: var(--txt);
}

.txt.gris-clair {
  color: var(--gris-clair);
}

.txt.rouge {
  color: var(--rouge);
  margin: 1rem 0;
}

.txt-light {
  font-size: var(--txt);
  font-weight: 300;
}

.txt-light.etapes {
  max-width: 500px;
}

.point {
  width: 6px;
  height: 6px;
  background-color: #000;
  border-radius: 50%;
  flex: none;
}

.bouton-txt {
  color: var(--bleu-fonce);
  font-size: var(--txt);
  font-weight: 700;
}

.bouton-txt.petit {
  font-size: var(--txt-tres-petit);
  font-weight: 300;
}

.bouton-txt._2 {
  color: var(--bleu-clair-alt);
}

/* ==========================================================================
   Boutons CTA
   ========================================================================== */
.bouton-blk {
  display: flex;
  flex-flow: wrap;
  align-items: center;
  gap: 1rem;
}

.bouton-link-blk {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 280px;
  height: 80px;
  padding: .5rem 1rem;
  border: 2px solid var(--bleu-fonce);
  border-radius: var(--radius);
  background-color: var(--blanc);
  text-decoration: none;
  filter: drop-shadow(0 0 3px var(--bleu-fonce));
  transition: filter .2s ease;
}

.bouton-link-blk:hover {
  filter: drop-shadow(0 0 20px var(--bleu-fonce));
}

.bouton-link-blk._2 {
  background-color: var(--bleu-fonce);
}

.bouton-link-blk.petit {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  gap: .3rem;
}

.bouton-icn-svg,
.image-7 {
  height: var(--btn-svg);
  width: var(--btn-svg);
}

.bouton-fl-che-svg {
  width: 25px;
}

.bouton-fl-che-svg.abs {
  position: absolute;
  z-index: 1;
  left: 77px;
  bottom: 7px;
  pointer-events: none;
}

.bouton-fl-che-svg.abs.contact {
  left: 180px;
  bottom: 6px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.header-nav-blk {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 5rem;
  background-color: #ffffff80;
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
}

.header-logo-blk {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
  height: 100%;
  padding-left: var(--header-padding);
}

.logo {
  height: 35px;
}

.txt-min {
  font-size: var(--txt-minuscule);
  line-height: 12px;
  color: #000;
}

.header-nav-option-blk {
  display: flex;
  align-items: stretch;
  height: 100%;
}

.option-txt {
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: var(--bleu-fonce);
  font-weight: 700;
  font-size: var(--txt-petit);
  text-decoration: none;
  white-space: nowrap;
}

.option-txt.contact {
  display: none;
}

.rs-logo-blk {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0 12px;
}

.rs {
  height: 16px;
}

.rs._2 {
  height: 19px;
}

.option-txt._2 {
  border: 2px solid var(--bleu-fonce);
  background-color: var(--bleu-fonce);
  color: var(--bleu-clair-alt);
  height: 100%;
  padding: 0 2rem;
}

.option-txt._2:hover {
  background-color: transparent;
  color: var(--bleu-nuit);
}

/* espace pour compenser le header fixe */
/* le header est position:fixed et flotte par-dessus le hero (qui gère
   son propre espacement via padding-top) : pas d'espaceur ici */
.header-blk {
  width: 100%;
  height: 0;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.section.hero {
  background-color: var(--bleu-clair-bg);
  padding-top: 10rem;
  padding-bottom: 3rem;
}

.div-block-17 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
  width: 100%;
}

.hero-blk {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 4rem;
}

.hero-titre-blk {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
}

.hero-txt {
  color: var(--bleu-nuit);
  font-family: "Pacifico", sans-serif;
  font-size: var(--hero);
  font-weight: 400;
  line-height: 1.2;
  margin: .5rem 0 0;
}

.div-block-19 {
  display: flex;
  flex-flow: column;
  gap: .75rem;
}

.hero-ss-titre-blk {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.hero-v-blk {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.v-blk {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.v-img {
  width: 22px;
  height: 22px;
}

.div-block-18 {
  flex: none;
  width: 40%;
}

.hero-img {
  width: 100%;
}

/* ==========================================================================
   Étapes ("Comment ça marche ?")
   ========================================================================== */
.etapes-blk {
  position: relative;
  width: 100%;
  padding-top: 3rem;
}

.etapes-row-blk {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.etapes-separateur {
  position: absolute;
  left: 50%;
  width: 3px;
  height: 100%;
  background-color: var(--gris-clair);
}

.etapes-separateur-rouge {
  position: absolute;
  left: 50%;
  width: 3px;
  height: 100%;
  background-color: var(--bleu-fonce);
  transform: scaleY(0);
  transform-origin: top;
}

.etapes-img-blk {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 50%;
  padding-right: 2.5rem;
  position: relative;
}

.etapes-img-blk._2 {
  justify-content: flex-start;
  padding-right: 0;
  padding-left: 2.5rem;
}

.etapes-img {
  width: 100px;
  position: absolute;
  opacity: 0;
  transition: opacity .4s ease;
}

.etapes-img-gris {
  width: 100px;
  opacity: 1;
  transition: opacity .4s ease;
}

.etapes-row-blk.is-active .etapes-img {
  opacity: 1;
}

.etapes-row-blk.is-active .etapes-img-gris {
  opacity: 0;
}

.etapes-txt-blk {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 1.25rem;
  width: 50%;
  padding: 2.5rem 3rem 3rem;
}

.etapes-txt-blk._2 {
  align-items: flex-end;
  padding-left: 0;
  padding-right: 3rem;
  text-align: right;
}

.etapes-titre-num-txt {
  background-color: var(--gris-clair);
  color: #fff;
  font-size: var(--txt-grand);
  padding: .5rem .75rem;
  margin-left: -3rem;
  transition: background-color .4s ease;
}

.etapes-titre-num-txt.l {
  margin-left: 0;
  margin-right: -3rem;
}

.etapes-row-blk.is-active .etapes-titre-num-txt {
  background-color: var(--rouge);
}

.etapes-txt-blk .h2 {
  transition: color .4s ease;
}

.etapes-row-blk.is-active .h2.gris {
  color: var(--bleu-fonce);
}

/* ==========================================================================
   Services ("On vous simplifie la vie")
   ========================================================================== */
.container.services {
  flex-flow: row;
  align-items: center;
  position: relative;
}

.image-5 {
  width: 45%;
  margin-right: -5rem;
}

.div-block-21 {
  position: relative;
  z-index: 1;
  display: flex;
  flex-flow: column;
  gap: .5rem;
  background-color: #fff;
  margin-left: -3rem;
  padding: 3rem 5rem 3rem 3rem;
  box-shadow: 0 0 50px #0000006e;
}

.div-block-23 {
  display: flex;
  flex-flow: column;
  gap: .6rem;
  margin-top: 1.5rem;
}

.bouton-blk._2 {
  margin-top: 1rem;
}

/* ==========================================================================
   Simulation
   ========================================================================== */
.section.simulation {
  background-color: var(--bleu-fonce);
}

.h1.blanc {
  color: var(--bleu-clair-bg);
}

.txt-light.blanc {
  color: var(--bleu-clair-alt);
  font-weight: 400;
  margin-bottom: 3rem;
}

.search-form-blk {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2.5rem;
  width: 100%;
}

.search-field-blk {
  display: flex;
  flex-flow: column;
  gap: .4rem;
}

.search-txt {
  color: var(--bleu-clair-bg);
  font-size: var(--txt);
}

.search-slct,
.search-fied {
  width: 300px;
  border-radius: var(--radius);
  background-color: transparent;
  border: 1px solid var(--bleu-clair-bg);
  color: var(--bleu-clair-alt);
  padding: .75rem 1rem;
  font-size: var(--txt);
}

.search-slct option {
  color: #000;
}

.div-block-22 {
  position: relative;
}

.search-btn {
  width: 300px;
  border: none;
  border-radius: var(--radius);
  background-color: var(--bleu-clair-bg);
  color: var(--bleu-fonce);
  font-size: var(--txt-petit);
  font-weight: 700;
  padding: .9rem 1rem;
  filter: drop-shadow(0 0 3px var(--bleu-clair-bg));
  transition: filter .2s ease;
}

.search-btn:hover {
  filter: drop-shadow(0 0 10px var(--bleu-clair-bg));
}

/* ==========================================================================
   Slider actualités
   ========================================================================== */
.div-block-13 {
  position: relative;
  width: 100%;
  margin-top: 3rem;
}

.slider {
  position: relative;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
}

.mask {
  display: flex;
  width: fit-content;
  height: 450px;
  transition: transform .5s ease;
}

.actu-slide {
  flex: none;
  width: 300px;
  height: 450px;
  margin-right: 2rem;
}

.actus-blk {
  position: relative;
  display: flex;
  flex-flow: column;
  width: 100%;
  height: 100%;
  padding: 1.5rem 1.5rem 3rem;
  background-color: #201e1e;
  background-size: cover;
  background-position: 0 0;
  gap: 1rem;
}

/* voile blanc translucide posé sur la photo de fond (repris du site source) */
.div-block-14 {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #ffffffe6;
  box-shadow: 0 0 5px #0000004d;
}

.actus-blk > *:not(.div-block-14):not(.actu-link-blk) {
  position: relative;
  z-index: 1;
}

.actu-tr-s-petit-txt {
  color: var(--gris-clair);
  font-size: var(--txt-tres-petit);
  font-weight: 700;
}

.actu-badge-txt {
  display: inline-block;
  align-self: flex-start;
  padding: 2px 8px;
  font-size: var(--txt-tres-petit);
  font-weight: 700;
  background-color: var(--bleu-fonce);
  color: #fff;
}

.actu-badge-txt.rouge {
  background-color: var(--rouge-txt);
}

.actu-titre-txt {
  color: var(--bleu-fonce);
  font-size: var(--h4);
  font-weight: 700;
  line-height: 1.15;
}

.actu-titre-txt.rouge {
  color: var(--rouge-txt);
}

.txt-light.relative {
  font-size: var(--txt-petit);
}

.actu-budget-txt {
  color: var(--bleu-fonce);
  font-size: var(--txt-petit);
  font-weight: 700;
}

.actu-budget-txt.rouge {
  color: var(--rouge-txt);
}

.div-block-15 {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: .7rem;
  margin-top: auto;
}

.actu-link-blk {
  position: absolute;
  z-index: 1;
  bottom: 1rem;
  right: 1.5rem;
  display: block;
}

.image-4 {
  width: 20px;
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: .5rem;
  color: var(--bleu-fonce);
  font-size: 2rem;
  line-height: 1;
  z-index: 2;
}

.slider-arrow.prev {
  left: 0;
}

.slider-arrow.next {
  right: 0;
}

/* ==========================================================================
   Bandeau newsletter
   ========================================================================== */
.section.abo {
  padding-top: 0;
}

.info-blk {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 2rem 4rem 2rem 3rem;
  background-color: var(--bleu-clair-alt);
  gap: 2rem;
}

.info-txt-blk {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
  flex: 0 auto;
}

.info-img-blk {
  flex: none;
}

.info-img {
  width: 200px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.section.footer {
  background-color: var(--bleu-clair-alt);
}

.div-block-2 {
  display: flex;
  flex-flow: column;
  gap: 7px;
}

.logo.footer {
  height: 96px;
}

.header-logo-blk.footer {
  flex-flow: row;
  align-items: center;
  height: auto;
  margin: 3rem 0;
  padding-left: 0;
  gap: 3rem;
  display: flex;
}

.rs-logo-blk.footer {
  margin-top: .5rem;
}

.div-block-3 {
  flex: 1;
  max-width: 609px;
}

.txt-min-footer {
  color: var(--gris-clair);
  font-size: var(--txt-tres-petit);
  margin-bottom: 12px;
  padding-bottom: 4px;
}

.txt-min-footer._2 {
  border-bottom: .5px solid var(--gris-clair);
}

.flex-block {
  display: flex;
  margin-bottom: 2rem;
}

.footer-separateur {
  width: 1px;
  height: 23px;
  background-color: var(--gris-clair);
  margin: 0 .5rem;
}

/* ==========================================================================
   Modale contact
   ========================================================================== */
.contact-overlay-blk {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, .5);
  padding: 1.5rem;
}

.contact-overlay-blk.is-open {
  display: flex;
}

.contact-form {
  position: relative;
  width: 100%;
  max-width: 560px;
}

.contact-form-blk {
  display: flex;
  flex-flow: column;
  align-items: flex-end;
  gap: 1rem;
  padding: 2rem;
  border-radius: 20px;
  background-color: #fefeffbf;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.bouton-x-blk {
  position: absolute;
  top: -10px;
  right: -10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--bleu-clair-bg);
  text-decoration: none;
  border: none;
}

.bouton-x-txt {
  color: var(--bleu-fonce);
  font-size: 17px;
  font-weight: 700;
}

.div-block-26 {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  width: 100%;
  gap: .25rem;
}

.contact-field,
.contact-txtarea {
  width: 100%;
  border: none;
  border-radius: var(--radius);
  background-color: #fff;
  padding: .75rem 1rem;
  font-family: inherit;
  font-size: var(--txt);
  margin-bottom: .5rem;
}

.contact-txtarea {
  resize: vertical;
  min-height: 100px;
}

.contact-btn {
  width: 100%;
  border: none;
  border-radius: var(--radius);
  background-color: var(--bleu-fonce);
  color: var(--bleu-clair-alt);
  font-weight: 700;
  padding: 1rem;
  margin-top: 1rem;
  font-size: var(--txt);
}

.contact-btn:hover {
  filter: drop-shadow(0 0 20px var(--bleu-fonce));
}

.form-success {
  display: none;
  color: var(--bleu-fonce);
  font-weight: 700;
  margin-top: .75rem;
}

.form-success.is-visible {
  display: block;
}

/* ==========================================================================
   Media queries (repris des breakpoints Webflow : 991 / 767 / 479)
   ========================================================================== */
@media screen and (max-width: 991px) {
  .container {
    padding: 0 2rem;
  }

  .container.services {
    flex-flow: column;
  }

  .hero-txt {
    font-size: 3rem;
  }

  .h1 {
    font-size: 2.8rem;
  }

  .h2 {
    font-size: 2rem;
  }

  .div-block-17 {
    flex-flow: column;
    align-items: flex-start;
  }

  .div-block-18 {
    width: 60%;
  }

  .rs-logo-blk {
    display: none;
  }

  .image-5 {
    display: none;
  }

  .div-block-21 {
    margin-left: 0;
  }

  .header-logo-blk.footer {
    flex-flow: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

@media screen and (max-width: 767px) {
  .section {
    padding: 3rem 1.5rem;
  }

  .hero-blk {
    gap: 3rem;
  }

  .txt-light.blanc {
    display: none;
  }

  .info-blk {
    flex-flow: wrap;
  }

  .div-block-18 {
    display: none;
  }

  .image-5 {
    display: block;
    width: 100%;
    margin-right: 0;
  }

  .div-block-21 {
    max-width: 100%;
  }

  .search-slct,
  .search-fied,
  .search-btn {
    width: 100%;
  }

  .etapes-row-blk {
    flex-flow: column;
    align-items: flex-start;
  }

  .etapes-img-blk,
  .etapes-txt-blk,
  .etapes-txt-blk._2 {
    width: 100%;
    padding: 1rem 0 2rem 2.5rem;
    text-align: left;
    align-items: flex-start;
  }

  .etapes-img-blk {
    justify-content: flex-start;
    padding-left: 2.5rem;
    padding-bottom: 2rem;
  }

  .etapes-separateur,
  .etapes-separateur-rouge {
    left: 1.1rem;
  }

  .etapes-titre-num-txt,
  .etapes-titre-num-txt.l {
    margin-left: 0;
    margin-right: 0;
  }

  .etapes-img,
  .etapes-img-gris {
    width: 60px;
  }
}

@media screen and (max-width: 479px) {
  .header-nav-blk {
    position: static;
    flex-flow: column;
    align-items: flex-start;
    height: auto;
    background-color: var(--bleu-clair-alt);
    padding: 0 1.5rem;
  }

  .header-blk {
    height: 0;
  }

  .header-logo-blk {
    align-items: center;
    width: 100%;
    padding: 30px 0 20px;
  }

  .header-nav-option-blk {
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    padding-bottom: 20px;
  }

  .option-txt {
    font-size: var(--txt-petit);
    padding: 0 8px 0 5px;
  }

  .option-txt._2 {
    display: none;
  }

  .option-txt.contact {
    display: flex;
  }

  .section.hero {
    padding: 3rem 1.5rem 2rem;
  }

  .hero-txt {
    color: var(--bleu-fonce);
    font-size: 2.2rem;
  }

  .txt-light {
    font-size: var(--txt-petit);
  }

  .h1 {
    font-size: 2rem;
  }

  .h1.blanc {
    font-size: 2.1rem;
  }

  .h2 {
    font-size: 1.6rem;
  }

  .bouton-link-blk,
  .bouton-link-blk._2 {
    width: 100%;
  }

  .div-block-2 {
    width: 100%;
  }

  .header-logo-blk.footer {
    margin: 2rem 0;
  }

  .flex-block {
    flex-wrap: wrap;
  }

  .contact-form-blk,
  .contact-btn {
    width: 100%;
  }
}