/* ==========================================================================
   MONPRIXTRAVAUX — STYLE PRINCIPAL v6
   Responsive complet : desktop, tablette, mobile, petits écrans.
   ========================================================================== */

/* 1. Variables */
:root{
  color-scheme:light;
  --ink:#151735;
  --ink-2:#24284a;
  --text:#24263d;
  --muted:#66697b;
  --line:#dedee7;
  --line-strong:#c5c7d4;
  --paper:#fff;
  --soft:#f6f6f9;
  --soft-2:#fafafd;
  --yellow:#ffdf00;
  --yellow-soft:#fff9d8;
  --focus:#3159b8;
  --success:#176b3a;
  --danger:#9a2c2c;
  --radius:8px;
  --radius-lg:14px;
  --shadow-sm:0 4px 18px rgba(18,22,49,.06);
  --shadow-md:0 18px 50px rgba(18,22,49,.10);
  --content:1380px;
  --touch:48px;
}

/* 2. Reset et fondations */
*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:72px;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  margin:0;
  min-width:280px;
  background:var(--paper);
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
  font-size:1rem;
  line-height:1.65;
  overflow-x:hidden;
}
button,input,textarea,select{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{opacity:.48;cursor:not-allowed}
a{color:inherit;text-decoration:none}
a,button{touch-action:manipulation}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p{margin:0}
h1,h2,h3{
  color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;
  line-height:1.13;
  text-wrap:balance;
}
p,label,a,button,li,summary{overflow-wrap:anywhere}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
input,textarea,select{accent-color:var(--ink)}
input[type="checkbox"],input[type="radio"]{
  width:1.25rem;
  height:1.25rem;
  flex:0 0 1.25rem;
  margin:2px 0 0;
}
input[type="hidden"]{display:none}
input[type="search"]{-webkit-appearance:none;appearance:none}
::selection{background:var(--yellow);color:var(--ink)}

/* 3. Conteneur */
.wrap{
  width:100%;
  max-width:var(--content);
  margin-inline:auto;
  padding-inline:clamp(1rem,3vw,2.5rem);
}
.wrap>*{min-width:0}

/* 4. Topbar */
.topbar{background:var(--ink);color:#fff}
.topbar .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem 1.5rem;
  min-height:36px;
  padding-block:.4rem;
  font-size:.72rem;
  letter-spacing:.055em;
}
.topbar span:last-child{white-space:nowrap;letter-spacing:0}

/* 5. Header */
.masthead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem 1.5rem;
  padding-block:clamp(1rem,2.3vw,1.55rem);
}
.brand{
  display:inline-block;
  max-width:100%;
  padding:.7rem 1rem;
  border-radius:4px;
  background:var(--ink);
  color:#fff;
  font-size:clamp(1.08rem,2.3vw,1.65rem);
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1.12;
}
.brand>span{
  display:inline-block;
  margin-left:.08em;
  color:var(--yellow);
  font-family:Georgia,serif;
  font-size:1.4em;
  font-weight:500;
  font-style:italic;
}
.brand small{
  display:block;
  margin-top:.45rem;
  font-size:.62rem;
  letter-spacing:.13em;
  font-weight:400;
}

/* 6. Boutons */
.primary,.back{
  min-height:var(--touch);
  border-radius:5px;
  transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  max-width:100%;
  padding:.78rem 1.25rem;
  border:1px solid var(--ink);
  background:var(--ink);
  color:#fff;
  text-align:center;
  font-size:.94rem;
  font-weight:700;
  line-height:1.35;
}
.primary:disabled{box-shadow:none}
.headcta{font-size:.81rem;letter-spacing:.02em}
.back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.72rem .9rem;
  border:1px solid var(--line-strong);
  background:#fff;
  color:var(--ink);
  font-size:.94rem;
  font-weight:600;
}

/* 7. Navigation */
body>nav{
  position:sticky;
  top:0;
  z-index:80;
  border-block:1px solid var(--line);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.navinner{
  display:flex;
  align-items:center;
  gap:0 1.6rem;
  min-width:0;
  padding-block:.15rem;
}
.navinner a{
  display:flex;
  align-items:center;
  min-height:46px;
  padding-block:.45rem;
  font-size:.86rem;
  font-weight:700;
  white-space:nowrap;
}
.navinner a:last-child{margin-left:auto}

/* 8. Intro */
.intro{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  padding-block:clamp(1.5rem,4vw,3rem);
}
.intro>div{min-width:0}
.eyebrow{
  font-size:.73rem;
  letter-spacing:.1em;
  font-weight:800;
  line-height:1.45;
}
.intro .eyebrow{border-left:4px solid var(--yellow);padding-left:.6rem}
h1{
  margin:.62rem 0 .82rem;
  font-size:clamp(2rem,4vw,3.25rem);
  letter-spacing:-.035em;
}
h1 em{
  font-style:normal;
  background:linear-gradient(transparent 68%,var(--yellow) 68%,var(--yellow) 93%,transparent 93%);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.intro p{color:var(--muted);font-size:1rem;max-width:70ch}
.intro-note{
  flex:0 0 auto;
  padding:1rem 1.1rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--soft-2);
  color:var(--muted);
  font-size:.86rem;
  line-height:1.9;
}

/* 9. Layout principal */
.layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(270px,310px);
  gap:clamp(1.25rem,3vw,2.3rem);
  align-items:start;
}
.layout>*{min-width:0}
.estimator{
  min-width:0;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:#fff;
  box-shadow:var(--shadow-sm);
  overflow:clip;
}

