/* ===================================================================
   M3 DESIGN TOKENS
   =================================================================== */
:root {

  /* ---- M3 Color Tokens — Harmonisé avec DA Couzing ---- */
  /* DA : Principal #1C0D0A | Background #FFFAF5 | CTA #FF6210 */

  --md-sys-color-primary: #FF6210;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #FFE0CC;
  --md-sys-color-on-primary-container: #3D1600;

  --md-sys-color-secondary: #6B5144;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #FFE0CC;
  --md-sys-color-on-secondary-container: #3D1600;

  --md-sys-color-tertiary: #5C6237;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #E1E7B0;
  --md-sys-color-on-tertiary-container: #1A1F00;

  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;

  --md-sys-color-surface: #FFFAF5;
  --md-sys-color-surface-dim: #E8DDD5;
  --md-sys-color-surface-bright: #FFFAF5;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #FFF7F0;
  --md-sys-color-surface-container: #FFF3EB;
  --md-sys-color-surface-container-high: #FFEEE3;
  --md-sys-color-surface-container-highest: #FFE8D9;
  --md-sys-color-on-surface: #1C0D0A;
  --md-sys-color-on-surface-variant: #5C4437;
  --md-sys-color-outline: #8D7B70;
  --md-sys-color-outline-variant: #D4C4B8;
  --md-sys-color-inverse-surface: #362922;
  --md-sys-color-inverse-on-surface: #FFF0E8;

  /* ---- Couleurs catégories Couzing ---- */
  --cz-blue: #C65800;
  --cz-blue-container: #FFE0CC;
  --cz-amber: #8A6B00;
  --cz-amber-container: #FFDF9E;
  --cz-red: #BA1A1A;
  --cz-red-container: #FFDAD6;
  --cz-green: #006C4C;
  --cz-green-container: #89F8C7;

  /* ---- M3 Typography Tokens ---- */
  --md-sys-typescale-display-font: "Plus Jakarta Sans", "DM Sans", sans-serif;
  --md-sys-typescale-body-font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --md-sys-typescale-label-font: "DM Sans", sans-serif;

  --md-sys-typescale-headline-large-size: 32px;
  --md-sys-typescale-headline-large-line-height: 40px;
  --md-sys-typescale-headline-large-weight: 700;

  --md-sys-typescale-headline-medium-size: 28px;
  --md-sys-typescale-headline-medium-line-height: 36px;

  --md-sys-typescale-title-large-size: 22px;
  --md-sys-typescale-title-large-line-height: 28px;
  --md-sys-typescale-title-large-weight: 600;

  --md-sys-typescale-title-medium-size: 16px;
  --md-sys-typescale-title-medium-line-height: 24px;
  --md-sys-typescale-title-medium-weight: 600;

  --md-sys-typescale-body-large-size: 16px;
  --md-sys-typescale-body-large-line-height: 24px;

  --md-sys-typescale-body-medium-size: 14px;
  --md-sys-typescale-body-medium-line-height: 20px;

  --md-sys-typescale-body-small-size: 12px;
  --md-sys-typescale-body-small-line-height: 16px;

  --md-sys-typescale-label-large-size: 14px;
  --md-sys-typescale-label-large-line-height: 20px;
  --md-sys-typescale-label-large-weight: 600;

  --md-sys-typescale-label-medium-size: 12px;
  --md-sys-typescale-label-medium-line-height: 16px;
  --md-sys-typescale-label-medium-weight: 600;

  /* ---- M3 Shape Tokens ---- */
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* ---- M3 Elevation Shadows ---- */
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0 1px 2px 0 rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
  --md-sys-elevation-2: 0 1px 2px 0 rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
  --md-sys-elevation-3: 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px 0 rgba(0,0,0,0.3);
  --md-sys-elevation-4: 0 6px 10px 4px rgba(0,0,0,0.15), 0 2px 3px 0 rgba(0,0,0,0.3);
  --md-sys-elevation-5: 0 8px 12px 6px rgba(0,0,0,0.15), 0 4px 4px 0 rgba(0,0,0,0.3);

  /* ---- M3 Motion Tokens ---- */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-medium1: 200ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-long1: 450ms;

  /* ---- M3 State Layer Opacities ---- */
  --md-sys-state-hover-opacity: 0.08;
  --md-sys-state-pressed-opacity: 0.12;
  --md-sys-state-focus-opacity: 0.12;
}


