:root{--bg:#f4f7f8;--card:#fff;--ink:#1f2b31;--muted:#677780;--line:#dce5e8;--accent:#177f78;--accent2:#e4f3f1;--warn:#9a6800;--warnbg:#fff6dd;--danger:#a63a3a;--dangerbg:#fff0f0;--shadow:0 12px 35px rgba(25,45,55,.08)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}button,input,select,textarea{font:inherit}.app-shell{min-height:100vh}.topbar{height:76px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 32px;position:sticky;top:0;z-index:20}.brand{display:flex;gap:12px;align-items:center}.brand strong{font-size:20px}.brand span{display:block;color:var(--muted);font-size:12px;margin-top:2px}.logo{width:42px;height:42px;border-radius:12px;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800}.privacy{font-size:12px;color:var(--muted);padding:8px 11px;border:1px solid var(--line);border-radius:999px}.steps{display:flex;justify-content:center;gap:8px;padding:20px 24px 4px;flex-wrap:wrap}.step-pill{border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:999px;padding:9px 14px;font-size:13px;font-weight:700}.step-pill.active{background:var(--accent);border-color:var(--accent);color:#fff}.step-pill.done{background:var(--accent2);border-color:#b9ddd9;color:#145f5a}.main{max-width:1220px;margin:0 auto;padding:22px 24px 52px}.hero{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}.hero h1{margin:0 0 6px;font-size:30px}.hero p{margin:0;color:var(--muted)}.card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:22px}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.col-4{grid-column:span 4}.col-6{grid-column:span 6}.col-8{grid-column:span 8}.col-12{grid-column:span 12}.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.choice{border:1px solid var(--line);background:#fff;border-radius:16px;padding:22px;text-align:left;cursor:pointer;transition:.15s;min-height:125px}.choice:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.choice.selected{border-color:var(--accent);box-shadow:0 0 0 3px rgba(23,127,120,.12)}.choice strong{font-size:19px;display:block;margin-bottom:5px}.choice small{color:var(--muted)}label{font-size:13px;font-weight:700;display:block;margin-bottom:7px}.field input,.field select,.field textarea{width:100%;border:1px solid #cfdadd;border-radius:10px;padding:11px 12px;background:#fff;color:var(--ink)}.field textarea{min-height:86px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid rgba(23,127,120,.13);border-color:var(--accent)}.actions{display:flex;justify-content:space-between;gap:12px;margin-top:22px}.btn{border:0;border-radius:10px;padding:11px 16px;font-weight:800;cursor:pointer}.btn-primary{background:var(--accent);color:#fff}.btn-secondary{background:#fff;border:1px solid var(--line);color:var(--ink)}.btn-danger{background:var(--dangerbg);color:var(--danger);border:1px solid #f1caca}.btn:disabled{opacity:.45;cursor:not-allowed}.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.search{flex:1;min-width:250px}.search input{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 13px}.toggle{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:#fff;font-size:13px;font-weight:700}.toggle input{width:18px;height:18px;accent-color:var(--accent)}.split{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(330px,.75fr);gap:16px;align-items:start}.list-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}.list-head{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;align-items:center}.list-head strong{font-size:14px}.positions{max-height:620px;overflow:auto}.pos{display:grid;grid-template-columns:38px 128px minmax(220px,1fr) 105px;gap:10px;padding:12px 14px;border-bottom:1px solid #edf2f3;align-items:start}.pos:hover{background:#fbfdfd}.pos input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);margin-top:4px}.pos-code{font-weight:800;font-size:12px;color:#41616a}.pos-title{font-weight:700;font-size:13px}.pos-desc{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.35}.pos-sec{font-size:11px;color:#5b767e;margin-top:4px}.price{text-align:right;font-variant-numeric:tabular-nums;font-weight:800;font-size:13px}.price small{display:block;color:var(--muted);font-weight:600}.basket{position:sticky;top:98px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}.basket h3{margin:0 0 8px}.basket-list{max-height:410px;overflow:auto}.basket-row{border-top:1px solid #edf2f3;padding:10px 0}.basket-row:first-child{border-top:0}.basket-title{font-size:12px;font-weight:700}.basket-meta{font-size:11px;color:var(--muted);margin:3px 0 7px}.basket-controls{display:grid;grid-template-columns:62px 1fr 34px;gap:7px}.basket-controls input{width:100%;border:1px solid var(--line);border-radius:8px;padding:7px;font-size:12px}.icon-btn{border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer}.totalbox{border-top:2px solid var(--line);margin-top:12px;padding-top:12px}.sumline{display:flex;justify-content:space-between;margin:6px 0;font-size:13px}.sumline.total{font-size:18px;font-weight:900;color:#0f635d}.notice{padding:12px 14px;border-radius:12px;font-size:12px;line-height:1.45;margin:10px 0}.notice.warn{background:var(--warnbg);color:#72500b;border:1px solid #f0d995}.notice.danger{background:var(--dangerbg);color:#833131;border:1px solid #efc8c8}.notice.ok{background:var(--accent2);color:#165b57;border:1px solid #bde0dc}.component-row{display:grid;grid-template-columns:34px 110px minmax(210px,1fr) 150px 95px;gap:10px;padding:12px 14px;border-bottom:1px solid #edf2f3;align-items:start}.badge{display:inline-block;border-radius:999px;padding:3px 7px;background:#eef4f5;color:#47656d;font-size:10px;font-weight:800;margin-right:4px}.quote{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow)}.quote-header{display:flex;justify-content:space-between;gap:24px;border-bottom:2px solid var(--ink);padding-bottom:18px;margin-bottom:18px}.quote-title{font-size:27px;font-weight:900}.quote-muted{color:var(--muted);font-size:12px}.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:15px 0 22px}.quote table{width:100%;border-collapse:collapse;font-size:12px}.quote th{text-align:left;background:#f0f4f5;padding:9px 8px;border-bottom:1px solid var(--line)}.quote td{padding:8px;border-bottom:1px solid #e8eeef;vertical-align:top}.quote .num{text-align:right;white-space:nowrap}.quote-total{margin-left:auto;max-width:370px;margin-top:18px}.quote-notes{margin-top:24px;padding-top:14px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.toast{position:fixed;right:22px;bottom:22px;background:#20333a;color:#fff;padding:12px 15px;border-radius:10px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s;z-index:100;max-width:390px}.toast.show{opacity:1;transform:none}.empty{padding:30px;text-align:center;color:var(--muted)}.tabs{display:flex;gap:7px;flex-wrap:wrap}.tab{border:1px solid var(--line);border-radius:999px;background:#fff;padding:7px 11px;font-size:12px;font-weight:700;cursor:pointer}.tab.active{background:var(--accent2);border-color:#add7d2;color:#155d58}
@media(max-width:850px){.topbar{padding:0 16px}.privacy{display:none}.main{padding:18px 14px 40px}.choice-grid{grid-template-columns:1fr}.split{grid-template-columns:1fr}.basket{position:static}.col-4,.col-6,.col-8{grid-column:span 12}.pos{grid-template-columns:30px 104px 1fr}.pos .price{grid-column:3}.component-row{grid-template-columns:30px 95px 1fr}.component-row .price{grid-column:3}.hero h1{font-size:24px}}
@media print{body{background:#fff}.topbar,.steps,.no-print,.actions{display:none!important}.main{max-width:none;padding:0}.quote{box-shadow:none;border:0;padding:0}.quote-notes{font-size:9px}@page{size:A4;margin:12mm}}

/* V1.3 — Étape 3 calquée sur la structure visuelle des Excel ASTO.
   Les lignes de chapitre/sous-chapitre reprennent le fond de Rekord-typ.
   Les surlignages jaunes sont volontairement ignorés. */
.excel-section-row{
  display:grid;
  grid-template-columns:166px minmax(220px,1fr);
  gap:10px;
  padding:9px 14px;
  background:#262626;
  color:#fff;
  border-bottom:1px solid #444;
  align-items:center;
}
.excel-section-code{
  font-size:12px;
  font-weight:800;
  letter-spacing:.01em;
}
.excel-section-title{
  font-size:13px;
  font-weight:800;
}
.pos.excel-position-row{
  background:#fff;
}
.pos.excel-position-row:hover{
  background:#f7fafb;
}

/* V1.4 — fond des chapitres/sous-chapitres comme dans les Excel ASTO */
.excel-section-row{
  background:#808080;
  color:#ffffff;
  border-bottom:1px solid #6f6f6f;
}

/* V1.6 — Couleurs validées pour l'étape 3 */
.excel-section-row{
  background:#dedede !important;
  color:#111111 !important;
  border-bottom:1px solid #cfcfcf !important;
}
.excel-section-code,
.excel-section-title{
  color:#111111 !important;
}
.pos.excel-position-row{
  background:#ffffff !important;
  color:#111111 !important;
  border-bottom:1px solid #e5e5e5 !important;
}
.pos.excel-position-row:hover{
  background:#f7f7f7 !important;
}

/* V1.7 — contrôle ASTO déplacé dans l'en-tête, à droite */
.header-rules{
  margin-left:auto;
  white-space:nowrap;
}

/* V1.8 — filtres de l'étape 3 */
.positions-toolbar{
  display:flex;
  align-items:center;
  gap:14px;
}
.positions-toolbar .category-filter{
  flex:0 0 auto;
  font-weight:700;
}
.positions-toolbar .search{
  flex:1 1 auto;
}
.source-tabs{
  margin-top:10px;
}

/* V2.0 — Région en boutons à l'étape 1, Niveau d'appareillage déplacé à l'étape 3 */
.region-card{
  padding:18px;
}
.region-choice-grid{
  margin-top:10px;
}
.region-choice{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.level-select{
  appearance:auto;
  min-height:38px;
  padding:7px 34px 7px 12px;
  border:1px solid #d5dde0;
  border-radius:999px;
  background:#fff;
  color:#172126;
  font:inherit;
  font-weight:650;
  cursor:pointer;
}
.level-select:focus{
  outline:2px solid rgba(18,141,139,.18);
  border-color:#8bc7c5;
}
.source-tabs{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

/* V2.4 — menu Niveau aligné sur les boutons de filtres */
.level-select{
  width:auto !important;
  min-width:0 !important;
  height:34px !important;
  min-height:34px !important;
  padding:0 30px 0 12px !important;
  border-radius:999px !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:32px !important;
  vertical-align:middle !important;
}


/* V2.12 — Structure de la page de prévisualisation inspirée de la maquette fournie.
   Les couleurs existantes sont conservées autant que possible ; cette section agit surtout sur la mise en page. */
.preview-heading{margin:0 0 20px}
.preview-heading h1{margin:4px 0 0;font-size:28px;line-height:1.15}
.preview-step{font-size:12px;font-weight:800;letter-spacing:.02em}
.preview-quote{padding:24px}
.preview-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.preview-top-right{text-align:right;font-size:13px;line-height:1.8}
.preview-subtitle{font-size:12px;font-weight:800;margin-top:2px}
.preview-separator{height:2px;background:var(--ink);margin:14px 0 16px}
.preview-patient-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px;font-size:14px}
.preview-section{margin-top:8px}
.preview-section h3{font-size:16px;margin:0 0 8px}
.preview-section + .preview-section{margin-top:10px}
.preview-quote table{table-layout:fixed}
.preview-quote th:nth-child(1),.preview-quote td:nth-child(1){width:14%}
.preview-quote th:nth-child(2),.preview-quote td:nth-child(2){width:50%}
.preview-quote th:nth-child(3),.preview-quote td:nth-child(3){width:8%}
.preview-quote th:nth-child(4),.preview-quote td:nth-child(4){width:14%}
.preview-quote th:nth-child(5),.preview-quote td:nth-child(5){width:14%}
.preview-total{max-width:360px;margin-top:24px}
.preview-total .sumline{padding:9px 10px;border-bottom:1px solid var(--line)}
.preview-total .total{font-size:15px}
.preview-remarks{margin-top:18px}
.preview-remarks label{display:block;margin-bottom:7px}
.preview-remarks textarea{width:100%;min-height:115px;resize:vertical;border:1px solid var(--line);border-radius:10px;padding:12px;font:inherit;box-sizing:border-box}
@media(max-width:850px){
  .preview-patient-row{grid-template-columns:1fr;gap:8px}
  .preview-top{flex-direction:column}
  .preview-top-right{text-align:left}
}
@media print{
  .preview-heading,.preview-remarks{display:none!important}
  .preview-quote{border:0;box-shadow:none;padding:0}
}


/* V2.13 — Navigation des étapes verticale, à gauche et cliquable */
.steps{
  position:fixed;
  left:18px;
  top:92px;
  width:185px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:9px;
  z-index:40;
}
.step-pill{
  appearance:none;
  width:100%;
  text-align:left;
  cursor:pointer;
  font:inherit;
}
.main{
  margin-left:205px;
}
@media(max-width:1050px){
  .steps{
    position:static;
    width:auto;
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;
    padding:12px 14px 0;
  }
  .step-pill{width:auto;text-align:center}
  .main{margin-left:0}
}
@media print{
  .steps{display:none!important}
  .main{margin-left:0}
}


/* V2.14 — Recentrage du contenu avec la navigation verticale à gauche */
@media(min-width:1051px){
  .main{
    margin-left:auto !important;
    margin-right:auto !important;
    position:relative;
    left:102px;
  }
}


/* V2.15 — Structure générale inspirée de la référence :
   en-tête pleine largeur, navigation verticale fixe à gauche,
   grande zone de travail centrée à droite. */
@media(min-width:1051px){
  .app-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:230px minmax(0,1fr);
    grid-template-rows:76px minmax(0,1fr);
  }

  .topbar{
    grid-column:1 / -1;
    grid-row:1;
    position:sticky;
    top:0;
    z-index:60;
  }

  .steps{
    grid-column:1;
    grid-row:2;
    position:sticky !important;
    top:76px !important;
    left:auto !important;
    width:230px !important;
    height:calc(100vh - 76px);
    padding:26px 14px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:8px !important;
    background:#174b7f;
    overflow-y:auto;
    z-index:30;
  }

  .step-pill{
    width:100% !important;
    min-height:48px;
    display:flex;
    align-items:center;
    gap:12px;
    border:0 !important;
    border-radius:9px !important;
    padding:9px 12px !important;
    background:transparent !important;
    color:rgba(255,255,255,.72) !important;
    text-align:left !important;
    cursor:pointer;
    box-shadow:none !important;
  }

  .step-pill:hover{
    background:rgba(255,255,255,.09) !important;
    color:#fff !important;
  }

  .step-pill.active{
    background:rgba(255,255,255,.16) !important;
    color:#fff !important;
  }

  .step-pill.done{
    background:transparent !important;
    color:#fff !important;
  }

  .step-num{
    flex:0 0 26px;
    width:26px;
    height:26px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.13);
    font-size:12px;
    font-weight:900;
  }

  .step-pill.done .step-num{
    background:var(--accent);
    color:#fff;
  }

  .step-pill.active .step-num{
    background:rgba(255,255,255,.20);
    color:#fff;
  }

  .step-text{
    font-size:13px;
    font-weight:800;
  }

  .main{
    grid-column:2;
    grid-row:2;
    width:calc(100% - 56px);
    max-width:1220px;
    margin:24px auto 48px !important;
    left:auto !important;
    position:relative;
    padding:28px !important;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:var(--shadow);
    align-self:start;
  }

  /* Les cartes internes restent lisibles sans donner l'impression d'une carte dans une carte. */
  .main > .hero:first-child{
    margin-top:0;
  }
}

@media(max-width:1050px){
  .step-num{
    display:none;
  }
}

@media print{
  .app-shell{
    display:block !important;
  }
  .main{
    width:auto !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:#fff !important;
  }
}


/* V2.16 — Structure de l'étape 3 selon la référence fournie, pour toutes les catégories */
.positions-page-head{
  margin-bottom:22px;
}
.positions-page-head h1{
  margin:0 0 4px;
  font-size:30px;
  line-height:1.15;
}
.positions-context{
  font-size:14px;
  font-weight:700;
  color:var(--muted);
}

.positions-source-tabs{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  margin-bottom:12px;
  padding:0;
}
.positions-source-tabs .tab{
  border:0;
  border-radius:0;
  background:transparent;
  padding:10px 4px 11px;
  font-size:13px;
  font-style:italic;
  color:var(--ink);
  position:relative;
}
.positions-source-tabs .tab:hover{
  background:transparent;
}
.positions-source-tabs .tab.active{
  background:transparent;
  border:0;
  color:var(--ink);
}
.positions-source-tabs .tab.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:3px;
  background:var(--accent);
}

.positions-controls{
  display:grid;
  grid-template-columns:220px minmax(280px,1fr) auto;
  gap:12px;
  align-items:center;
  margin-bottom:12px;
}
.positions-controls .level-select{
  width:100% !important;
  height:44px !important;
  min-height:44px !important;
  border-radius:9px !important;
  padding:0 34px 0 12px !important;
  font-size:13px !important;
  font-style:italic;
}
.positions-search{
  min-width:0;
}
.positions-search input{
  height:44px;
  border-radius:9px;
  padding:0 13px;
}
.positions-result-count{
  white-space:nowrap;
  font-size:13px;
  color:var(--muted);
}

.positions-split{
  margin-top:0 !important;
}
.positions-list-card{
  border-radius:10px;
}
.positions-list-card .positions{
  max-height:620px;
}
.positions-side{
  min-width:0;
}

/* Le compteur n'est plus dans un en-tête séparé de la liste. */
.positions-list-card .list-head{
  display:none;
}

@media(max-width:850px){
  .positions-controls{
    grid-template-columns:1fr;
  }
  .positions-result-count{
    justify-self:start;
  }
  .positions-source-tabs{
    gap:14px;
  }
}


/* V2.17 — "Devis en cours" structuré comme la référence */
.basket-current{
  padding:0;
  overflow:hidden;
  border-radius:14px;
}

.basket-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 14px 13px;
  border-bottom:1px solid var(--line);
}

