/* ================================================================
   JVMH-Agencements | pages intérieures dans le langage de l'accueil
   S'appuie sur site.css (tokens, h-display, btn, collage, feats, method, bento, avis, carrousel, CTA).
   Ici : uniquement ce que l'accueil n'a pas (hero de page, lecture longue, sommaire, formulaire, carte).
   ================================================================ */

/* ---------- hero de page : la composition « intro » de l'accueil ---------- */
.hp-hero{padding-top:calc(84px + clamp(40px,5vw,72px))}
.hp-hero h1.h-display{font-size:clamp(2.1rem,3.4vw,3.5rem);margin:18px 0 26px;text-wrap:balance}
.hp-lede p{font-family:var(--display);font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.5;color:var(--ink);max-width:40ch}
.hp-lede p + p{font-family:var(--sans);font-size:1.05rem;line-height:1.75;color:var(--muted);max-width:56ch;margin-top:14px}
.hp-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hp-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.9rem;color:var(--muted)}
.hp-crumbs a:hover{color:var(--accent-strong)}
.hp-crumbs i{font-size:.75rem;color:var(--accent)}
.hp-text p{color:var(--muted);margin-bottom:14px;max-width:60ch}
.hp-text p:first-child{font-family:var(--display);font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.5;color:var(--ink)}
.hp-offer .feats{margin-top:34px}
.hp-offer .label{margin-bottom:18px}

/* ---------- lecture longue : sommaire + article ---------- */
.hp-read{border-top:1px solid var(--line)}
.hp-read-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(40px,6vw,110px);align-items:start}
.hp-toc{position:sticky;top:110px}
.hp-toc-title{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;margin-bottom:22px;color:var(--ink)}
.hp-toc nav{position:relative;display:grid;gap:2px;padding-left:28px;max-height:calc(100vh - 230px);overflow:auto;scrollbar-width:none}
.hp-toc nav::-webkit-scrollbar{display:none}
.hp-toc nav::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--line)}
.hp-toc .prog{position:absolute;left:0;top:6px;width:1px;height:calc(100% - 12px);background:var(--accent);transform:scaleY(0);transform-origin:top}
.hp-toc a{font-family:var(--display);font-size:1.02rem;line-height:1.35;padding:8px 0;color:rgba(33,29,26,.38);transition:color .4s var(--ease)}
.hp-toc a:hover{color:var(--ink)}
.hp-toc a.on{color:var(--ink)}