/* 10. Steps */
.steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  background:var(--soft);
  border-bottom:1px solid var(--line);
}
.steps>div{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  min-width:0;
  min-height:70px;
  padding:.85rem .55rem;
  color:var(--muted);
  border-bottom:3px solid transparent;
  font-size:.86rem;
  line-height:1.3;
}
.steps>div.active{color:var(--ink);border-bottom-color:var(--yellow)}
.steps>div.is-current{background:#fff}
.steps b{
  display:grid;
  place-items:center;
  flex:0 0 29px;
  width:29px;
  height:29px;
  border:1px solid #cfcfd9;
  border-radius:50%;
  font-size:.72rem;
}
.steps .active b{background:var(--ink);color:#fff;border-color:var(--ink)}
.steps .is-current b{box-shadow:0 0 0 4px rgba(255,223,0,.32)}

/* 11. Panel */
.panel{padding:clamp(1rem,2.6vw,2rem)}
.section-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.45rem 1rem;
}
.panel h2{
  margin:.72rem 0;
  font-size:clamp(1.65rem,2.6vw,2.1rem);
  letter-spacing:-.025em;
}
.muted{color:var(--muted);font-size:.87rem}
.section-heading .muted{font-size:.8rem}

/* 12. Recherche */
.search{
  display:flex;
  align-items:center;
  gap:.7rem;
  min-width:0;
  margin:1.35rem 0 1rem;
  padding-inline:.9rem;
  border:1px solid var(--line-strong);
  border-radius:7px;
  background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.search:focus-within{
  border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(49,89,184,.12);
}
.search>span{flex:0 0 auto;color:var(--muted);font-size:1.35rem}
.search input{
  display:block;
  width:100%;
  min-width:0;
  min-height:52px;
  padding:.72rem 0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--ink);
  font-size:1rem;
}

/* 13. Catégories */
.categories{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.62rem;
}
.categories button{
  position:relative;
  display:flex;
  align-items:center;
  gap:.65rem;
  min-width:0;
  min-height:74px;
  padding:.75rem;
  border:1px solid var(--line);
  border-radius:7px;
  background:#fff;
  color:var(--ink);
  font-size:.87rem;
  text-align:left;
  line-height:1.35;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.categories button.selected{
  background:var(--yellow-soft);
  border-color:#b59d00;
  box-shadow:inset 0 0 0 1px #b59d00;
}
.category-icon{
  flex:0 0 25px;
  width:25px;
  text-align:center;
  font-size:1.35rem;
  line-height:1;
}
.categories button>span:nth-child(2){min-width:0}
.mpt-category-count{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  min-width:22px;
  height:22px;
  margin-left:auto;
  padding:0 .3rem;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
  font-size:.7rem;
  font-weight:800;
}

/* 14. Prestations */
.service-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.4rem 1rem;
  margin:1.35rem 0 .72rem;
}

.service-heading>span{color:var(--muted);font-size:.8rem}
.services{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.48rem .8rem;
}
.services label{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  min-width:0;
  min-height:52px;
  padding:.72rem .62rem;
  border:1px solid transparent;
  border-radius:7px;
  font-size:.94rem;
  line-height:1.42;
  cursor:pointer;
  transition:background .14s ease,border-color .14s ease,box-shadow .14s ease;
}
.services label.is-selected,
.services label:has(input:checked){
  background:var(--yellow-soft);
  border-color:#e2d269;
}
.services label:focus-within{
  outline:2px solid var(--focus);
  outline-offset:1px;
}
.services input:focus-visible{outline:none}
.services label>span{min-width:0}

/* 15. Chips */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:1rem;
}
.chips:empty{display:none}
.chips button{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  max-width:100%;
  padding:.48rem .65rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--soft);
  color:var(--ink);
  font-size:.8rem;
  text-align:left;
  line-height:1.35;
}
.chips .mpt-clear-all{
  border-color:#d6bcbc;
  background:#fff7f7;
  color:#7f2525;
  font-weight:700;
}

/* 16. Actions */
.actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.85rem;
  margin-top:1.4rem;
  padding-top:1.2rem;
  border-top:1px solid var(--line);
}
.actions>.primary{margin-left:auto}
.actions>.muted{flex:1 1 160px;font-size:.8rem}

/* 17. Champs */
.field{
  display:flex;
  flex-direction:column;
  gap:.48rem;
  min-width:0;
  margin:1.25rem 0;
  font-size:.94rem;
  font-weight:700;
}
.field input,.field textarea,.field select{
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  min-height:52px;
  padding:.8rem .88rem;
  border:1px solid var(--line-strong);
  border-radius:7px;
  background:#fff;
  color:var(--ink);
  font-size:1rem;
  font-weight:400;
  line-height:1.45;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.field textarea{min-height:142px;resize:vertical}
.field select{padding-right:2rem}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0;
  border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(49,89,184,.12);
}
.field input.mpt-invalid,.field textarea.mpt-invalid,.field select.mpt-invalid{
  border-color:var(--danger);
  box-shadow:0 0 0 3px rgba(154,44,44,.10);
}
.two{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.15rem;
}
.two>*{min-width:0}