/* ===================================================================
   CONTAINER
   =================================================================== */
#couzing-estimateur {
  font-family: var(--md-sys-typescale-body-font);
  color: var(--md-sys-color-on-surface);
  max-width: 680px;
  margin: 0 auto 60px !important;
  background: var(--md-sys-color-surface-container-lowest);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--md-sys-elevation-2);
  overflow: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  z-index: 10;
}

#couzing-estimateur * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ===================================================================
   HEADER — M3 top app bar style
   =================================================================== */
.cz-header {
  background: transparent;
  padding: 0 !important;
}

.cz-header-top {
  display: none !important;
}

.cz-logo { display: none; }
.cz-step-label { display: none; }

.cz-progress-bar {
  width: 100%;
  height: 3px;
  background: var(--md-sys-color-surface-container-high);
  overflow: hidden;
}

.cz-progress-fill {
  height: 100%;
  background: var(--md-sys-color-primary);
  transition: width var(--md-sys-motion-duration-long1) var(--md-sys-motion-easing-emphasized);
  min-width: 2%;
  opacity: 0.5;
}


/* ===================================================================
   BODY — generous spacing (M3: 24px padding minimum)
   =================================================================== */
.cz-body {
  padding: 48px 32px 40px !important;
  min-height: 360px;
}

.cz-screen {
  animation: czFadeIn var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard-decelerate);
}

@keyframes czFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ===================================================================
   BACK BUTTON — M3 icon button / text button style
   =================================================================== */
.cz-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  font-family: var(--md-sys-typescale-label-font);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  color: var(--md-sys-color-on-surface-variant) !important;
  cursor: pointer;
  padding: 10px 16px 10px 12px !important;
  margin: 0 !important;
  border-radius: var(--md-sys-shape-corner-full);
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  text-decoration: none !important;
  flex-shrink: 0;
}

.cz-back-btn:hover {
  background: var(--md-sys-color-surface-container-highest) !important;
  color: var(--md-sys-color-on-surface) !important;
  text-decoration: none !important;
}

.cz-back-btn,
.cz-back-btn:link,
.cz-back-btn:visited,
.cz-back-btn:focus {
  color: var(--md-sys-color-on-surface-variant) !important;
  text-decoration: none !important;
}
}

.cz-back-btn svg {
  width: 18px;
  height: 18px;
}


/* ===================================================================
   TYPOGRAPHY HIERARCHY — M3 type scale
   =================================================================== */
.cz-title {
  font-family: var(--md-sys-typescale-display-font);
  font-size: var(--md-sys-typescale-headline-large-size);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  font-weight: var(--md-sys-typescale-headline-large-weight);
  color: var(--md-sys-color-on-surface);
  margin-bottom: 16px !important;
  letter-spacing: -0.25px;
}

.cz-subtitle {
  font-family: var(--md-sys-typescale-body-font);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 48px !important;
}


/* ===================================================================
   WELCOME CARDS — M3 outlined card
   =================================================================== */
.cz-welcome-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cz-welcome-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 20px 28px !important;
  border-radius: var(--md-sys-shape-corner-large);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-lowest);
  cursor: pointer;
  transition: all var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
  gap: 16px;
  position: relative;
}

.cz-welcome-card:hover {
  box-shadow: var(--md-sys-elevation-1);
  border-color: var(--md-sys-color-outline);
}

.cz-welcome-card:active {
  box-shadow: var(--md-sys-elevation-0);
}

.cz-welcome-card .cz-card-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--md-sys-shape-corner-large);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.cz-welcome-card .cz-card-title {
  font-family: var(--md-sys-typescale-body-font);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line-height);
  color: var(--md-sys-color-on-surface);
}

/* ---- Category colors (M3 container approach) ---- */
.cz-welcome-card[data-path="velux"]       .cz-card-icon { background: var(--cz-blue-container); }
.cz-welcome-card[data-path="velux"]:hover { background: color-mix(in srgb, var(--cz-blue) 5%, var(--md-sys-color-surface-container-lowest)); }

.cz-welcome-card[data-path="zinguerie"]       .cz-card-icon { background: var(--cz-amber-container); }
.cz-welcome-card[data-path="zinguerie"]:hover { background: color-mix(in srgb, var(--cz-amber) 5%, var(--md-sys-color-surface-container-lowest)); }

