.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;
  background-color: rgba(var(--ev-dark-rgb), 80%);
  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;
}
#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;
  }
}