.page .standard-table{
  margin-bottom: 0;
}
.intro__cta .btn-primary {
--btn-border-color: var(--ev-primary);
--btn-hover-border-color: var(--ev-secondary);
}
.intro__cta.grid-cta{
  display: flex;
  gap: var(--ev-space-xs);
  flex-wrap: wrap !important;
}
.intro__cta.grid-cta .btn {
  white-space: unset !important;
  margin-right: unset !important;
}
.flexible-form__title-wrapper {
 background-color: var(--ev-dark) !important;
}

.form-control:focus{
  box-shadow: 0 0 0 .25rem rgba(203, 242, 132, 0.25);
}

figure img{
  object-fit: cover;
}
.intro__image.grid-image.loaded-image{
    width: 100%;
    height: 100%;
    min-width: 100%;
    max-width: 100%;
}
.discover__title {
  display: none;
}
.discover__body h2, .discover__body h3 {
	font-size: var(--ev-step-3);
}
.discover__body {
 font-size: var(--ev-step-0);
}

.page .linked-menu__item:not(:first-child) {
  margin-top: var(--ev-space-2xl);
}

.intro {
  background: var(--ev-dark);
}
.intro .btn-outline-primary{
  --btn-hover-bg: unset !important;
}

.banner-bg::after,
.form-page .flexible-form__title-wrapper::after {
  content:"";
  position:absolute;
  background-image:var(--bg-img);
  background-size:10%;
  background-repeat:no-repeat;
  background-position:right bottom;
  inset:0;
  z-index:-1;
  right: 1%;
}

@media(max-width: 479px){
  .banner-bg::after,
  .form-page .flexible-form__title-wrapper::after {
    background-size:20%;
  }
}

@media(min-width: 480px) and (max-width:767px){
  .banner-bg::after,
  .form-page .flexible-form__title-wrapper::after {
    background-size: 15%;
  }
}

@media(max-width:991px){
  .intro__grid.d-grid {
 			padding-right: unset !important;
			padding-block: var(--ev-space-xl);
		}
}
.breadcrumb-wrapper {
  background-color: transparent !important;
  padding-block: unset !important;
}
.intro .breadcrumb-wrapper {
	grid-area: breadcrumb;
	margin-bottom: calc(var(--ev-heading-margin-bottom)*1.0);
}
.intro__grid.d-grid {
grid-template-areas: "..       " "breadcrumb" "subtitle " "title    " "author   " "paragraph" "cta      " "..       ";
  /* le socle declare grid-template-rows: 1fr repeat(5, auto) 1fr (7 lignes) ;
     la ligne "breadcrumb" ajoutee ici en fait 8, donc le 1fr du bas retombait
     sur la ligne des boutons et tout l'espace libre s'accumulait en haut,
     avant le fil d'ariane. On redeclare les lignes pour les 8 zones. */
  grid-template-rows: 1fr repeat(6, auto) 1fr;
}
.intro .btn-primary{
	--btn-bg: var(--ev-primary);
  --btn-hover-bg: var(--ev-secondary);
}
.intro .btn-outline-primary{
  --btn-border-color: rgba(255, 255, 255, 0.28);
  --btn-color: #fff;
  --btn-hover-color: var(--ev-primary);
  --btn-hover-border-color: var(--ev-primary);
}
.intro__cta  .btn-primary {
--btn-color: var(--ev-dark);
--btn-hover-color: #fff;
}
.intro__grid > *, .intro__subtitle.subtitle.grid-subtitle{
  color: #fff !important;
}
.intro__subtitle.subtitle.grid-subtitle::before{
  content: unset !important;
}
.intro__subtitle.subtitle{
   padding-left: unset !important;
}
.subtitle{
  position: relative;
  color: var(--ev-primary);
  padding-left: var(--ev-space-l);
  text-transform: uppercase;
}
.subtitle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:url(https://serveur-images.devil-it-applications.fr/quick-renov/upload/subtitle-icone_1744647650.svg);
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: left center;
}