/* 18. Notice */
.notice{
  display:flex;
  align-items:flex-start;
  gap:.72rem;
  margin:1.15rem 0;
  padding:1rem;
  border-left:3px solid var(--yellow);
  background:var(--soft);
  font-size:.92rem;
  line-height:1.6;
}
.notice>span{flex:0 0 auto}
.notice p{min-width:0}
.notice strong{display:block}

/* 19. Callback & consent */
.callback,.consent{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  margin:1.35rem 0;
  cursor:pointer;
  font-size:.92rem;
  line-height:1.55;
}
.callback{
  padding:1rem;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--soft);
}
.callback span,.consent span{min-width:0}
.callback small{
  display:block;
  margin-top:.4rem;
  color:var(--muted);
  font-size:.85rem;
}
.consent{font-size:.86rem}
.consent a,.privacy a{text-decoration:underline;text-underline-offset:3px}

/* 20. Erreurs / anti-spam / étapes */
.error,.server-message{
  margin:0 0 1rem;
  padding:1rem;
  border-left:3px solid var(--danger);
  background:#fff2f0;
  color:#912525;
  font-size:.92rem;
  overflow-wrap:anywhere;
}
.error:focus{outline:2px solid var(--danger)}
.server-message ul{margin:0;padding-left:1.2rem}
.honey{
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.form-section+.form-section{
  margin-top:2rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
}
.js .form-section+.form-section{margin:0;padding:0;border:0}
.form-section{scroll-margin-top:90px}

/* 21. Colonne latérale */
.photo{
  position:relative;
  aspect-ratio:3/2;
  overflow:hidden;
  border-radius:8px;
  background:var(--soft);
}
.photo img{width:100%;height:100%;object-fit:cover}
.photo>span{
  position:absolute;
  left:.85rem;
  right:.85rem;
  bottom:.85rem;
  width:fit-content;
  max-width:calc(100% - 1.7rem);
  padding:.28rem .5rem;
  background:var(--yellow);
  color:var(--ink);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.05em;
}
.side-article{padding:1.4rem 0;border-bottom:1px solid var(--line)}
.tag{
  display:inline-block;
  padding:.24rem .48rem;
  background:var(--ink);
  color:#fff;
  font-size:.72rem;
  letter-spacing:.05em;
  font-weight:700;
}
.yellow{background:var(--yellow);color:var(--ink)}
.side-article h2{margin:.9rem 0;font-size:clamp(1.55rem,2.2vw,1.85rem)}
.side-article h3{margin:.9rem 0;font-size:clamp(1.4rem,2vw,1.62rem)}
.side-article p{color:var(--muted);font-size:.92rem}
.side-article a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin-top:.45rem;
  padding-block:.45rem;
  font-size:.92rem;
  font-weight:700;
}
.rule-note{
  display:flex;
  gap:.7rem;
  margin-top:1.1rem;
  padding:1rem;
  border-left:3px solid var(--yellow);
  background:var(--soft);
  font-size:.92rem;
}

/* 22. Comment ça marche */
.how{
  padding-block:clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--line);
}
.how h2,.catalog h2{
  font-size:clamp(1.7rem,3vw,2.2rem);
  letter-spacing:-.025em;
}
.three{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.6rem;
  margin-top:1.8rem;
}
.three article{min-width:0;padding-left:1.15rem;border-left:1px solid var(--line)}
.three article>b{font:2rem Georgia,serif;color:#77778c}
.three h3{margin:.7rem 0;font-size:1.45rem}
.three p{color:var(--muted);font-size:.92rem}

/* 23. Catalogue */
.catalog{padding-block:2rem}
.catalog>p{margin:1rem 0}
.catalog-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 1.6rem;
}
.catalog-grid button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.7rem;
  min-width:0;
  min-height:52px;
  padding:.82rem 0;
  border:0;
  border-bottom:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  font-size:.92rem;
  text-align:left;
}
.catalog-grid button span{flex:0 0 auto}

/* 24. Confidentialité */
.privacy{padding:1.5rem 0 2.5rem}
.privacy h3{font:700 .92rem Arial,sans-serif}
.privacy p{margin-top:.7rem;color:var(--muted);font-size:.86rem}