.basket-head h3{
  margin:2px 0 0;
  font-size:17px;
  line-height:1.15;
}

.basket-eyebrow{
  font-size:10px;
  font-weight:900;
  letter-spacing:.02em;
  color:var(--accent);
}

.basket-head-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.basket-clear{
  border:1px solid var(--line);
  background:#fff;
  border-radius:8px;
  padding:7px 10px;
  font-size:11px;
  cursor:pointer;
}

.basket-count{
  width:32px;
  height:32px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--accent);
  color:#fff;
  font-weight:900;
  font-size:14px;
}

.basket-current-list{
  max-height:505px;
  overflow:auto;
  padding:12px;
}

.basket-current-row{
  position:relative;
  border:1px solid var(--line);
  border-radius:12px;
  padding:13px 12px 12px;
  margin:0 0 10px;
  background:#fff;
  box-shadow:0 2px 6px rgba(25,45,55,.05);
}

.basket-current-row:last-child{
  margin-bottom:0;
}

.basket-remove{
  position:absolute;
  top:12px;
  right:12px;
  width:29px;
  height:29px;
  border:0;
  border-radius:8px;
  background:var(--dangerbg);
  color:var(--danger);
  font-size:20px;
  line-height:1;
  cursor:pointer;
}

.basket-code{
  padding-right:42px;
  font-size:11px;
  color:var(--accent);
  margin-bottom:5px;
}