.btn-primary, .btn-outline-primary{
  position: relative;
  --btn-hover-color: white;
  --btn-hover-border-color: var(--ev-dark);
}
.btn-primary::before, .btn-outline-primary::before{
  content: "";
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  width: 0%;
  background-color: var(--ev-dark);
  z-index: -1;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
.btn-primary::after, .btn-outline-primary::after {
  content: "";
  position: absolute;
  height: 100%;
  top: 0;
  right: 0;
  width: 0%;
  background-color: var(--ev-dark);
  z-index: -1;
 -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

.btn-primary:hover::before,
.btn-primary:hover::after,
.btn-outline-primary:hover::before,
.btn-outline-primary:hover::after{
  width: 51%;
}

.page {
	margin-top: 0;
}

[id^="article_link"] main {
  margin-block: 0 var(--ev-space-2xl-3xl);
}

.hero.section-inspector {
  margin-top: 0 !important;
}

.form-page .flexible-form__title-wrapper,
.banner.banner-bg.section-inspector {
  display: grid;
  align-items: end;
}

.banner-bg, .form-page .flexible-form__title-wrapper {
  --bg-color: var(--ev-dark);
  --bg-text-color: #fff;
  --bg-img: url(https://serveur-images.devil-it-applications.fr/quick-renov/upload/diagnostic-illustration_1744272258.svg);
  box-shadow: var(--ev-shadow-lg);
}


.breadcrumb-wrapper {
  background-color: var(--ev-light);
  padding-block: var(--ev-space-s);
}
/* hero section */
.hero {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* 80% etouffait la photo ; 55% la laisse lisible tout en gardant le texte blanc contraste */
  background-color: rgba(var(--ev-dark-rgb), 55%);
  z-index: -1;
}
/* .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--image-bg);
  background-size: cover;
  background-position: center;
  z-index: -2;
}
.hero[style*="--image-bg:url()"] {
  --image-bg: url(https://picsum.photos/2000/1000) !important;
} */
/* Le mecanisme reellement actif est le carrousel JS (objet.js, Hero#8848) qui
   lit data-images et injecte deux <div class="bg-layer"> en fondu enchaine ;
   sans regle CSS ces divs restaient invisibles (aucune taille/position), d'ou
   le bandeau hero qui n'affichait jamais aucune des 3 photos configurees. */
.bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: -2;
}
.bg-layer.active {
  opacity: 1;
}
.hero__content :not(.btn-primary) {
  color: white;
}
.hero__content {
  --header-height: 140px;
  display: grid;
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100dvh - var(--header-height));
}
.hero__content[data-content-align="center"] {
  text-align: center;
  margin-inline: auto;
  place-items: center;
}
.hero__content[data-content-align="center"] .hero__cta {
  width: fit-content;
  margin-inline: auto;
  place-content: center;
}
.hero__grid {
  grid-template-areas:
    "subtitle " 
    "title    " 
    "author   " 
    "paragraph" 
    "cta      ";
  place-content: center;
  padding-block: var(--ev-space-xl);
}
.hero__title {
  font-size: var(--ev-step-7);
  margin-bottom: var(--ev-space-m);
}
.hero__description {
  font-size: var(--ev-step-1);
}
.hero__cta {
  margin-top: var(--ev-space-m);
}

.hero__title.title.grid-title{
  font-weight: 800;
}

.hero__content[data-content-align="start"] {
  text-align: center;
}
.hero__content[data-content-align="start"] .hero__cta.grid-cta {
  margin-inline: auto;
}
.hero__subtitle{
  color: var(--ev-primary) !important;
  text-transform: uppercase;
}
/* fin hero section */
@media (width > 992px) {
  .nav-item.nav-item--home .text {
    display: none;
  }
}

.form-check {
  padding-left: 0;
}

.form-check-input[type="checkbox"],
.form-check-input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.form-check-label {
  display: inline-block;
  padding: 10px 20px;
  margin: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f7f7f7;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease;
}

.form-check-input[type="checkbox"]:checked + .form-check-label {
  background-color: var(--ev-primary);
  border-color: var(--ev-primary);
  color: var(--ev-heading-color);
}

.form-check-input[type="radio"]:checked + .form-check-label {
  background-color: var(--ev-primary);
  border-color: var(--ev-primary);
  color: var(--ev-heading-color);
}

.form-check-label:hover {
  border-color: #999;
}
.form-check-input[type="radio"]:focus + .form-check-label,
.form-check-input[type="checkbox"]:focus + .form-check-label {
  outline: 2px dashed var(--ev-primary);
  outline-offset: 4px;
}

.form-check-label {
	display: flex;
	place-content: center;
	place-items: center;
	gap: var(--ev-space-xs);
}
.invalid + .form-check-label {
	border-color: var(--ev-danger);
}
.container-fluid {
  padding-inline:var(--ev-grid-gutter);
  width: 100%;
}


@media (width > 992px) {
  .container-fluid {
    padding-inline: var(--ev-space-2xl);
  }
}
.form-check-group {
	display: flex;
	flex-wrap: wrap;
}
.form-check-group > * {
	width: fit-content;
}
@media (max-width: 600px) {
  .intro__grid.d-grid {
    padding-block: unset !important;
    padding-bottom: var(--ev-space-xl) !important;
  }
  .intro__cta.grid-cta .btn{
    font-size: var(--ev-step--2);
    --ev-btn-padding-x: 0.5em;
  }
}
#home .main-content > * {
	margin-top: var(--ev-space-3xl);
}


