#wrapper {
    padding-top: 1.563rem;
    background: white;
}


.header-top {
  width: 100%; /* Assure que la barre supérieure occupe toute la largeur */
}



.header-top .container {
  /*width: 100%; /* Le conteneur prend toute la largeur de son parent */
  /*padding-left: 0; /* Supprime la marge intérieure à gauche */
  /*padding-right: 0; /* Supprime la marge intérieure à droite */
  /*margin-left: 0; /* Supprime la marge à gauche (si elle est appliquée par défaut) */
  /*margin-right: 0; /* Supprime la marge à droite (si elle est appliquée par défaut) */
  /*max-width: none !important; /* Annule toute largeur maximale qui pourrait être définie par un framework comme Bootstrap */
}

.header-top .row {
  margin-left: 0; /* Supprime la marge à gauche des rangées (souvent utilisée par les frameworks) */
  margin-right: 0; /* Supprime la marge à droite des rangées */
}

/* Facultatif : Si vous souhaitez que le contenu à l'intérieur ait une marge,
   vous pouvez cibler les éléments enfants ou ajouter un conteneur interne. */
.header-top .row > div {
  /* Vous pouvez ajouter une marge ici si nécessaire, par exemple: */
  /* padding-left: 15px; */
  /* padding-right: 15px; */
}

#header .header-top .position-static {
    position: static;
    text-align: center;
}

#search_widget {
    min-width: 30rem;
    }

/* Si votre logo doit rester centré ou aligné d'une certaine manière,
   vous devrez peut-être ajuster son style individuellement. */
#_desktop_logo {
  /* Par exemple, pour le garder à gauche avec une marge: */
  /* margin-left: 15px; */
}

.header-top-right {
  /* Vous devrez peut-être ajuster l'alignement du contenu à droite */
}

/* Si vous avez des éléments de menu qui doivent être espacés,
   assurez-vous que leur style le permet sur toute la largeur. */
.top-menu {
  display: flex; /* Permet une meilleure gestion de l'espacement */
  justify-content: flex-start; /* Aligne les éléments au début (gauche) */
  /* ou space-around, space-between, etc., selon votre mise en page souhaitée */
}

.top-menu > li {
  /* Ajoutez des marges ou des paddings pour espacer les éléments du menu */
  margin-right: 10px;
}

/* la baniere sur la home */
    #wrapper .banner {
    display: block;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* les deux images cote a cote sur la home */
    #custom-text {
    margin-bottom: 1.5rem;
    padding: 0rem;
    border-radius: 2px;
    text-align: center;
    background: #fff;
}

/* Configurateur */

#configurator_block .step_group {
    border-left: 20px solid #ff9a52;
    border-bottom: 1px solid #eeeeee;
    padding-left: 10px;
    padding-bottom: 10px;
    position: relative;
}

.dmicons:after {
    content: "";
    /* background: url(../img/icon/chevron_right.png) no-repeat 0px 0px / 10px 10px;*/
    display: block;
    position: absolute;
    z-index: 1;
    width: 15px;
    height: 15px;
    left: -14px;
    top: 10px;
}

#configurator_block .input-group-addon {
    padding: 11px 57px 10px 10px;
    font-size: 13px;
    font-weight: normal;
    line-height: 1;
    text-align: center;
    background-color: #eeeeee;
    border: 1px solid #d6d4d4;
    border-radius: 0px;
    color: #777;
}

.btn-orange {
  display: inline-block;
  padding: 12px 24px;
  background-color: orange;
  color: white;
  text-decoration: none;
  font-weight: bold;
  border-radius: 8px;
  transition: background-color 0.3s, transform 0.1s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-orange:hover {
  background-color: darkorange;
  transform: scale(1.05);
}

.btn-orange:active {
  transform: scale(0.95);
}

/*
#configurator_block .step-color-texture .option_block, #configurator_block .step-color-texture .option_block .option_img {
    min-height: auto;
    width: 150px;
    height: 150px;
    }

#configurator_block .option_block.colortexture img {
    width: 100%;
    height: 150px;
}

#configurator_block .option_block.colortexture.selected .option_img {
    width: 150px;
}*/


#product .product-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
;
    flex-wrap: wrap;
}

