/* DFK — configurateur */
.cfg-body { background: var(--blanc); }

.cfg-header { position: sticky; top: 0; z-index: 40; background: var(--blanc); border-bottom: 1px solid var(--gris-100); display: flex; align-items: center; gap: 20px; padding: 10px 24px; }
.cfg-header__logo img { width: 64px; height: auto; }
.cfg-steps { list-style: none; padding: 0; margin: 0 auto; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.cfg-steps::-webkit-scrollbar { display: none; }
.cfg-steps button { min-height: 40px; padding: 0 12px; border: 1px solid var(--gris-300); background: var(--blanc); color: var(--gris-500); font: 400 12px var(--font); white-space: nowrap; cursor: pointer; }
.cfg-steps .is-done button { background: var(--noir); border-color: var(--noir); color: var(--blanc); }
.cfg-steps .is-current button { border: 2px solid var(--noir); color: var(--noir); font-weight: 500; }

.cfg { display: flex; flex-wrap: wrap; min-height: calc(100vh - 61px); }
.cfg-panel { flex: 1 1 420px; min-width: 0; max-width: 560px; padding: 32px 24px; display: flex; flex-direction: column; gap: 24px; border-right: 1px solid var(--gris-100); }
.cfg-step { display: flex; flex-direction: column; gap: 20px; }
.cfg-step[hidden] { display: none; }
.cfg-title { font-size: 32px; font-weight: 300; line-height: 1.15; }
.cfg-help { font-size: 14px; line-height: 1.6; color: var(--gris-700); }

.field { display: flex; flex-direction: column; gap: 10px; border: 0; margin: 0; padding: 0; font-size: 14px; font-weight: 500; }
.field legend { padding: 0 0 10px; }
.input { min-height: 44px; border: 1px solid var(--gris-300); padding: 0 12px; font: 400 15px var(--font); border-radius: 0; }
.input:focus { border-color: var(--noir); outline: none; }
.range-row { display: flex; align-items: center; gap: 14px; }
.range-row input, .room input[type="range"] { flex: 1; accent-color: var(--noir); min-height: 32px; }
.range-val { min-width: 72px; text-align: right; font-weight: 500; font-size: 15px; }

.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { min-height: 44px; padding: 8px 14px; border: 1px solid var(--gris-300); background: var(--blanc); color: var(--noir); font: 400 14px var(--font); cursor: pointer; text-align: left; display: inline-flex; flex-direction: column; justify-content: center; gap: 2px; }
.choice strong { font-weight: 500; }
.choice span { font-size: 12px; color: var(--gris-500); }
.choice[aria-checked="true"] { background: var(--noir); border-color: var(--noir); color: var(--blanc); }
.choice[aria-checked="true"] span { color: var(--gris-300); }
.choice:disabled { opacity: .35; cursor: not-allowed; }
.choices--big .choice { flex: 1 1 110px; min-height: 64px; font-size: 16px; align-items: center; }
.choices--cards .choice { flex: 1 1 100%; padding: 14px 16px; }
.choices--colors .choice { flex-direction: row; align-items: center; gap: 10px; }
.swatch { width: 22px; height: 22px; border: 1px solid var(--gris-300); display: inline-block; }
.choices--colors .choice span:last-child { font-size: 14px; color: inherit; }

.rooms { display: flex; flex-direction: column; gap: 16px; }
.room-group { border-top: 1px solid var(--gris-100); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.room-group__head { display: flex; align-items: center; justify-content: space-between; }
.room-group__name { font-size: 15px; font-weight: 500; }
.room-group__name em { font-style: normal; color: var(--gris-500); font-weight: 400; }
.room-add { min-height: 40px; padding: 0 12px; border: 1px solid var(--noir); background: var(--blanc); font: 500 13px var(--font); cursor: pointer; }
.room-add:hover { background: var(--noir); color: var(--blanc); }
.room { display: grid; grid-template-columns: 96px 1fr 64px 40px; align-items: center; gap: 10px; background: var(--papier); padding: 6px 10px; }
.room__label { font-size: 13px; color: var(--gris-700); }
.room .range-val { min-width: 0; font-size: 14px; }
.room__declabel { font-size: 12px; color: var(--gris-500); }
.room__decval { grid-column: span 2; font-size: 13px; font-weight: 500; }
.room__info { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--gris-500); line-height: 1.4; }
.room input.room__decrange:disabled { opacity: .35; }
.decro { display: flex; flex-direction: column; gap: 10px; background: var(--papier); padding: 14px 16px; }
.decro__text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--gris-700); }
.decro__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.room__del { width: 40px; height: 40px; border: 1px solid var(--gris-300); background: var(--blanc); font-size: 18px; cursor: pointer; }

.cfg-nav { display: flex; gap: 12px; margin-top: auto; padding-top: 8px; }
.cfg-nav .btn { flex: 1; }
.cfg-nav .js-next { flex: 2; }
.cfg-nav .btn:disabled { opacity: .35; cursor: not-allowed; }
.cfg-nav .btn[hidden] { display: none; }