.form-check-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-check-group .form-check {
  margin: 0;
}

.form-check-label {
  margin: 0;
  width: 100%;
  height: 100%;
}

.form-check-label {
  flex-wrap: wrap;
  text-align: center;
}

.form-check {
  width: 100%;
  height: 100%;
}

@media (width > 768px) {
  .form-check-group {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (min-width: 1600px) {
.modal-xl {
	--bs-modal-width: calc(var(--ev-grid-max-width) - var(--bs-modal-margin)*2);
}
}
.paragraph__item--Centre .paragraph__grid {
	grid-template-areas: "title    " "paragraph" "img      " "cta      ";
}
.form-page .flexible-form__title-wrapper, .banner.banner-bg {
	min-height: 22vh;
}
.subtitle {
	color: hsl(var(--ev-primary-hue), var(--ev-primary-saturation), calc(var(--ev-primary-lightness) + -6%));
}
.paragraph__item--Centre .paragraph__image.grid-image {
--border-color: hsl(var(--ev-primary-hue), var(--ev-primary-saturation), calc(var(--ev-primary-lightness) + 30%));
border: var(--ev-border-width) var(--ev-border-style) var(--border-color);
border-radius: 0;
margin-top: var(--ev-space-xl);
}
@media (min-width: 1200px) {
.flexible-form__body .col-xl-6 {
	width: 55%;
}
}
@media (width > 1024px) {
.form-check-group {
	grid-template-columns: auto auto auto auto;
}
}
/* #page_link-2511114500 li.breadcrumb-item:nth-child(2) {
	display: none;
}
[id^="compose_page-"] li.breadcrumb-item:nth-child(2) {
	display: none;
} */
h1 b,
h1 strong,
.h1 b,
.h1 strong,
h2 b,
h2 strong,
.h2 b,
.search .search-title b,
.h2 strong,
.search .search-title strong,
h3 b,
h3 strong,
.h3 b,
.h3 strong,
h4 b,
h4 strong,
.h4 b,
.flexible-form__step-title b,
.h4 strong,
.flexible-form__step-title strong,
h5 b,
h5 strong,
.h5 b,
.h5 strong,
h6 b,
h6 strong,
.h6 b,
.h6 strong {
  font-weight:var(--ev-heading-font-weight, bold);
  color: hsl(var(--ev-primary-hue), var(--ev-primary-saturation), calc(var(--ev-primary-lightness) + -6%));
}
@media (min-width: 768px) {
	.breadcrumb-wrapper .container {
		max-width: unset !important;
    padding-inline: 0 !important;
	}
}

.article--details .paragraph > * {
	margin-top: var(--ev-space-2xl-3xl);
}
img[src*="picsum.photos"],
img[srcset*="picsum.photos"],
source[srcset*="picsum.photos"] {
  display:none !important; 
}
.breadcrumb-wrapper .container {
	padding-inline: 0;
}
figure.form-check-figure.loaded-image {
 	height: 30px;
  max-height: 30px;
}
.flexible-form .form-check-text {
 	margin-top: 0 !important;
}
@media (max-width: 479px) {
 .banner-bg::after,
 .form-page .flexible-form__title-wrapper::after {
		background-size: 15%;
	}
}
@media (min-width: 480px) and (max-width: 767px) {
	.banner-bg::after, 
  .form-page .flexible-form__title-wrapper::after {
		background-size: 15%;
    background-position: right top;
		top: 3%;
	}
}
.flexible-form .form-check-label {
    grid-template-areas: "figure text ";
    /* Le style de base (style.css) definit une grille sur 2 lignes ("figure"
       puis "text", grid-template-rows: auto 1fr) ; en la reduisant a 1 seule
       ligne ("figure text ") sans redeclarer grid-template-rows, une 2e ligne
       fantome restait reservee en bas de l'encadre (le "1fr" herite), ce qui
       poussait le texte vers le haut au lieu de le centrer verticalement. */
    grid-template-rows: auto;
    align-content: center;
}
.figure.form-check-figure {
  height: 30px;
  max-height: 30px;
}
.form-check-figure {
  background: transparent;
}
.form-check-figure .icon {
  --icon-height: 30px;
  --icon-color: var(--ev-primary);
}
.flexible-form .form-check-input[type="radio"]:checked + .form-check-label .icon,
.flexible-form .form-check-input[type="checkbox"]:checked + .form-check-label .icon {
	--icon-color: var(--ev-heading-color) !important;
}
.flexible-form .flexible-form__title-wrapper {
  padding: var(--ev-space-l);
  text-align: left;
  justify-items: start;
}
.flexible-form .flexible-form__title-wrapper .container {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}
.flexible-form__title,
.flexible-form__description {
  color: #fff;
}
.form-page .flexible-form__title-wrapper::after {
  opacity: 0.5;
}
/* Banniere de page en fond encre : fil d'ariane lisible */
.intro .breadcrumb {
  --bs-breadcrumb-divider-color: rgba(255, 255, 255, 0.5);
  --bs-breadcrumb-item-active-color: rgba(255, 255, 255, 0.65);
}
.intro .breadcrumb-text {
  color: #fff;
}
.intro .breadcrumb-text:hover {
  color: var(--ev-primary);
}

/* Formulaire : inversion des deux colonnes -- la carte recapitulative
   ("Devis diagnostic immobilier") passe a gauche, les etapes a droite.
   Uniquement quand les colonnes sont cote a cote : en dessous de 768px elles
   s'empilent et les champs a remplir doivent rester en premier. */
@media (min-width: 768px) {
  .flexible-form__body .row > #recapCard {
    order: -1;
  }
}

/* Le bandeau de titre est deplace au runtime DANS .flexible-form__container.
   Sans zone de grille assignee il etait place automatiquement : en colonne
   supplementaire a droite (>=576px, a cause de grid-auto-flow:column) et en
   ligne supplementaire SOUS le formulaire en mobile. On lui donne une zone
   explicite en haut, sur toute la largeur. */
.flexible-form__container {
  grid-template-areas: "title" "step" "content";
}
.flexible-form__container > .flexible-form__title-wrapper {
  grid-area: title;
}
@media (min-width: 576px) {
  .flexible-form__container {
    grid-auto-flow: row;
    grid-template-columns: auto 1fr;
    grid-template-areas: "title title" "step content";
  }
}

/* Fil d'ariane : sur petit ecran il passait a la ligne, laissant le separateur
   en tete de la 2e ligne. On reduit legerement la taille pour qu'il tienne sur
   une ligne, tout en gardant le retour a la ligne possible pour des chemins
   plus longs (avec un interligne propre dans ce cas). */
@media (max-width: 575.98px) {
  .intro .breadcrumb {
    font-size: 0.75rem;
    row-gap: 0.25rem;
  }
  .intro .breadcrumb-item {
    white-space: nowrap;
  }
}

/* Sans la ligne d'espacement fantome, le fil d'ariane venait coller au header
   sur mobile (le padding haut y est mis a 0 plus haut) : on redonne une
   respiration sous le header. */
@media (max-width: 600px) {
  .intro__grid.d-grid {
    padding-top: var(--ev-space-m) !important;
  }
}

/* Banniere de page : jusqu'a 991px l'image est empilee APRES tout le bloc de
   texte, donc sous les boutons -- elle se retrouvait detachee du titre. On la
   remonte entre le titre et la description (rythme classique titre > visuel >
   texte > action). Les wrappers passent en display:contents pour que le texte
   et l'image deviennent freres dans la meme grille ; les selecteurs (et donc
   les couleurs deja definies) restent valides, seules les boites disparaissent,
   d'ou le report des paddings sur le conteneur. */
@media (max-width: 991.98px) {
  .intro__content,
  .intro__grid.d-grid {
    display: contents;
  }
  .intro__container.d-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "breadcrumb" "subtitle" "title" "img" "paragraph" "cta";
    padding-inline: var(--ev-grid-gutter);
    padding-block: var(--ev-space-m) var(--ev-space-xl);
  }
  /* height:100% (pose par le socle, et renforce par .loaded-image ajoutee au
     chargement) faisait deborder l'image de sa ligne de grille : elle
     recouvrait la premiere ligne de la description. En pile, on la laisse
     se dimensionner sur son ratio. */
  .intro__image.grid-image,
  .intro__image.grid-image.loaded-image {
    height: auto;
    margin-block: var(--ev-space-s);
  }
}

