/* Pierre après pierre — extension client demandée par Marc le 06/09/2026.
   Même matière que la face artisan ; les chantiers réels ouvrent la page.
   Les contenus, l’ordre aléatoire et les portes existantes sont conservés. */
body.mode-client {
  --papier:#faf5eb; --encre:#2b2a28; --brun:#62594f;
  --terre:#a84723; --ocre:#a84723; --ocre-dk:#873719;
  --calcaire:#ebe1d1; --ligne:#ded1be; --beige-l:#ded1be;
  --titre:'Plus Jakarta Sans',sans-serif; --corps:'Figtree',sans-serif;
  background:var(--papier); font-family:var(--corps); color:var(--encre);
}
.mode-client ::selection {background:#dfb494;color:var(--encre)}
.mode-client a {text-underline-offset:5px}
.mode-client a:focus-visible,.mode-client button:focus-visible,.mode-client input:focus-visible {outline:2px solid var(--terre);outline-offset:5px}
.mode-client h1,.mode-client h2,.mode-client h3 {font-family:var(--titre);font-weight:700;letter-spacing:-.035em;text-wrap:balance}
.mode-client h2 em {color:#925034}
.mode-client .nav,.mode-client .nav.scrolled {
  position:relative;inset:auto;display:flex;align-items:center;justify-content:space-between;
  width:100%;max-width:none;padding:25px max(28px,calc((100vw - 1180px)/2));
  min-height:0;background:var(--papier);border:0;border-radius:0;box-shadow:none;backdrop-filter:none;transform:none;
}
.mode-client .nav::before,.mode-client .nav::after {display:none}
.mode-client .nav-cap {display:flex;align-items:center;gap:27px;background:none;box-shadow:none;border:0;border-radius:0;padding:0;backdrop-filter:none}
.mode-client .logo {gap:10px}
.mode-client .logo-bb {background:none;border:0;box-shadow:none;width:30px;height:30px;transform:none}
.mode-client .logo-bb svg {width:30px;height:30px}
.mode-client .logo-text {font:750 26px 'Bricolage Grotesque',sans-serif;letter-spacing:-.04em;color:var(--encre)}
.mode-client .logo-text span {color:inherit}
.mode-client .nav-lien {font:400 13px var(--corps);color:var(--encre)}
.mode-client .hero-c {margin:0;padding:30px max(28px,calc((100vw - 1180px)/2)) 64px;overflow:visible;background:var(--papier)}
.mode-client .hb-left {display:grid;grid-template-columns:1.4fr 1fr;gap:18px 65px;align-items:center;max-width:1180px;padding:0;margin:0 auto 40px;text-align:left}
.mode-client .hb-left>* {animation:none;opacity:1;transform:none}
.mode-client .hb-left .h1 {grid-column:1;grid-row:1/3;font-size:clamp(38px,4.7vw,65px);line-height:1.08;max-width:19ch;margin:0;letter-spacing:-.035em}
.mode-client .hb-left .h1 em {color:#aa4b29}
.mode-client .hb-left .hero-sub {grid-column:2;font-size:17px;line-height:1.65;margin:0;max-width:46ch}
.mode-client .hb-left .proof {grid-column:2;justify-content:flex-start;gap:10px 22px;flex-wrap:wrap;margin:0;font-size:12px}
.mode-client .proof .pi {font-size:12px;color:var(--brun)}
.mode-client .hb-etabli,.mode-client .hb-etabli.hb-plein {display:flex;flex-direction:column;align-items:stretch;padding:0;background:none;border:0;box-shadow:none;overflow:visible}
.mode-client .hb-etabli::before,.mode-client .hb-etabli::after {display:none}
.mode-client .hb-tag {font:400 13px/1.5 var(--corps);text-transform:none;letter-spacing:0;margin:0 0 20px;color:var(--brun);text-align:left}
.mode-client .hb-tag:empty {display:none}
.mode-client .hb-stack,.mode-client .hb-stack.hb-bande {width:100%;max-width:none}
.mode-client .hb-page {background:#eee3d0;border:0;border-radius:32px;box-shadow:none;transform:none;padding:24px;max-width:680px;margin:auto}
.mode-client .hb-page::before,.mode-client .hb-page::after,.mode-client .hb-sceau {display:none}
.mode-client .hb-vide {background:#faf5eb;border:1px solid var(--ligne);border-radius:20px;min-height:170px;padding:30px}
.mode-client .hb-vide-t {font:700 23px/1.2 var(--titre)}
.mode-client .hb-vide-s {font-size:14px;line-height:1.6}
.mode-client .hb-checks {padding:24px 0 0;gap:12px}
.mode-client .hb-check {font-size:13px;line-height:1.6}
.mode-client .s-how {padding:64px max(28px,calc((100vw - 1180px)/2));background:var(--papier)}
.mode-client .s-how .s-in {max-width:1180px}
.mode-client .pq-wrap {grid-template-columns:1fr 1.4fr;gap:13px;align-items:stretch}
.mode-client .s-how .s-hdr {background:#65513d;border-radius:32px 16px 16px 32px;padding:34px;display:flex;flex-direction:column;justify-content:center}
.mode-client .s-how .stag {font:400 13px var(--corps);letter-spacing:0;text-transform:none;color:#e9dcc5;margin-bottom:18px}
.mode-client .s-how .sh2 {font-size:clamp(29px,3.1vw,43px);line-height:1.13;color:var(--papier);margin-bottom:22px}
.mode-client .s-how .sh2 em {color:inherit}
.mode-client .s-how .s-hdr .ssub {font-size:15px;line-height:1.6;color:#e9dcc5;margin:0}
.mode-client .pqs {background:#e9dcc5;border-radius:16px 32px 32px 16px;padding:32px;gap:0}
.mode-client .pq {gap:18px;padding:22px 0;border-bottom:1px solid #cbbca5}
.mode-client .pq:first-child {padding-top:0}
.mode-client .pq:last-child {padding-bottom:0;border:0}
.mode-client .pq-ic {width:32px;height:32px;flex-shrink:0;background:none;border:0;border-radius:0;box-shadow:none;color:#925034}
.mode-client .pq h3 {font-size:23px;line-height:1.2;margin-bottom:12px}
.mode-client .pq p {font-size:15px;line-height:1.65}
.mode-client .s-mots {padding:64px max(28px,calc((100vw - 1180px)/2));background:var(--papier)}
.mode-client .s-mots::before,.mode-client .s-mots::after {display:none}
.mode-client .s-mots-in {max-width:1180px}
.mode-client .s-mots .stag {font:400 13px var(--corps);letter-spacing:0;text-transform:none;color:var(--brun);margin-bottom:15px}
.mode-client .s-mots .sh2 {font-size:clamp(29px,3.1vw,43px);line-height:1.13;color:var(--encre);margin-bottom:22px}
.mode-client .s-mots .ssub {font-size:17px;line-height:1.65;color:var(--brun);max-width:65ch!important;margin-bottom:30px!important}
.mode-client .mots4 {grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mode-client .mm,.mode-client .mm.vis,.mode-client .mm:hover {background:#f0e5d3;border-radius:28px;padding:28px 24px;box-shadow:none;opacity:1;transform:none;animation:none;transition:none}
.mode-client .mm:nth-child(2) {background:#e9dcc5}
.mode-client .mm-no {font:700 24px/1.2 var(--titre);letter-spacing:-.025em;text-transform:none;color:var(--encre);margin-bottom:12px}
.mode-client .mm-ti {font:400 15px/1.5 var(--corps);letter-spacing:0;color:var(--brun);margin-bottom:20px;padding-bottom:0;border:0}
.mode-client .mm-chips {display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;align-items:start}
.mode-client .mm-chips .mc {display:block;padding:9px 10px;font:400 12px/1.5 var(--corps);border-radius:12px;min-width:0}
.mode-client .mm-chips .mp {grid-column:1;background:#faf5eb;border:1px solid #ded1be;color:#62513e}
.mode-client .mm-chips .mn {grid-column:2;background:transparent;border:1px solid #cfae9b;color:#863e30}
.mode-client .mm-chips .mc:nth-child(1),.mode-client .mm-chips .mc:nth-child(4) {grid-row:1}
.mode-client .mm-chips .mc:nth-child(2),.mode-client .mm-chips .mc:nth-child(5) {grid-row:2}
.mode-client .mm-chips .mc:nth-child(3),.mode-client .mm-chips .mc:nth-child(6) {grid-row:3}
.mode-client .s-fin-c {background:#65513d;border-radius:40px 70px 40px 70px;margin:35px 24px 12px;padding:65px 28px;text-align:center}
.mode-client .s-fin-c::before,.mode-client .s-fin-c::after {display:none}
.mode-client .s-fin-c .fin-in {max-width:820px}
.mode-client .s-fin-c .fin-ti-c {font-size:clamp(30px,3.8vw,50px);line-height:1.13;color:var(--papier);margin:0 auto 25px}
.mode-client .s-fin-c .fin-ti-c em {color:var(--papier)}
.mode-client .s-fin-c .fin-sub {font-size:16px;line-height:1.65;color:#e9dcc5;max-width:65ch;margin:0 auto 28px}
.mode-client .s-fin-c .fin-cta {display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 25px;background:var(--papier);color:var(--encre);border-radius:28px;font:600 14px var(--corps);box-shadow:0 5px 10px -7px #302317;text-decoration:none;transform:none}
.mode-client .s-fin-c .fin-cta:hover {background:#e9dcc5;transform:none}
.mode-client .s-fin-c .fin-note {font-size:13px;line-height:1.65;color:#e9dcc5;margin:18px auto 0;max-width:60ch}
.mode-client footer {padding:38px max(28px,calc((100vw - 1180px)/2));background:var(--papier);border:0;display:grid;grid-template-columns:1fr 1fr;gap:25px}
.mode-client footer::before,.mode-client footer::after {display:none}
.mode-client .fl-adr {display:flex;gap:18px;align-items:center}
.mode-client .fl {display:inline-flex;gap:10px;align-items:center}
.mode-client .fl-bb {background:none;width:30px;height:30px;box-shadow:none;transform:none}
.mode-client .fl-bb svg {width:30px;height:30px}
.mode-client .fn {font:750 26px 'Bricolage Grotesque',sans-serif;letter-spacing:-.04em}
.mode-client .ft {font:400 13px/1.5 var(--corps);letter-spacing:0;text-transform:none;text-align:right;justify-self:end}
.mode-client .ft-url {font-size:12px;color:var(--brun)}
.mode-client .fls {grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 25px;font-size:12px}
@media(max-width:1000px){
 .mode-client .hb-left {gap:18px 32px}
 .mode-client .pq-wrap {grid-template-columns:1fr 1.3fr}
 .mode-client .mots4 {grid-template-columns:1fr}
 .mode-client .mm {display:grid;grid-template-columns:1fr 1.8fr;gap:0 30px}
 .mode-client .mm-no {grid-column:1}
 .mode-client .mm-ti {grid-column:1}
 .mode-client .mm-chips {grid-column:2;grid-row:1/3}
}
@media(max-width:650px){
 .mode-client .nav,.mode-client .nav.scrolled {padding:18px 20px;gap:12px}
 .mode-client .logo-text {font-size:23px}
 .mode-client .nav-cap {gap:16px}
 .mode-client .nav-lien {font-size:12px}
 .mode-client .hero-c {padding:24px 22px 38px}
 .mode-client .hb-left {display:block;margin-bottom:30px}
 .mode-client .hb-left .h1 {font-size:37px;line-height:1.08;max-width:19ch;margin:0 0 22px}
 .mode-client .hb-left .hero-sub {font-size:15px;margin:0 0 20px}
 .mode-client .hb-left .proof {gap:10px 16px}
 .mode-client .hb-tag {font-size:12px;margin-bottom:16px}
 .mode-client .s-how,.mode-client .s-mots {padding:38px 22px}
 .mode-client .pq-wrap {display:block}
 .mode-client .s-how .s-hdr {padding:28px;border-radius:26px 26px 13px 13px}
 .mode-client .s-how .sh2,.mode-client .s-mots .sh2 {font-size:29px}
 .mode-client .pqs {margin-top:10px;border-radius:13px 13px 26px 26px;padding:26px}
 .mode-client .pq {gap:12px}
 .mode-client .pq h3 {font-size:21px}
 .mode-client .pq p {font-size:14px}
 .mode-client .pq-ic {width:24px;height:28px}
 .mode-client .s-mots .ssub {font-size:15px}
 .mode-client .mm {display:block;padding:25px 22px;border-radius:24px}
 .mode-client .mm-ti {font-size:15px}
 .mode-client .mm-chips {gap:9px}
 .mode-client .mm-chips .mc {font-size:12px;padding:9px}
 .mode-client .s-fin-c {margin:12px;border-radius:30px;padding:40px 25px}
 .mode-client .s-fin-c .fin-ti-c {font-size:31px}
 .mode-client .s-fin-c .fin-sub {font-size:15px}
 .mode-client .s-fin-c .fin-note {font-size:12px}
 .mode-client footer {padding:30px 22px;display:block}
 .mode-client .ft {margin:15px 0;text-align:left}
 .mode-client .fls {gap:10px 20px}
}
@media(prefers-reduced-motion:reduce){.mode-client .rc,.mode-client .hb-stack{transition:none}}
/* Même terre cuite et même navigation que la face artisan, sans halo hérité. */
.mode-client .s-mots .sh2.wh em {color:#925034}
body.mode-client .nav:not(.scrolled) .nav-cap {background:none;box-shadow:none;border:0}
@media(max-width:650px){
 body.mode-client .nav,body.mode-client .nav.scrolled {display:grid;grid-template-columns:1fr auto;gap:16px 12px}
 body.mode-client .nav .nav-cap {display:contents}
 .mode-client .nav .logo {grid-column:1;grid-row:1}
 .mode-client .nav .nc-c {grid-column:2;grid-row:1}
 .mode-client .nav #nav-bascule {grid-column:1/-1;grid-row:2;justify-self:start}
}

/* Alignement retenu par Marc : la matière porte le caractère, les textes restent sobres. */
.mode-client .hb-stack.hb-bande .res-grid {display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin:0}
.mode-client .hb-stack.hb-bande .res-grid .rc {flex:0 1 calc((100% - 36px)/3);min-width:0}
.mode-client .res-grid .rc {display:flex;flex-direction:column;border:0;border-radius:28px 16px 28px 16px;background:#eee3d0;box-shadow:none;overflow:hidden;transform:none;transition:background-color .18s}
.mode-client .res-grid .rc:nth-child(3n+2) {border-radius:16px 32px 16px 32px;background:#e9dcc5}
.mode-client .res-grid .rc:hover {background:#e5d6bd;box-shadow:none;transform:none}
.mode-client .res-grid .rc,.mode-client .res-grid .rc:hover .rc-nm {text-decoration:none}
.mode-client .res-grid .rc-hero {width:100%;display:block;flex-shrink:0}
.mode-client .res-grid .rc-vitrine,.mode-client .res-grid .rc-empty {height:220px;min-height:0;width:100%;padding:0}
.mode-client .res-grid .rc-vitrine>img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mode-client .res-grid .rc-logo {left:18px;right:auto;top:auto;bottom:-22px;transform:none}
.mode-client .res-grid .rc-body {padding:34px 22px 25px;display:flex;justify-content:flex-start;min-width:0}
.mode-client .res-grid .rc-nm {font:500 16px/1.4 var(--titre);letter-spacing:-.015em;color:#493f34;overflow-wrap:anywhere}
.mode-client .res-grid .rc-px {font:400 13px/1.5 var(--corps);margin-top:7px;color:#62513e;font-variant-numeric:tabular-nums}
.mode-client .res-grid .rc-realise {font-size:11px;font-weight:400;line-height:1.6;margin-top:8px;color:var(--brun)}
.mode-client .res-grid .rc-ville,.mode-client .res-grid .rc-pieces {font-size:11px;font-weight:400;line-height:1.5;margin-top:7px;color:var(--brun)}
.mode-client .res-grid .rc-avant {top:10px;left:10px;width:72px;height:54px;border-radius:9px}
.mode-client .res-grid .rc-avant span {display:block}
.mode-client .res-grid .rc-exemple,.mode-client .res-grid .rc-cosigne {top:10px;right:10px;bottom:auto;max-width:calc(100% - 105px);font-size:10px;padding:5px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0;box-shadow:none}
.mode-client .res-grid .rc-cos-nom {display:inline}
.mode-client .res-grid .rc-empty {background:#cdbda4;color:#514638}
.mode-client .res-grid .rc-empty>span:last-child {font:500 12px/1.6 var(--corps);color:#514638}
.mode-client .rc-empty .rc-stones i:nth-child(1),.mode-client .rc-empty .rc-stones i:nth-child(4) {background:#7c6a52}
.mode-client .rc-empty .rc-stones i:nth-child(2) {background:#62513e}
.mode-client .rc-empty .rc-stones i:nth-child(3) {background:#8b765b}
@media(max-width:1000px){.mode-client .hb-stack.hb-bande .res-grid .rc {flex-basis:calc((100% - 18px)/2)}}
@media(max-width:650px){
 .mode-client .hb-stack.hb-bande .res-grid {gap:16px}
 .mode-client .hb-stack.hb-bande .res-grid .rc {flex-basis:100%;min-width:0}
 .mode-client .res-grid .rc {border-radius:24px}
 .mode-client .res-grid .rc-vitrine,.mode-client .res-grid .rc-empty {height:205px}
 .mode-client .res-grid .rc-body {padding:33px 20px 23px}
}
@media(prefers-reduced-motion:reduce){.mode-client .res-grid .rc{transition:none}}