.cz-welcome-card[data-path="urgence"]       .cz-card-icon { background: var(--cz-red-container); }
.cz-welcome-card[data-path="urgence"]:hover { background: color-mix(in srgb, var(--cz-red) 5%, var(--md-sys-color-surface-container-lowest)); }

.cz-welcome-card[data-path="diagnostic"]       .cz-card-icon { background: var(--cz-green-container); }
.cz-welcome-card[data-path="diagnostic"]:hover { background: color-mix(in srgb, var(--cz-green) 5%, var(--md-sys-color-surface-container-lowest)); }

/* Fallback for older browsers without color-mix */
@supports not (background: color-mix(in srgb, red 5%, white)) {
  .cz-welcome-card:hover { background: var(--md-sys-color-surface-container-low); }
}


/* ===================================================================
   OPTIONS — M3 list item / single-choice chip style
   =================================================================== */
.cz-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px !important;
}

.cz-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px !important;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  cursor: pointer;
  transition: all var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  background: var(--md-sys-color-surface-container-lowest);
  min-height: 64px;
}

.cz-option:hover {
  background: var(--md-sys-color-surface-container-low);
}

/* ---- M3 selected state = filled tonal style ---- */
.cz-option.selected {
  border-color: transparent;
  background: var(--md-sys-color-secondary-container);
}

/* Radio */
.cz-option .cz-option-radio {
  width: 20px;
  height: 20px;
  border-radius: var(--md-sys-shape-corner-full);
  border: 2px solid var(--md-sys-color-outline);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.cz-option.selected .cz-option-radio {
  border-color: var(--md-sys-color-primary);
  border-width: 6px;
}

.cz-option.selected .cz-option-radio::after {
  display: none;
}

/* Checkbox */
.cz-option .cz-option-check {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  border: 2px solid var(--md-sys-color-outline);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.cz-option.selected .cz-option-check {
  border-color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary);
}

.cz-option.selected .cz-option-check::after {
  content: "\2713";
  color: var(--md-sys-color-on-primary);
  font-size: 13px;
  font-weight: 700;
}

.cz-option-label {
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  font-weight: 400;
  color: var(--md-sys-color-on-surface);
}

.cz-option.selected .cz-option-label {
  font-weight: 500;
  color: var(--md-sys-color-on-secondary-container);
}

.cz-option-other-input {
  flex: 1;
  border: none;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  background: transparent;
  font-family: var(--md-sys-typescale-body-font);
  font-size: var(--md-sys-typescale-body-large-size);
  outline: none;
  color: var(--md-sys-color-on-surface);
  min-width: 0;
  padding: 8px 4px !important;
  margin-left: 8px;
}

.cz-option-other-input:focus {
  border-bottom-color: var(--md-sys-color-primary);
  border-bottom-width: 2px;
}

.cz-option-other-input::placeholder {
  color: var(--md-sys-color-outline);
}

/* Grid layout for many checkboxes */
.cz-options.cz-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cz-options-grid .cz-option {
  padding: 16px 16px !important;
  min-height: 52px;
}

.cz-options-grid .cz-option-label {
  font-size: var(--md-sys-typescale-body-medium-size);
}


/* ===================================================================
   VELUX SIZE SELECTOR — M3 card grid
   =================================================================== */
.cz-size-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 20px;
  margin-bottom: 16px;
}

.cz-size-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 12px 16px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  cursor: pointer;
  transition: all var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  text-align: center;
  background: var(--md-sys-color-surface-container-lowest);
}

.cz-size-card:hover {
  background: var(--md-sys-color-surface-container-low);
  box-shadow: var(--md-sys-elevation-1);
}

.cz-size-card.selected {
  border-color: var(--md-sys-color-primary);
  border-width: 2px;
  background: var(--md-sys-color-primary-container);
}

.cz-size-visual {
  background: var(--md-sys-color-on-surface);
  border-radius: 3px;
  margin: 8px auto 14px !important;
  opacity: 0.07;
}

.cz-size-card.selected .cz-size-visual { opacity: 0.12; }

.cz-size-code {
  font-family: var(--md-sys-typescale-body-font);
  font-size: 11px;
  font-weight: 400;
  color: var(--md-sys-color-outline);
  margin-top: 2px;
}