/* Formulaire "Testez l'eligibilite de votre batiment" (destratification-thermique) :
   .flexible-form__title-wrapper (deja stylise en sombre) s'affichait comme une bandeau
   plein largeur redondant avec le hero de la page, coupant le formulaire en deux blocs
   empiles. On le transforme en colonne fixe a gauche ("Votre devis immediat"), le
   formulaire occupant la colonne de droite -- meme logique que groupecuratech.fr,
   sans creer de nouvelle classe ni toucher aux autres formulaires du site. */
#flexibleFormdestratification-thermique .flexible-form__container {
  display: flex;
  align-items: stretch;
}
/* Chaque etape a un nombre de champs different (l'etape "chauffage" est plus courte
   que "vos coordonnees"), et align-items:stretch fait que le panneau de gauche
   grandit/retrecit avec l'etape affichee -> on fixe une hauteur mini sur desktop
   (mesuree sur l'etape la plus haute, "Vos coordonnees") pour que le panneau reste
   stable ; en dessous de 993px le panneau repasse en flux normal (voir plus bas). */
@media (width >= 993px) {
  #flexibleFormdestratification-thermique .flexible-form__container {
    min-height: 720px;
  }
}
#flexibleFormdestratification-thermique .flexible-form__title-wrapper {
  order: -1;
  flex: 0 0 36%;
  min-height: 0;
  align-items: center;
}
#flexibleFormdestratification-thermique .flexible-form__steps {
  flex: 1 1 0;
  min-width: 0;
}
/* la carte recap (vide pour ce formulaire) reservait une 3e colonne invisible sur la
   droite ; on la masque et on laisse les champs utiliser toute la largeur restante. */