/* 25. Footer */
footer{padding-block:1.65rem;background:var(--ink);color:#fff}
footer .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.75rem 1.75rem;
}
footer a{display:inline-flex;align-items:center;min-height:44px;font-size:.86rem}
footer span{color:#d0d0df;font-size:.8rem}
.footerbrand{font-size:1rem;font-weight:800;letter-spacing:-.03em}
.footerbrand span{
  margin-left:.12rem;
  color:var(--yellow);
  font-family:Georgia,serif;
  font-size:1.45rem;
  font-style:italic;
}

/* 26. Résultat */
.result>p{margin:1rem 0}
.result h3{margin-top:1.4rem}
.result ul{padding-left:1.2rem}
.amount{
  margin:1.15rem 0;
  color:var(--ink);
  font-family:Georgia,serif;
  font-size:clamp(1.8rem,5vw,3rem);
  line-height:1.25;
  overflow-wrap:anywhere;
}
.amount span{color:var(--muted);font-size:.65em}
.warning{background:#fffbea}
.textlink{
  min-height:44px;
  padding:.5rem;
  border:0;
  background:none;
  color:var(--ink);
  text-decoration:underline;
}

/* 27. États géographiques ajoutés par v5/v6 */
.geo-status{
  display:block;
  min-height:1.25em;
  margin-top:.25rem;
  color:var(--muted);
  font-size:.8rem;
  font-weight:400;
  line-height:1.4;
}
.geo-status[data-state="success"]{color:var(--success)}
.geo-status[data-state="error"]{color:var(--danger)}
.geo-status[data-state="loading"]{opacity:.8}
.geo-status[data-state="info"]{color:#4d5578}

/* 28. Hover uniquement quand pertinent */
@media (hover:hover){
  .primary:not(:disabled):hover{background:#303354;box-shadow:0 7px 18px rgba(21,23,53,.16);transform:translateY(-1px)}
  .back:hover,.categories button:not(.selected):hover{background:var(--soft)}
  .categories button:hover{transform:translateY(-1px)}
  .navinner a:hover,.catalog-grid button:hover,.side-article a:hover{color:#796400}
  .services label:hover{border-color:#c9c9d6}
  .chips button:hover{background:#e9e9f0}
}

/* 29. Tablette paysage / petits laptops */
@media (max-width:1180px){
  .categories{grid-template-columns:repeat(2,minmax(0,1fr))}
  .services{grid-template-columns:1fr}
}

/* 30. Tablette */
@media (max-width:1024px){
  .layout{grid-template-columns:1fr}
  .layout>aside{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    gap:1.3rem;
    align-items:start;
  }
  .layout>aside .photo{grid-row:span 2}
  .layout>aside .side-article{padding:0 0 1.1rem}
  .categories{grid-template-columns:repeat(3,minmax(0,1fr))}
  .services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .intro-note{display:none}
  .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* 31. Grande tablette / mobile large */
@media (max-width:820px){
  html{scroll-padding-top:62px}
  .wrap{padding-inline:clamp(.9rem,3vw,1.25rem)}
  .masthead{align-items:flex-start}
  .headcta{flex:0 0 auto}
  .navinner{
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
    gap:0 1.1rem;
    padding-inline:0;
  }
  .navinner::-webkit-scrollbar{display:none}
  .navinner a{scroll-snap-align:start}
  .navinner a:last-child{margin-left:0}
  .intro{align-items:flex-start}
  .categories{grid-template-columns:repeat(2,minmax(0,1fr))}
  .services{grid-template-columns:1fr}
  .three{grid-template-columns:1fr}
  .three article{
    display:grid;
    grid-template-columns:2.2rem minmax(0,1fr);
    gap:.25rem .75rem;
    padding-left:0;
    border-left:0;
    border-top:1px solid var(--line);
    padding-top:1rem;
  }
  .three article>b{grid-row:span 2}
  .three h3{margin:0}
  .three p{grid-column:2}
}

/* 32. Mobile */
@media (max-width:680px){
  :root{--touch:50px}
  body{line-height:1.58}
  .topbar .wrap{font-size:.69rem;letter-spacing:0}
  .topbar span:first-child{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .topbar span:last-child{display:none}

  .masthead{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:.7rem;
    padding-block:.85rem;
  }
  .brand{padding:.62rem .78rem;font-size:1.08rem}
  .brand small{display:none}
  .headcta{
    min-height:44px;
    padding:.62rem .72rem;
    font-size:.72rem;
  }

  .intro{padding-block:1.35rem}
  .intro p br{display:none}
  h1{font-size:clamp(1.9rem,9vw,2.6rem)}

  .estimator{border-radius:10px}
  .steps{
    position:sticky;
    top:47px;
    z-index:30;
    box-shadow:0 6px 16px rgba(21,23,53,.06);
  }
  .steps>div{
    flex-direction:column;
    gap:.25rem;
    min-height:64px;
    padding:.6rem .15rem;
    font-size:.72rem;
    text-align:center;
  }
  .steps b{width:25px;height:25px;flex-basis:25px;font-size:.66rem}
  .steps span{max-width:11ch}

  .panel{padding:1rem}
  .panel h2{font-size:clamp(1.55rem,7vw,1.95rem)}
  .section-heading{align-items:flex-start}

  .search{margin-top:1.15rem}
  .search input{min-height:50px;font-size:16px}

  /* Catégories en carrousel tactile : moins de hauteur, plus intuitif */
  .categories{
    display:flex;
    gap:.55rem;
    margin-inline:-1rem;
    padding:0 1rem .35rem;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .categories::-webkit-scrollbar{display:none}
  .categories button{
    flex:0 0 min(72vw,220px);
    min-height:62px;
    scroll-snap-align:start;
    padding:.68rem;
  }

  .service-heading{margin-top:1rem}
  .services{gap:.32rem}
  .services label{min-height:54px;padding:.75rem .55rem}
  .chips{gap:.4rem}
  .chips button{min-height:42px}

  .two{grid-template-columns:1fr;gap:0}
  .two .field{margin-block:.7rem}
  .field{margin:1rem 0}
  .field input,.field textarea,.field select{font-size:16px}

  /* Barre d'action collante au bas de l'écran sur l'étape active */
  .js .form-section:not([hidden])>.actions{
    position:sticky;
    bottom:0;
    z-index:25;
    display:grid;
    grid-template-columns:1fr;
    gap:.6rem;
    margin:1.2rem -1rem -1rem;
    padding:.8rem 1rem calc(.8rem + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);
    background:rgba(255,255,255,.97);
    box-shadow:0 -10px 28px rgba(21,23,53,.08);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
  .actions>*{width:100%;margin:0!important}
  .actions>.muted{text-align:center;order:1}
  .actions>.primary{order:2}
  .actions>.back{order:3}

  .layout>aside{display:block}
  .layout>aside .photo{aspect-ratio:16/10}
  .layout>aside .side-article{padding:1.15rem 0}
  .side-article h2 br{display:none}

  .catalog-grid{grid-template-columns:1fr}
  footer .wrap{flex-direction:column;align-items:flex-start;gap:.4rem}
  .notice,.callback{padding:.85rem}
}

/* 33. Petits mobiles */
@media (max-width:480px){
  .wrap{padding-inline:.85rem}
  .masthead{grid-template-columns:1fr}
  .brand{width:max-content;max-width:100%}
  .headcta{width:100%}
  .navinner{margin-inline:-.85rem;padding-inline:.85rem}
  .intro{padding-block:1.15rem}
  .eyebrow{font-size:.68rem}
  .panel{padding:.85rem}
  .categories{
    margin-inline:-.85rem;
    padding-inline:.85rem;
  }
  .categories button{flex-basis:min(82vw,230px)}
  .js .form-section:not([hidden])>.actions{
    margin-inline:-.85rem;
    margin-bottom:-.85rem;
    padding-inline:.85rem;
  }
  .service-heading{
    align-items:flex-start;
    flex-direction:column;
  }
  .chips button{max-width:100%}
  .amount{font-size:clamp(1.65rem,10vw,2.45rem)}
}

/* 34. Très petits écrans */
@media (max-width:360px){
  .brand{font-size:1rem}
  .steps>div{font-size:.66rem}
  .steps span{max-width:9ch}
  .categories button{flex-basis:88vw}
  .chips button{width:100%;justify-content:flex-start}
}

/* 35. Réduction des animations */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* 36. Contraste forcé */
@media (forced-colors:active){
  .categories button.selected,
  .services label.is-selected,
  .services label:has(input:checked){outline:2px solid CanvasText}
}

/* 37. Impression */
@media print{
  header,nav,.topbar,.intro,aside,.how,.catalog,.privacy,footer,.steps,.actions,.textlink,.result form{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .wrap{max-width:none;padding:0}
  .layout{display:block}
  .estimator{border:0;box-shadow:none}
  .panel{padding:0}
  .notice{break-inside:avoid;background:#fff}
  .amount{font-size:26pt}
  a{color:#000}
}

/* ========================================================================== 
   MONPRIXTRAVAUX — CORRECTIF RESPONSIVE v7
   - Navigation mobile lisible
   - Catégories 2 par 2 sur petit écran
   - Cartes plus compactes et plus tactiles
   - Barre d'action moins envahissante avant toute sélection
   ========================================================================== */

@media (max-width:680px){
  /* La navigation principale ne doit plus s'écraser en une seule ligne. */
  body>nav{
    position:relative;
    top:auto;
    z-index:40;
    background:#fff;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .navinner{
    display:flex;
    flex-wrap:nowrap;
    gap:.5rem;
    width:100%;
    margin:0;
    padding:.5rem 0;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }

  .navinner::-webkit-scrollbar{display:none}

  .navinner a{
    flex:0 0 auto;
    min-height:38px;
    padding:.42rem .7rem;
    border:1px solid var(--line);
    border-radius:999px;
    background:#fff;
    font-size:.74rem;
    font-weight:700;
    line-height:1.15;
    white-space:nowrap;
    scroll-snap-align:start;
  }

  .navinner a:first-child{
    background:var(--ink);
    border-color:var(--ink);
    color:#fff;
  }

  .navinner a:last-child{margin-left:0}

  /* La barre d'étapes devient le seul élément sticky en haut. */
  .steps{
    top:0;
  }

  /* Hero plus compact : on voit plus vite l'estimateur. */
  .intro{
    padding-block:1.1rem 1.25rem;
  }

  .intro h1,
  h1{
    font-size:clamp(2rem,8.3vw,2.55rem);
    line-height:1.02;
    letter-spacing:-.04em;
  }

  .intro p{
    font-size:.94rem;
    line-height:1.55;
  }

  /* Recherche plus nette sur mobile. */
  .search{
    margin:1rem 0 .9rem;
    padding-inline:.78rem;
    border-radius:10px;
    background:#fff;
  }

  /* IMPORTANT : catégories en grille 2 x N, plus de carrousel horizontal. */
  .categories{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.55rem;
    width:100%;
    margin:0 !important;
    padding:0 !important;
    overflow:visible;
    scroll-snap-type:none;
  }

  .categories button{
    display:grid;
    grid-template-columns:24px minmax(0,1fr);
    align-items:center;
    gap:.5rem;
    width:100%;
    min-width:0;
    min-height:78px;
    padding:.68rem .6rem;
    border-radius:10px;
    font-size:.78rem;
    line-height:1.25;
    text-align:left;
    scroll-snap-align:none;
    flex:none;
  }

  .categories button>span:nth-child(2){
    min-width:0;
    hyphens:auto;
    overflow-wrap:anywhere;
  }

  .category-icon{
    width:24px;
    flex:0 0 24px;
    font-size:1.12rem;
  }

  .categories button.selected{
    background:var(--yellow-soft);
    border-color:#bda700;
    box-shadow:inset 0 0 0 1px #bda700,0 5px 14px rgba(21,23,53,.05);
  }

  .mpt-category-count{
    position:absolute;
    top:.38rem;
    right:.38rem;
    min-width:20px;
    height:20px;
    margin:0;
    font-size:.65rem;
  }

  /* Titre de la catégorie + compteur sous forme de badge. */
  .service-heading{
    align-items:center;
    flex-direction:row;
    margin:1.2rem 0 .65rem;
  }

  .service-heading h3{
    font-size:1rem;
  }

  .service-heading>span{
    flex:0 0 auto;
    padding:.25rem .52rem;
    border-radius:999px;
    background:var(--soft);
    font-size:.72rem;
    line-height:1.3;
  }

  /* Prestations = vraies cartes tactiles. */
  .services{
    gap:.45rem;
  }

  .services label{
    min-height:58px;
    padding:.78rem .72rem;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
    box-shadow:0 2px 8px rgba(18,22,49,.025);
  }

  .services label.is-selected,
  .services label:has(input:checked){
    background:var(--yellow-soft);
    border-color:#d0bd40;
    box-shadow:inset 4px 0 0 var(--yellow);
  }

  .services label>span{
    font-size:.92rem;
  }

  /* Bouton inactif plus élégant. */
  .primary:disabled{
    opacity:1;
    background:#f0f1f5;
    border-color:#d9dbe4;
    color:#8b8e9e;
    box-shadow:none;
  }

  /* La barre sticky n'est utile qu'une fois une prestation sélectionnée. */
  #estimate-form:not(.has-selection) [data-step="1"]>.actions{
    position:static;
    margin:1rem 0 0;
    padding:.8rem 0 0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  #estimate-form.has-selection [data-step="1"]>.actions,
  #estimate-form [data-step="2"]>.actions,
  #estimate-form [data-step="3"]>.actions{
    border-top-color:#dcdde5;
  }

  .chips{
    margin-top:.8rem;
  }

  .chips button{
    border-radius:8px;
    background:#f6f6f9;
  }
}

@media (max-width:480px){
  /* Le header reste compact : logo + CTA tant qu'ils tiennent. */
  .masthead{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:.55rem;
  }

  .brand{
    width:auto;
    max-width:100%;
    padding:.56rem .68rem;
    font-size:.98rem;
  }

  .headcta{
    width:auto;
    min-width:0;
    padding:.58rem .62rem;
    font-size:.68rem;
    white-space:nowrap;
  }

  .panel{
    padding:.82rem;
  }

  .categories{
    margin:0 !important;
    padding:0 !important;
    gap:.45rem;
  }

  .categories button{
    min-height:76px;
    padding:.62rem .5rem;
    font-size:.74rem;
    grid-template-columns:21px minmax(0,1fr);
    gap:.4rem;
  }

  .category-icon{
    width:21px;
    flex-basis:21px;
    font-size:1rem;
  }

  .service-heading{
    align-items:flex-start;
    flex-direction:column;
    gap:.4rem;
  }

  .service-heading>span{
    align-self:flex-start;
  }

  .js .form-section:not([hidden])>.actions{
    margin-inline:-.82rem;
    margin-bottom:-.82rem;
    padding-inline:.82rem;
  }
}

@media (max-width:360px){
  /* Toujours 2 catégories par ligne, même à 320/360 px. */
  .categories{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .categories button{
    min-height:72px;
    padding:.55rem .42rem;
    font-size:.7rem;
    grid-template-columns:18px minmax(0,1fr);
    gap:.35rem;
  }

  .category-icon{
    width:18px;
    flex-basis:18px;
    font-size:.95rem;
  }

  .headcta{
    font-size:.64rem;
    padding-inline:.5rem;
  }
}



/* ==========================================================================
   MONPRIXTRAVAUX — RECHERCHE INTELLIGENTE v9
   À ajouter à la FIN de assets/style.css
   ========================================================================== */

.mpt-search-assist{
  margin:.65rem 0 1rem;
  padding:.75rem .9rem;
  border:1px solid var(--line,#dedee7);
  border-left:4px solid var(--yellow,#ffd400);
  border-radius:8px;
  background:#fffdf2;
  color:var(--muted,#5f6175);
  font-size:.84rem;
  line-height:1.5;
}

.mpt-search-assist strong{
  color:var(--ink,#151735);
}

.services label.mpt-smart-result{
  position:relative;
}



@media (max-width:680px){
  .mpt-search-assist{
    margin:.55rem 0 .85rem;
    padding:.7rem .78rem;
    font-size:.8rem;
  }

 
}

/* ==========================================================================
   MONPRIXTRAVAUX — ASSISTANT PROJET v10
   ========================================================================== */

.project-assistant{
  margin:1.25rem 0 1rem;
  padding:1.05rem;

}

.assistant-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.85rem;
}

.assistant-heading>div{min-width:0}

.assistant-query{
  display:block;
}


.assistant-query textarea{
  display:block;
  width:100%;
  min-width:0;
  min-height:104px;
  resize:vertical;
  padding:.9rem 1rem;
  border:1px solid var(--line-strong);
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  font:400 1rem/1.55 Arial,Helvetica,sans-serif;
  box-shadow:inset 0 1px 2px rgba(18,22,49,.025);
  transition:border-color .15s ease,box-shadow .15s ease;
}

.assistant-query textarea:focus{
  outline:0;
  border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(49,89,184,.12);
}

.assistant-help{
  margin:.48rem 0 0;
  color:var(--muted);
  font-size:.76rem;
  line-height:1.45;
}

/* ==========================================================================
   EXEMPLES ASSISTANT — BOUTONS CLAIRS ET INTUITIFS
   ========================================================================== */

.assistant-examples{
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid var(--line,#dedee7);
}




/* --------------------------------------------------------------------------
   Grille
   -------------------------------------------------------------------------- */

.assistant-examples-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.55rem;
}


/* --------------------------------------------------------------------------
   Bouton
   -------------------------------------------------------------------------- */

.assistant-example-btn{
  position:relative;

  display:grid;
  grid-template-columns:38px minmax(0,1fr) 24px;
  align-items:center;
  gap:.7rem;

  width:100%;
  min-width:0;
  min-height:70px;

  padding:.7rem .75rem;

  border:1px solid var(--line-strong,#c5c7d4);
  border-radius:10px;

  background:#fff;
  color:var(--ink,#151735);

  text-align:left;
  cursor:pointer;

  box-shadow:0 2px 8px rgba(18,22,49,.035);

  transition:
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}


/* Petit repère visuel : indique clairement qu'il s'agit d'un bouton */

.assistant-example-btn::before{
  content:"CLIQUEZ";
  position:absolute;
  top:.35rem;
  right:.45rem;

  padding:.12rem .3rem;

  border-radius:999px;

  background:#f1f1f5;
  color:#686b7e;

  font-size:.5rem;
  font-weight:800;
  letter-spacing:.06em;

  opacity:0;

  transform:translateY(-2px);

  transition:
    opacity .15s ease,
    transform .15s ease;
}


/* --------------------------------------------------------------------------
   Icône
   -------------------------------------------------------------------------- */

.assistant-example-icon{
  display:grid;
  place-items:center;

  width:38px;
  height:38px;

  border-radius:9px;

  background:var(--soft,#f6f6f9);
  color:var(--ink,#151735);

  font-size:1.1rem;
  font-weight:800;

  transition:
    background .15s ease,
    color .15s ease;
}


/* --------------------------------------------------------------------------
   Texte
   -------------------------------------------------------------------------- */

.assistant-example-content{
  display:grid;
  gap:.12rem;
  min-width:0;
}



/* --------------------------------------------------------------------------
   Flèche
   -------------------------------------------------------------------------- */

.assistant-example-arrow{
  display:grid;
  place-items:center;

  width:24px;
  height:24px;

  border-radius:50%;

  background:var(--ink,#151735);
  color:#fff;

  font-size:.8rem;
  font-weight:800;

  transition:
    transform .15s ease,
    background .15s ease;
}


/* --------------------------------------------------------------------------
   Hover ordinateur
   -------------------------------------------------------------------------- */

@media (hover:hover){

  .assistant-example-btn:hover{
    border-color:#baa400;
    background:var(--yellow-soft,#fff9d8);

    box-shadow:
      0 7px 18px rgba(18,22,49,.08);

    transform:translateY(-2px);
  }

  .assistant-example-btn:hover::before{
    opacity:1;
    transform:translateY(0);
  }

  .assistant-example-btn:hover .assistant-example-icon{
    background:var(--yellow,#ffdf00);
  }

  .assistant-example-btn:hover .assistant-example-arrow{
    background:#000;
    transform:translateX(3px);
  }

}


/* --------------------------------------------------------------------------
   Focus clavier
   -------------------------------------------------------------------------- */

.assistant-example-btn:focus-visible{
  outline:3px solid var(--focus,#3159b8);
  outline-offset:2px;

  border-color:var(--focus,#3159b8);
}


/* --------------------------------------------------------------------------
   Clic
   -------------------------------------------------------------------------- */

.assistant-example-btn:active{
  transform:translateY(0) scale(.99);
}




/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width:680px){

  .assistant-examples{
    margin-top:.85rem;
    padding-top:.85rem;
  }





  .assistant-examples-grid{
    grid-template-columns:1fr;
    gap:.45rem;
  }

  .assistant-example-btn{
    grid-template-columns:40px minmax(0,1fr) 28px;

    min-height:66px;

    padding:.65rem .7rem;

    border-radius:10px;
  }

  .assistant-example-icon{
    width:40px;
    height:40px;

    font-size:1rem;
  }



  .assistant-example-arrow{
    width:28px;
    height:28px;

    font-size:.85rem;
  }

}


/* --------------------------------------------------------------------------
   Très petit écran
   -------------------------------------------------------------------------- */

@media (max-width:360px){

  .assistant-example-btn{
    grid-template-columns:34px minmax(0,1fr) 24px;

    gap:.55rem;
    padding:.6rem;
  }

  .assistant-example-icon{
    width:34px;
    height:34px;
  }

  .assistant-example-arrow{
    width:24px;
    height:24px;
  }



}


/* --------------------------------------------------------------------------
   Accessibilité : animations réduites
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){

  .assistant-example-btn,
  .assistant-example-btn::before,
  .assistant-example-icon,
  .assistant-example-arrow{
    transition:none;
  }

  .assistant-example-btn:hover{
    transform:none;
  }

}

.assistant-analysis{
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
}


.assistant-facts{
  display:flex;
  flex-wrap:wrap;
  gap:.38rem;
  margin:.7rem 0 .95rem;
}

.assistant-facts:empty{display:none}



.assistant-rec-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:.75rem 1rem;
  margin-bottom:.55rem;
}

.assistant-rec-heading>div{
  display:grid;
  gap:.08rem;
}

.assistant-rec-heading>div>span{
  color:var(--muted);
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.08em;
}

.assistant-rec-heading>div>strong{
  color:var(--ink);
  font-size:.9rem;
}



.assistant-recommendations{
  display:grid;
  gap:.48rem;
}

.assistant-rec{
  display:grid;
  grid-template-columns:22px minmax(0,1fr) auto;
  gap:.7rem;
  align-items:start;
  min-width:0;
  padding:.76rem;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  transition:border-color .14s ease,box-shadow .14s ease,background .14s ease;
}

.assistant-rec:has(input:checked){
  border-color:#d7c44a;
  background:#fffdf0;
  box-shadow:inset 3px 0 0 var(--yellow);
}

.assistant-rec input{
  width:1.15rem;
  height:1.15rem;
  margin:.12rem 0 0;
}

.assistant-rec-body{
  display:grid;
  gap:.16rem;
  min-width:0;
}



.assistant-rec-badge{
  align-self:start;
  min-width:max-content;
  padding:.22rem .44rem;
  border-radius:999px;
  background:#f0f1f5;
  color:#636679;
  font-size:.61rem;
  font-weight:800;
  line-height:1.2;
}

.assistant-rec-badge[data-kind="recommended"]{
  background:#eaf7ef;
  color:#176b3a;
}

.assistant-rec-badge[data-kind="optional"]{
  background:#fff7d0;
  color:#6e5b00;
}

.assistant-rec-badge[data-kind="alternative"]{
  background:#eef2ff;
  color:#394a91;
}

.assistant-rec-badge[data-kind="selected"]{
  background:#ededf4;
  color:#55586d;
}

.assistant-checks{
  margin-top:.75rem;
  padding:.8rem .9rem;
  border:1px solid #e3e3ea;
  border-radius:10px;
  background:#fff;
}

.assistant-checks>strong{
  display:block;
  margin-bottom:.35rem;
  color:var(--ink);
  font-size:.78rem;
}

.assistant-checks ul{
  margin:0;
  padding-left:1.05rem;
  color:var(--muted);
  font-size:.74rem;
  line-height:1.5;
}

.assistant-checks li+li{
  margin-top:.28rem;
}

.assistant-actions{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin-top:.85rem;
}

.assistant-actions .primary{
  flex:1 1 auto;
}

.assistant-actions .back{
  flex:0 0 auto;
}

.project-assistant .mpt-search-assist{
  margin:.65rem 0 0;
  padding:.68rem .78rem;
  border-left-width:3px;
  background:#fff;
}

.assistant-divider{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin:1rem 0;
  color:var(--muted);
  font-size:.7rem;
  font-weight:700;
  text-align:center;
}

.assistant-divider::before,
.assistant-divider::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background:var(--line);
}


@media (hover:hover){
  .assistant-examples button:hover{
    border-color:#bfc1cf;
    background:var(--soft);
  }

  .assistant-rec:hover{
    border-color:#c5c7d4;
    box-shadow:0 7px 20px rgba(18,22,49,.055);
  }
}

@media (max-width:680px){
  .project-assistant{
    margin:1rem 0 .85rem;
    padding:.85rem;
    border-radius:12px;
  }

  .assistant-heading{
    display:grid;
    gap:.45rem;
  }

  .assistant-heading h3{
    max-width:none;
    font-size:.94rem;
  }

  .assistant-query textarea{
    min-height:118px;
    padding:.78rem .82rem;
    font-size:16px;
  }

  .assistant-examples{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .assistant-examples>span{
    grid-column:1/-1;
  }

  .assistant-examples button{
    width:100%;
    min-height:42px;
    border-radius:9px;
    text-align:left;
  }

  .assistant-rec-heading{
    align-items:start;
    flex-direction:column;
  }

  .assistant-rec-heading small{
    text-align:left;
  }

  .assistant-rec{
    grid-template-columns:21px minmax(0,1fr);
  }

  .assistant-rec-badge{
    grid-column:2;
    width:max-content;
  }

  .assistant-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .assistant-actions>*{
    width:100%;
  }

  .assistant-actions .back{
    order:2;
  }

  .assistant-facts{
    margin-bottom:.8rem;
  }
}

@media (max-width:380px){
  .assistant-examples{
    grid-template-columns:1fr;
  }

  .assistant-rec{
    padding:.7rem;
  }
}
/* ==========================================================================
   MONPRIXTRAVAUX — ASSISTANT MÉTIER v11
   ========================================================================== */

/* Les recommandations restent très lisibles lorsqu'une règle métier précise
   est détectée (chape, dalle, ragréage, fondations). */
.assistant-rec-badge[data-kind="recommended"]{
  background:#fff2a8;
  color:#514500;
}

.assistant-rec-badge[data-kind="optional"]{
  background:#fff7d0;
  color:#6b5900;
}



@media (max-width:680px){
  .assistant-rec{
    grid-template-columns:22px minmax(0,1fr);
  }

  .assistant-rec-badge{
    grid-column:2;
    justify-self:start;
    margin-top:.15rem;
  }
}