/* ========================= */
/* Configurateur de fenêtres  */
/* ========================= */

:root {
  --fixwidth: 1340px;
  --green: #91AE3B;
  --blue: #124170;
  --blackWithOpactiy: #2323238C;

  --cfg-blue: #124170;
  --cfg-green: #91AE3B;
  --cfg-light-bg: #f8f9fa;
  --cfg-border: #e0e0e0;
  --cfg-text: #333;
  --cfg-text-light: #666;
  --cfg-radius: 8px;
}

body#configurateur .breadcrumb {
  display: none;
}
/* ========================= */
/* Page Header               */
/* ========================= */
.config-page-header {
  max-width: 1340px;
  margin: 0 auto;
  padding: 30px 20px 20px;
  width: 100%;
}
.config-page-header h1 {
  font-family: 'Playfair Display', serif;
  color: var(--blue);
  font-size: 46px;
  font-weight: 700;
}
.config-page-header p {
  color: #1B1B1B;
  font-family: Poppins;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

/* ========================= */
/* Main Layout               */
/* ========================= */
.config-wrapper {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 20px 60px;
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.config-left {
  width: 40%;
  min-width: 380px;
  position: sticky;
  top: 20px;
  flex-shrink: 0;
}

.config-right {
  flex: 1;
  min-width: 0;
}

.config-step-panel {
  display: none;
}

.config-step-panel.active {
  display: block;
}

.config-error {
  border: 1px solid #d33;
  border-radius: 6px;
  color: #9b1c1c;
  background: #fff4f4;
  padding: 14px 16px;
  margin-bottom: 18px;
  font-family: Poppins, sans-serif;
}

/* ========================= */
/* Section Headers (blue bar)*/
/* ========================= */
.config-wrapper .section-header {
  background: var(--blue);
  color: #FFF;
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 25px; /* 138.889% */
  letter-spacing: 0.48px;
  text-transform: uppercase;
  display: flex;
  padding: 4.5px 0px 7.5px 10px;
  align-items: center;
  align-self: stretch;
}
.config-wrapper .section-header--full {
  border-radius: var(--cfg-radius);
  margin-bottom: 16px;
}

.steps-nav {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.step-item {
  border: 1px solid var(--blue);
  border-radius: 6px;
  background: #fff;
  color: var(--blue);
  cursor: pointer;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  font-weight: 600;
  min-height: 42px;
  padding: 0 20px;
}

.step-item.active {
  background: var(--blue);
  color: #fff;
}

/* ========================= */
/* Left Column - Preview     */
/* ========================= */
.preview-box {
  /*border: 1px solid var(--cfg-border);*/
  /*border-radius: var(--cfg-radius);*/
  margin-bottom: 16px;
}
.preview-box .section-header {
  display: flex;
  /*justify-content: space-between;*/
  align-items: center;
  gap: 8px;
  width: calc(100% - 10px);
  border-radius: 4px ;
}
.preview-box .section-header span {
  color: #FFF;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: 0.48px;
  text-transform: capitalize;
}
.preview-image {
  /*background: #f0f4f8;*/
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  padding: 30px;
}
.window-preview {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 340px;
  width: 100%;
}
.window-preview-svg {
  display: block;
  height: auto;
  max-height: 340px;
  max-width: 100%;
  overflow: visible;
  width: 100%;
}
.preview-opening-line {
  fill: none;
  stroke: rgba(45, 49, 52, 0.74);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.preview-dormant-outline {
  fill: none;
  stroke: rgba(118, 125, 128, 0.48);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.preview-dormant-seam {
  stroke: rgba(38, 44, 48, 0.16);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.preview-frame-chassis-joint {
  fill: none;
  stroke: rgba(36, 42, 46, 0.42);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}
.preview-module-outline {
  fill: none;
  stroke: rgba(36, 42, 46, 0.48);
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
}
.preview-opening-line--tilt {
  stroke-dasharray: 7 6;
}
.preview-opening-line--tilt-turn {
  stroke: rgba(45, 49, 52, 0.74);
}
.preview-opening-line--sliding {
  stroke: #18547f;
}
.preview-opening-rail {
  fill: none;
  stroke: rgba(15, 61, 104, 0.42);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.preview-opening-hinge {
  fill: rgba(45, 49, 52, 0.82);
  stroke: #fff;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.preview-opening-hinge-plate {
  fill: rgba(222, 224, 223, 0.95);
  stroke: rgba(132, 138, 141, 0.72);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.preview-opening-hinge-pin {
  stroke: rgba(86, 91, 94, 0.6);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.preview-opening-fixed {
  fill: none;
  stroke: rgba(45, 49, 52, 0.42);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.preview-handle {
  fill: #0f3d68;
  stroke: #fff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.preview-handle-vector {
  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.28));
}
.preview-fixed-label,
.preview-dimensions text,
.preview-sash-size {
  fill: #4B4743;
  font-family: Poppins, sans-serif;
  font-size: 22px;
  font-weight: 600;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 5px;
  text-anchor: middle;
  vector-effect: non-scaling-stroke;
}
.preview-fixed-label {
  font-size: 18px;
}
.preview-dimension-line {
  fill: none;
  stroke: #7F7F7F;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.preview-sash-size {
  font-size: 17px;
}
.preview-image img {
  max-width: 100%;
  max-height: 340px;
  object-fit: contain;
}
.door-fixed-preview {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 340px;
  width: 100%;
}
.preview-image .door-fixed-preview__image {
  display: block;
  height: auto;
  max-height: 430px;
  max-width: 100%;
  object-fit: contain;
  width: auto;
}
.door-fixed-preview__fallback {
  color: #6f7478;
  display: none;
  font-size: 14px;
  text-align: center;
}
.door-fixed-preview.is-missing .door-fixed-preview__fallback {
  display: inline-flex;
}
.preview-image .window-placeholder {
  width: 280px;
  height: 320px;
  background: linear-gradient(135deg, #dce8f5 0%, #eaf2fa 100%);
  border: 12px solid #e8e8e8;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.preview-image .window-placeholder::before,
.preview-image .window-placeholder::after {
  content: '';
  position: absolute;
  background: #bbb;
}
.preview-image .window-placeholder::before {
  width: 1px;
  height: 70%;
  top: 15%;
}
.preview-image .window-placeholder::after {
  height: 1px;
  width: 70%;
  left: 15%;
}

/* Price section */
.price-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  margin-bottom: 16px;
}
.price-section .priceCol {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.price-section .price-label {
  color: #7F7F7F;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
}
.price-section .price-value {
  color: #333;
  font-family: Poppins;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.price-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}
.price-actions .icon-btn {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  cursor: pointer;
  font-size: 16px;
  color: var(--cfg-text);
}
.price-actions .icon-btn img {
  width: 33px;
  height: auto;
}
.price-actions .separator {
  /*width: 1px;*/
  /*height: 24px;*/
  /*background: var(--cfg-border);*/
}

/* Summary panel */
.summary-panel {
  border: 1px solid var(--cfg-border);
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  /*margin-bottom: 16px;*/
}
.summary-row {
  /*display: flex;
  padding: 10px 18px;
  font-size: 14px;
  border-bottom: 1px solid #f0f0f0;*/
  display: flex;
padding: 8px 18px;
align-items: center;
align-self: stretch;
border-right: 1px solid #BDBDBD;
border-bottom: 1px solid #BDBDBD;
border-left: 1px solid #BDBDBD;
background: #EFEFEF;
gap: 5px;
}
.summary-row:last-child {
  border-bottom: none;
}
.summary-row .label {
color: #000;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 25px; /* 138.889% */
letter-spacing: 0.48px;
text-transform: capitalize;
}
.summary-row .value {
color: #4B4743;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 25px;
letter-spacing: 0.48px;
text-transform: capitalize;
word-break: break-word;
}

/* Accessories accordion */
.accessories-section {
  border: 1px solid var(--cfg-border);
  border-radius: 0 0 4px 4px;
  overflow: hidden;
}
.accessories-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
padding: 8px 18px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
  background: #EFEFEF;
  border-bottom: 1px solid #BDBDBD;
  border-right: 1px solid #BDBDBD;
  border-bottom: 1px solid #BDBDBD;
  border-left: 1px solid #BDBDBD;
  background: #EFEFEF;
  color: #000;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 25px; /* 138.889% */
letter-spacing: 0.48px;
text-transform: capitalize;
}
.accessories-section summary::-webkit-details-marker {
  display: none;
}
.accessories-section summary::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;

  background-image: url('/img/images/icons/arrowBottom.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  transition: transform 0.2s;
}
.accessories-section[open] summary::after {
  transform: rotate(180deg);
}
.accessories-content .summary-row {
  padding: 8px 18px;
}

/* ========================= */
/* Steps Breadcrumb          */
/* ========================= */
.steps-nav {
  display: flex;
  margin-bottom: 24px;
}
.step-item {
  flex: 1;
  /*padding: 12px 20px 12px 30px;*/
  font-family: Inter;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  background: var(--blue);
  position: relative;
  text-align: center;
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
  width: 224.712px;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-item:first-child {
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
  /*border-radius: var(--cfg-radius) 0 0 var(--cfg-radius);*/
  /*padding-left: 20px;*/
}
.step-item:last-child {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 15px 50%);
  /*border-radius: 0 var(--cfg-radius) var(--cfg-radius) 0;*/
}
.step-item.inactive {
  background: #D4E9FF6B;
  color: var(--blue);
}
.step-item.active {
  background: var(--blue);
  color: #fff;
}

/* ========================= */
/* Config Sections           */
/* ========================= */
.config-section {
  margin-bottom: 28px;
}

.config-section--linked {
  margin-top: -16px;
}

.config-section .section-label {
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  font-family: Poppins;
  color: #333;
}

.config-section .section-label--sub {
  margin: 8px 0 12px;
}

.config-info-message {
  background: #EFEFEF;
  border: 1px solid #BDBDBD;
  border-radius: 4px;
  color: #4B4743;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  line-height: 20px;
  padding: 14px 16px;
}

/* ========================= */
/* Selection Cards           */
/* ========================= */
.config-wrapper .cards-grid {
  display: flex;
  /*flex-wrap: wrap;*/
  gap: 12px;
}
.config-wrapper .cards-grid.flexWrap {
  flex-wrap: wrap;
}

/* Hidden radio inputs */
.card-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.card-option {
  appearance: none;
  border: 2px solid var(--cfg-border);
  border-radius: var(--cfg-radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
}
button.card-option {
  font: inherit;
}
.card-option:hover {
  border-color: #c0c0c0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.card-radio:checked + .card-option {
  border-color: var(--cfg-green);
  box-shadow: 0 0 0 1px var(--cfg-green);
}

/* Vitrage cards */
.config-section--glazing-figma {
  max-width: 779px;
}

.config-section--glazing-figma .section-header--full {
  margin-bottom: 8px;
}

.glazing-content {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
}

.glazing-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.glazing-block .section-label {
  margin: 0;
}

.glazing-card-row {
  display: flex;
  gap: 12px;
  max-width: 779px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 0 0 2px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  width: 100%;
}

.glazing-card-row--options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow-x: hidden;
  overflow-y: visible;
  scroll-snap-type: none;
}

.glazing-card {
  align-items: center;
  background: #fff;
  border: 1px solid #BDBDBD;
  border-radius: 4px;
  box-sizing: border-box;
  color: #222;
  cursor: pointer;
  display: flex;
  flex: 0 0 142px;
  flex-direction: column;
  font-family: Poppins, sans-serif;
  min-height: 176px;
  overflow: hidden;
  position: relative;
  scroll-snap-align: start;
  transition: border-color .2s, box-shadow .2s;
  width: 142px;
}

.glazing-card:hover,
.card-radio:focus-visible + .glazing-card {
  border-color: var(--cfg-green);
  box-shadow: 0 2px 8px rgba(18, 65, 112, .12);
}

.card-radio:checked + .glazing-card {
  border: 2px solid var(--cfg-green);
}

.glazing-card-visual {
  border-bottom: 1px solid #BDBDBD;
  display: block;
  height: 138.38px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.card-radio:checked + .glazing-card .glazing-card-visual {
  border-color: var(--cfg-green);
}

.glazing-card-visual img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.glazing-card-visual--exact img {
  object-fit: fill;
}

.glazing-card-visual--crop img {
  object-fit: unset;
  position: absolute;
}

.glazing-card--family .glazing-card-label {
  align-items: center;
  display: flex;
  min-height: 37px;
}

.glazing-card-label {
  color: #222;
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 18.571px;
  padding: 10px 8px;
  text-align: center;
  width: 100%;
}

.glazing-subheader {
  align-items: center;
  background: #EDF6FF;
  color: #124170;
  display: flex;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 500;
  height: 30px;
  line-height: 20px;
  padding: 5px 20px;
  width: 100%;
}

.glazing-card--option {
  flex: none;
  min-height: 225px;
  width: 100%;
}

.glazing-card--option .glazing-card-label {
  flex: 1 1 auto;
  min-height: 58px;
}

.glazing-card-price {
  align-items: center;
  align-self: stretch;
  background: var(--cfg-green);
  border-top: 1px solid #BDBDBD;
  color: #fff;
  display: flex;
  font-size: 13px;
  font-weight: 600;
  justify-content: center;
  line-height: 18.571px;
  min-height: 29px;
  padding: 5px 10px;
  white-space: nowrap;
}

.crossbar-repartition {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 779px;
  width: 100%;
}

.crossbar-repartition-title {
  align-items: center;
  background: #EDF6FF;
  color: #124170;
  display: flex;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 500;
  height: 30px;
  line-height: 20px;
  padding: 5px 20px;
  width: 100%;
}

.crossbar-preview-frame {
  align-items: center;
  border: 1px solid #BDBDBD;
  border-radius: 8px;
  display: flex;
  height: 266px;
  justify-content: center;
  overflow: hidden;
  width: 100%;
}

.crossbar-preview {
  height: 226px;
  width: 254px;
}

.crossbar-preview img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.crossbar-preview .window-preview-svg {
  display: block;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  width: 100%;
}

.preview-crossbar-line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.82);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.preview-crossbar-line--shadow {
  stroke: rgba(15, 23, 42, 0.18);
}

.crossbar-field-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.crossbar-field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.crossbar-field-title {
  color: #333;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  margin: 0;
}

.crossbar-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.crossbar-axis,
.crossbar-choice-group {
  align-items: center;
  display: flex;
  gap: 8px;
}

.crossbar-axis-label {
  color: #000;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 20px;
  white-space: nowrap;
}

.crossbar-choice {
  display: inline-grid;
  position: relative;
}

.crossbar-radio {
  height: 1px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

.crossbar-dot {
  align-items: center;
  background: #fff;
  border: 1px solid #BDBDBD;
  border-radius: 50%;
  color: #222;
  cursor: pointer;
  display: inline-flex;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 400;
  height: 28px;
  justify-content: center;
  line-height: 20px;
  margin: 0;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s;
  width: 28px;
}

.crossbar-radio:checked + .crossbar-dot {
  background: var(--cfg-green);
  border-color: var(--cfg-green);
  color: #fff;
}

.crossbar-radio:focus-visible + .crossbar-dot,
.crossbar-dot:hover {
  box-shadow: 0 0 0 3px rgba(148, 169, 66, .18);
}

.crossbar-radio:disabled + .crossbar-dot {
  cursor: default;
}

/* Material cards */
.card-option--material {
  width: 142px;
  padding: 0;
  margin: 0;
}
.card-option--material img {
  width: 138px;
  height: 138px;
  object-fit: contain;
  margin-bottom: 0;
}
.card-option--material .card-label {
  font-family: Poppins;
  font-size: 13px;
  font-weight: 600;
  color: #222;
  line-height: 18.571px;
}
.card-option--material.card-option--static {
  cursor: default;
  justify-content: center !important;
  padding: 0 14px;
}
button.card-option--material.card-option--static {
  cursor: pointer;
}
.card-option--material.card-option--static:hover {
  border-color: var(--cfg-border);
  box-shadow: none;
}
.card-static-icon {
  align-items: center;
  background: var(--cfg-green);
  border-radius: 4px;
  color: #fff;
  display: inline-flex;
  font-size: 22px;
  font-weight: 700;
  height: 19px;
  justify-content: center;
  line-height: 1;
  margin-bottom: 15px;
  width: 19px;
}

/* Toggle link */
.toggle-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 130px;
  padding: 12px;
  border: 2px solid var(--cfg-border);
  border-radius: var(--cfg-radius);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  line-height: 18.571px; /* 142.857% */
  color: #222;
  text-align: center;
  gap: 6px;
}
.toggle-link .toggle-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--cfg-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
}

/* ========================= */
/* Gamme (Range) Cards       */
/* ========================= */
.cards-grid--gamme {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.card-option--gamme {
  padding: 0px 9px;
  width: auto;
}
.card-option--gamme img {
  width: 140px;
  height: 120px;
  object-fit: contain;
  margin: 12px 0;
}
.card-option--gamme .card-title {
color: #222;
text-align: center;
font-family: "Open Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 18.571px; /* 132.653% */
}
.card-option--gamme .card-title span {
  text-transform: uppercase;
}
.card-option--gamme .card-desc {
color: #4B4743;
text-align: center;
font-family: "Open Sans";
font-size: 10px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.feature-list {
  list-style: none;
  text-align: left;
  width: 100%;
  padding: 0;
}
ul.feature-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feature-list li {
color: #222;
font-family: "Open Sans";
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18.571px; /* 154.762% */
display: flex;
align-items: center;
gap: 6px;
border-bottom: 1px solid #BDBDBD;
padding-bottom: 10px;
}
.feature-list li:last-child {
  border-bottom: none;
}
.feature-list .check {
  color: var(--blue);
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ========================= */
/* Profile Cards             */
/* ========================= */
.cards-grid--profile {
  display: flex;
  gap: 14px;
}
.card-option--profile {
  width: 220px;
  padding: 16px;
  position: relative;
  overflow: visible;
}
.card-option--profile .uw-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--cfg-green);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1.2;
}
.card-option--profile .uw-badge small {
  display: block;
  font-size: 9px;
  font-weight: 400;
}
.card-option--profile .info-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  line-height: 1;
  background: transparent;
}
.card-option--profile .info-icon > img {
  display: block;
  height: 19px;
  margin: 0;
  object-fit: contain;
  width: 19px;
}
.card-option--profile .info-icon:focus-visible {
  outline: 2px solid var(--cfg-blue);
  outline-offset: 2px;
}
.card-option--profile .profile-tooltip {
  background: #124170;
  border-radius: 8px;
  bottom: calc(100% + 8px);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 16px;
  opacity: 0;
  padding: 12px;
  pointer-events: none;
  position: absolute;
  right: -8px;
  text-align: center;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  visibility: hidden;
  width: 232px;
  z-index: 30;
}
.card-option--profile .profile-tooltip::after {
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #124170;
  bottom: -8px;
  content: "";
  position: absolute;
  right: 11px;
}
.card-option--profile .info-icon:hover .profile-tooltip,
.card-option--profile .info-icon:focus .profile-tooltip,
.card-option--profile .info-icon:focus-visible .profile-tooltip {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
.card-option--profile img {
  width: 140px;
  height: 160px;
  object-fit: contain;
  margin: 10px auto;
}
.card-option--profile .card-label {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
}
.card-option--profile .spec-list {
  list-style: none;
  text-align: left;
  width: 100%;
  padding: 0;
}
.card-option--profile .spec-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px solid #f5f5f5;
}
.card-option--profile .spec-list li:last-child {
  border-bottom: none;
}
.card-option--profile .spec-list .check {
  color: var(--cfg-blue);
  flex-shrink: 0;
}

/* ========================= */
/* Window Type Cards         */
/* ========================= */
.card-option--window-type {
  width: 160px;
  padding: 16px;
}
.card-option--window-type img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 10px;
}
.card-option--window-type .card-label {
  font-size: 13px;
  font-weight: 600;
}

/* ========================= */
/* Imposte / Allege Cards    */
/* ========================= */
.cards-grid--imposte {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.card-option--imposte {
  width: 155px;
  padding: 0;
  overflow: hidden;
}
.card-option--imposte .card-img {
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 130px;
}
.card-option--imposte .card-img img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}
.card-option--imposte .card-label {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 8px 2px;
}
.card-option--imposte .card-price {
  background: var(--cfg-green);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 8px;
  text-align: center;
  margin-top: 4px;
}

/* ========================= */
/* Opening Type Cards        */
/* ========================= */
.config-wrapper .section-subheader {
  align-items: center;
  background: #EDF6FF;
  color: var(--cfg-blue);
  display: flex;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  height: 30px;
  line-height: 20px;
  margin-bottom: 12px;
  padding: 5px 20px;
  width: 100%;
}
.cards-grid--opening {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.card-option--opening {
  padding: 10px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-option--opening img {
  width: 100%;
  height: 90px;
  object-fit: contain;
}

/* ========================= */
/* Dimensions Section        */
/* ========================= */
.dimensions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.dimension-field {
  text-align: left;
}
.dimension-field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  text-align: left;
}
.dimension-field label span {
  font-weight: 400;
  color: var(--cfg-text-light);
}
.dimension-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dimension-input-wrap input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  height: 4px;
  background: var(--cfg-border);
  border-radius: 2px;
  outline: none;
}
.dimension-input-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: var(--cfg-blue);
  border-radius: 50%;
  cursor: pointer;
}
.dimension-input-wrap .dim-min,
.dimension-input-wrap .dim-max {
  font-size: 13px;
  color: var(--cfg-text-light);
  min-width: 40px;
}
.dimension-limit-hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--cfg-text-light);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dimension-limit-block {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}
.dimension-limit-sep {
  color: #a9b2bf;
  font-size: 11px;
}
.dimension-limit-title {
  font-size: 10px;
  color: #7a8798;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dimension-limit-pill {
  display: inline-flex;
  border: 1px solid #d9e2ef;
  border-radius: 999px;
  padding: 4px 10px;
  background: #f7f9fc;
  color: #2c3f57;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.dimension-limit-pill .dimension-limit-title {
  margin-right: 4px;
}
.dimension-limit-pill strong {
  color: var(--cfg-blue);
  font-weight: 700;
}
.dimension-input-wrap .dim-value {
  border: 1px solid var(--cfg-border);
  border-radius: var(--cfg-radius);
  padding: 8px 12px;
  font-size: 14px;
  width: 80px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}

/* ========================= */
/* Repartition Section       */
/* ========================= */
.config-section--repartition {
  margin-top: 28px;
}
.config-section--repartition-standard {
  margin-bottom: 20px;
}
.standard-repartition-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  max-width: 640px;
}
.standard-repartition-layout--single {
  align-items: start;
  display: grid;
  grid-template-areas:
    "visual top"
    "visual body"
    "visual bottom"
    "widths widths";
  grid-template-columns: minmax(260px, 1fr) minmax(150px, 260px);
  grid-template-rows: auto auto auto auto;
  column-gap: 22px;
  row-gap: 10px;
  justify-content: start;
  margin-top: 12px;
  max-width: 640px;
  width: 100%;
}
.standard-repartition-preview {
  align-items: center;
  display: flex;
  grid-area: visual;
  justify-content: flex-start;
  max-width: 320px;
  width: 100%;
}
.standard-repartition-preview .window-preview-svg {
  max-height: 260px;
}
.standard-repartition-fields {
  display: contents;
}
.standard-repartition-field--top {
  align-self: start;
  grid-area: top;
  max-width: 320px;
  width: 100%;
}
.standard-repartition-field--body {
  align-self: center;
  grid-area: body;
  max-width: 320px;
  width: 100%;
}
.standard-repartition-field--bottom {
  align-self: end;
  grid-area: bottom;
  max-width: 320px;
  width: 100%;
}
.standard-repartition-field--widths {
  grid-area: widths;
  justify-self: start;
  max-width: 320px;
  width: 100%;
}
.standard-repartition-sashes {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
  align-items: start;
}
.standard-repartition-sash {
  min-width: 0;
  width: 100%;
}
.standard-repartition-sash-label {
  color: #6d6760;
  display: block;
  font-family: Poppins, sans-serif;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.standard-repartition-field label {
  color: #4B4743;
  display: block;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  text-align: left;
}
.repartition-layout {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-top: 8px;
}
.repartition-visual {
  min-height: 188px;
  width: 102px;
}
.repartition-visual img {
  display: block;
  height: 188px;
  object-fit: contain;
  width: 102px;
}
.repartition-layout--shape {
  align-items: center;
  gap: 0;
}
.repartition-shape-board {
  display: grid;
  grid-template-areas:
    "top-left top top-right"
    "left visual right"
    "bottom-left base bottom-right"
    "extra-left extra extra-right";
  grid-template-columns: minmax(92px, max-content) 190px minmax(92px, max-content);
  grid-template-rows: max-content auto max-content max-content;
  align-items: center;
  column-gap: 20px;
  row-gap: 10px;
}
.repartition-field .repartition-measure {
  align-items: flex-start;
  flex-direction: column;
  gap: 6px;
}
.repartition-field .repartition-note {
  color: #4b4743;
  font-size: 12px;
  font-weight: 500;
  max-width: none;
  order: -1;
}
.repartition-layout--trapeze-rampant-droit .repartition-shape-board {
  grid-template-areas:
    "top-left top-right"
    "visual right"
    "base .";
  grid-template-columns: 104px minmax(260px, max-content);
  grid-template-rows: max-content 145px max-content;
  justify-items: start;
}
.repartition-layout--trapeze-rampant-droit .repartition-field .repartition-measure {
  align-items: center;
  flex-direction: row;
  gap: 8px;
}
.repartition-layout--trapeze-rampant-droit .repartition-field--top-left,
.repartition-layout--trapeze-rampant-droit .repartition-field--base {
  justify-self: center;
}
.repartition-layout--trapeze-rampant-droit .repartition-field--top-right,
.repartition-layout--trapeze-rampant-droit .repartition-field--right {
  justify-self: start;
}
.repartition-layout--trapeze-rampant-droit .repartition-field--right {
  align-self: end;
}
.repartition-layout--trapeze-rampant-droit .repartition-visual--shape {
  justify-self: start;
  width: 104px;
}
.repartition-layout--trapeze-rampant-droit .repartition-visual--shape img {
  width: 104px;
}
.repartition-layout--trapeze-rampant-gauche .repartition-shape-board {
  grid-template-areas:
    "visual top-right"
    "visual right"
    "base .";
  grid-template-columns: 104px minmax(180px, max-content);
  grid-template-rows: max-content 145px max-content;
  justify-items: start;
}
.repartition-layout--trapeze-rampant-gauche .repartition-field .repartition-measure {
  align-items: center;
  flex-direction: row;
  gap: 8px;
}
.repartition-layout--trapeze-rampant-gauche .repartition-field--base {
  justify-self: center;
}
.repartition-layout--trapeze-rampant-gauche .repartition-field--top-right,
.repartition-layout--trapeze-rampant-gauche .repartition-field--right {
  justify-self: start;
}
.repartition-layout--trapeze-rampant-gauche .repartition-field--right {
  align-self: end;
}
.repartition-layout--trapeze-rampant-gauche .repartition-visual--shape {
  justify-self: start;
  width: 104px;
}
.repartition-layout--trapeze-rampant-gauche .repartition-visual--shape img {
  width: 104px;
}
.repartition-layout--pentagone-symetrique-forme-pignon .repartition-shape-board {
  grid-template-areas:
    "visual visual top-right"
    "visual visual right"
    "bottom-left bottom-right .";
  grid-template-columns: 95px 95px minmax(260px, max-content);
  grid-template-rows: max-content 145px max-content;
  justify-items: start;
}
.repartition-layout--pentagone-symetrique-forme-pignon .repartition-field .repartition-measure {
  align-items: center;
  flex-direction: row;
  gap: 8px;
}
.repartition-layout--pentagone-symetrique-forme-pignon .repartition-field--top-right,
.repartition-layout--pentagone-symetrique-forme-pignon .repartition-field--right {
  justify-self: start;
}
.repartition-layout--pentagone-symetrique-forme-pignon .repartition-field--right {
  align-self: end;
}
.repartition-layout--pentagone-symetrique-forme-pignon .repartition-field--bottom-left,
.repartition-layout--pentagone-symetrique-forme-pignon .repartition-field--bottom-right {
  justify-self: center;
}
.repartition-layout--pentagone-symetrique-forme-pignon .repartition-visual--shape {
  justify-self: start;
  width: 190px;
}
.repartition-layout--pentagone-symetrique-forme-pignon .repartition-visual--shape img {
  width: 190px;
}
.repartition-layout--pan-coupe-double .repartition-shape-board {
  grid-template-areas:
    "top . top-right"
    "visual visual right"
    "bottom-left bottom-right .";
  grid-template-columns: 95px 95px minmax(260px, max-content);
  grid-template-rows: max-content 145px max-content;
  justify-items: start;
}
.repartition-layout--pan-coupe-double .repartition-field .repartition-measure {
  align-items: center;
  flex-direction: row;
  gap: 8px;
}
.repartition-layout--pan-coupe-double .repartition-field--top {
  justify-self: center;
}
.repartition-layout--pan-coupe-double .repartition-field--top-right,
.repartition-layout--pan-coupe-double .repartition-field--right {
  justify-self: start;
}
.repartition-layout--pan-coupe-double .repartition-field--right {
  align-self: end;
}
.repartition-layout--pan-coupe-double .repartition-field--bottom-left,
.repartition-layout--pan-coupe-double .repartition-field--bottom-right {
  justify-self: center;
}
.repartition-layout--pan-coupe-double .repartition-visual--shape {
  justify-self: start;
  width: 190px;
}
.repartition-layout--pan-coupe-double .repartition-visual--shape img {
  width: 190px;
}
.repartition-layout--plein-cintre .repartition-shape-board {
  grid-template-areas:
    "visual right"
    "visual ."
    "base .";
  grid-template-columns: 104px minmax(120px, max-content);
  grid-template-rows: max-content 128px max-content;
  justify-items: start;
}
.repartition-layout--plein-cintre .repartition-field .repartition-measure {
  align-items: center;
  flex-direction: row;
  gap: 8px;
}
.repartition-layout--plein-cintre .repartition-field--right {
  align-self: start;
  justify-self: start;
}
.repartition-layout--plein-cintre .repartition-field--base {
  justify-self: center;
}
.repartition-layout--plein-cintre .repartition-visual--shape {
  justify-self: start;
  width: 104px;
}
.repartition-layout--plein-cintre .repartition-visual--shape img {
  width: 104px;
}
.repartition-layout--plein-cintre-avec-imposte .repartition-shape-board {
  grid-template-areas:
    "visual top-right"
    "visual right"
    "base .";
  grid-template-columns: 104px minmax(120px, max-content);
  grid-template-rows: max-content 145px max-content;
  justify-items: start;
}
.repartition-layout--plein-cintre-avec-imposte .repartition-field .repartition-measure {
  align-items: center;
  flex-direction: row;
  gap: 8px;
}
.repartition-layout--plein-cintre-avec-imposte .repartition-field--top-right,
.repartition-layout--plein-cintre-avec-imposte .repartition-field--right {
  justify-self: start;
}
.repartition-layout--plein-cintre-avec-imposte .repartition-field--right {
  align-self: end;
}
.repartition-layout--plein-cintre-avec-imposte .repartition-field--base {
  justify-self: center;
}
.repartition-layout--plein-cintre-avec-imposte .repartition-visual--shape {
  justify-self: start;
  width: 104px;
}
.repartition-layout--plein-cintre-avec-imposte .repartition-visual--shape img {
  width: 104px;
}
.repartition-layout--cintre-surbaisse .repartition-shape-board {
  grid-template-areas:
    "visual top-right"
    "visual right"
    "base .";
  grid-template-columns: 104px minmax(120px, max-content);
  grid-template-rows: max-content 145px max-content;
  justify-items: start;
}
.repartition-layout--cintre-surbaisse .repartition-field .repartition-measure {
  align-items: center;
  flex-direction: row;
  gap: 8px;
}
.repartition-layout--cintre-surbaisse .repartition-field--top-right,
.repartition-layout--cintre-surbaisse .repartition-field--right {
  justify-self: start;
}
.repartition-layout--cintre-surbaisse .repartition-field--right {
  align-self: end;
}
.repartition-layout--cintre-surbaisse .repartition-field--base {
  justify-self: center;
}
.repartition-layout--cintre-surbaisse .repartition-visual--shape {
  justify-self: start;
  width: 104px;
}
.repartition-layout--cintre-surbaisse .repartition-visual--shape img {
  width: 104px;
}
.repartition-layout--plein-cintre-double-vantaux .repartition-shape-board {
  grid-template-areas:
    "visual visual right"
    "visual visual ."
    "bottom-left bottom-right .";
  grid-template-columns: 95px 95px minmax(120px, max-content);
  grid-template-rows: max-content 145px max-content;
  justify-items: start;
}
.repartition-layout--plein-cintre-double-vantaux .repartition-field .repartition-measure {
  align-items: center;
  flex-direction: row;
  gap: 8px;
}
.repartition-layout--plein-cintre-double-vantaux .repartition-field--right {
  align-self: start;
  justify-self: start;
}
.repartition-layout--plein-cintre-double-vantaux .repartition-field--bottom-left,
.repartition-layout--plein-cintre-double-vantaux .repartition-field--bottom-right {
  justify-self: center;
}
.repartition-layout--plein-cintre-double-vantaux .repartition-visual--shape {
  justify-self: start;
  width: 190px;
}
.repartition-layout--plein-cintre-double-vantaux .repartition-visual--shape img {
  width: 190px;
}
.repartition-layout--plein-cintre-avec-soubassement-droit .repartition-shape-board {
  grid-template-areas:
    "visual visual top-right"
    "visual visual right"
    "bottom-left bottom-right .";
  grid-template-columns: 95px 95px minmax(120px, max-content);
  grid-template-rows: max-content 190px max-content;
  justify-items: start;
}
.repartition-layout--plein-cintre-avec-soubassement-droit .repartition-field .repartition-measure {
  align-items: center;
  flex-direction: row;
  gap: 8px;
}
.repartition-layout--plein-cintre-avec-soubassement-droit .repartition-field--top-right,
.repartition-layout--plein-cintre-avec-soubassement-droit .repartition-field--right {
  justify-self: start;
}
.repartition-layout--plein-cintre-avec-soubassement-droit .repartition-field--right {
  align-self: end;
}
.repartition-layout--plein-cintre-avec-soubassement-droit .repartition-field--bottom-left,
.repartition-layout--plein-cintre-avec-soubassement-droit .repartition-field--bottom-right {
  justify-self: center;
}
.repartition-layout--plein-cintre-avec-soubassement-droit .repartition-visual--shape {
  justify-self: start;
  width: 190px;
}
.repartition-layout--plein-cintre-avec-soubassement-droit .repartition-visual--shape img {
  width: 190px;
}
.repartition-layout--cintre-surbaisse-double-vantaux .repartition-shape-board {
  grid-template-areas:
    "visual visual top-right"
    "visual visual right"
    "bottom-left bottom-right .";
  grid-template-columns: 95px 95px minmax(120px, max-content);
  grid-template-rows: max-content 145px max-content;
  justify-items: start;
}
.repartition-layout--cintre-surbaisse-double-vantaux .repartition-field .repartition-measure {
  align-items: center;
  flex-direction: row;
  gap: 8px;
}
.repartition-layout--cintre-surbaisse-double-vantaux .repartition-field--top-right,
.repartition-layout--cintre-surbaisse-double-vantaux .repartition-field--right {
  justify-self: start;
}
.repartition-layout--cintre-surbaisse-double-vantaux .repartition-field--right {
  align-self: end;
}
.repartition-layout--cintre-surbaisse-double-vantaux .repartition-field--bottom-left,
.repartition-layout--cintre-surbaisse-double-vantaux .repartition-field--bottom-right {
  justify-self: center;
}
.repartition-layout--cintre-surbaisse-double-vantaux .repartition-visual--shape {
  justify-self: start;
  width: 190px;
}
.repartition-layout--cintre-surbaisse-double-vantaux .repartition-visual--shape img {
  width: 190px;
}
.repartition-measure--detail .repartition-note {
  color: #222;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.35;
  max-width: 190px;
  order: 0;
}
.repartition-marker {
  color: #222;
  font-size: 12px;
  font-weight: 500;
}
.repartition-field--top-left {
  grid-area: top-left;
  justify-self: end;
}
.repartition-field--top {
  grid-area: top;
  justify-self: center;
}
.repartition-field--top-right {
  grid-area: top-right;
  justify-self: start;
}
.repartition-field--left {
  grid-area: left;
  justify-self: end;
}
.repartition-field--right {
  grid-area: right;
  justify-self: start;
}
.repartition-field--bottom-left {
  grid-area: bottom-left;
  justify-self: end;
}
.repartition-field--base {
  grid-area: base;
  justify-self: center;
}
.repartition-field--bottom-right {
  grid-area: bottom-right;
  justify-self: start;
}
.repartition-field--extra-left {
  grid-area: extra-left;
  justify-self: end;
}
.repartition-field--extra {
  grid-area: extra;
  justify-self: center;
}
.repartition-field--extra-right {
  grid-area: extra-right;
  justify-self: start;
}
.repartition-visual--shape {
  grid-area: visual;
  min-height: 150px;
  width: 190px;
}
.repartition-visual--shape img {
  height: 150px;
  width: 190px;
}
.repartition-measure {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.repartition-input {
  border: 1px solid var(--cfg-border);
  border-radius: 8px;
  color: #9b9b9b;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  height: 40px;
  padding: 8px 6px;
  text-align: center;
  width: 62px;
}
.repartition-input[readonly] {
  background: #f4f6f3;
  color: #4f5a45;
  cursor: not-allowed;
  font-weight: 600;
}
.repartition-measure--error .repartition-input {
  border-color: #c94040;
  color: #8f2323;
}
.repartition-unit {
  color: #222;
  font-size: 13px;
  margin-left: -4px;
}
.repartition-note {
  color: #4b4743;
  display: inline-block;
  font-size: 10px;
  line-height: 1.35;
  max-width: 180px;
}
.repartition-error {
  color: #b42318;
  display: block;
  flex-basis: 100%;
  font-size: 10px;
  line-height: 1.3;
  max-width: 210px;
}
.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* ========================= */
/* Next Step Button          */
/* ========================= */
.next-step-wrap {
  text-align: center;
  margin-top: 30px;
}
.btn-next-step {
  display: inline-block;
  background: var(--cfg-blue);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 40px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
}
.btn-next-step:hover {
  background: #0d3259;
  color: #fff;
}

.cards-grid--dynamic {
  align-items: stretch;
}

.cards-grid--dynamic .card-option {
  justify-content: center;
  min-height: 86px;
  padding: 14px;
}

.cards-grid--dynamic .card-label {
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
}

.cards-grid--dynamic .card-meta {
  color: #666;
  display: block;
  font-family: Poppins, sans-serif;
  font-size: 12px;
  line-height: 1.35;
  margin-top: 8px;
  text-align: center;
}

.cards-grid--dynamic .card-option--profile {
  min-height: 130px;
}

.cards-grid--dynamic .card-option--color,
.cards-grid--dynamic .card-option--handle,
.cards-grid--dynamic .card-option--accessory {
  min-height: 108px;
}

.config-wrapper .cards-grid--dynamic {
  align-items: stretch;
  flex-wrap: wrap;
}

.config-wrapper .cards-grid--profile {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-bottom: 4px;
}

.cards-grid--dynamic .card-option {
  border: 1px solid #BDBDBD;
  border-radius: 4px;
  justify-content: flex-start;
  min-height: 181px;
  padding: 0;
  width: 142px;
}

.cards-grid--dynamic .card-option:hover {
  border-color: #91AE3B;
  box-shadow: 0 2px 8px rgba(18, 65, 112, 0.12);
}

.cards-grid--dynamic .card-radio:checked + .card-option {
  border-color: #91AE3B;
  box-shadow: 0 0 0 1px #91AE3B;
}

.card-option .card-visual {
  align-items: center;
  background: #fff;
  display: flex;
  height: 132px;
  justify-content: center;
  padding: 10px;
  width: 100%;
}

.card-option .card-visual img {
  display: block;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  width: 100%;
}

.card-option .card-visual--schema {
  height: 78px;
  padding: 12px 10px 4px;
}

.config-section--volet {
  max-width: 779px;
}

.config-section--volet .section-label {
  margin: 0 0 12px;
}

.volet-subsection {
  margin-top: 28px;
}

.section-subheader--volet {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

.cards-grid--volet-motorisation,
.cards-grid--volet-gamme,
.volet-type-grid {
  display: flex;
  gap: 8px;
  padding-bottom: 4px;
}

.cards-grid--volet-motorisation,
.cards-grid--volet-gamme {
  overflow-x: auto;
  overflow-y: hidden;
}

.volet-type-grid {
  align-items: flex-start;
  flex-wrap: wrap;
  overflow: visible;
}

.cards-grid--volet-motorisation .card-option,
.cards-grid--volet-gamme .card-option {
  min-height: 172px;
  width: 142px;
}

.cards-grid--volet-motorisation .card-option .card-visual,
.cards-grid--volet-gamme .card-option .card-visual {
  border-bottom: 1px solid #BDBDBD;
  height: 138px;
  padding: 0;
}

.cards-grid--volet-motorisation .card-option .card-visual img,
.cards-grid--volet-gamme .card-option .card-visual img {
  object-fit: cover;
}

.cards-grid--volet-motorisation .card-option .card-label,
.cards-grid--volet-gamme .card-option .card-label {
  color: #222;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 18.571px;
  padding: 8px 5px 4px;
}

.cards-grid--volet-motorisation .card-option .card-price {
  background: #91AE3B;
  color: #fff;
  display: block;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 18.571px;
  margin-top: auto;
  padding: 5px 10px;
  width: 100%;
}

.volet-type-card {
  background: #fff;
  border: 2px solid #BDBDBD;
  border-radius: 8px;
  color: #222;
  cursor: pointer;
  display: flex;
  flex: 0 0 252px;
  flex-direction: column;
  min-height: 344px;
  overflow: hidden;
  padding-top: 18px;
  text-align: center;
}

.volet-type-grid--monobloc-rs .volet-type-card {
  min-height: 306px;
}

.card-radio:checked + .volet-type-card {
  border-color: #91AE3B;
  box-shadow: 0 0 0 1px #91AE3B;
}

.volet-type-title {
  color: #222;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 18.571px;
  padding: 0 8px 4px;
}

.volet-type-desc {
  color: #4B4743;
  font-family: "Open Sans", sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: normal;
  min-height: 28px;
  padding: 0 8px 12px;
}

.volet-type-features {
  display: flex;
  flex: 1;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.volet-type-features li {
  align-items: center;
  border-bottom: 1px solid #BDBDBD;
  color: #222;
  display: flex;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  gap: 6px;
  line-height: 18.571px;
  min-height: 48px;
  padding: 0 8px 10px;
}

.volet-type-features li:last-child {
  border-bottom: 0;
}

.volet-type-features .check {
  color: #124170;
  flex: 0 0 auto;
  font-weight: 700;
}

.volet-type-price {
  background: #91AE3B;
  border-top: 1px solid #BDBDBD;
  color: #fff;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 18.571px;
  margin-top: auto;
  padding: 5px 10px;
  width: 100%;
}

.volet-type-grid--ra {
  gap: 12px;
}

.card-option--volet-ra-type {
  min-height: 202px;
  width: 142px;
}

.card-option--volet-ra-type .card-visual {
  border-bottom: 1px solid #BDBDBD;
  height: 138px;
  padding: 8px;
}

.card-option--volet-ra-type .card-visual img {
  object-fit: contain;
}

.card-option--volet-ra-type .card-label {
  color: #222;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 18.571px;
  padding: 8px 5px 4px;
}

.card-option--volet-ra-type .card-price {
  background: #91AE3B;
  color: #fff;
  display: block;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 18.571px;
  margin-top: auto;
  padding: 5px 10px;
  width: 100%;
}

.config-section--moustiquaire {
  max-width: 779px;
}

.config-section--shutter-colors,
.config-section--shutter-dimensions,
.config-section--shutter-accessory {
  max-width: 779px;
}

.shutter-color-block {
  margin-top: 8px;
  overflow-x: auto;
  overflow-y: hidden;
}

.shutter-color-block + .shutter-color-block {
  margin-top: 28px;
}

.shutter-palette {
  display: block;
  overflow: hidden;
  position: relative;
}

.shutter-palette img {
  display: block;
  height: 100%;
  object-fit: contain;
  object-position: left top;
  width: 100%;
}

.shutter-palette-zone {
  border: 0;
  cursor: pointer;
  display: block;
  position: absolute;
}

.shutter-palette-zone span {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.shutter-palette-zone:hover,
.card-radio:focus-visible + .shutter-palette-zone {
  box-shadow: inset 0 0 0 2px #124170;
  z-index: 2;
}

.shutter-palette-zone[aria-selected="true"],
.card-radio:checked + .shutter-palette-zone {
  box-shadow: inset 0 0 0 2px #91ae3b, 0 0 0 1px #fff;
  z-index: 2;
}

.shutter-palette-zone[aria-selected="true"]::after,
.card-radio:checked + .shutter-palette-zone::after {
  align-items: center;
  background: #91AE3B;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(18, 65, 112, .24);
  color: #fff;
  content: "✓";
  display: flex;
  font-family: Poppins, sans-serif;
  font-size: 11px;
  font-weight: 700;
  height: 20px;
  justify-content: center;
  left: 50%;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  z-index: 5;
}

.config-section--shutter-dimensions .dimensions-grid {
  max-width: 763px;
}

.shutter-dimension-note {
  align-items: center;
  color: #4B4743;
  display: flex;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  gap: 6px;
  line-height: 20px;
  margin: 8px 0 0;
}

.shutter-dimension-note span {
  align-items: center;
  border: 1px solid #124170;
  border-radius: 50%;
  color: #124170;
  display: inline-flex;
  flex: 0 0 16px;
  font-size: 11px;
  font-weight: 700;
  height: 16px;
  justify-content: center;
  width: 16px;
}

.shutter-preview-svg {
  max-height: 380px;
}

.shutter-image-preview {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  min-height: 340px;
  width: 100%;
}
.shutter-image-preview__visual {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: center;
  max-width: 100%;
}
.shutter-image-preview__main {
  display: block;
  height: auto;
  max-height: 310px;
  max-width: min(100%, 330px);
  object-fit: contain;
}
.shutter-image-preview__type {
  display: block;
  height: auto;
  max-height: 170px;
  max-width: 150px;
  object-fit: contain;
}
.shutter-image-preview__caption {
  align-items: center;
  color: #4B4743;
  display: flex;
  flex-wrap: wrap;
  font-family: Poppins, sans-serif;
  gap: 8px;
  justify-content: center;
  text-align: center;
}
.shutter-image-preview__gamme,
.shutter-image-preview__type-label {
  background: #f6f7f8;
  border: 1px solid #d9dddf;
  border-radius: 999px;
  font-size: 13px;
  line-height: 18px;
  padding: 7px 12px;
}
.shutter-image-preview__type-label {
  background: #eef5fb;
  border-color: #c9dceb;
}
.shutter-image-preview__missing {
  color: #6f7478;
  font-size: 14px;
}

.config-section--moustiquaire .section-label {
  margin: 0 0 12px;
}

.moustiquaire-grid {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
}

.moustiquaire-card {
  background: #fff;
  border: 1px solid #BDBDBD;
  border-radius: 4px;
  color: #222;
  cursor: pointer;
  display: flex;
  flex: 0 0 142px;
  flex-direction: column;
  overflow: hidden;
  text-align: center;
}

.card-radio:checked + .moustiquaire-card {
  border-color: #91AE3B;
  box-shadow: 0 0 0 1px #91AE3B;
}

.moustiquaire-visual {
  border-bottom: 1px solid #BDBDBD;
  display: block;
  height: 138.38px;
  overflow: hidden;
  position: relative;
  width: 142px;
}

.moustiquaire-visual img {
  display: block;
  height: 117.39%;
  left: -95.33%;
  max-width: none;
  object-fit: cover;
  position: absolute;
  top: -5.51%;
  width: 201.52%;
}

.moustiquaire-visual--no::after {
  background: rgba(0, 0, 0, 0.2);
  content: '';
  inset: 0;
  position: absolute;
}

.moustiquaire-no-icon {
  display: block;
  height: 72px;
  left: 34px;
  position: absolute;
  top: 32.44px;
  width: 72px;
  z-index: 1;
}

.moustiquaire-no-icon img {
  height: 100%;
  inset: 0;
  left: 0;
  object-fit: contain;
  position: absolute;
  top: 0;
  width: 100%;
}

.moustiquaire-label {
  color: #222;
  display: block;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 18.571px;
  padding: 8px 5px 6px;
}

.moustiquaire-price {
  background: #91AE3B;
  border-top: 1px solid #BDBDBD;
  color: #fff;
  display: block;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 18.571px;
  padding: 5px 10px;
  width: 100%;
}

.moustiquaire-dimensions {
  margin-top: 28px;
}

.moustiquaire-dimension-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 763px;
}

.moustiquaire-dimension-field {
  color: #222;
  display: flex;
  flex-direction: column;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 600;
  gap: 6px;
  line-height: 18.571px;
  position: relative;
}

.moustiquaire-dimension-field small {
  color: #222;
  font-size: 13px;
  font-weight: 400;
}

.moustiquaire-dimension-field input {
  border: 1px solid #595959;
  border-radius: 4px;
  color: transparent;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  height: 40px;
  padding: 0 11px;
  width: 100%;
}

.moustiquaire-dimension-scale {
  align-items: center;
  bottom: 10px;
  color: #222;
  display: flex;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  font-weight: 400;
  justify-content: space-between;
  left: 11px;
  opacity: 0.7;
  pointer-events: none;
  position: absolute;
  right: 11px;
}

.moustiquaire-dimension-scale span:nth-child(2) {
  opacity: 1;
}

.moustiquaire-note {
  align-items: center;
  color: #4B4743;
  display: flex;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 400;
  gap: 4px;
  line-height: 20px;
  margin: 4px 0 0;
}

@media (max-width: 767px) {
  .moustiquaire-dimension-grid {
    grid-template-columns: 1fr;
  }
}

.config-section--garage {
  gap: 12px;
}

.garage-card-grid {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
}

.garage-card {
  background: #fff;
  border: 1px solid #bdbdbd;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 206px;
  overflow: hidden;
  width: 142px;
}

.garage-card[aria-selected="true"],
.card-radio:checked + .garage-card {
  border-color: #91ae3b;
  box-shadow: 0 0 0 2px rgba(145, 174, 59, 0.22);
}

.garage-card__image {
  border-bottom: 1px solid #bdbdbd;
  display: block;
  height: 138.38px;
  overflow: hidden;
  position: relative;
}

.garage-card__image img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.garage-card__label {
  color: #222;
  font: 600 12px/18.571px Poppins, sans-serif;
  min-height: 29px;
  padding: 6px 5px 0;
  text-align: center;
}

.garage-card__desc {
  color: #4b4743;
  font: 400 10px/18.571px Poppins, sans-serif;
  padding: 0 5px 8px;
  text-align: center;
}

.garage-card__price {
  align-items: center;
  background: #91ae3b;
  color: #fff;
  display: flex;
  font: 600 13px/18.571px Poppins, sans-serif;
  justify-content: center;
  min-height: 29px;
  width: 100%;
}

.garage-card--tall {
  min-height: 349px;
}

.garage-subsection {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.garage-subtitle {
  background: #edf6ff;
  color: #124170;
  font: 500 16px/20px Poppins, sans-serif;
  padding: 5px 20px;
  width: 100%;
}

.garage-inline-grid,
.garage-dimension-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(220px, 371px));
  width: 100%;
}

.garage-inline-option,
.garage-dimension-field input {
  background: #fff;
  border: 1px solid #595959;
  border-radius: 4px;
  height: 40px;
}

.garage-inline-option {
  align-items: center;
  color: #222;
  cursor: pointer;
  display: flex;
  font: 400 15px/19.2px Poppins, sans-serif;
  gap: 4px;
  justify-content: space-between;
  padding: 0 12px;
}

.garage-inline-option strong {
  color: #91ae3b;
  font-weight: 600;
}

.garage-radio-dot {
  border: 1px solid #222;
  border-radius: 50%;
  flex: 0 0 auto;
  height: 16px;
  width: 16px;
}

.card-radio:checked + .garage-inline-option .garage-radio-dot {
  border: 5px solid #124170;
}

.garage-dimension-field {
  color: #222;
  display: flex;
  flex-direction: column;
  font: 600 13px/18.571px Poppins, sans-serif;
  gap: 5px;
}

.garage-dimension-field input {
  font: 400 15px/19.2px Poppins, sans-serif;
  padding: 0 12px;
  width: 100%;
}

.garage-dimension-field small {
  color: #6a6a6a;
  display: flex;
  font: 400 12px/1.4 Poppins, sans-serif;
  justify-content: space-between;
}

.garage-note {
  color: #6a6a6a;
  font: 400 12px/18.571px Poppins, sans-serif;
  margin: 0;
}

.garage-palette {
  border: 1px solid transparent;
  cursor: pointer;
  display: block;
  max-width: 776px;
  width: 100%;
}

.garage-palette img {
  display: block;
  height: auto;
  width: 100%;
}

.garage-palette[aria-selected="true"] {
  border-color: #91ae3b;
}

.garage-frame-swatch {
  border: 1px solid #ddd;
  border-radius: 2px;
  display: block;
  height: 97px;
  margin: 10px auto 0;
  width: 108px;
}

.garage-card--frame {
  min-height: 175px;
}

@media (max-width: 767px) {
  .garage-inline-grid,
  .garage-dimension-grid {
    grid-template-columns: 1fr;
  }
}

.card-visual--schema span {
  background: linear-gradient(135deg, #f7fbff 0%, #e6f0f8 100%);
  border: 5px solid #d8d8d8;
  display: block;
  height: 62px;
  position: relative;
  width: 58px;
}

.card-visual--schema span::before,
.card-visual--schema span::after {
  background: #9ea5aa;
  content: "";
  position: absolute;
}

.card-visual--schema span::before {
  height: 100%;
  left: 50%;
  top: 0;
  width: 1px;
}

.card-visual--schema span::after {
  height: 1px;
  left: 0;
  top: 50%;
  width: 100%;
}

.card-visual--1-vantail span::before,
.card-visual--fixe span::before,
.card-visual--sans-imposte-allege span::before {
  display: none;
}

.card-visual--3-vantaux span::before {
  box-shadow: -15px 0 0 #9ea5aa, 15px 0 0 #9ea5aa;
  left: 50%;
}

.card-visual--ouverture-a-la-francaise span::after,
.card-visual--oscillo-battant span::after {
  background: transparent;
  border-bottom: 1px solid #124170;
  border-left: 1px solid #124170;
  height: 42px;
  left: 8px;
  top: 8px;
  transform: skewY(-18deg);
  width: 38px;
}

.card-visual--soufflet span::after,
.card-visual--imposte span::after {
  top: 25%;
}

.card-visual--antivol span,
.card-visual--securite span,
.card-visual--sécurité span {
  border-color: #b7c28a;
}

.cards-grid--dynamic .card-label {
  color: #222;
  display: block;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  padding: 7px 8px;
  text-align: center;
  width: 100%;
}

.cards-grid--dynamic .card-meta {
  color: #4B4743;
  display: block;
  font-family: Poppins, sans-serif;
  font-size: 11px;
  line-height: 1.25;
  margin: -2px 0 8px;
  padding: 0 8px;
  text-align: center;
  width: 100%;
}

.cards-grid--dynamic .card-price {
  background: #91AE3B;
  color: #fff;
  display: block;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  margin-top: auto;
  padding: 5px 8px;
  text-align: center;
  width: 100%;
}

.cards-grid--dynamic .card-option--material {
  min-height: 181px;
  width: 142px;
}

.cards-grid--dynamic .card-option--material .card-visual {
  height: 140px;
  padding: 1px;
  width: 140px;
}

.cards-grid--dynamic .card-option--profile {
  min-height: 236px;
  width: auto;
}

.cards-grid--dynamic .card-option--profile .card-visual {
  height: 150px;
  padding: 8px 10px 0;
  width: 100%;
}

.cards-grid--dynamic .card-option--profile .card-label {
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 4px;
}

.cards-grid--dynamic .card-option--range,
.cards-grid--dynamic .card-option--gamme,
.cards-grid--dynamic .card-option--window-type,
.cards-grid--dynamic .card-option--special-shape,
.cards-grid--dynamic .card-option--opening,
.cards-grid--dynamic .card-option--imposte,
.cards-grid--dynamic .card-option--glazing,
.cards-grid--dynamic .card-option--spacer,
.cards-grid--dynamic .card-option--ventilation,
.cards-grid--dynamic .card-option--handle,
.cards-grid--dynamic .card-option--accessory {
  min-height: 112px;
  width: 155px;
}

.config-wrapper .cards-grid--handle {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cards-grid--dynamic .card-option--handle {
  min-height: 244px;
  overflow: hidden;
  padding: 0;
  width: 142px;
}

.cards-grid--dynamic .card-option--handle .card-visual {
  background: #fff;
  height: 138.38px;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}

.cards-grid--dynamic .card-option--handle .card-visual::before {
  background: linear-gradient(131deg, rgba(255, 255, 255, 0.2) 0%, rgba(190, 190, 190, 0.2) 100%);
  border-radius: 3px 3px 0 0;
  content: "";
  height: 123px;
  left: 1px;
  pointer-events: none;
  position: absolute;
  top: 0.86px;
  width: 140px;
  z-index: 1;
}

.cards-grid--dynamic .card-option--handle .card-visual img {
  border-radius: 3px 3px 0 0;
  height: 123px;
  left: 1px;
  object-fit: contain;
  position: absolute;
  top: 0.86px;
  width: 140px;
}

.cards-grid--dynamic .card-option--handle .card-label {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  font-size: 13px;
  justify-content: center;
  line-height: 18.571px;
  min-height: 66px;
  padding: 7px 2px;
}

.cards-grid--dynamic .card-option--handle .card-price {
  border-radius: 0 0 4px 4px;
  min-height: 29px;
  padding: 5px 10px;
}

.config-wrapper .cards-grid--specialshape {
  display: grid;
  grid-template-columns: repeat(4, minmax(145px, 1fr));
  gap: 12px;
}

.cards-grid--dynamic .card-option--special-shape {
  min-height: 166px;
  width: 100%;
}

.card-option--special-shape .card-visual--schema span,
.card-visual--special-shape span {
  clip-path: polygon(20% 100%, 20% 34%, 50% 0, 80% 34%, 80% 100%);
  width: 64px;
}

.card-option--color .card-swatch {
  border: 1px solid #BDBDBD;
  border-radius: 2px;
  display: block;
  height: 48px;
  margin: 12px auto 4px;
  width: 86px;
}

.cards-grid--dynamic .card-option--color {
  min-height: 142px;
}

.config-section--colors {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.config-section--colors .section-header--full {
  margin-bottom: 0;
}

.color-material-band {
  align-items: center;
  background: #edf6ff;
  color: #124170;
  display: flex;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  min-height: 30px;
  padding: 5px 20px;
  width: 100%;
}

.color-palette-grid {
  align-items: start;
  display: grid;
  gap: 12px 9px;
  grid-template-columns: repeat(auto-fill, 70px);
  max-width: 790px;
  overflow: visible;
}

.color-palette-grid--ral {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 780px;
  width: 100%;
}

.color-palette-groups--aluminium {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 776px;
  width: 100%;
}

.color-palette-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.color-palette-group-title {
  color: #124170;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  text-transform: uppercase;
}

.color-palette-grid--aluminium-bands {
  align-items: start;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  max-width: 776px;
  overflow: visible;
  width: 100%;
}

.color-palette-option {
  background: #fff;
  border: 1px solid transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 0;
  position: relative;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}

.color-palette-option[data-tooltip]::before {
  background: #124170;
  border-radius: 4px;
  bottom: calc(100% + 8px);
  color: #fff;
  content: attr(data-tooltip);
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 500;
  left: 50%;
  line-height: 16px;
  max-width: 220px;
  opacity: 0;
  padding: 6px 8px;
  pointer-events: none;
  position: absolute;
  text-align: center;
  transform: translateX(-50%) translateY(4px);
  transition: opacity .16s, transform .16s;
  white-space: nowrap;
  z-index: 20;
}

.color-palette-option[data-tooltip]::after {
  display: none;
}

.color-palette-option[data-tooltip]:hover::before,
.card-radio:focus-visible + .color-palette-option[data-tooltip]::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.color-palette-option:hover {
  border-color: #91AE3B;
  box-shadow: 0 2px 8px rgba(18, 65, 112, 0.12);
  transform: translateY(-1px);
}

.card-radio:focus-visible + .color-palette-option {
  outline: 2px solid #124170;
  outline-offset: 2px;
}

.card-radio:checked + .color-palette-option {
  border-color: #91AE3B;
  box-shadow: 0 0 0 2px #91AE3B;
}

.card-radio:checked + .color-palette-option::after {
  align-items: center;
  background: #91AE3B;
  border-radius: 50%;
  color: #fff;
  content: "✓";
  display: flex;
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 700;
  height: 20px;
  justify-content: center;
  position: absolute;
  right: -7px;
  top: -7px;
  width: 20px;
}

.card-radio:checked + .color-palette-option::after {
  display: flex;
}

.color-palette-swatch {
  border: 1px solid #BDBDBD;
  box-sizing: border-box;
  display: block;
  height: 70px;
  overflow: hidden;
  position: relative;
  transition: transform .18s ease;
  width: 70px;
}

.color-palette-option:hover .color-palette-swatch,
.card-radio:focus-visible + .color-palette-option .color-palette-swatch {
  transform: scale(1.2);
  z-index: 2;
}

.color-palette-swatch--figma img {
  display: block;
  pointer-events: none;
  transition: transform .18s ease;
}

.color-palette-option--image-only {
  box-sizing: border-box;
  gap: 0;
  height: 70px;
  width: 70px;
}

.color-palette-option--aluminium-band {
  border: 0;
  box-sizing: border-box;
  height: 78px;
  min-width: 8px;
  padding: 0;
  width: 8px;
}

.color-palette-option--aluminium-band:hover,
.card-radio:focus-visible + .color-palette-option--aluminium-band {
  box-shadow: inset 0 0 0 1px #124170;
  transform: none;
}

.card-radio:checked + .color-palette-option--aluminium-band {
  box-shadow: inset 0 0 0 2px #91AE3B;
}

.card-radio:checked + .color-palette-option--aluminium-band::after {
  font-size: 9px;
  height: 14px;
  right: -6px;
  top: -6px;
  width: 14px;
  z-index: 3;
}

.color-palette-option--aluminium-band .color-palette-swatch {
  border: 0;
  height: 78px;
  width: 8px;
}

.color-palette-option--ral {
  border-color: #BDBDBD;
  padding: 0;
  width: 100%;
}

.color-palette-option--ral .color-palette-swatch {
  border: 0;
  height: 78px;
  width: 100%;
}

.color-palette-name {
  color: #222;
  display: block;
  font-family: Poppins, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  max-width: 70px;
  overflow-wrap: anywhere;
}

.color-palette-option--ral .color-palette-name {
  font-size: 13px;
  line-height: 18px;
  max-width: none;
  padding: 0 10px;
}

.color-palette-meta,
.color-palette-price {
  color: #4B4743;
  display: block;
  font-family: Poppins, sans-serif;
  font-size: 10px;
  line-height: 13px;
  max-width: 70px;
  overflow-wrap: anywhere;
}

.color-palette-option--ral .color-palette-meta,
.color-palette-option--ral .color-palette-price {
  max-width: none;
  padding: 0 10px;
}

.color-palette-option--ral .color-palette-price {
  padding-bottom: 8px;
}

.dimension-input-wrap .dim-value {
  cursor: text;
}

.next-step-wrap {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.btn-next-step--cart {
  background: var(--green);
}

.btn-next-step--cart:hover {
  background: #78932f;
}

.config-wrapper .cards-grid--range {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cards-grid--dynamic .card-option--gamme {
  min-height: 523px;
  padding: 0 9px 14px;
  width: 230px;
}

.cards-grid--dynamic .card-option--gamme .card-visual {
  height: 176px;
  margin: 0 auto 12px;
  padding: 0;
  width: 176px;
}

.cards-grid--dynamic .card-option--gamme .card-visual img {
  height: 100%;
  margin: 0;
  width: 100%;
}

.cards-grid--dynamic .card-option--gamme .card-title {
  color: #222;
  display: block;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 18.571px;
  padding: 0;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}

.cards-grid--dynamic .card-option--gamme .card-desc {
  color: #4B4743;
  display: block;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;
  min-height: 42px;
  padding: 2px 0 12px;
  text-align: center;
  width: 100%;
}

.cards-grid--dynamic .card-option--gamme .feature-list {
  margin: 0;
  padding: 0;
}

.cards-grid--dynamic .card-option--gamme .feature-list li {
  align-items: flex-start;
  min-height: 38px;
}

.cards-grid--dynamic .card-option--profile {
  min-height: 430px;
  overflow: visible;
  padding: 0 14px 14px;
  position: relative;
  width: auto;
}

.cards-grid--dynamic .card-option--profile .card-visual {
  height: 176px;
  margin: 0 -14px 4px;
  padding: 0;
  width: 100%;
}

.cards-grid--dynamic .card-option--profile .card-visual img {
  height: 100%;
  margin: 0;
  width: 100%;
}

.cards-grid--dynamic .card-option--profile .card-label {
  font-family: Poppins, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  padding: 0 0 12px;
}

.cards-grid--dynamic .card-option--profile .uw-badge {
  align-items: center;
  background: var(--cfg-green);
  border-radius: 4px;
  color: #fff;
  display: flex;
  flex-direction: column;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 700;
  justify-content: center;
  left: 8px;
  line-height: 1.1;
  min-height: 36px;
  min-width: 58px;
  padding: 4px 7px;
  position: absolute;
  top: 8px;
  z-index: 1;
}

.cards-grid--dynamic .card-option--profile .uw-badge small {
  font-size: 8px;
  font-weight: 400;
  line-height: 1;
}

.card-option--profile .uw-badge--image,
.cards-grid--dynamic .card-option--profile .uw-badge--image {
  background: transparent;
  border-radius: 0;
  color: inherit;
  display: block;
  height: 38px;
  line-height: 0;
  min-height: 0;
  min-width: 0;
  padding: 0;
  width: 58px;
}

.card-option--profile .uw-badge--image img,
.cards-grid--dynamic .card-option--profile .uw-badge--image img {
  display: block;
  height: 38px;
  width: 58px;
}

.cards-grid--dynamic .card-option--profile .info-icon {
  background: #fff;
  right: 8px;
  top: 8px;
  z-index: 5;
}

.cards-grid--dynamic .card-option--profile .spec-list {
  margin: 0;
  padding: 0;
}

.cards-grid--dynamic .card-option--profile .spec-list li {
  align-items: flex-start;
  border-bottom-color: #BDBDBD;
  color: #222;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 12px;
  line-height: 18.571px;
  min-height: 42px;
  padding: 7px 0;
}

.config-wrapper .cards-grid--door-models {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cards-grid--dynamic .card-option--door-model {
  border: 1px solid #BDBDBD;
  border-radius: 4px;
  min-height: 181px;
  overflow: hidden;
  padding: 0;
  width: 142px;
}

.cards-grid--dynamic .card-option--door-model .card-visual {
  background: #fff;
  height: 138px;
  margin: 0;
  padding: 0;
  width: 100%;
}

.cards-grid--dynamic .card-option--door-model .card-visual img {
  display: block;
  height: 100%;
  margin: 0;
  object-fit: contain;
  width: 100%;
}

.cards-grid--dynamic .card-option--door-model .card-visual--missing {
  background: #fff;
}

.cards-grid--dynamic .card-option--door-model .card-label {
  align-items: center;
  color: #222;
  display: flex;
  flex: 1 1 auto;
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 600;
  justify-content: center;
  line-height: 15px;
  min-height: 33px;
  padding: 4px 6px;
  text-align: center;
  width: 100%;
}

.cards-grid--dynamic .card-option--door-model .card-price {
  background: #91AE3B;
  color: #fff;
  display: block;
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  margin-top: auto;
  padding: 5px 6px;
  text-align: center;
  width: 100%;
}

.door-model-pagination {
  align-items: center;
  color: #A2A2A2;
  display: flex;
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 400;
  gap: 4px;
  justify-content: center;
  line-height: 18.571px;
  margin-top: 24px;
  width: 100%;
}

.door-model-pagination__page,
.door-model-pagination__separator {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  display: inline-flex;
  font: inherit;
  justify-content: center;
  min-height: 19px;
  padding: 0;
}

.door-model-pagination__page {
  cursor: pointer;
}

.door-model-pagination__page.is-active {
  color: #222;
  cursor: default;
}

.door-preview-svg {
  max-height: 430px;
}

.garage-preview-svg {
  max-height: 430px;
}

.garage-preview-svg .garage-grain-line {
  fill: none;
  stroke-linecap: round;
  stroke-width: 0.9;
  vector-effect: non-scaling-stroke;
}

.garage-preview-svg .garage-grain-knot {
  fill: none;
  stroke-width: 0.85;
  vector-effect: non-scaling-stroke;
}

.garage-preview-svg .garage-grain-knot--inner {
  stroke-opacity: 0.42;
}

.garage-preview-svg .garage-panel-groove {
  fill: none;
  stroke: rgba(24, 27, 28, 0.38);
  stroke-linecap: round;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.sliding-bay-preview-svg {
  max-height: 360px;
}
.sliding-bay-preview-svg .preview-opening-line--sliding {
  stroke: rgba(58, 66, 72, 0.42);
  stroke-opacity: 1;
}
.sliding-bay-preview-svg .preview-opening-rail {
  stroke: rgba(58, 66, 72, 0.26);
}
.sliding-bay-preview-svg .sliding-overlap-sash--mobile {
  filter: drop-shadow(0 2px 3px rgba(20, 30, 40, 0.18));
}
.sliding-bay-preview-svg .sliding-overlap-sash--fixed {
  opacity: 0.92;
}

.config-section--door-repartition {
  max-width: 779px;
}

.door-repartition-layout {
  align-items: center;
  display: flex;
  gap: 40px;
  margin-top: 18px;
}

.door-repartition-preview {
  display: grid;
  grid-template-columns: 52px 110px 52px;
  grid-template-rows: 54px 190px;
  gap: 6px;
}

.door-repartition-preview span {
  background: #edf6ff;
  border: 2px solid #91AE3B;
  border-radius: 4px;
  display: block;
}

.door-repartition-top {
  grid-column: 1 / 4;
}

.door-repartition-main {
  background: #124170 !important;
}

.door-repartition-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 240px;
}

.door-measure-row {
  align-items: center;
  display: flex;
  gap: 18px;
}

.door-measure-value {
  border: 1px solid #BDBDBD;
  border-radius: 8px;
  color: #222;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  line-height: 20px;
  min-width: 92px;
  padding: 10px;
  text-align: center;
}

.door-measure-label {
  color: #4B4743;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  line-height: 18px;
}

/* ========================= */
/* Responsive                */
/* ========================= */
@media (max-width: 1024px) {
  .config-wrapper {
    flex-direction: column;
  }
  .config-left {
    width: 100%;
    min-width: unset;
    position: static;
  }
  .cards-grid--range,
  .cards-grid--gamme {
    grid-template-columns: 1fr 1fr;
  }
  .cards-grid--opening {
    grid-template-columns: repeat(4, 1fr);
  }
  .config-wrapper .cards-grid--specialshape {
    grid-template-columns: repeat(3, minmax(145px, 1fr));
  }
  .glazing-card-row--options {
    grid-template-columns: repeat(auto-fit, 142px);
  }
}

@media (max-width: 768px) {
  .config-wrapper {
    max-width: 100%;
    overflow: hidden;
    padding-left: 12px;
    padding-right: 12px;
    width: 100%;
  }
  .config-left,
  .config-right {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }
  .preview-box .section-header {
    flex-wrap: wrap;
    width: 100%;
  }
  .preview-image {
    min-height: 320px;
    overflow: visible;
    padding: 22px 0;
  }
  .window-preview {
    max-width: min(320px, 100%);
    min-height: 300px;
  }
  .window-preview-svg {
    max-height: 320px;
    max-width: 100%;
    width: 100%;
  }
  .config-page-header h1 {
    font-size: 28px;
  }
  .cards-grid--gamme {
    grid-template-columns: 1fr;
  }
  .cards-grid--opening {
    grid-template-columns: repeat(3, 1fr);
  }
  .config-wrapper .cards-grid--specialshape {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .glazing-card-row--options {
    grid-template-columns: repeat(2, minmax(142px, 1fr));
  }
  .crossbar-preview-frame {
    height: 230px;
  }
  .crossbar-preview {
    height: 200px;
    width: min(254px, 86vw);
  }
  .crossbar-controls {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .crossbar-axis {
    flex-wrap: wrap;
  }
  .dimensions-grid {
    grid-template-columns: 1fr;
  }
  .repartition-layout {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }
  .repartition-layout--shape {
    align-items: flex-start;
  }
  .standard-repartition-layout--single {
    grid-template-areas:
      "visual"
      "top"
      "body"
      "bottom"
      "widths";
    grid-template-columns: minmax(0, 1fr);
    max-width: 100%;
  }
  .standard-repartition-preview {
    justify-self: start;
    max-width: min(320px, 100%);
    width: 100%;
  }
  .standard-repartition-field--widths {
    justify-self: start;
  }
  .repartition-shape-board {
    grid-template-areas:
      "visual visual"
      "top-left top"
      "top-right right"
      "left base"
      "bottom-left bottom-right"
      "extra-left extra"
      "extra-right extra-right";
    grid-template-columns: 1fr 1fr;
    max-width: 360px;
    width: 100%;
  }
  .repartition-field .repartition-measure {
    align-items: flex-start;
    width: 100%;
  }
  .repartition-field--top-left,
  .repartition-field--top,
  .repartition-field--top-right,
  .repartition-field--left,
  .repartition-field--right,
  .repartition-field--bottom-left,
  .repartition-field--base,
  .repartition-field--bottom-right,
  .repartition-field--extra-left,
  .repartition-field--extra,
  .repartition-field--extra-right,
  .repartition-visual--shape {
    justify-self: center;
  }
  .repartition-note {
    max-width: 220px;
  }
  .step-item {
    font-size: 12px;
    padding: 10px 14px 10px 24px;
  }
  .card-option--material {
    width: calc(50% - 7px);
  }
  .card-option--imposte {
    width: calc(50% - 7px);
  }
  .steps-nav {
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .step-item {
    flex: 0 0 auto;
  }
  .summary-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .next-step-wrap {
    flex-direction: column;
  }
  .btn-next-step {
    width: 100%;
  }
  .door-repartition-layout {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }
  .door-repartition-fields {
    width: 100%;
  }
  .door-measure-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}
.config-section--sliding-bay-profile .cards-grid--profile {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 180px));
  gap: 12px;
  align-items: start;
}

.sliding-profile-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 180px;
  min-height: 350px;
  padding: 0 0 14px;
  border: 1px solid #bdbdbd;
  border-radius: 6px;
  background: #fff;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .06);
  cursor: pointer;
}

.sliding-profile-card[aria-selected="true"] {
  border: 2px solid #91ae3b;
}

.sliding-profile-uw {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: Poppins, sans-serif;
  line-height: 1;
}

.sliding-profile-uw span {
  display: block;
  padding: 2px 7px;
  border: 1px solid #12a12b;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  background: #fff;
  color: #111;
  font-size: 11px;
  font-weight: 600;
}

.sliding-profile-uw strong {
  display: block;
  min-width: 58px;
  padding: 4px 8px;
  background: #12a12b;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.sliding-profile-uw--image {
  display: block;
  width: 96px;
  height: 50px;
}

.sliding-profile-uw--image img {
  display: block;
  width: 96px;
  height: 50px;
  object-fit: contain;
}

.sliding-profile-info {
  position: absolute;
  z-index: 2;
  top: 13px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 2px solid #555;
  border-radius: 50%;
  color: #555;
  font-size: 13px;
  font-weight: 700;
  cursor: help;
}

.sliding-profile-info:focus-visible {
  outline: 2px solid var(--cfg-blue);
  outline-offset: 2px;
}

.sliding-profile-info .profile-tooltip {
  background: #124170;
  border-radius: 8px;
  bottom: calc(100% + 8px);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 16px;
  opacity: 0;
  padding: 12px;
  pointer-events: none;
  position: absolute;
  right: -8px;
  text-align: center;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  visibility: hidden;
  width: 232px;
  z-index: 30;
}

.sliding-profile-info .profile-tooltip::after {
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #124170;
  bottom: -8px;
  content: "";
  position: absolute;
  right: 11px;
}

.sliding-profile-info:hover .profile-tooltip,
.sliding-profile-info:focus .profile-tooltip,
.sliding-profile-info:focus-visible .profile-tooltip {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.sliding-profile-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 176px;
  padding: 12px 12px 0;
}

.sliding-profile-image img {
  max-width: 100%;
  max-height: 160px;
  object-fit: contain;
}

.sliding-profile-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 8px;
  color: #222;
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 18.571px;
  text-align: center;
}

.sliding-profile-facts {
  display: flex;
  flex-direction: column;
  margin: 0 10px;
  border-top: 1px solid #efefef;
}

.sliding-profile-facts span {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 6px;
  min-height: 58px;
  padding: 12px 0;
  border-bottom: 1px solid #efefef;
  color: #222;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  line-height: 18px;
}

.sliding-profile-facts b {
  color: #006eb8;
  font-size: 18px;
  line-height: 14px;
}

.config-section--sliding-bay-material .cards-grid--material {
  grid-template-columns: repeat(auto-fill, minmax(142px, 142px));
}

.config-section--sliding-bay-material .card-option--material {
  width: 142px;
  min-height: 181px;
}

.config-section--sliding-bay-material .card-option--material .card-image {
  height: 138px;
}

.config-section--sliding-bay-material .card-option--material img {
  object-fit: contain;
}

.card-option--sliding-window-type {
  width: 142px;
  min-height: 206px;
  padding: 0;
  overflow: hidden;
}

.card-option--sliding-window-type .card-image {
  height: 138px;
  padding: 12px;
}

.card-option--sliding-window-type .card-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.card-option--sliding-window-type .card-title {
  min-height: 36px;
  padding: 0 10px;
}

.card-option--sliding-window-type .card-price {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 32px;
  margin-top: auto;
  border-radius: 0 0 4px 4px;
  background: #91ae3b;
  color: #fff;
  font-weight: 700;
}

.sliding-opening-block {
  margin-top: 12px;
}

.sliding-opening-row {
  display: flex;
  gap: 12px;
  align-items: center;
  overflow-x: auto;
  padding: 18px 0 4px;
}

.sliding-opening-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 142px;
  width: 142px;
  height: 142px;
  border: 1px solid #bdbdbd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.sliding-opening-card[aria-selected="true"] {
  border-color: #91ae3b;
  box-shadow: inset 0 0 0 1px #91ae3b;
}

.sliding-opening-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sliding-opening-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.config-section--sliding-bay-repartition {
  margin-top: 28px;
}

.sliding-bay-repartition-layout {
  grid-template-areas:
    "visual body"
    "widths widths";
  grid-template-columns: minmax(180px, 320px) minmax(160px, 320px);
  max-width: 720px;
}

.sliding-bay-repartition-preview {
  min-height: 180px;
}

.sliding-bay-repartition-preview img {
  display: block;
  max-height: 180px;
  max-width: 280px;
  object-fit: contain;
  width: 100%;
}

@media (max-width: 767px) {
  .sliding-bay-repartition-layout {
    grid-template-areas:
      "visual"
      "body"
      "widths";
    grid-template-columns: minmax(0, 1fr);
    max-width: 100%;
  }
}


.color-palette-option[aria-selected="true"] {
  border-color: #91AE3B;
  box-shadow: 0 0 0 2px #91AE3B;
}

.color-palette-option[aria-selected="true"]::after,
.card-radio:checked + .color-palette-option::after {
  align-items: center;
  background: #91AE3B;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(18, 65, 112, .24);
  color: #fff;
  content: "✓";
  display: flex;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 700;
  height: 24px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: -9px;
  top: -9px;
  width: 24px;
  z-index: 5;
}

.color-palette-option--aluminium-band[aria-selected="true"]::after,
.card-radio:checked + .color-palette-option--aluminium-band::after {
  font-size: 11px;
  height: 20px;
  right: -8px;
  top: -8px;
  width: 20px;
}

.config-error-message--dimensions {
  color: #b42318;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  margin: 10px 0 0;
}

.config-section--sliding-bay-step2 {
  margin-bottom: 28px;
}

.cards-grid--sliding-bay-step2 {
  align-items: stretch;
  display: flex;
  gap: 12px;
  max-width: 779px;
  overflow-x: auto;
  padding-bottom: 4px;
  width: 100%;
}

.card-option--sliding-bay-step2 {
  flex: 0 0 142px;
  min-height: 204px;
  width: 142px;
}

.card-option--sliding-bay-step2 .card-visual {
  height: 138px;
  width: 100%;
}

.card-option--sliding-bay-step2 .card-visual img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.crossbar-repartition--sliding-bay {
  margin-bottom: 28px;
}

.sliding-bay-crossbar-layout {
  align-items: flex-start;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 320px);
  max-width: 779px;
  width: 100%;
}

.crossbar-preview-frame--sliding-bay {
  min-height: 260px;
  padding: 18px;
}

.sliding-bay-crossbar-svg {
  display: block;
  height: auto;
  max-width: 520px;
  width: 100%;
}

.sliding-bay-crossbar-frame {
  fill: #eef6f8;
  stroke: #4b5960;
  stroke-width: 8;
}

.sliding-bay-crossbar-glass {
  fill: #eaf5ff;
  stroke: #7e8589;
  stroke-width: 3;
}

.sliding-bay-crossbar-line {
  stroke: #5d6366;
  stroke-linecap: square;
  stroke-width: 3;
}

@media (max-width: 767px) {
  .sliding-bay-crossbar-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.crossbar-repartition--sliding-bay {
  gap: 24px;
  margin-bottom: 28px;
  max-width: 779px;
}

.crossbar-repartition--sliding-bay .crossbar-repartition-title {
  background: #edf6ff;
  color: #124170;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 500;
  height: 30px;
  justify-content: flex-start;
  line-height: 20px;
  padding: 5px 20px;
  text-transform: none;
  width: 100%;
}

.sliding-bay-crossbar-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 779px;
  width: 100%;
}

.crossbar-preview-frame--sliding-bay {
  align-items: center;
  border: 1px solid #bdbdbd;
  border-radius: 8px;
  display: flex;
  height: 266px;
  justify-content: center;
  min-height: 266px;
  padding: 20px;
  width: 779px;
}

.crossbar-preview-frame--sliding-bay img {
  display: block;
  height: 226px;
  object-fit: contain;
  width: 254px;
}

.sliding-crossbar-field-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sliding-crossbar-field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sliding-crossbar-field-title {
  color: #333;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  margin: 0;
}

.sliding-crossbar-controls {
  align-items: center;
  display: flex;
  gap: 24px;
}

.sliding-crossbar-axis {
  align-items: center;
  display: flex;
  gap: 8px;
}

.sliding-crossbar-axis-label {
  color: #000;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 20px;
  white-space: nowrap;
}

.sliding-crossbar-choice-group {
  align-items: center;
  display: flex;
  gap: 8px;
}

.sliding-crossbar-choice {
  display: inline-flex;
  position: relative;
}

.sliding-crossbar-dot {
  align-items: center;
  background: #fff;
  border: 1px solid #bdbdbd;
  border-radius: 50%;
  color: #000;
  cursor: pointer;
  display: inline-flex;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 400;
  height: 28px;
  justify-content: center;
  line-height: 20px;
  width: 28px;
}

.crossbar-radio:checked + .sliding-crossbar-dot,
.sliding-crossbar-dot--active {
  background: #91ae3b;
  border-color: #91ae3b;
  color: #fff;
}

@media (max-width: 767px) {
  .crossbar-preview-frame--sliding-bay {
    max-width: 100%;
    width: 100%;
  }

  .sliding-crossbar-controls {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
}

.card-option[data-config-group="voletMotorisation"][data-option-id="Électrique"] .card-visual {
  aspect-ratio: 1 / 1;
  height: 138px;
  width: 138px;
}

.card-option[data-config-group="voletMotorisation"][data-option-id="Électrique"] .card-visual img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.card-option[data-config-group="voletMotorisation"][data-option-id="Électrique"] .card-visual {
  aspect-ratio: auto;
  height: 138px;
  width: 100%;
}

.card-option[data-config-group="voletMotorisation"][data-option-id="Électrique"] .card-price {
  border-radius: 0;
}