.cz-size-dims {
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 4px;
}

.cz-size-price {
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: 700;
  color: var(--md-sys-color-primary);
  margin-top: 8px;
}

/* Verrière visuals */
.cz-size-section-label {
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: 600;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 12px;
}

.cz-size-visual-group {
  display: flex;
  gap: 3px;
  justify-content: center;
  margin: 8px auto 14px !important;
}

.cz-size-pane {
  margin: 0 !important;
}

.cz-size-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.cz-size-card {
  position: relative;
}


/* ===================================================================
   INPUTS — M3 outlined text field
   =================================================================== */
.cz-input-group {
  margin-bottom: 28px !important;
}

.cz-input-label {
  display: block;
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  color: var(--md-sys-color-on-surface);
  margin-bottom: 8px;
}

.cz-input-hint {
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 8px;
}

.cz-input,
.cz-textarea,
.cz-select {
  width: 100%;
  padding: 16px !important;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  font-family: var(--md-sys-typescale-body-font);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  color: var(--md-sys-color-on-surface);
  background: transparent;
  transition: border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  outline: none;
}

.cz-input::placeholder,
.cz-textarea::placeholder {
  color: var(--md-sys-color-outline);
}

.cz-input:hover,
.cz-textarea:hover {
  border-color: var(--md-sys-color-on-surface);
}

.cz-input:focus,
.cz-textarea:focus,
.cz-select:focus {
  border-color: var(--md-sys-color-primary);
  border-width: 2px;
  padding: 15px;
}

.cz-input.cz-input-error {
  border-color: var(--md-sys-color-error);
}

.cz-textarea {
  min-height: 120px;
  resize: vertical;
}

.cz-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}


/* ===================================================================
   QUANTITY — M3 stepper
   =================================================================== */
.cz-quantity-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 24px;
}

.cz-quantity-btn {
  width: 56px;
  height: 56px;
  border-radius: var(--md-sys-shape-corner-full);
  border: none;
  background: var(--md-sys-color-surface-container-high);
  font-size: 24px;
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.cz-quantity-btn:hover {
  background: var(--md-sys-color-surface-container-highest);
}

.cz-quantity-btn:active {
  background: var(--md-sys-color-outline-variant);
}

.cz-quantity-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.cz-quantity-value {
  font-family: var(--md-sys-typescale-display-font);
  font-size: 48px;
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
  min-width: 64px;
  text-align: center;
}


/* ===================================================================
   VELUX TABS
   =================================================================== */
.cz-velux-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
}

.cz-velux-tab {
  padding: 4px 12px !important;
  border-radius: var(--md-sys-shape-corner-extra-small);
  font-size: var(--md-sys-typescale-body-small-size);
  font-weight: 500;
  border: none;
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  cursor: default;
  line-height: 20px;
}

.cz-velux-tab.active {
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface);
  font-weight: 600;
}

.cz-velux-tab.done {
  background: var(--cz-green-container);
  color: var(--cz-green);
}

.cz-velux-tab.done::before {
  content: "\2713 ";
}


/* ===================================================================
   FILE UPLOAD
   =================================================================== */
.cz-upload-zone {
  border: 2px dashed var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  padding: 40px 24px !important;
  text-align: center;
  cursor: pointer;
  transition: all var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  background: transparent;
}

.cz-upload-zone:hover,
.cz-upload-zone.dragover {
  border-color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary-container);
}

.cz-upload-zone svg {
  width: 32px;
  height: 32px;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 12px;
}

.cz-upload-text {
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface-variant);
}

.cz-upload-text strong { color: var(--md-sys-color-primary); }

.cz-upload-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.cz-upload-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--md-sys-color-secondary-container);
  border-radius: var(--md-sys-shape-corner-small);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: 500;
  color: var(--md-sys-color-on-secondary-container);
}

.cz-upload-file button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--md-sys-color-on-secondary-container);
  padding: 0;
  line-height: 1;
}


/* ===================================================================
   FOOTER + CTA — M3 filled button (FAB-like prominence)
   =================================================================== */