.basket-current-row .basket-title{
  padding-right:42px;
  font-size:12px;
  font-weight:500;
  line-height:1.35;
}

.basket-row-separator{
  height:1px;
  background:var(--line);
  margin:10px 0 9px;
}

.basket-bottom{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:12px;
}

.basket-amount-label{
  font-size:9px;
  color:var(--muted);
  margin-bottom:2px;
}

.basket-amount{
  font-size:13px;
  font-weight:500;
}

.basket-qty{
  display:grid;
  grid-template-columns:34px 40px 34px;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
}

.basket-qty-btn,
.basket-qty-value{
  height:34px;
  display:grid;
  place-items:center;
  border:0;
  background:#fff;
  font-size:13px;
}

.basket-qty-btn{
  cursor:pointer;
  font-weight:900;
  color:var(--accent);
  background:#f5faf9;
}

.basket-qty-value{
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
}

.basket-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-top:1px solid var(--line);
  font-size:15px;
  font-weight:800;
  background:#fff;
}

.basket-footer strong{
  font-size:18px;
}

@media(max-width:850px){
  .basket-current-list{max-height:none}
}


/* V2.18 — Réduire l'espace entre la colonne des étapes et la zone de travail */
@media(min-width:1051px){
  .main{
    width:calc(100% - 32px) !important;
    max-width:1220px;
    margin:24px auto 48px 16px !important;
  }
}


/* V2.19 — La zone centrale reste à sa position d'origine.
   C'est uniquement la colonne des étapes qui est rapprochée vers la droite. */
@media(min-width:1051px){
  .main{
    width:calc(100% - 56px) !important;
    max-width:1220px !important;
    margin:24px auto 48px !important;
    left:auto !important;
  }

  .steps{
    transform:translateX(150px);
  }
}


/* V2.20 — Colonne des étapes encore plus proche du contenu central */
@media(min-width:1051px){
  .steps{
    transform:translateX(190px) !important;
  }
}


/* V2.21 — Étape 1 : Région d'appareillage plus compacte */
.region-card{
  padding:17px 18px !important;
}
.region-card .field label{
  font-size:12px;
  margin-bottom:5px;
}
.region-choice-grid{
  gap:10px !important;
}
.region-choice{
  min-height:64px !important;
  padding:13px 16px !important;
  border-radius:13px !important;
}
.region-choice strong{
  font-size:15px !important;
  margin-bottom:0 !important;
}


/* V2.22 — Le contrôle ASTO est présenté comme "Mode assisté" */
.assisted-mode{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  user-select:none;
}
.assisted-mode input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.assisted-switch{
  position:relative;
  width:50px;
  height:28px;
  border-radius:999px;
  background:#cbd7d5;
  transition:.18s ease;
  flex:0 0 auto;
}
.assisted-switch::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
  transition:.18s ease;
}
.assisted-mode input:checked + .assisted-switch{
  background:#31c987;
}
.assisted-mode input:checked + .assisted-switch::after{
  transform:translateX(22px);
}
.assisted-mode input:focus-visible + .assisted-switch{
  outline:3px solid rgba(23,127,120,.22);
  outline-offset:2px;
}