#flexibleFormdestratification-thermique #recapCard {
  display: none;
}
#flexibleFormdestratification-thermique .flexible-form__body .row > .col-lg-8 {
  flex: 0 0 100%;
  max-width: 100%;
}
@media (max-width: 992px) {
  #flexibleFormdestratification-thermique .flexible-form__container {
    flex-direction: column;
  }
  #flexibleFormdestratification-thermique .flexible-form__title-wrapper {
    flex-basis: auto;
  }
}

/* Meme mise en page (colonne titre/description a gauche, champs a droite) appliquee
   aux autres formulaires "pleine page" du site pour rester coherent avec
   destratification-thermique : Mon Accompagnateur Renov', Audit energetique,
   Diagnostic immobilier, HP Flottante. Les formulaires en popup (contactez-nous,
   demander-un-devis, planifiez-votre-rendez-vous) utilisent un autre gabarit et ne
   sont pas concernes ici. */
#flexibleFormmon-accompagnateur-renov .flexible-form__container,
#flexibleFormdemander-devis-audit-energetique .flexible-form__container,
#flexibleFormdemandez-un-devis-diagnostic-immobilier .flexible-form__container,
#flexibleFormhp-flottante .flexible-form__container {
  display: flex;
  align-items: stretch;
}
#flexibleFormmon-accompagnateur-renov .flexible-form__title-wrapper,
#flexibleFormdemander-devis-audit-energetique .flexible-form__title-wrapper,
#flexibleFormdemandez-un-devis-diagnostic-immobilier .flexible-form__title-wrapper,
#flexibleFormhp-flottante .flexible-form__title-wrapper {
  order: -1;
  flex: 0 0 36%;
  min-height: 0;
  align-items: center;
}
#flexibleFormmon-accompagnateur-renov .flexible-form__steps,
#flexibleFormdemander-devis-audit-energetique .flexible-form__steps,
#flexibleFormdemandez-un-devis-diagnostic-immobilier .flexible-form__steps,
#flexibleFormhp-flottante .flexible-form__steps {
  flex: 1 1 0;
  min-width: 0;
}
#flexibleFormmon-accompagnateur-renov #recapCard,
#flexibleFormdemander-devis-audit-energetique #recapCard,
#flexibleFormdemandez-un-devis-diagnostic-immobilier #recapCard,
#flexibleFormhp-flottante #recapCard {
  display: none;
}
#flexibleFormmon-accompagnateur-renov .flexible-form__body .row > .col-lg-8,
#flexibleFormdemander-devis-audit-energetique .flexible-form__body .row > .col-lg-8,
#flexibleFormdemandez-un-devis-diagnostic-immobilier .flexible-form__body .row > .col-lg-8,
#flexibleFormhp-flottante .flexible-form__body .row > .col-lg-8 {
  flex: 0 0 100%;
  max-width: 100%;
}
@media (max-width: 992px) {
  #flexibleFormmon-accompagnateur-renov .flexible-form__container,
  #flexibleFormdemander-devis-audit-energetique .flexible-form__container,
  #flexibleFormdemandez-un-devis-diagnostic-immobilier .flexible-form__container,
  #flexibleFormhp-flottante .flexible-form__container {
    flex-direction: column;
  }
  #flexibleFormmon-accompagnateur-renov .flexible-form__title-wrapper,
  #flexibleFormdemander-devis-audit-energetique .flexible-form__title-wrapper,
  #flexibleFormdemandez-un-devis-diagnostic-immobilier .flexible-form__title-wrapper,
  #flexibleFormhp-flottante .flexible-form__title-wrapper {
    flex-basis: auto;
  }
}