.cz-footer {
  padding: 0 32px 40px !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cz-btn {
  padding: 0 36px !important;
  border-radius: var(--md-sys-shape-corner-full);
  font-family: var(--md-sys-typescale-label-font);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  letter-spacing: 0.1px;
  position: relative;
  transition: box-shadow var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard),
              background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

/* M3 Filled Button (Primary CTA) */
.cz-btn-primary {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  box-shadow: var(--md-sys-elevation-1);
  outline: none !important;
}

.cz-btn-primary:hover {
  background: #E05500 !important;
  box-shadow: var(--md-sys-elevation-2);
}

.cz-btn-primary:active {
  background: #C64B00 !important;
  box-shadow: var(--md-sys-elevation-0);
}

.cz-btn-primary:disabled {
  background: var(--md-sys-color-surface-container-highest) !important;
  color: var(--md-sys-color-outline) !important;
  box-shadow: var(--md-sys-elevation-0) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  pointer-events: none;
  transform: none !important;
}

.cz-btn-primary:disabled::after {
  display: none;
}

.cz-btn-primary::after {
  content: "\2192";
  font-size: 18px;
  transition: transform var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.cz-btn-primary:hover::after {
  transform: translateX(4px);
}

/* M3 Outlined Button */
.cz-btn-secondary {
  background: transparent;
  color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline);
}

.cz-btn-secondary:hover {
  background: rgba(255, 98, 16, var(--md-sys-state-hover-opacity));
}

/* Colored buttons for thank you screen */
.cz-btn-blue   { background: var(--cz-blue); color: #fff; }
.cz-btn-amber  { background: var(--cz-amber); color: #fff; }
.cz-btn-red    { background: var(--cz-red); color: #fff; }
.cz-btn-green  { background: var(--cz-green); color: #fff; }


/* ===================================================================
   ESTIMATION — M3 filled card
   =================================================================== */
.cz-estimation-box {
  background: transparent !important;
  border: 2px solid var(--cz-green) !important;
  border-radius: var(--md-sys-shape-corner-large);
  padding: 40px 32px 36px !important;
  text-align: center;
  color: var(--md-sys-color-on-surface) !important;
  margin-bottom: 8px;
}

.cz-estimation-label {
  font-size: var(--md-sys-typescale-label-medium-size);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  color: var(--cz-green) !important;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.cz-estimation-range {
  font-family: var(--md-sys-typescale-display-font);
  font-size: 36px;
  font-weight: 800;
  margin: 24px 0 24px !important;
  letter-spacing: -0.5px;
  line-height: 1.2;
  color: var(--md-sys-color-on-surface) !important;
}

.cz-estimation-note {
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line-height);
  color: var(--md-sys-color-on-surface-variant) !important;
  max-width: 420px;
  margin: 0 auto !important;
  text-align: center !important;
}

.cz-estimation-detail {
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-large);
  padding: 24px !important;
  margin-bottom: 12px;
}

.cz-estimation-detail-title {
  font-family: var(--md-sys-typescale-display-font);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  font-size: var(--md-sys-typescale-title-medium-size);
  margin-bottom: 16px;
  color: var(--md-sys-color-on-surface);
}

.cz-estimation-line {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface-variant);
}

.cz-estimation-line-price {
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-display-font);
}

.cz-estimation-total {
  display: flex;
  justify-content: space-between;
  padding: 16px 0 0;
  margin-top: 12px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  font-size: var(--md-sys-typescale-title-medium-size);
  font-weight: 700;
  color: var(--md-sys-color-primary);
}


/* ===================================================================
   THANK YOU
   =================================================================== */
.cz-thankyou { text-align: center; padding: 16px 0; }

.cz-thankyou-icon {
  width: 88px;
  height: 88px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--cz-green-container);
  color: var(--cz-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  margin: 0 auto 28px;
  animation: czScaleIn var(--md-sys-motion-duration-long1) var(--md-sys-motion-easing-emphasized);
}

@keyframes czScaleIn {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.cz-thankyou-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}

.cz-divider {
  height: 1px;
  background: var(--md-sys-color-outline-variant);
  margin: 32px 0;
}

.cz-other-needs-label {
  font-family: var(--md-sys-typescale-display-font);
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line-height);
  font-weight: var(--md-sys-typescale-title-large-weight);
  color: var(--md-sys-color-on-surface);
  margin-bottom: 20px;
}

.cz-other-needs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cz-other-needs-grid .cz-welcome-card { padding: 24px 16px 20px !important; }


/* ===================================================================
   LOADING / ERROR
   =================================================================== */
.cz-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: var(--md-sys-shape-corner-full);
  animation: czSpin 0.7s linear infinite;
}