/* V2.25 — Option globale de catégorie validée */
.positions-page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}
.category-all-toggle{
  display:flex;
  align-items:center;
  gap:7px;
  margin:3px 0 0;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
}
.category-all-toggle input{
  width:16px;
  height:16px;
  margin:0;
  accent-color:var(--accent);
}
@media(max-width:850px){
  .positions-page-head{flex-direction:column;gap:10px}
  .category-all-toggle{white-space:normal}
}


/* V2.25 Remarques — saisie et enregistrement directement dans la prévisualisation */
.preview-quote .quote-remarks{
  margin-top:24px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.preview-quote .remarks-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:9px;
}
.preview-quote .quote-remarks textarea{
  width:100%;
  min-height:95px;
  resize:vertical;
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px;
  font:inherit;
  box-sizing:border-box;
}
.preview-quote .saved-notes{
  margin-top:10px;
  min-height:18px;
  white-space:pre-wrap;
  line-height:1.5;
  font-size:12px;
}
@media print{
  .preview-quote .quote-remarks{
    display:block!important;
    margin-top:18px;
    padding-top:10px;
    border-top:1px solid #ccc;
  }
  .preview-quote .saved-notes{
    display:block!important;
    margin-top:6px;
  }
}


/* Remarques — enregistrement automatique */
.preview-quote .remarks-autosave{
  font-size:11px;
  font-weight:600;
  color:#6f7d8e;
}


/* Remarques auto — affichage épuré */
.preview-quote .saved-notes.print-only{
  display:none;
}
@media print{
  .preview-quote .saved-notes.print-only{
    display:block !important;
    white-space:pre-wrap;
    margin-top:6px;
  }
}


/* Devis final — uniquement les intitulés principaux en gras */
.preview-quote .quote-item-title{
  font-weight:700;
}
.preview-quote .quote-muted{
  font-weight:400;
}
@media print{
  .preview-quote .quote-item-title{
    font-weight:700 !important;
  }
  .preview-quote .quote-muted{
    font-weight:400 !important;
  }
}

/* V2.29 — lignes K sélectionnables */
.excel-k-clickable{cursor:pointer;}
.excel-k-clickable input[type="checkbox"]{margin:0 10px 0 0;flex:0 0 auto;}
.excel-k-clickable:has(input:checked){outline:2px solid currentColor;outline-offset:-2px;}

/* V2.30 — alignement des catégories K avec les positions ASTO.
   Checkbox à gauche, code dans la colonne code, désignation dans la colonne titre. */
.excel-section-row.excel-k-clickable{
  display:grid !important;
  grid-template-columns:44px 138px minmax(0,1fr) !important;
  align-items:center !important;
  column-gap:0 !important;
  padding:0 14px !important;
  min-height:58px;
  box-sizing:border-box;
}
.excel-k-clickable .excel-k-check{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}
.excel-k-clickable .excel-k-check input[type="checkbox"]{
  margin:0 !important;
}
.excel-k-clickable .excel-section-code{
  padding:12px 8px !important;
  min-width:0;
  font-weight:700;
}
.excel-k-clickable .excel-section-title{
  padding:12px 4px !important;
  min-width:0;
  font-weight:700;
  line-height:1.2;
}

/* V2.31 — catégories K plus compactes.
   La hauteur suit le texte avec seulement une petite marge verticale. */
.excel-section-row.excel-k-clickable{
  min-height:0 !important;
  padding:4px 14px !important;
}
.excel-k-clickable .excel-section-code,
.excel-k-clickable .excel-section-title{
  padding:3px 8px !important;
  line-height:1.15 !important;
}
.excel-k-clickable .excel-section-title{
  padding-left:4px !important;
}

/* V2.32 — mêmes fonds de lignes à l'étape 3, en prévisualisation et à l'impression.
   Positions/devis : blanc. En-têtes de tableau : gris clair de la même famille que les lignes K. */