/* Meme mise en page pour les 3 formulaires ouverts en popup (contactez-nous,
   demander-un-devis, planifiez-votre-rendez-vous) : ils utilisent exactement le
   meme composant .flexible-form, juste charge dans l'iframe de la popin plutot
   qu'une page classique, donc la meme regle s'applique a l'identique. */
#flexibleFormcontactez-nous .flexible-form__container,
#flexibleFormdemander-un-devis .flexible-form__container,
#flexibleFormplanifiez-votre-rendez-vous .flexible-form__container {
  display: flex;
  align-items: stretch;
}
#flexibleFormcontactez-nous .flexible-form__title-wrapper,
#flexibleFormdemander-un-devis .flexible-form__title-wrapper,
#flexibleFormplanifiez-votre-rendez-vous .flexible-form__title-wrapper {
  order: -1;
  flex: 0 0 36%;
  min-height: 0;
  align-items: center;
}
#flexibleFormcontactez-nous .flexible-form__steps,
#flexibleFormdemander-un-devis .flexible-form__steps,
#flexibleFormplanifiez-votre-rendez-vous .flexible-form__steps {
  flex: 1 1 0;
  min-width: 0;
}
#flexibleFormcontactez-nous #recapCard,
#flexibleFormdemander-un-devis #recapCard,
#flexibleFormplanifiez-votre-rendez-vous #recapCard {
  display: none;
}
#flexibleFormcontactez-nous .flexible-form__body .row > .col-lg-8,
#flexibleFormdemander-un-devis .flexible-form__body .row > .col-lg-8,
#flexibleFormplanifiez-votre-rendez-vous .flexible-form__body .row > .col-lg-8 {
  flex: 0 0 100%;
  max-width: 100%;
}
@media (max-width: 992px) {
  #flexibleFormcontactez-nous .flexible-form__container,
  #flexibleFormdemander-un-devis .flexible-form__container,
  #flexibleFormplanifiez-votre-rendez-vous .flexible-form__container {
    flex-direction: column;
  }
  #flexibleFormcontactez-nous .flexible-form__title-wrapper,
  #flexibleFormdemander-un-devis .flexible-form__title-wrapper,
  #flexibleFormplanifiez-votre-rendez-vous .flexible-form__title-wrapper {
    flex-basis: auto;
  }
}