.recap { display: flex; flex-direction: column; margin: 0; }
.recap div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--gris-100); font-size: 14px; }
.recap dt { color: var(--gris-500); }
.recap dd { margin: 0; }
.order { background: var(--papier); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.order__title { font-size: 17px; font-weight: 500; }
.order .btn:disabled { opacity: .5; cursor: not-allowed; }
.order .field { font-weight: 500; }
.order__small { font-size: 12px; color: var(--gris-500); }
.confirm { border: 2px solid var(--noir); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.confirm__steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.5; }
html[dir="rtl"] .confirm__steps { padding-left: 0; padding-right: 20px; }
.share { display: flex; flex-direction: column; gap: 6px; }
.share__msg { font-size: 13px; }
.loaded { background: var(--noir); color: var(--blanc); font-size: 13px; padding: 10px 14px; }

.cfg-preview { flex: 2 1 520px; min-width: 0; background: var(--papier); display: flex; flex-direction: column; position: sticky; top: 61px; align-self: flex-start; height: calc(100vh - 61px); overflow-y: auto; }
.cfg-preview__stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; gap: 8px; min-height: 340px; }
#facade { width: 100%; max-width: 620px; height: auto; }
.viewer { position: relative; width: 100%; flex: 1; min-height: 360px; display: flex; flex-direction: column; }
.viewer[hidden] { display: none; }
.viewer__modes { display: flex; gap: 0; margin-bottom: 8px; }
.viewer__modes button { flex: 1; min-height: 44px; border: 1px solid var(--noir); background: var(--blanc); color: var(--noir); font: 500 14px var(--font); cursor: pointer; }
.viewer__modes button + button { border-left: 0; }
.viewer__modes button[aria-pressed="true"] { background: var(--noir); color: var(--blanc); }
.viewer__canvas { position: relative; flex: 1; display: flex; min-height: 320px; }
#scene3d { flex: 1; width: 100%; min-height: 320px; display: block; cursor: grab; outline: none; }
#scene3d:active { cursor: grabbing; }
#scene3d:focus-visible { box-shadow: inset 0 0 0 2px var(--noir); }
.viewer__room { position: absolute; top: 12px; left: 12px; margin: 0; background: rgba(13,13,13,.85); color: var(--blanc); font-size: 13px; padding: 6px 12px; pointer-events: none; }
.joystick { position: absolute; left: 16px; bottom: 16px; width: 112px; height: 112px; border-radius: 50%; background: rgba(13,13,13,.18); border: 2px solid rgba(13,13,13,.45); touch-action: none; display: flex; align-items: center; justify-content: center; }
.joystick__knob { width: 46px; height: 46px; border-radius: 50%; background: var(--noir); transition: transform .05s; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .joystick { width: 96px; height: 96px; opacity: .8; } }

.plan { display: flex; flex-direction: column; gap: 10px; }
.plan__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.plan__title { font-size: 15px; font-weight: 500; }
.plan__tabs { display: flex; gap: 4px; }
.plan__tabs button { min-height: 36px; min-width: 52px; border: 1px solid var(--gris-300); background: var(--blanc); font: 400 13px var(--font); cursor: pointer; }
.plan__tabs button[aria-pressed="true"] { background: var(--noir); border-color: var(--noir); color: var(--blanc); }
#plan { width: 100%; height: auto; background: var(--blanc); border: 1px solid var(--gris-100); font-family: var(--font); }
.plan__note { font-size: 12px; color: var(--gris-500); }
.viewer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; }
.viewer__levels { display: flex; flex-wrap: wrap; gap: 6px; }
.viewer__levels button, .viewer__reset { min-height: 40px; padding: 0 12px; border: 1px solid var(--gris-300); background: var(--blanc); color: var(--noir); font: 400 13px var(--font); cursor: pointer; }
.viewer__levels button[aria-pressed="true"] { background: var(--noir); border-color: var(--noir); color: var(--blanc); }
.cfg-preview__tag { font-size: 12px; color: var(--gris-500); }