@keyframes czSpin { to { transform: rotate(360deg); } }

.cz-error-msg {
  color: var(--md-sys-color-error);
  font-size: var(--md-sys-typescale-body-small-size);
  margin-top: 8px;
}

.cz-tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 11px;
  font-weight: 600;
  cursor: help;
  position: relative;
  vertical-align: middle;
  margin-left: 4px;
}

.cz-tooltip:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--md-sys-color-on-surface);
  color: var(--md-sys-color-surface);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 400;
  white-space: normal;
  width: 220px;
  text-align: center;
  z-index: 100;
  margin-bottom: 6px;
  line-height: 1.4;
}


/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 640px) {
  #couzing-estimateur { border-radius: var(--md-sys-shape-corner-medium); }
  .cz-body { padding: 32px 20px 24px !important; }
  .cz-footer { padding: 0 20px 28px !important; gap: 8px; }
  .cz-footer .cz-btn-primary { flex: 1; min-width: 0; }
  .cz-header { padding: 0 !important; }

  .cz-title {
    font-size: var(--md-sys-typescale-title-large-size);
    line-height: var(--md-sys-typescale-title-large-line-height);
  }

  .cz-subtitle { margin-bottom: 28px !important; font-size: var(--md-sys-typescale-body-medium-size); }

  .cz-welcome-grid { grid-template-columns: 1fr; gap: 12px; }

  .cz-welcome-card {
    flex-direction: row;
    text-align: left;
    padding: 16px 20px !important;
    gap: 16px;
  }

  .cz-welcome-card .cz-card-icon {
    width: 48px;
    height: 48px;
    font-size: 22px;
  }

  .cz-welcome-card .cz-card-title {
    font-size: var(--md-sys-typescale-body-large-size);
  }

  .cz-size-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .cz-size-card { padding: 14px 6px 10px !important; }

  .cz-estimation-range { font-size: 24px !important; line-height: 1.3 !important; }
  .cz-estimation-box { padding: 28px 16px 24px !important; }
  
  .cz-estimation-box + .cz-btn-primary,
  .cz-btn-primary[data-action="interested"] {
    font-size: 13px !important;
    padding: 0 20px !important;
    height: 48px !important;
  }

  .cz-options.cz-options-grid { grid-template-columns: 1fr; }
  .cz-other-needs-grid { grid-template-columns: 1fr; }
  .cz-quantity-value { font-size: 36px; }

  .cz-velux-tabs { gap: 4px; margin-bottom: 20px; }
  .cz-velux-tab { padding: 3px 10px !important; font-size: 11px; }

  .cz-option { padding: 16px 16px !important; min-height: 52px; }
  .cz-back-btn { padding: 8px 12px 8px 8px !important; font-size: 13px; }

  .cz-upload-zone { padding: 28px 16px !important; }
  .cz-btn { height: 48px; padding: 0 24px !important; font-size: 13px; }
}

@media (max-width: 380px) {
  .cz-body { padding: 24px 16px 20px !important; }
  .cz-footer { padding: 0 16px 24px !important; }
  .cz-title { font-size: 20px; line-height: 26px; }
  .cz-size-grid { grid-template-columns: repeat(2, 1fr); }
  .cz-estimation-range { font-size: 24px !important; }
}


/* ===================================================================
   HIDDEN + ACCESSIBILITY
   =================================================================== */
.couzing-prix-hidden { display: none !important; }

.cz-option:focus-visible,
.cz-welcome-card:focus-visible,
.cz-size-card:focus-visible {
  outline: 2px solid var(--md-sys-color-on-surface);
  outline-offset: 2px;
}

.cz-btn:focus-visible {
  outline: 2px solid var(--md-sys-color-on-surface);
  outline-offset: 3px;
}

/* Kill Elementor / browser default focus styles */
#couzing-estimateur button:focus:not(:focus-visible),
#couzing-estimateur div[data-action]:focus:not(:focus-visible) {
  outline: none !important;
}

#couzing-estimateur button:focus,
#couzing-estimateur .cz-btn:focus {
  outline: none !important;
  box-shadow: none !important;
}