/* Les boutons Precedent/Suivant (.flexible-form__footer) sont un frere de
   .flexible-form__body, pas un enfant des etapes : leur position verticale suivait
   la hauteur du contenu de l'etape affichee, donc ils "sautaient" en meme temps que
   le panneau titre. En rendant .flexible-form__wrapper/.flexible-form__content des
   colonnes flex et en poussant le footer en bas (margin-top:auto), les boutons
   restent ancres en bas de la zone maintenant a hauteur fixe, quelle que soit
   l'etape. Regle commune aux 8 formulaires deja passes en 2 colonnes. */
#flexibleFormdestratification-thermique .flexible-form__wrapper,
#flexibleFormmon-accompagnateur-renov .flexible-form__wrapper,
#flexibleFormdemander-devis-audit-energetique .flexible-form__wrapper,
#flexibleFormdemandez-un-devis-diagnostic-immobilier .flexible-form__wrapper,
#flexibleFormhp-flottante .flexible-form__wrapper,
#flexibleFormcontactez-nous .flexible-form__wrapper,
#flexibleFormdemander-un-devis .flexible-form__wrapper,
#flexibleFormplanifiez-votre-rendez-vous .flexible-form__wrapper {
  display: flex;
  flex-direction: column;
}
#flexibleFormdestratification-thermique .flexible-form__content,
#flexibleFormmon-accompagnateur-renov .flexible-form__content,
#flexibleFormdemander-devis-audit-energetique .flexible-form__content,
#flexibleFormdemandez-un-devis-diagnostic-immobilier .flexible-form__content,
#flexibleFormhp-flottante .flexible-form__content,
#flexibleFormcontactez-nous .flexible-form__content,
#flexibleFormdemander-un-devis .flexible-form__content,
#flexibleFormplanifiez-votre-rendez-vous .flexible-form__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
#flexibleFormdestratification-thermique .flexible-form__footer,
#flexibleFormmon-accompagnateur-renov .flexible-form__footer,
#flexibleFormdemander-devis-audit-energetique .flexible-form__footer,
#flexibleFormdemandez-un-devis-diagnostic-immobilier .flexible-form__footer,
#flexibleFormhp-flottante .flexible-form__footer,
#flexibleFormcontactez-nous .flexible-form__footer,
#flexibleFormdemander-un-devis .flexible-form__footer,
#flexibleFormplanifiez-votre-rendez-vous .flexible-form__footer {
  margin-top: auto;
}

/* Hauteur fixe du panneau (voir plus haut pour destratification-thermique), mesuree
   sur l'etape la plus haute de chaque formulaire, appliquee uniquement en desktop. */
@media (width >= 993px) {
  /* mon-accompagnateur-renov, demander-devis-audit-energetique et
     demandez-un-devis-diagnostic-immobilier existent a la fois en page dediee ET en
     popup (bouton "Se faire accompagner", "Demander un audit"...). La popin est
     limitee a 90vh avec defilement interne : un plancher mesure pour la page (ou la
     place ne manque pas) y forcait un defilement/etirement inutile pour des etapes
     bien plus courtes. On applique donc un plancher plus compact par defaut (pense
     pour la popin), releve uniquement quand le formulaire est sur sa page dediee
     (presence d'un ancetre .page, absent dans l'iframe de la popin). */
  #flexibleFormmon-accompagnateur-renov .flexible-form__container {
    min-height: 650px;
  }
  .page #flexibleFormmon-accompagnateur-renov .flexible-form__container {
    min-height: 1050px;
  }
  #flexibleFormdemander-devis-audit-energetique .flexible-form__container {
    min-height: 520px;
  }
  .page #flexibleFormdemander-devis-audit-energetique .flexible-form__container {
    min-height: 745px;
  }
  #flexibleFormdemandez-un-devis-diagnostic-immobilier .flexible-form__container {
    min-height: 680px;
  }
  .page #flexibleFormdemandez-un-devis-diagnostic-immobilier .flexible-form__container {
    min-height: 930px;
  }
  /* Etape 2 ("Description de vos besoins") fait ~1730px, bien plus que l'etape 1
     (~670px) : fixer la hauteur sur l'etape la plus longue rendait l'etape 1
     excessivement longue (grand vide sous le texte). On fixe plutot le plancher sur
     l'etape courante/typique (comme les autres formulaires) ; l'etape longue reste
     libre de depasser cette hauteur (min-height est un plancher, pas un plafond),
     donc rien n'est coupe, elle est juste plus haute sur cette seule etape. */
  #flexibleFormhp-flottante .flexible-form__container {
    min-height: 720px;
  }
  #flexibleFormcontactez-nous .flexible-form__container {
    min-height: 825px;
  }
  #flexibleFormdemander-un-devis .flexible-form__container {
    min-height: 675px;
  }
  /* Etape 1 ("Quand souhaitez-vous qu'on intervienne", nombreux creneaux) fait
     ~1170px, bien plus que les 2 autres (~390-695px) : meme correctif que
     hp-flottante, le plancher est fixe sur les etapes typiques et non sur celle-ci,
     qui reste libre de depasser cette hauteur quand elle est affichee. */
  #flexibleFormplanifiez-votre-rendez-vous .flexible-form__container {
    min-height: 745px;
  }
}