.estimate { margin: 0 24px 24px; background: var(--blanc); padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.estimate__row { display: flex; flex-wrap: wrap; gap: 32px; }
.estimate__row > div, .estimate > div:not(.estimate__row) { display: flex; flex-direction: column; gap: 2px; }
.estimate__label { font-size: 12px; color: var(--gris-500); }
.estimate__val { font-size: 20px; font-weight: 500; }
.estimate__budget { font-size: 26px; font-weight: 500; }
.levels { width: 100%; border-collapse: collapse; font-size: 13px; }
.levels th { text-align: left; font-weight: 500; color: var(--gris-500); padding: 6px 0; border-bottom: 1px solid var(--gris-100); }
.levels td { padding: 6px 0; border-bottom: 1px solid var(--gris-100); }
.warn { font-size: 14px; border-left: 3px solid var(--noir); padding: 6px 10px; background: var(--papier); }
.estimate__note { font-size: 12px; line-height: 1.5; color: var(--gris-500); }

html[dir="rtl"] .levels th { text-align: right; }
html[dir="rtl"] .warn { border-left: 0; border-right: 3px solid var(--noir); }
html[dir="rtl"] .choice { text-align: right; }

@media (max-width: 900px) {
  .cfg-panel { max-width: none; border-right: 0; order: 2; }
  .cfg-preview { order: 1; position: static; height: auto; overflow: visible; }
  .cfg-preview__stage { min-height: 0; padding: 12px 16px 4px; }
  #facade { max-height: 190px; }
  .viewer { min-height: 0; }
  .viewer__canvas { min-height: 0; flex: none; }
  #scene3d { height: 280px; min-height: 0; flex: none; }
  .viewer__levels button, .viewer__reset { min-height: 36px; font-size: 12px; padding: 0 10px; }
  .cfg-preview__tag { display: none; }
  .estimate { margin: 0 16px 12px; padding: 12px 16px; gap: 8px; }
  .estimate__val { font-size: 16px; }
  .estimate__budget { font-size: 20px; }
  .levels, .estimate__note { display: none; }
  .estimate__row { gap: 20px; }
  .cfg-header { flex-wrap: wrap; padding: 8px 16px; gap: 10px; }
  .cfg-steps { order: 3; width: 100%; margin: 0; }
  .cfg-header .lang { margin-left: auto; }
}
@media (max-width: 480px) {
  .room { grid-template-columns: 1fr 64px 40px; }
  .room__label, .room__declabel { grid-column: 1 / -1; }
  .recap div { grid-template-columns: 1fr; gap: 2px; }
  .cfg-title { font-size: 26px; }
}

/* Arabe : nombres, signes et unités restent dans le bon ordre (+15,7 %, 12 m²) */
html[dir="rtl"] .levels td, html[dir="rtl"] .range-val, html[dir="rtl"] .estimate__val { unicode-bidi: plaintext; }
html[dir="rtl"] .levels td { text-align: right; }

/* ---------- Page d'ouverture du configurateur ---------- */
.welcome { position: fixed; inset: 0; z-index: 100; background: var(--blanc); color: var(--noir); overflow-y: auto; display: flex; }
.welcome[hidden] { display: none; }
.has-welcome { overflow: hidden; }
.welcome__inner { margin: auto; width: 100%; max-width: 640px; padding: 48px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.welcome__logo { position: relative; width: min(240px, 60vw); direction: ltr; margin-bottom: 8px; }
.welcome__logo img { display: block; width: 100%; height: auto; clip-path: inset(0 100% 0 0); animation: intro-draw 1.4s cubic-bezier(.65, .05, .3, 1) .15s forwards; }
.welcome__logo .intro__pencil { animation-duration: 1.4s; animation-delay: .15s; }
.welcome__eyebrow { margin: 8px 0 0; font-size: 12px; letter-spacing: .3em; color: var(--gris-500); }
.welcome__title { margin: 0; font-size: clamp(26px, 6vw, 38px); font-weight: 300; line-height: 1.15; }
.welcome__label { margin: 14px 0 0; font-size: 13px; color: var(--gris-500); }
.welcome__langs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.welcome__langs button { min-height: 52px; border: 1px solid var(--gris-300); background: var(--blanc); color: var(--noir); font: 400 15px var(--font); cursor: pointer; }
.welcome__langs button:hover { border-color: var(--noir); }
.welcome__langs button[aria-pressed="true"] { background: var(--noir); border-color: var(--noir); color: var(--blanc); font-weight: 500; }
.welcome__steps { list-style: none; counter-reset: w; margin: 14px 0 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 2px; text-align: start; }
.welcome__steps li { counter-increment: w; display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; padding: 14px 0; border-top: 1px solid var(--gris-100); }
.welcome__steps li::before { content: counter(w, decimal-leading-zero); grid-row: 1 / 3; font-size: 13px; color: var(--gris-500); padding-top: 2px; }
.welcome__steps strong { font-weight: 500; font-size: 16px; }
.welcome__steps span { font-size: 13px; color: var(--gris-700); line-height: 1.5; }
.welcome__actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 10px; }
.welcome__actions .btn { width: 100%; }
.welcome__resume { flex-direction: column; gap: 4px; background: var(--blanc); color: var(--noir); border-color: var(--noir); line-height: 1.2; }
.welcome__resume:hover { background: var(--noir); color: var(--blanc); }
.welcome__resume small { font-size: 12px; font-weight: 400; opacity: .7; }
.welcome__note { margin: 4px 0 0; font-size: 12px; color: var(--gris-500); }
@media (max-width: 480px) {
  .welcome__langs { grid-template-columns: repeat(2, 1fr); }
  .welcome__langs button { min-height: 46px; }
  .welcome__inner { padding: 28px 16px; gap: 12px; }
  .welcome__logo { width: 170px; margin-bottom: 0; }
  .welcome__label { margin-top: 6px; }
  .welcome__steps { margin-top: 6px; }
  .welcome__steps li { padding: 10px 0; }
}
@media (prefers-reduced-motion: reduce) { .welcome__logo img { clip-path: none; animation: none; } .welcome__logo .intro__pencil { display: none; } }