.hp-article{min-width:0;font-size:1.06rem}
.hp-article h2,.hp-article h2.h{font-family:var(--display);font-weight:400;font-size:clamp(1.8rem,2.7vw,2.6rem);line-height:1.14;color:var(--ink);margin:clamp(70px,8vw,110px) 0 22px;scroll-margin-top:110px;text-wrap:balance}
.hp-article > h2.h:first-child,.hp-article > :first-child{margin-top:0}
.hp-article h3,.hp-article h3.h{font-family:var(--display);font-weight:400;font-size:clamp(1.2rem,1.6vw,1.45rem);line-height:1.3;color:var(--accent-strong);margin:1.9em 0 .55em;scroll-margin-top:110px}
.hp-article h4{font-weight:600;color:var(--ink);margin:1.5em 0 .4em}
.hp-article p{color:#4a4f57;margin-bottom:1.05em;max-width:68ch}
.hp-article ul,.hp-article ol{margin:0 0 1.3em 1.2em;color:#4a4f57;max-width:66ch}
.hp-article li{margin-bottom:.45em}
.hp-article li::marker{color:var(--accent)}
.hp-article strong{color:var(--ink);font-weight:600}
.hp-article a:not(.btn){color:var(--ink);border-bottom:1px solid var(--accent)}
.hp-article a:not(.btn):hover{color:var(--accent-strong)}
.hp-article .btn{margin:14px 0 6px}
.hp-article figure{margin:44px 0;overflow:hidden;background:var(--surface-2)}
.hp-article figure.one{aspect-ratio:16/10}
.hp-article figure img{width:100%;height:100%;object-fit:cover}
.hp-article .pgal{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:44px 0}
.hp-article .pgal figure{margin:0;aspect-ratio:4/5;cursor:zoom-in}
.hp-article .pgal figure:first-child:nth-last-child(odd){grid-column:1/-1;aspect-ratio:16/10}

/* tableaux : même esprit que la grille « feats » de l'accueil */
.hp-article .tbl,.hp-chaps .tbl{margin:40px 0;overflow-x:auto;border:1px solid var(--line);background:var(--bg)}
.hp-article table,.hp-chaps table{width:100%;border-collapse:collapse;font-size:.96rem;line-height:1.5}
.hp-article thead th,.hp-chaps thead th{background:var(--navy);color:var(--on-dark);font-family:var(--display);font-weight:400;text-align:left;padding:16px 18px;letter-spacing:.02em}
.hp-article td,.hp-chaps td{padding:15px 18px;border-top:1px solid var(--line);color:#4a4f57;vertical-align:top}
.hp-article tbody tr:nth-child(even) td,.hp-chaps tbody tr:nth-child(even) td{background:var(--surface)}
.hp-article td:first-child,.hp-chaps td:first-child{color:var(--ink);font-weight:600}
.hp-article [class*="hl-"],.hp-chaps [class*="hl-"]{background:rgba(191,121,59,.08)!important;color:var(--ink)}
.hp-article tfoot td,.hp-chaps tfoot td{background:var(--navy);color:var(--on-dark);font-family:var(--display);padding:18px}

/* FAQ */
.hp .faq{margin:24px 0;border-top:1px solid var(--line)}
.hp .faq details{border-bottom:1px solid var(--line)}
.hp .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font-family:var(--display);font-size:1.15rem;line-height:1.35;color:var(--ink)}
.hp .faq summary::-webkit-details-marker{display:none}
.hp .faq summary::after{content:"+";flex:none;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);color:var(--accent);font-size:1.2rem;transition:transform .5s var(--ease),background .3s}
.hp .faq details[open] summary::after{transform:rotate(45deg);background:var(--surface)}
.hp .faq details > div,.hp .faq details > p{padding:0 54px 22px 0;color:#4a4f57}

/* ---------- méthode épinglée : sous-titres intercalés ---------- */
.hp-method .rail .hp-sub{font-family:var(--display);font-size:clamp(1rem,1.3vw,1.15rem);text-transform:uppercase;letter-spacing:.08em;color:var(--accent);opacity:1!important;margin-top:10px}
.hp-method .rail p span strong{color:#fff;font-weight:400}

/* ---------- formulaire (bloc « offre » de l'accueil) ---------- */
.hp-contact .grid{align-items:start}
.hp-form{background:var(--bg);border:1px solid var(--line);padding:clamp(28px,3.4vw,48px)}
.hp-form h2.h-display{font-size:clamp(1.6rem,2.4vw,2.2rem);margin-bottom:28px}
.hp-form form{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}
.hp-form .f{display:grid;gap:8px}
.hp-form .f.wide{grid-column:1/-1}
.hp-form label{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:.86rem;color:var(--ink)}
.hp-form input,.hp-form textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid rgba(33,29,26,.22);border-radius:var(--radius);padding:14px 16px;transition:border-color .3s,box-shadow .3s}
.hp-form textarea{min-height:140px;resize:vertical}
.hp-form input::placeholder,.hp-form textarea::placeholder{color:#636873}
.hp-form input:focus,.hp-form textarea:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(29,56,99,.12)}
.hp-form .f.err input,.hp-form .f.err textarea{border-color:#B3261E}
.hp-form .f .msg{font-size:.85rem;color:#B3261E}
.hp-form button[type=submit]{grid-column:1/-1;justify-self:start}
.hp-form .ok{display:none;grid-column:1/-1;color:#1E6B3A;font-weight:600}
.hp-form.sent .ok{display:block}

/* ---------- ville : hero photo (même traitement que le hero « portes » de l'accueil) ---------- */
.hp-vhero{position:relative;min-height:min(92svh,900px);display:flex;align-items:flex-end;background:var(--navy-deep);overflow:hidden}
.hp-vhero-bg{position:absolute;inset:0}
.hp-vhero-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.hp-vhero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(21,43,77,.9) 0%,rgba(21,43,77,.62) 40%,rgba(21,43,77,.05) 78%),linear-gradient(0deg,rgba(21,43,77,.55),transparent 45%)}
.hp-vhero-in{position:relative;z-index:2;width:100%;padding-bottom:clamp(56px,9vh,110px);color:var(--on-dark)}
.hp-vhero h1.h-display{font-size:clamp(2.1rem,3.6vw,3.6rem);max-width:17ch;margin:18px 0 8px;color:#fff}
.hp-vhero .hp-crumbs{color:rgba(249,247,245,.8)}
.hp-vhero .hp-crumbs a:hover{color:#fff}
.hp-vhero .hp-crumbs i{color:#D99559}
.hp-vintro .hp-lede p{max-width:44ch}

/* sommaire ville : barre collante */
.hp-tabs{position:sticky;top:0;z-index:40;background:rgba(249,247,245,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-block:1px solid var(--line);transition:transform .5s var(--ease),opacity .4s}
body.hp:not(.hdr-up) .hp-tabs{top:72px}
.hp-tabs.gone{opacity:0;transform:translateY(-110%);pointer-events:none}
.hp-tabs-in{display:flex;align-items:center;gap:24px;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.hp-tabs .lx-tabs-track{flex:1;min-width:0;display:flex;gap:30px;overflow-x:auto;scrollbar-width:none;mask-image:linear-gradient(90deg,#000 88%,transparent)}
.hp-tabs .lx-tabs-track::-webkit-scrollbar{display:none}
.hp-tabs .lx-tabs-track a{position:relative;flex:none;padding:18px 0;font-family:var(--display);font-size:1rem;color:rgba(33,29,26,.45);white-space:nowrap;transition:color .3s}
.hp-tabs .lx-tabs-track a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.hp-tabs .lx-tabs-track a:hover,.hp-tabs .lx-tabs-track a.on{color:var(--ink)}
.hp-tabs .lx-tabs-track a.on::after{transform:scaleX(1)}
.hp-tabs .btn{padding:11px 20px;font-size:.82rem}
.hp-tabs .bar{position:absolute;left:0;right:0;bottom:-1px;height:1px}
.hp-tabs .bar span{display:block;height:100%;background:rgba(33,29,26,.25);transform:scaleX(0);transform-origin:left}

/* chapitres ville : alternance fond clair / sable, comme les sections de l'accueil */
.hp-chaps .chap{padding-block:clamp(84px,10vw,140px)}
.hp-chaps .chap:nth-child(even){background:var(--surface)}
.hp-chaps .chap-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,110px);align-items:start}
.hp-chaps .chap-head{position:sticky;top:150px}
.hp-chaps .chap-head h2{font-family:var(--display);font-weight:400;font-size:clamp(1.8rem,2.8vw,2.8rem);line-height:1.14;color:var(--ink);scroll-margin-top:150px;text-wrap:balance}
.hp-chaps .chap-head h2::before{content:none}
.hp-chaps .chap-body{min-width:0}
.hp-chaps .chap-body p{color:#4a4f57;margin-bottom:1.05em;max-width:66ch}
.hp-chaps .chap-body h3,.hp-chaps .chap-body h3.h{font-family:var(--display);font-weight:400;font-size:clamp(1.2rem,1.6vw,1.45rem);color:var(--accent-strong);margin:1.8em 0 .5em}
.hp-chaps .chap-body ul{margin:0 0 1.2em 1.2em;color:#4a4f57}
.hp-chaps .chap-body li::marker{color:var(--accent)}
.hp-chaps .chap-body strong{color:var(--ink)}
.hp-chaps .chap-body figure{margin:40px 0 0;overflow:hidden;background:var(--surface-2)}
.hp-chaps .chap-body figure.one{aspect-ratio:16/10}
.hp-chaps .chap-body figure img{width:100%;height:100%;object-fit:cover}
.hp-chaps .chap-body .pgal{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.hp-chaps .chap-body .pgal figure{margin:0;aspect-ratio:4/5;cursor:zoom-in}
.hp-chaps .chap-body .btn{margin-top:26px}
.hp-chaps .chap-plain{padding-block:clamp(48px,6vw,80px)}
.hp-chaps .chap-plain .chap-body{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:center}
.hp-chaps .chap-plain .chap-body > *{margin:0!important}
.hp-chaps .chap-plain .chap-body figure.one{aspect-ratio:21/9}

/* zone + carte : la grille « pourquoi nous choisir » de l'accueil */
.hp-zone .hp-text{margin-top:18px}
.hp-map{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.hp-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.85) contrast(1.05)}

/* carrousel prestations précédé du texte de la page ville */
.hp-svc-intro{margin-bottom:clamp(30px,4vw,54px)}
.hp-svc-intro .hp-text{margin-top:18px}

/* visionneuse */
.lx-lb{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:rgba(15,22,36,.94);opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.lx-lb.on{opacity:1;pointer-events:auto}
.lx-lb img{max-width:min(92vw,1600px);max-height:86vh;width:auto;height:auto;object-fit:contain}
.lx-lb button{position:absolute;width:52px;height:52px;display:grid;place-items:center;color:#fff;font-size:1.3rem;border:1px solid rgba(255,255,255,.25)}
.lx-lb button:hover{background:rgba(255,255,255,.12)}
.lx-lb .x{top:22px;right:22px}.lx-lb .p{left:22px;top:50%;transform:translateY(-50%)}.lx-lb .n{right:22px;top:50%;transform:translateY(-50%)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .hp-read-grid{grid-template-columns:1fr}
  .hp-toc{display:none}
  .hp-article{max-width:780px}
}
@media (max-width:900px){
  .hp-hero{padding-top:calc(72px + 28px)}
  .hp-chaps .chap-grid{grid-template-columns:1fr;gap:20px}
  .hp-chaps .chap-head{position:static}
  .hp-chaps .chap-plain .chap-body{grid-template-columns:1fr}
  .hp-tabs .btn{display:none}
  body.hp:not(.hdr-up) .hp-tabs{top:0}
  .hp-vhero{min-height:78svh}
  .hp-vhero-scrim{background:linear-gradient(0deg,rgba(21,43,77,.92) 0%,rgba(21,43,77,.6) 55%,rgba(21,43,77,.15) 100%)}
}
@media (max-width:600px){
  .hp-form form{grid-template-columns:1fr}
  .hp-article .pgal,.hp-chaps .chap-body .pgal{grid-template-columns:1fr}
}

/* ---------- présentation ---------- */
.hp-why h2{font-size:clamp(1.4rem,2vw,1.8rem)!important;margin:28px 0 12px!important}
.hp-offer h2.h-display{margin-bottom:22px}

/* ---------- réalisations : mosaïque aux proportions réelles ---------- */
.hp-wall{columns:3 300px;column-gap:16px}
.hp-wall figure{break-inside:avoid;margin:0 0 16px;overflow:hidden;background:var(--surface-2);cursor:zoom-in}
.hp-wall img{width:100%;height:auto;transition:transform 1.2s var(--ease)}
.hp-wall figure:hover img{transform:scale(1.04)}
.hp-wall figure.more{display:none}
.hp-wall-sec.all .hp-wall figure.more{display:block}
.hp-more-row{text-align:center;margin-top:34px}
.hp-wall-sec.all .hp-more-row{display:none}
.hp-wall-sec{padding-top:0}

/* ---------- contact ---------- */
.hp-contact-hero .grid{align-items:start}
.hp-facts{margin-top:34px}
.hp-facts b{display:block;font-family:var(--display);font-weight:400;font-size:1.1rem;margin-bottom:4px}
.hp-facts li.wide a{font-family:var(--display);font-size:1.5rem}

/* ---------- blog ---------- */
.hp-posts{padding-top:0}
.hp-posts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 18px}
.hp-post{width:auto}
.hp-post .meta{align-items:flex-start}
.hp-post h3{font-size:clamp(1.1rem,1.4vw,1.3rem)!important;line-height:1.3}
.hp-post:first-child{grid-column:span 2}
.hp-post:first-child .ph{aspect-ratio:16/9.2}
.hp-post:first-child h3{font-size:clamp(1.4rem,2vw,1.9rem)!important}

/* ---------- mentions ---------- */
.hp-legal h1{margin:18px 0 40px}
.hp-legal-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,100px);align-items:start}
.hp-legal-pic{position:sticky;top:110px;aspect-ratio:4/5;overflow:hidden}
.hp-legal-pic img{width:100%;height:100%;object-fit:cover}
.hp-zone ul{columns:3 200px;margin:20px 0 0 1.1em}
.hp-zone li{margin-bottom:6px;color:var(--muted)}
.hp-vintro .hp-lede p{font-family:var(--display);font-size:clamp(1.2rem,1.6vw,1.5rem);line-height:1.55;color:var(--ink);max-width:46ch}

@media (max-width:900px){
  .hp-posts-grid{grid-template-columns:1fr 1fr}
  .hp-legal-grid{grid-template-columns:1fr}
  .hp-legal-pic{position:static}
}
@media (max-width:600px){.hp-posts-grid{grid-template-columns:1fr}.hp-post:first-child{grid-column:auto}}

.hp-form .err{display:none;grid-column:1/-1;color:#B3261E;font-weight:600}
.hp-form.failed .err{display:block}
.hp-pagination ul{list-style:none;display:flex;gap:8px;justify-content:center;margin-top:48px}
.hp-pagination a,.hp-pagination span{min-width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--line);font-family:var(--display)}
.hp-pagination .current{background:var(--navy);color:#fff;border-color:var(--navy)}
.hp-pagination a:hover{border-color:var(--accent);color:var(--accent-strong)}

/* ---------- articles ---------- */
.hp-post-hero h1.h-display{font-size:clamp(1.9rem,3vw,3rem);text-transform:none;letter-spacing:.005em;line-height:1.14}
.hp-meta{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.95rem;color:var(--muted)}
.hp-meta span{display:inline-flex;align-items:center;gap:8px}
.hp-meta i{color:var(--accent)}
.hp-cover{aspect-ratio:4/3;overflow:hidden;background:var(--surface-2)}
.hp-cover img{width:100%;height:115%;object-fit:cover}
.hp-toc .sub,.hp-toc a.l3{display:none}
.hp-box{display:grid;gap:8px;margin-top:32px;padding:24px;background:var(--navy);color:var(--on-dark);transition:background .4s}
.hp-box b{font-family:var(--display);font-weight:400;font-size:1.3rem}
.hp-box span{font-size:.95rem;opacity:.8;line-height:1.5}
.hp-box i{font-size:1.3rem;color:#D99559;transition:transform .5s var(--ease)}
.hp-box:hover{background:var(--accent-strong)}
.hp-box:hover i{transform:translateX(6px);color:#fff}
.hp-share{display:flex;gap:10px;margin-top:24px}
.hp-share a{width:44px;height:44px;border:1px solid var(--line);display:grid;place-items:center;font-size:1.15rem;transition:border-color .3s,color .3s}
.hp-share a:hover{border-color:var(--accent);color:var(--accent-strong)}
.hp-article figure.in{margin:40px 0;overflow:hidden}
.hp-article figure.in img{width:100%;height:auto}
.hp-article figcaption{font-size:.9rem;color:var(--muted);padding-top:10px}
.hp-article .read-also{margin:48px 0;padding:28px 30px;background:var(--surface);border-top:2px solid var(--accent)}
.hp-article .read-also h3{margin-top:0}
.hp-article .post-cta{margin:34px 0}
.hp-recent{background:var(--surface)}
.hp-recent h2{margin-bottom:clamp(30px,4vw,54px)}
.hp-recent-grid .hp-post:first-child{grid-column:auto}
.hp-recent-grid .hp-post:first-child .ph{aspect-ratio:4/3.4}
.hp-recent-grid .hp-post:first-child h3{font-size:clamp(1.1rem,1.4vw,1.3rem)!important}

/* ---------- grandes villes : carte + villes proches (comme les pages MPG) ---------- */
.hp-zone2{background:var(--surface)}
.hp-zone2-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(40px,6vw,100px);align-items:start}
.hp-zone2-copy h2{margin-bottom:20px}
.hp-zone2-copy .hp-text p:first-child{font-family:var(--sans);font-size:1.05rem;color:var(--muted)}
.hp-zone2-copy .hp-text ul{columns:2 180px;margin:6px 0 18px 1.1em;color:var(--muted)}
.hp-near{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:26px;background:var(--line);border:1px solid var(--line)}
.hp-near li{background:var(--bg)}
.hp-near a{display:flex;align-items:center;gap:12px;padding:16px 18px;font-size:.98rem;line-height:1.35;color:var(--ink);transition:background .3s,color .3s}
.hp-near a::before{content:"";flex:none;width:9px;height:9px;border:2px solid var(--accent);border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.hp-near a:hover{background:#fff;color:var(--accent-strong)}
.hp-near li:last-child:nth-child(odd){grid-column:1/-1}
.hp-map-lg{aspect-ratio:auto;height:clamp(380px,46vw,560px);position:sticky;top:110px}
@media (max-width:900px){.hp-zone2-grid{grid-template-columns:1fr}.hp-map-lg{position:relative;top:0;height:360px}}
@media (max-width:520px){.hp-near{grid-template-columns:1fr}}
/* encart article : couleurs forcées (le kit Elementor recolore les liens) */
body .hp-box,body .hp-box b,body .hp-box span{color:#F9F7F5!important}
body .hp-box i{color:#E2AE7E!important}
body .hp-box:hover i{color:#fff!important}