/* .flexible-form__recaptcha-info (texte reCAPTCHA/RGPD sous les boutons) a deja son
   propre margin-top:auto dans le socle -- avec celui ajoute sur .footer ci-dessus,
   les deux se partageaient l'espace libre restant, laissant un grand vide entre le
   bouton et ce texte sur les etapes courtes. Le bouton absorbe desormais tout
   l'espace disponible ; le texte reCAPTCHA le suit directement, sans marge. */
#flexibleFormdestratification-thermique .flexible-form__recaptcha-info,
#flexibleFormmon-accompagnateur-renov .flexible-form__recaptcha-info,
#flexibleFormdemander-devis-audit-energetique .flexible-form__recaptcha-info,
#flexibleFormdemandez-un-devis-diagnostic-immobilier .flexible-form__recaptcha-info,
#flexibleFormhp-flottante .flexible-form__recaptcha-info,
#flexibleFormcontactez-nous .flexible-form__recaptcha-info,
#flexibleFormdemander-un-devis .flexible-form__recaptcha-info,
#flexibleFormplanifiez-votre-rendez-vous .flexible-form__recaptcha-info {
  margin-top: 0;
}

/* Formulaire "Planifiez votre rendez-vous" -- le champ "creneaux" (cases a cocher)
   n'avait aucune mise en page de grille (.step_decale, contrairement aux boutons
   radio qui en ont deja une), donc chaque option s'affichait seule sur sa ligne.
   3 colonnes en desktop pour un meilleur rendu visuel, comme demande. */
#flexibleFormplanifiez-votre-rendez-vous .step_decale {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ev-space-3xs-2xs, .5rem);
}
@media (max-width: 767px) {
  #flexibleFormplanifiez-votre-rendez-vous .step_decale {
    grid-template-columns: 1fr;
  }
}

/* Menus deroulants du header (Audit energetique, Diagnostic immobilier...) :
   .navbar .nav-item:hover .dropdown-menu positionnait le menu 16px sous le lien
   (--navbar-dropdown-menu-top-spacer). Cet espace vide n'appartient ni au lien ni
   au menu, donc :hover se coupait pendant que la souris le traversait pour
   atteindre un element de la liste, fermant le menu avant le clic. Le menu colle
   maintenant directement sous le lien, sans zone morte. */
.navbar .nav-item:hover .dropdown-menu {
  --navbar-dropdown-menu-top-spacer: 0px;
}
/* Un second espace mort (~11-12px) restait malgre le correctif ci-dessus : la regle
   generique "ul:not(.list-style-none) { margin-block: ... }" (pensee pour les
   listes a puces du contenu editorial) s'applique aussi a .dropdown-menu, qui est
   un simple <ul> sans cette classe d'exclusion. Le selecteur ":not(.classe)" compte
   pour une specificite classe+type (0,1,1) : un simple ".dropdown-menu" (0,1,0) ne
   suffisait pas a le supplanter, d'ou la marge encore appliquee malgre ce correctif.
   On neutralise cette marge uniquement pour ce composant, avec une specificite plus
   elevee, sans toucher aux vraies listes a puces. */
.navbar .dropdown-menu {
  margin-block: 0;
}