.preview-quote table tbody tr,
.preview-quote table tbody td{
  background:#ffffff !important;
  color:#111111 !important;
}
.preview-quote table tbody td{
  border-bottom:1px solid #e5e5e5 !important;
}
.preview-quote table thead tr,
.preview-quote table thead th{
  background:#dedede !important;
  color:#111111 !important;
  border-color:#cfcfcf !important;
}
@media print{
  .preview-quote table tbody tr,
  .preview-quote table tbody td{
    background:#ffffff !important;
    color:#111111 !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  .preview-quote table thead tr,
  .preview-quote table thead th{
    background:#dedede !important;
    color:#111111 !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
}

/* V2.33 — reproduire exactement les fonds de l'étape 3 dans le devis.
   K = gris clair #dedede ; L = blanc #ffffff. */
.preview-quote table tbody tr.quote-row-k,
.preview-quote table tbody tr.quote-row-k td{
  background:#dedede !important;
  color:#111111 !important;
  border-bottom:1px solid #cfcfcf !important;
}
.preview-quote table tbody tr.quote-row-l,
.preview-quote table tbody tr.quote-row-l td{
  background:#ffffff !important;
  color:#111111 !important;
  border-bottom:1px solid #e5e5e5 !important;
}
@media print{
  .preview-quote table tbody tr.quote-row-k,
  .preview-quote table tbody tr.quote-row-k td{
    background:#dedede !important;
    color:#111111 !important;
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }
  .preview-quote table tbody tr.quote-row-l,
  .preview-quote table tbody tr.quote-row-l td{
    background:#ffffff !important;
    color:#111111 !important;
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }
}

/* V2.38 — menus Fabricant et Mobilité : même style que Niveau d'appareillage (étape 3). */
#manufacturer.level-select,
#mobility.level-select{
  flex:0 0 auto;
  width:auto;
  max-width:240px;
}

/* V2.39 — case "Afficher toutes les lignes" dans l'en-tête des composants. */
.component-list-head{
  display:flex;
  align-items:center;
  gap:14px;
}
.component-list-head .show-all-components{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
}
.component-list-head .show-all-components input{
  margin:0;
}
.component-list-head > .quote-muted{
  margin-left:10px;
}

/* V2.40 — devis à 4 colonnes : suppression de « Montant HT ». */
.preview-quote th:nth-child(1),.preview-quote td:nth-child(1){width:16% !important}
.preview-quote th:nth-child(2),.preview-quote td:nth-child(2){width:58% !important}
.preview-quote th:nth-child(3),.preview-quote td:nth-child(3){width:10% !important}
.preview-quote th:nth-child(4),.preview-quote td:nth-child(4){width:16% !important}

/* V2.41 — Structure responsive stable sur différentes résolutions.
   Objectif : ne jamais écraser, décaler ou faire sortir les blocs de leur zone. */

html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

.app-shell,
.main,
.card,
.list-card,
.split,
.positions-page-head,
.preview-quote{
  min-width:0;
}

/* Bureau : navigation dans sa propre colonne, contenu réellement centré
   dans l'espace restant. Suppression des décalages fixes qui se déforment
   lorsque la résolution change. */
@media (min-width:1051px){
  .app-shell{
    display:grid !important;
    grid-template-columns:clamp(210px,16vw,260px) minmax(0,1fr) !important;
    grid-template-rows:76px minmax(0,1fr) !important;
  }

  .topbar{
    grid-column:1 / -1 !important;
    width:100% !important;
  }

  .steps{
    grid-column:1 !important;
    grid-row:2 !important;
    width:100% !important;
    max-width:260px !important;
    transform:none !important;
    left:auto !important;
    right:auto !important;
    padding:26px clamp(12px,1.2vw,18px) !important;
  }

  .main{
    grid-column:2 !important;
    grid-row:2 !important;
    position:relative !important;
    left:auto !important;
    right:auto !important;
    width:min(1220px,calc(100% - clamp(32px,5vw,72px))) !important;
    max-width:1220px !important;
    margin:24px auto 48px !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

/* Écrans intermédiaires : les étapes passent au-dessus et le contenu
   conserve des marges régulières. */
@media (min-width:851px) and (max-width:1050px){
  .main{
    width:calc(100% - 36px) !important;
    max-width:1220px !important;
    margin:0 auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .steps{
    width:100% !important;
    transform:none !important;
  }

  .split{
    grid-template-columns:minmax(0,1.45fr) minmax(300px,.8fr) !important;
  }
}

/* Empêche les outils et menus de pousser la page horizontalement. */
.toolbar,
.positions-toolbar{
  max-width:100%;
}

.toolbar .search,
.positions-toolbar .search{
  min-width:min(250px,100%);
}

.toolbar select,
.positions-toolbar select,
.level-select{
  max-width:100%;
}

/* Les longues désignations restent dans leur colonne. */
.pos > *,
.component-row > *,
.excel-section-row > *,
.basket-row,
.quote-item-title,
.pos-title,
.pos-desc,
.excel-section-title{
  min-width:0;
  overflow-wrap:anywhere;
}

/* Tableaux du devis : ne pas écraser les colonnes sur petit écran.
   Ils peuvent défiler horizontalement sans déformer toute la page. */
.preview-section{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

@media (max-width:850px){
  .main{
    width:calc(100% - 28px) !important;
    margin:0 auto !important;
    padding:18px 0 40px !important;
  }

  .topbar{
    min-height:76px;
    height:auto !important;
    padding:10px 14px !important;
    gap:12px;
  }

  .steps{
    transform:none !important;
    width:100% !important;
    overflow-x:auto;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    padding-bottom:10px !important;
  }

  .step-pill{
    flex:0 0 auto;
  }

  .toolbar,
  .positions-toolbar{
    align-items:stretch !important;
  }

  .toolbar .search,
  .positions-toolbar .search{
    flex:1 1 100% !important;
    min-width:100% !important;
  }

  #manufacturer.level-select,
  #mobility.level-select,
  .level-select{
    width:100% !important;
    max-width:none !important;
  }

  .positions-page-head{
    flex-direction:column;
    gap:12px;
  }

  .preview-quote{
    padding:16px !important;
  }

  .preview-section table{
    min-width:680px;
  }

  .component-list-head{
    flex-wrap:wrap;
  }

  .component-list-head .show-all-components{
    margin-left:0 !important;
  }
}

@media (max-width:560px){
  .main{
    width:calc(100% - 20px) !important;
  }

  .brand strong{
    font-size:17px;
  }

  .brand span{
    display:none;
  }

  .logo{
    width:38px;
    height:38px;
  }

  .card,
  .preview-quote{
    border-radius:14px;
    padding:14px !important;
  }

  .hero{
    align-items:flex-start;
  }

  .hero h1,
  .positions-page-head h1,
  .preview-heading h1{
    font-size:23px !important;
  }

  .choice-grid{
    grid-template-columns:1fr !important;
  }

  .actions{
    gap:10px;
    flex-wrap:wrap;
  }

  .actions .btn{
    flex:1 1 140px;
  }
}

/* Impression : le responsive écran ne doit pas modifier le devis final. */
@media print{
  html,body{
    overflow:visible !important;
  }
  .main{
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }
  .preview-section{
    overflow:visible !important;
  }
  .preview-section table{
    min-width:0 !important;
  }
}

/* V2.44 — Correction structure bureau selon la version visuelle validée.
   La barre des étapes reste collée au bord gauche, sans déplacement horizontal.
   Le contenu principal garde son centrage et sa largeur responsive. */
@media (min-width:1051px){
  .app-shell{
    position:relative !important;
    grid-template-columns:230px minmax(0,1fr) !important;
  }

  .steps{
    position:sticky !important;
    top:76px !important;
    left:0 !important;
    right:auto !important;
    transform:none !important;
    width:230px !important;
    max-width:230px !important;
    margin:0 !important;
    justify-self:start !important;
  }

  .main{
    grid-column:2 !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    width:min(1220px,calc(100% - 56px)) !important;
    max-width:1220px !important;
    margin:24px auto 48px !important;
  }
}

/* V2.45 — Retour exact au positionnement bureau de la version "avant" validée.
   La colonne des étapes est volontairement rapprochée vers la droite,
   comme dans les versions V2.20+ validées visuellement. */
@media (min-width:1051px){
  .app-shell{
    grid-template-columns:230px minmax(0,1fr) !important;
  }

  .steps{
    width:230px !important;
    max-width:230px !important;
    transform:translateX(190px) !important;
    left:auto !important;
    right:auto !important;
    margin:0 !important;
  }

  .main{
    grid-column:2 !important;
    width:calc(100% - 56px) !important;
    max-width:1220px !important;
    margin:24px auto 48px !important;
    left:auto !important;
    transform:none !important;
  }
}

/* V2.46 — Correction des marges internes de la zone centrale.
   La barre verticale conserve le bon positionnement V2.45.
   Sur bureau, le contenu retrouve les 28 px d'espace intérieur
   visibles sur la version "avant" validée. */
@media (min-width:1051px){
  .main{
    padding:28px !important;
  }
}

/* Sur écrans intermédiaires, conserver une marge interne confortable. */
@media (min-width:851px) and (max-width:1050px){
  .main{
    padding:22px !important;
  }
}

/* V3.00 Design Clinique */
body{background:#f3f6f5!important;color:#203038!important}
.topbar{background:#fff!important;border-bottom:1px solid #e1e9e7!important;box-shadow:0 2px 12px rgba(38,68,70,.04)!important}
.logo{background:#286f70!important;border-radius:12px!important}
.btn-primary{background:#286f70!important;border-radius:11px!important}
.choice,.card,.quote,.list-card,.basket{border-color:#dce5e3!important;box-shadow:0 12px 32px rgba(38,68,70,.07)!important}
.choice{border-radius:17px!important}.choice.selected{background:#edf6f4!important;border-color:#579291!important}
.level-select,.search input,.field input,.field select,.field textarea{border-radius:11px!important;border-color:#d5e0de!important}
.excel-section-row{background:#e8eeed!important}.notice.ok{background:#edf6f4!important;border-color:#cde4df!important}
.basket-count{background:#286f70!important}
@media(min-width:1051px){
 .app-shell{display:block!important}
 .steps{position:sticky!important;top:72px!important;transform:none!important;width:min(1180px,calc(100% - 64px))!important;max-width:1180px!important;height:auto!important;margin:0 auto!important;padding:18px 0 8px!important;background:transparent!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:8px!important;z-index:30!important}
 .step-pill{width:auto!important;min-height:44px!important;border-radius:12px!important;border:1px solid #dce5e3!important;background:#fff!important;color:#607378!important;padding:8px 12px!important}
 .step-pill.active{background:#286f70!important;color:#fff!important;border-color:#286f70!important}
 .step-pill.done{background:#e8f2f0!important;color:#286f70!important}
 .main{width:min(1180px,calc(100% - 64px))!important;max-width:1180px!important;margin:10px auto 54px!important;padding:0!important;transform:none!important}
}
.positions-split{grid-template-columns:minmax(0,1.9fr) minmax(300px,.68fr)!important;gap:18px!important}
.positions-list-card,.basket{border-radius:16px!important}
.preview-quote{border-radius:20px!important;padding:30px!important}
.preview-quote th{background:#edf3f2!important;color:#40565c!important}

/* V3.01 — centrage et marges extérieures */
@media(min-width:1051px){
 .steps{width:min(1120px,calc(100% - 120px))!important;max-width:1120px!important;margin-left:auto!important;margin-right:auto!important}
 .main{width:min(1120px,calc(100% - 120px))!important;max-width:1120px!important;margin-left:auto!important;margin-right:auto!important;padding-left:24px!important;padding-right:24px!important;box-sizing:border-box!important}
}
@media(min-width:851px) and (max-width:1050px){.main{width:calc(100% - 64px)!important;max-width:980px!important;margin-left:auto!important;margin-right:auto!important;padding-left:24px!important;padding-right:24px!important;box-sizing:border-box!important}}
@media(max-width:850px){.main{width:calc(100% - 28px)!important;margin-left:auto!important;margin-right:auto!important;padding-left:14px!important;padding-right:14px!important;box-sizing:border-box!important}}


/* V3.02 — correction forte du centrage bureau.
   Annule les anciens décalages de la navigation verticale V2.x. */
@media (min-width:1051px){
  .app-shell{
    display:block !important;
    width:100% !important;
    max-width:none !important;
  }

  .steps{
    position:sticky !important;
    top:72px !important;
    left:0 !important;
    right:0 !important;
    transform:none !important;
    width:calc(100% - 120px) !important;
    max-width:1180px !important;
    margin:0 auto !important;
    padding:18px 0 8px !important;
    box-sizing:border-box !important;
    justify-self:auto !important;
  }

  .main{
    position:static !important;
    grid-column:auto !important;
    grid-row:auto !important;
    left:0 !important;
    right:0 !important;
    transform:none !important;

    width:calc(100% - 120px) !important;
    max-width:1180px !important;

    margin:10px auto 54px !important;
    padding:0 !important;
    box-sizing:border-box !important;
  }

  .main > .hero,
  .main > .card,
  .main > .positions-page-head,
  .main > .positions-toolbar,
  .main > .positions-split,
  .main > .preview-heading,
  .main > .quote,
  .main > .actions{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box !important;
  }
}

/* Marges équilibrées sur les résolutions intermédiaires. */
@media (min-width:851px) and (max-width:1050px){
  .main{
    position:static !important;
    left:0 !important;
    right:0 !important;
    transform:none !important;
    width:calc(100% - 64px) !important;
    max-width:980px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
}


/* V3.03 — centrage absolu par rapport à la fenêtre.
   Cette règle ne dépend plus des anciennes colonnes/sidebar V2.x. */
@media (min-width:1051px){
  .app-shell{
    display:block !important;
    position:relative !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  .steps{
    position:sticky !important;
    top:72px !important;

    width:min(1180px, calc(100vw - 120px)) !important;
    max-width:none !important;

    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;

    margin:0 !important;
    padding:18px 0 8px !important;

    box-sizing:border-box !important;
  }

  .main{
    position:relative !important;

    width:min(1180px, calc(100vw - 120px)) !important;
    max-width:none !important;

    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;

    margin:10px 0 54px 0 !important;
    padding:0 !important;

    box-sizing:border-box !important;
  }

  .main > *{
    max-width:100% !important;
    box-sizing:border-box !important;
  }
}

/* Sur très grands écrans, on garde des marges généreuses et parfaitement symétriques. */
@media (min-width:1500px){
  .steps,
  .main{
    width:1180px !important;
  }
}


/* V3.04 — marges intérieures plus confortables.
   Le contenu ne colle plus au bord des grandes cartes. */
@media (min-width:851px){
  .main > .card,
  .main > .quote,
  .preview-quote{
    padding-left:30px !important;
    padding-right:30px !important;
  }

  .hero,
  .positions-page-head,
  .preview-heading{
    padding-left:2px !important;
    padding-right:2px !important;
  }

  .card > h1:first-child,
  .card > h2:first-child,
  .card > .hero:first-child,
  .card > .section-title:first-child{
    margin-top:0 !important;
  }
}

/* Étape 1 : davantage d'air autour du titre, des cartes et du bouton Continuer. */
@media (min-width:1051px){
  .main{
    padding-left:22px !important;
    padding-right:22px !important;
  }

  .main > .card{
    padding:24px 26px 26px !important;
  }

  .main > .card .hero{
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .main > .card .choices,
  .main > .card .choice-grid,
  .main > .card .region-grid{
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .main > .card .actions{
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

@media (max-width:850px){
  .main > .card,
  .main > .quote,
  .preview-quote{
    padding-left:18px !important;
    padding-right:18px !important;
  }
}


/* V3.05 — toutes les lignes des fichiers ASTO sont affichées.
   K et lignes sans Rekord-typ utilisent le même fond de section. */
.excel-source-structural{
  display:grid !important;
}
.excel-source-structural .excel-section-code,
.excel-source-structural .excel-section-title{
  font-weight:700 !important;
}


/* V3.11 — saisie Matière première dans tous les onglets Réparation */
.raw-material-row{
  cursor:default;
}
.raw-material-editor{
  grid-column:3 / 5;
  display:grid;
  grid-template-columns:minmax(220px,1.8fr) minmax(150px,.8fr) minmax(150px,.7fr);
  gap:12px;
  align-items:end;
  margin-top:4px;
  padding:13px 14px;
  border:1px solid #d7e4e2;
  border-radius:12px;
  background:#f7fbfa;
}
.raw-material-field label{
  display:block;
  margin:0 0 6px;
  color:#49666b;
  font-size:11px;
  font-weight:800;
}
.raw-material-field input{
  width:100%;
  height:38px;
  border:1px solid #bfcfce;
  border-radius:8px;
  padding:8px 10px;
  background:#fff;
  color:var(--ink);
}
.raw-material-field input:focus{
  outline:3px solid rgba(40,111,112,.12);
  border-color:#286f70;
}
.raw-material-price-input{
  display:flex;
  align-items:center;
  border:1px solid #bfcfce;
  border-radius:8px;
  overflow:hidden;
  background:#fff;
}
.raw-material-price-input span{
  padding:0 9px;
  color:#587075;
  font-size:11px;
  font-weight:800;
  border-right:1px solid #d8e2e1;
}
.raw-material-price-input input{
  border:0!important;
  border-radius:0!important;
  outline:0!important;
}
.raw-material-calculation{
  min-height:60px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8px 10px;
  border-radius:9px;
  background:#e8f3f1;
  color:#315c5d;
}
.raw-material-calculation span{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.raw-material-calculation strong{
  font-size:16px;
  margin:1px 0 2px;
}
.raw-material-calculation small{
  font-size:11px;
}
.quote-material-detail{
  margin-top:4px;
  font-size:11px;
  color:#405e64;
}
.quote-material-markup{
  color:#60787d;
}
@media(max-width:850px){
  .raw-material-editor{
    grid-column:2 / -1;
    grid-template-columns:1fr;
  }
}


/* V3.13 — Matière première : suppression des éléments marqués sur les captures */
.raw-material-editor{
  grid-template-columns:minmax(280px,2fr) minmax(190px,1fr) !important;
}


/* V3.18 — centrer UNIQUEMENT la barre complète des étapes.
   Les boutons et leur contenu restent exactement comme en V3.15. */
@media (min-width:1051px){
  .steps{
    position:sticky !important;
    top:72px !important;

    /* largeur identique au contenu principal */
    width:min(1180px, calc(100vw - 120px)) !important;
    max-width:1180px !important;

    /* neutralise tous les anciens décalages */
    left:auto !important;
    right:auto !important;
    transform:none !important;
    justify-self:auto !important;

    /* centrage réel du bloc complet */
    margin-left:auto !important;
    margin-right:auto !important;

    box-sizing:border-box !important;
  }
}


/* V3.20 — impression/PDF : DEVIS réellement placé à droite.
   Le HTML utilise .preview-top et non .quote-paper. */
@media print {
  .preview-top{
    display:flex !important;
    flex-direction:row !important;
    justify-content:space-between !important;
    align-items:flex-start !important;
    width:100% !important;
  }

  /* Bloc date / catégorie à gauche */
  .preview-top-right{
    order:1 !important;
    text-align:left !important;
    margin:0 !important;
  }

  /* Bloc DEVIS / ASTO V10 à droite */
  .preview-top > div:first-child{
    order:2 !important;
    margin-left:auto !important;
    text-align:right !important;
  }

  .preview-top .quote-title,
  .preview-top .preview-subtitle{
    text-align:right !important;
  }
}

/* V3.22 — champ prix d'achat compact */
.raw-material-price-input{
  width:140px !important;
  max-width:140px !important;
}
.raw-material-price-input input{
  width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* V3.28 — nouveau logo Devis : document + symbole plus */
.logo{
  background:transparent !important;
  border-radius:0 !important;
  overflow:visible !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.logo img{
  display:block !important;
  width:46px !important;
  height:46px !important;
  object-fit:contain !important;
}
@media (max-width:560px){
  .logo img{
    width:40px !important;
    height:40px !important;
  }
}


/* ==========================================================
   V3.33 — Responsive téléphone renforcé
   Objectif : affichage propre de ~320 px à grands smartphones,
   en portrait comme en paysage, sans modifier le bureau/PDF.
   ========================================================== */

@media screen and (max-width:850px){
  html, body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  body{
    -webkit-text-size-adjust:100%;
  }

  .app-shell{
    width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
  }

  /* En-tête */
  .topbar{
    position:sticky !important;
    top:0 !important;
    width:100% !important;
    min-height:64px !important;
    height:auto !important;
    padding:8px 12px !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
  }

  .brand{
    min-width:0 !important;
    flex:1 1 auto !important;
    gap:8px !important;
  }

  .brand > div:last-child{
    min-width:0 !important;
  }

  .brand strong{
    white-space:nowrap !important;
  }

  .privacy,
  .header-rules{
    flex:0 0 auto !important;
  }

  /* Barre des étapes : défile horizontalement au lieu de déborder. */
  .steps{
    position:sticky !important;
    top:64px !important;
    z-index:19 !important;
    width:100% !important;
    max-width:100% !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    margin:0 !important;
    padding:8px 10px 9px !important;
    display:flex !important;
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;
    gap:7px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    background:rgba(247,250,250,.97) !important;
    border-bottom:1px solid #e1e9ea;
  }

  .steps::-webkit-scrollbar{
    display:none;
  }

  .step-pill{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    min-height:40px !important;
    padding:8px 11px !important;
  }

  /* Contenu principal */
  .main{
    position:static !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    width:calc(100% - 20px) !important;
    max-width:none !important;
    margin:10px auto 32px !important;
    padding:0 !important;
    min-width:0 !important;
  }

  .hero{
    display:block !important;
    margin-bottom:14px !important;
  }

  .hero h1{
    font-size:24px !important;
    line-height:1.15 !important;
  }

  .hero p{
    font-size:13px !important;
    line-height:1.45 !important;
  }

  .card,
  .quote,
  .preview-quote,
  .list-card,
  .basket,
  .basket-current{
    max-width:100% !important;
    min-width:0 !important;
  }

  .card,
  .preview-quote{
    padding:15px !important;
    border-radius:14px !important;
  }

  /* Étape 1 */
  .choice-grid,
  .region-choice-grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .choice{
    width:100% !important;
    min-width:0 !important;
    min-height:82px !important;
    padding:15px !important;
  }

  .choice strong{
    font-size:17px !important;
    overflow-wrap:anywhere !important;
  }

  /* Formulaires */
  .grid{
    grid-template-columns:1fr !important;
  }

  .col-4,
  .col-6,
  .col-8,
  .col-12{
    grid-column:1 / -1 !important;
  }

  .field,
  .field input,
  .field select,
  .field textarea{
    min-width:0 !important;
    max-width:100% !important;
  }

  .field input,
  .field select,
  .field textarea,
  .search input{
    font-size:16px !important; /* évite le zoom automatique iOS */
  }

  /* Etape Positions */
  .positions-page-head,
  .positions-controls,
  .positions-toolbar,
  .toolbar{
    width:100% !important;
    min-width:0 !important;
  }

  .positions-page-head{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
  }

  .positions-source-tabs,
  .tabs{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:3px;
  }

  .positions-source-tabs::-webkit-scrollbar,
  .tabs::-webkit-scrollbar{
    display:none;
  }

  .positions-source-tabs .tab,
  .tab{
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }

  .positions-controls{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:9px !important;
  }

  .positions-controls .level-select,
  .positions-search,
  .positions-search input,
  .search,
  .search input{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .positions-result-count{
    text-align:left !important;
    white-space:normal !important;
  }

  .positions-split,
  .split{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .positions-list-card .positions,
  .positions{
    max-height:none !important;
    overflow:visible !important;
  }

  /* Les lignes ASTO passent en carte compacte sur téléphone. */
  .pos,
  .excel-position-row,
  .excel-source-structural{
    grid-template-columns:30px minmax(0,1fr) !important;
    gap:6px 9px !important;
    padding:11px 10px !important;
    min-width:0 !important;
  }

  .pos-code,
  .excel-position-row .pos-code,
  .excel-source-structural .excel-section-code{
    grid-column:2 !important;
    min-width:0 !important;
  }

  .pos-title,
  .pos-desc,
  .pos-sec,
  .excel-section-title{
    grid-column:2 !important;
    min-width:0 !important;
    overflow-wrap:anywhere !important;
  }

  .pos .price,
  .excel-position-row .price{
    grid-column:2 !important;
    text-align:left !important;
    margin-top:3px !important;
  }

  .basket,
  .basket-current,
  .positions-side{
    position:static !important;
    top:auto !important;
    width:100% !important;
  }

  .basket-current-list,
  .basket-list{
    max-height:none !important;
  }

  /* Matière première / semi-fabriqué */
  .raw-material-editor{
    grid-column:2 !important;
    grid-template-columns:1fr !important;
    gap:9px !important;
    padding:11px !important;
  }

  .raw-material-price-input{
    width:100% !important;
    max-width:180px !important;
  }

  /* Composants */
  .component-row{
    grid-template-columns:30px minmax(0,1fr) !important;
    gap:7px 9px !important;
  }

  .component-row > *{
    min-width:0 !important;
  }

  .component-row .price{
    grid-column:2 !important;
    text-align:left !important;
  }

  /* Aperçu du devis */
  .preview-top,
  .quote-header,
  .quote-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .preview-top-right{
    text-align:left !important;
  }

  .preview-section{
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  .preview-section table{
    min-width:620px !important;
  }

  .quote-total{
    max-width:none !important;
    width:100% !important;
  }

  .quote-remarks textarea{
    width:100% !important;
    max-width:100% !important;
  }

  /* Boutons */
  .actions{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:9px !important;
    align-items:stretch !important;
  }

  .actions > span:empty{
    display:none !important;
  }

  .actions .btn{
    min-height:44px !important;
    flex:1 1 150px !important;
    white-space:normal !important;
  }

  button,
  .btn,
  .tab,
  .choice,
  .icon-btn{
    touch-action:manipulation;
  }
}

/* Smartphones étroits : 320–430 px */
@media screen and (max-width:430px){
  .topbar{
    min-height:60px !important;
    padding:7px 9px !important;
  }

  .logo img{
    width:36px !important;
    height:36px !important;
  }

  .brand strong{
    font-size:16px !important;
  }

  .brand span{
    display:none !important;
  }

  .header-rules{
    padding:7px 8px !important;
    font-size:11px !important;
  }

  .steps{
    top:60px !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }

  .step-pill{
    font-size:12px !important;
    min-height:38px !important;
    padding:7px 10px !important;
  }

  .main{
    width:calc(100% - 14px) !important;
    margin-top:8px !important;
  }

  .card,
  .preview-quote{
    padding:12px !important;
  }

  .hero h1,
  .positions-page-head h1,
  .preview-heading h1{
    font-size:21px !important;
  }

  .choice{
    min-height:74px !important;
    padding:13px !important;
  }

  .choice strong{
    font-size:16px !important;
  }

  .actions{
    flex-direction:column !important;
  }

  .actions .btn{
    width:100% !important;
    flex:0 0 auto !important;
  }

  .preview-section table{
    min-width:560px !important;
  }
}

/* Très petits écrans */
@media screen and (max-width:350px){
  .main{
    width:calc(100% - 10px) !important;
  }

  .topbar{
    padding-left:6px !important;
    padding-right:6px !important;
  }

  .privacy{
    display:none !important;
  }

  .step-pill{
    font-size:11px !important;
  }

  .card,
  .preview-quote{
    padding:10px !important;
  }
}

/* Paysage téléphone : gagner de la hauteur sans casser la largeur. */
@media screen and (max-height:520px) and (orientation:landscape) and (max-width:950px){
  .topbar{
    position:relative !important;
  }

  .steps{
    position:relative !important;
    top:auto !important;
  }

  .main{
    margin-top:6px !important;
  }
}

/* L'impression/PDF reste indépendante du responsive téléphone. */
@media print{
  .steps{
    overflow:visible !important;
  }
}


/* V3.34 — option Devis / Facture dans l'écran final */
.document-type-btn{
  border-color:#78aaa6 !important;
  color:#176d69 !important;
  background:#f4fbfa !important;
}
.document-type-btn:hover{
  background:#e9f6f4 !important;
}
.document-type-btn.is-invoice{
  background:#176d69 !important;
  border-color:#176d69 !important;
  color:#fff !important;
}
.final-actions-right{
  flex-wrap:wrap;
  justify-content:flex-end;
}
@media screen and (max-width:850px){
  .final-actions-right{
    width:100% !important;
    display:flex !important;
    flex-wrap:wrap !important;
  }
  .final-actions-right .btn{
    flex:1 1 150px !important;
  }
}
@media screen and (max-width:430px){
  .final-actions-right{
    flex-direction:column !important;
  }
  .final-actions-right .btn{
    width:100% !important;
  }
}


/* ==========================================================
   V3.35 — correction spécifique Étape 3 sur téléphone
   Les anciennes colonnes desktop sont neutralisées afin que
   désignation/description ne soient jamais comprimées lettre par lettre.
   ========================================================== */
@media screen and (max-width:850px){

  /* Ligne ASTO standard */
  #posList .pos,
  #posList .excel-position-row,
  #posList .excel-source-structural,
  .positions-list .pos,
  .positions-list .excel-position-row{
    display:grid !important;
    grid-template-columns:42px minmax(0, 1fr) !important;
    grid-template-rows:auto !important;
    column-gap:10px !important;
    row-gap:5px !important;
    align-items:start !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* Checkbox toujours dans la petite colonne gauche */
  #posList .pos > input[type="checkbox"],
  #posList .excel-position-row > input[type="checkbox"],
  .positions-list .pos > input[type="checkbox"]{
    grid-column:1 !important;
    grid-row:1 / span 6 !important;
    width:22px !important;
    height:22px !important;
    margin:2px auto 0 !important;
    align-self:start !important;
  }

  /* Tous les contenus texte utilisent toute la largeur restante */
  #posList .pos-code,
  #posList .pos-title,
  #posList .pos-desc,
  #posList .pos-sec,
  #posList .price,
  #posList .excel-section-code,
  #posList .excel-section-title,
  .positions-list .pos-code,
  .positions-list .pos-title,
  .positions-list .pos-desc,
  .positions-list .pos-sec,
  .positions-list .price{
    grid-column:2 !important;
    width:auto !important;
    min-width:0 !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    writing-mode:horizontal-tb !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
    white-space:normal !important;
  }

  #posList .pos-code,
  .positions-list .pos-code{
    font-size:15px !important;
    line-height:1.25 !important;
  }

  #posList .pos-title,
  .positions-list .pos-title{
    font-size:16px !important;
    line-height:1.28 !important;
  }

  #posList .pos-desc,
  #posList .pos-sec,
  .positions-list .pos-desc,
  .positions-list .pos-sec{
    font-size:14px !important;
    line-height:1.4 !important;
  }

  #posList .price,
  .positions-list .price{
    text-align:left !important;
    justify-self:start !important;
    font-size:15px !important;
    line-height:1.3 !important;
  }

  /* Les wrappers éventuels de contenu ne doivent plus conserver
     les largeurs desktop. */
  #posList .pos > div,
  #posList .excel-position-row > div,
  .positions-list .pos > div,
  .positions-list .excel-position-row > div{
    min-width:0 !important;
    max-width:100% !important;
  }

  /* Editeur semi-fabriqué / matière première */
  #posList .raw-material-row,
  .positions-list .raw-material-row{
    grid-template-columns:42px minmax(0,1fr) !important;
  }

  #posList .raw-material-editor,
  .positions-list .raw-material-editor{
    grid-column:2 !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  #posList .raw-material-editor input,
  #posList .raw-material-editor textarea,
  .positions-list .raw-material-editor input,
  .positions-list .raw-material-editor textarea{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    font-size:16px !important;
  }
}

/* Très petits téléphones : garder assez d'espace au texte */
@media screen and (max-width:430px){
  #posList .pos,
  #posList .excel-position-row,
  #posList .excel-source-structural,
  .positions-list .pos,
  .positions-list .excel-position-row{
    grid-template-columns:34px minmax(0,1fr) !important;
    column-gap:8px !important;
    padding:10px 8px !important;
  }

  #posList .pos > input[type="checkbox"],
  #posList .excel-position-row > input[type="checkbox"],
  .positions-list .pos > input[type="checkbox"]{
    width:20px !important;
    height:20px !important;
  }

  #posList .pos-title,
  .positions-list .pos-title{
    font-size:15px !important;
  }

  #posList .pos-desc,
  #posList .pos-sec,
  .positions-list .pos-desc,
  .positions-list .pos-sec{
    font-size:13px !important;
  }
}