#product .product-container .col-md-6 {
    max-width: 100%;
}

#product .product-container .col-md-6 #content {
    position: sticky;
    top: 50px;
}
/* Produits selection*/

.products-selection {
    margin-bottom: 1.25rem;
    display: none;
}

#pagenotfound .page-not-found, #products .page-not-found {
    max-width: 570px;
    padding: 1rem;
    display: none;
    margin: 0 auto;
    overflow: auto;
    font-size: .875rem;
    color: #7a7a7a;
    background: #fff;
}


/* Styles pour les titres de section sur la Home*/
.section-title {
    text-transform: uppercase;
    font-size: 1.5rem;
    font-weight: 500;
    color: #ff9a52;
    padding: 10px 0px 10px 0;
    text-align: center; /* J'ai supposé que c'était centré pour les titres de section */
}

/* Styles pour les cartes de produits */
.product-card {
    text-align: center;
    padding: 15px; /* Ajoutez un peu d'espacement si besoin */
    /* border: solid #ffa500;  Si vous voulez la bordure sur la deuxième section, appliquez-la ici ou sur une classe spécifique */
}

/* Styles pour les images de produits */
.product-image {
    -moz-box-shadow: 4px 4px 10px #888;
    -webkit-box-shadow: 4px 4px 10px #888;
    box-shadow: 4px 4px 6px #888;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Styles pour les descriptions de produits */
.product-description {
    color: #222222;
    font-family: Lato, Arial, Helvetica, Verdana;
    font-size: 15px;
    text-align: left; /* La description était en text-align: left; */
    background-color: #ffffff; /* Si nécessaire, sinon supprimez */
}

/* Styles pour les boutons "Configurer" */
.btn-configure {
    display: inline-block;
    padding: 12px 24px;
    background-color: orange;
    color: white; /* Couleur du texte par défaut */
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    transition: background-color 0.3s, transform 0.1s, color 0.3s; /* Ajoutez 'color 0.3s' pour une transition douce sur le texte */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: 15px; /* Pour un peu d'espacement avec le texte au-dessus */
}

.btn-configure:hover {
    background-color: darkorange; /* Changement de couleur de fond au survol */
    transform: translateY(-2px); /* Léger effet de soulèvement */
    color: black; /* <-- Nouvelle règle : le texte devient noir au survol */
}

/* Style spécifique pour la bordure sur la première colonne de la deuxième section si vous le souhaitez */
.row .col-sm-4:first-child.product-card.border-orange { /* Ajoutez border-orange à la div spécifique dans le HTML */
    border: solid #ffa500;
}

.lead {
    /* font-size: 1.25rem; */
    font-weight: 300;
    font-size: 15px;
}


/* --- Styles généraux pour le contenu textuel (MIS À JOUR) --- */
.content-block {
    margin-bottom: 30px; /* Espace après chaque bloc de contenu */
}

/* Nouvelle classe pour le titre qui contient l'image flottante */
.content-title-with-image {
    color: #232323;
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-family: 'Manrope', sans-serif;
    line-height: 1.1;
    font-size: 1.3125rem;
    background-color: #ffffff; /* Si nécessaire, sinon supprimez */
    /* Pas de display: flex ici car l'image flotte */
}

/* Nouvelle classe pour l'image flottante */
.content-image-float-left {
    float: left; /* Fait flotter l'image à gauche */
    margin-right: 20px; /* Ajoute un espace à droite de l'image pour séparer le texte */
    margin-bottom: 10px; /* Ajoute un petit espace en bas de l'image */
    max-width: 100%; /* S'assure que l'image ne dépasse pas */
    height: auto;
}

/* Pour le titre sans image flottante (si vous en avez d'autres) */
.content-title { /* Ceci est l'ancienne classe, si elle n'est plus utilisée, supprimez-la ou adaptez-la */
    color: #232323;
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-family: 'Manrope', sans-serif;
    line-height: 1.1;
    font-size: 1.3125rem;
    background-color: #ffffff;
    /* display: flex;  Ces propriétés sont pour aligner image et texte sur une même ligne, non compatible avec float */
    /* align-items: center; */
    /* gap: 15px; */
}


.content-subtitle {
    color: #232323;
    margin-top: 10px;
    margin-bottom: 0.5rem;
    font-family: 'Manrope', sans-serif;
    line-height: 1.1;
    font-size: 1.125rem;
    background-color: #ffffff;
}

.content-subtitle-centered {
    text-align: center;
    color: #232323;
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-family: 'Manrope', sans-serif;
    line-height: 1.1;
    font-size: 20px;
    background-color: #ffffff;
    padding-bottom: 20px;
}

.content-description {
    margin-top: 10px;
    margin-bottom: 1rem;
    font-size: 15px;
    color: #7a7a7a !important;
    font-family: 'Manrope', sans-serif;
    background-color: #ffffff;
    /* Pour s'assurer que le texte s'enroule correctement autour de l'image flottante */
    overflow: hidden; /* Important pour que le paragraphe contienne le flottement */
}

.content-list {
    margin-top: 0;
    margin-bottom: 1rem;
    padding-left: 0.75rem;
    list-style-position: inside;
    color: #232323;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    background-color: #ffffff;
    /* Pour s'assurer que la liste s'enroule correctement autour de l'image flottante */
    overflow: hidden;
}

.content-list li {
    font-size: 0.9375rem;
    color: #7a7a7a;
    margin-bottom: 10px;
}

.list-item-text {
    /* Styles spécifiques si le texte dans les <li> a besoin d'une couleur différente ou autre */
}

.highlight-text {
    font-weight: bolder;
}

/* Styles pour les images dans les blocs de contenu */
/* Ancien .content-image-left est remplacé par .content-image-float-left */

.content-image-center {
    display: block;
    margin: 0 auto 15px auto;
    max-width: 100%;
    height: auto;
}

/* --- Styles pour les sections "Volet roulant rénovation" et "traditionnel" (réutilisent des classes déjà définies) --- */
.section-title {
    text-transform: uppercase;
    font-size: 1.5rem;
    font-weight: 600 !important;
    color: #ff9a52 !important;
    padding: 20px 0 10px 0;
    text-align: center;
}

.product-card {
    text-align: center;
    padding: 15px;
    margin-bottom: 20px;
}

.product-card-bordered {
    border: solid #ffa500;
}

.product-image {
    width: 100%;
    max-width: 300px;
    height: auto;
    /* Les ombres ont été retirées, si vous les voulez :
    -moz-box-shadow: 4px 4px 10px #888;
    -webkit-box-shadow: 4px 4px 10px #888;
    box-shadow: 4px 4px 6px #888;
    */
}

.product-name {
    margin-top: 10px;
    margin-bottom: 5px;
    font-weight: bold;
}

.product-description {
    font-size: 15px;
    color: #7a7a7a;
    font-family: 'Manrope', sans-serif;
    text-align: left;
    margin-bottom: 10px;
}

.product-price {
    padding-top: 15px;
    padding-bottom: 15px;
    font-weight: 600;
    font-size: 20px;
    color: #ffa500;
}

/* Styles pour les boutons "Configurer" */
.btn-configure {
    display: inline-block;
    padding: 12px 24px;
    background-color: #ffa500;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    transition: background-color 0.3s, transform 0.1s, color 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: 0.7rem;
}

.btn-configure:hover {
    background-color: #e68a00;
    color: black;
    transform: translateY(-2px);
}

/* Styles pour les lignes de séparation */
hr {
    border: none;
    border-top: 1px solid #eee;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
}