:root{
    --ink:#15171A;
    --paper:#F1F0EC;
    --panel:#FFFFFF;
    --aluminium:#8D9197;
    --aluminium-light:#C7C9CC;
    --line:#D9D8D3;
    --bronze:#A97C50;
    --bronze-dark:#8A6541;
    --charcoal:#1C1E22;
    --charcoal-2:#26292E;
    --max:1180px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'IBM Plex Sans', sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    letter-spacing:-0.01em;
    margin:0;
    color:var(--ink);
  }
  .mono{
    font-family:'IBM Plex Mono', monospace;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}
  .rule{border:none;border-top:1px solid var(--line);margin:0;}

  /* focus visibility */
  a:focus-visible, button:focus-visible{outline:2px solid var(--bronze);outline-offset:3px;}
  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
  }

  /* ---------- topbar ---------- */
  .topbar{
    background:var(--ink);
    color:var(--aluminium-light);
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
  }
  .topbar .wrap{
    display:flex;justify-content:space-between;align-items:center;
    padding:9px 28px;flex-wrap:wrap;gap:6px 20px;
  }
  .topbar a{color:var(--aluminium-light);}
  .topbar a:hover{color:var(--bronze);}
  .topbar .sep{color:#4b4e53;margin:0 10px;}

  /* ---------- header ---------- */
  header.site{
    position:sticky;top:0;z-index:50;
    background:var(--paper);
    border-bottom:1px solid var(--line);
  }
  header.site .wrap{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 28px;
  }
  .brand{display:flex;align-items:center;gap:14px;margin-right:30px;}
  .logo-mark{display:block;}
  .logo-mark img{height:26px;width:auto;display:block;}
  .partner-badge{
    display:flex;align-items:center;gap:9px;
    border:1px solid var(--line);background:#fff;padding:6px 11px;
  }
  .partner-badge .lbl{
    font-family:'IBM Plex Mono', monospace;font-size:8px;letter-spacing:.07em;
    text-transform:uppercase;color:var(--bronze-dark);line-height:1.25;
  }
  .partner-badge img{height:12px;width:auto;display:block;}
  nav.main{display:flex;align-items:center;gap:34px;}
  nav.main a{
    font-size:14.5px;font-weight:500;color:var(--ink);
    position:relative;padding-bottom:3px;
  }
  nav.main a:not(.cta)::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
    background:var(--bronze);transform:scaleX(0);transform-origin:left;
    transition:transform .25s ease;
  }
  nav.main a:not(.cta):hover::after{transform:scaleX(1);}
  nav.main a.cta{
    background:var(--ink);color:var(--paper);
    padding:9px 18px;font-family:'IBM Plex Mono', monospace;font-size:13px;
  }
  nav.main a.cta:hover{background:var(--bronze);}
  .nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;}
  .nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;}

  /* ---------- hero ---------- */
  .hero{
    padding:76px 0 40px;
    position:relative;
    overflow:hidden;
  }
  .hero .wrap{
    max-width:640px;
  }
  .kicker{
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;color:var(--bronze-dark);
    display:flex;align-items:center;gap:10px;margin-bottom:22px;
  }
  .kicker .dash{width:26px;height:1px;background:var(--bronze-dark);display:inline-block;}
  .hero-title{
    font-size:clamp(2.4rem, 4.6vw, 3.6rem);
    line-height:1.05;
    max-width:28ch;
  }
  /* la signature garde sa largeur d'origine, la ligne descriptive respire */
  .hero-title .slogan{display:block;max-width:12ch;}
  .hero-title .h1-tag{
    display:block;margin:16px 0 0;max-width:30ch;
    font-family:'IBM Plex Sans', sans-serif;font-weight:500;
    font-size:clamp(1.02rem, 1.7vw, 1.22rem);line-height:1.35;
    color:var(--bronze-dark);
  }
  .hero-sub{
    margin-top:22px;max-width:46ch;color:#41454B;font-size:17px;
  }
  .hero-actions{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap;}
  .btn{
    font-family:'IBM Plex Mono', monospace;font-size:13.5px;
    padding:13px 24px;display:inline-block;border:1px solid var(--ink);
    transition:background .2s ease, color .2s ease, border-color .2s ease;
  }
  .btn-solid{background:var(--ink);color:var(--paper);}
  .btn-solid:hover{background:var(--bronze);border-color:var(--bronze);}
  .btn-outline{background:transparent;color:var(--ink);}
  .btn-outline:hover{border-color:var(--bronze);color:var(--bronze-dark);}

  /* ---------- partner strip ---------- */
  .partner-strip{
    background:var(--charcoal);color:var(--aluminium-light);
    padding:22px 0;
  }
  .partner-strip .wrap{
    display:flex;align-items:center;gap:22px;flex-wrap:wrap;
    font-size:13.5px;
  }
  .partner-strip .plabel{font-family:'IBM Plex Mono', monospace;color:#8f939a;}
  .partner-strip img{height:16px;width:auto;filter:invert(1) brightness(1.6);}

  /* ---------- sections ---------- */
  section{padding:88px 0;}
  .section-head{
    display:flex;justify-content:space-between;align-items:flex-end;
    gap:30px;margin-bottom:48px;flex-wrap:wrap;
  }
  .section-head h2{font-size:clamp(1.7rem,3vw,2.3rem);max-width:16ch;}
  .section-head p{color:#54585E;max-width:38ch;margin-top:10px;font-size:15px;}

  /* product spec cards (menuiserie) */
  .spec-list{border-top:1px solid var(--ink);}
  .spec-row{
    border-bottom:1px solid var(--line);
    padding:30px 0;
    display:grid;grid-template-columns:200px 1fr 1.3fr;gap:34px;align-items:start;
  }
  .sys-thumb{
    width:100%;height:auto;display:block;margin-bottom:16px;
    border:1px solid var(--line);
  }
  .spec-row .sys-name{font-size:1.5rem;}
  .spec-row .sys-tag{
    font-family:'IBM Plex Mono', monospace;font-size:12px;color:var(--bronze-dark);
    margin-top:6px;display:block;
  }
  .spec-row .sys-desc{color:#41454B;font-size:14.5px;max-width:44ch;}
  .dims{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;}
  .dim{font-family:'IBM Plex Mono', monospace;font-size:12.5px;color:#54585E;}
  .dim b{display:block;font-size:16px;color:var(--ink);font-weight:500;}

  /* interior / exterior grid */
  .cat-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);}
  .cat-grid.two{grid-template-columns:1fr 1fr;}
  .cat-grid.three{grid-template-columns:repeat(3,1fr);}
  .cat-card{
    background:var(--panel);padding:38px 34px;
  }
  .cat-icon{width:46px;height:46px;margin-bottom:22px;color:var(--ink);}
  .cat-icon svg{width:100%;height:100%;}
  .cat-photo{
    width:100%;aspect-ratio:4/3;overflow:hidden;margin-bottom:22px;
    border:1px solid var(--line);background:#fff;
  }
  .cat-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .cat-photo.contain img{object-fit:contain;padding:26px;}
  .cat-card h3{font-size:1.15rem;margin-bottom:10px;}
  .cat-tag{
    display:inline-block;font-size:11.5px;color:var(--bronze-dark);
    margin-bottom:12px;margin-top:-4px;
  }
  .cat-card p{font-size:14.5px;color:#54585E;}

  /* advantages */
  .adv-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--line);}
  .adv{padding:30px 26px 30px 0;border-right:1px solid var(--line);}
  .adv:last-child{border-right:none;}
  .adv .adv-mark{
    font-family:'IBM Plex Mono', monospace;color:var(--bronze-dark);font-size:12px;
    display:block;margin-bottom:14px;
  }
  .adv h3{font-size:1rem;margin-bottom:8px;}
  .adv p{font-size:13.5px;color:#54585E;}

  /* contact */
  .contact-section{background:var(--charcoal);color:#E6E5E1;}
  .contact-section .section-head p{color:#9a9ea3;}
  .contact-section .section-head h2{color:#fff;}
  .contact-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:50px;align-items:start;}
  .contact-line{
    display:flex;gap:16px;padding:18px 0;border-bottom:1px solid #33363b;
  }
  .contact-line:first-child{border-top:1px solid #33363b;}
  .contact-line .k{font-family:'IBM Plex Mono', monospace;font-size:11.5px;color:#8f939a;width:90px;flex-shrink:0;padding-top:2px;}
  .contact-line .v{font-size:15.5px;}
  .contact-line a:hover{color:var(--bronze);}
  .map-wrap{border:1px solid #33363b;overflow:hidden;filter:grayscale(0.3) contrast(1.05);}
  .map-wrap iframe{width:100%;height:340px;border:0;display:block;}
  .maps-stack{display:flex;flex-direction:column;gap:22px;}
  .map-label{
    display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--bronze);margin-bottom:9px;
  }
  .maps-stack .map-wrap iframe{height:195px;}
  .stores-title{font-size:1.15rem;color:#fff;margin-bottom:22px;}
  .stores-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;align-items:start;}
  .store-city{
    display:block;font-size:12px;color:var(--bronze);
    letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px;
  }
  .store-addr{font-size:15.5px;line-height:1.6;margin-bottom:18px;min-height:75px;}
  .stores-grid .map-wrap iframe{height:260px;}

  /* footer */
  footer{background:var(--ink);color:#8f939a;padding:44px 0 26px;}
  .footer-top{
    display:flex;justify-content:space-between;align-items:center;
    padding-bottom:30px;border-bottom:1px solid #2b2d31;flex-wrap:wrap;gap:20px;
  }
  .footer-top img{height:22px;filter:brightness(0) invert(1);}
  .footer-nav{display:flex;gap:26px;flex-wrap:wrap;font-size:13.5px;}
  .footer-nav a:hover{color:var(--bronze);}
  .footer-social{
    display:flex;gap:16px;padding:22px 0;border-bottom:1px solid #2b2d31;
  }
  .footer-social a{
    width:34px;height:34px;display:flex;align-items:center;justify-content:center;
    border:1px solid #33363b;color:#8f939a;transition:color .2s ease, border-color .2s ease;
  }
  .footer-social a:hover{color:var(--bronze);border-color:var(--bronze);}
  .footer-social svg{width:17px;height:17px;}
  .footer-bottom{
    padding-top:22px;display:flex;justify-content:space-between;
    font-family:'IBM Plex Mono', monospace;font-size:11.5px;flex-wrap:wrap;gap:10px;
  }

  /* bandeau de consentement */
  .consent-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:300;
    background:var(--charcoal);color:#E6E5E1;
    display:flex;align-items:center;justify-content:space-between;
    gap:24px;padding:16px 28px;flex-wrap:wrap;
    border-top:1px solid #33363b;
  }
  .consent-bar p{margin:0;font-size:13.5px;max-width:78ch;color:#c9cbcf;}
  .consent-actions{display:flex;gap:10px;flex-shrink:0;}
  .consent-bar button{
    font-family:'IBM Plex Mono', monospace;font-size:12.5px;
    padding:9px 18px;border:1px solid #5a5e64;background:transparent;
    color:#E6E5E1;cursor:pointer;transition:background .2s ease, border-color .2s ease;
  }
  .consent-bar button:hover{border-color:var(--bronze);color:#fff;}
  .consent-bar .consent-yes{background:var(--bronze);border-color:var(--bronze);color:#fff;}
  .consent-bar .consent-yes:hover{background:var(--bronze-dark);border-color:var(--bronze-dark);}
  @media (max-width:640px){
    .consent-bar{padding:14px 20px;gap:14px;}
    .consent-bar p{font-size:12.5px;}
    .consent-actions{width:100%;}
    .consent-bar button{flex:1;}
  }

  /* responsive */
  @media (max-width:1120px){
    /* la mention prend trop de place quand le menu complet est affiche */
    .partner-badge .lbl{display:none;}
    .partner-badge{padding:6px 10px;}
    .brand{gap:12px;}
  }
  @media (max-width:900px){
    .cat-grid.two, .cat-grid.three{grid-template-columns:1fr;}
    .adv-grid{grid-template-columns:repeat(3,1fr);}
    .adv{border-right:none;border-bottom:1px solid var(--line);padding:26px 0;}
    .contact-grid{grid-template-columns:1fr;}
    .stores-grid{grid-template-columns:1fr;gap:34px;}
    .store-addr{min-height:0;}
    .spec-row{grid-template-columns:1fr;gap:14px;}
  }
  @media (max-width:640px){
    nav.main{
      position:fixed;inset:64px 0 0 0;background:var(--paper);
      flex-direction:column;align-items:flex-start;padding:30px 28px;
      gap:22px;transform:translateY(-8px);opacity:0;pointer-events:none;
      transition:opacity .2s ease, transform .2s ease;
    }
    nav.main.open{opacity:1;transform:translateY(0);pointer-events:auto;}
    .nav-toggle{display:block;}
    .adv-grid{grid-template-columns:1fr;}
    .adv{border-bottom:1px solid var(--line);}
    .topbar .wrap{font-size:11px;}
  }
  @media (max-width:480px){
    /* laisser respirer le logo et le cartouche a cote du bouton menu */
    .logo-mark img{height:22px;}
    .partner-badge{padding:5px 8px;}
    .partner-badge img{height:11px;}
    .brand{gap:10px;margin-right:12px;}
    header.site .wrap{padding:14px 20px;}
  }

/* ============================================================
   Added for multi-page rebuild: breadcrumbs, page hero, FAQ,
   blog cards, article body, skip link, active nav state
   ============================================================ */

.skip-link{
  position:absolute;left:-999px;top:auto;background:var(--ink);color:#fff;
  padding:10px 16px;z-index:200;font-family:'IBM Plex Mono', monospace;font-size:13px;
}
.skip-link:focus{left:12px;top:12px;}

nav.main a.active{color:var(--bronze-dark);}
nav.main a.active::after{transform:scaleX(1) !important;}

.breadcrumbs{
  font-family:'IBM Plex Mono', monospace;font-size:12px;color:var(--aluminium);
  padding:20px 0 0;
}
.breadcrumbs a{color:var(--aluminium);}
.breadcrumbs a:hover{color:var(--bronze-dark);}
.breadcrumbs .sep{margin:0 8px;color:var(--line);}
.breadcrumbs [aria-current]{color:#54585E;}

.page-hero{padding:32px 0 56px;border-bottom:1px solid var(--line);}
.page-hero h1{font-size:clamp(2rem,4vw,2.7rem);max-width:22ch;}
.page-hero p.lead{margin-top:18px;max-width:62ch;color:#41454B;font-size:16.5px;}

/* FAQ (native details/summary — accessible, no JS needed) */
.faq{border-top:1px solid var(--ink);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  padding:22px 0;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-family:'Space Grotesk', sans-serif;font-weight:600;font-size:1.05rem;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .q-mark{
  font-family:'IBM Plex Mono', monospace;color:var(--bronze-dark);font-size:20px;flex-shrink:0;
}
.faq-item[open] summary .q-mark{transform:rotate(45deg);}
.faq-item summary .q-mark{transition:transform .2s ease;display:inline-block;}
.faq-item .faq-a{padding:0 0 24px;color:#41454B;font-size:15px;max-width:68ch;}

/* Blog listing */
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.blog-card{background:var(--panel);padding:36px;}
.blog-card time{font-family:'IBM Plex Mono', monospace;font-size:12px;color:var(--aluminium);}
.blog-card h3{margin-top:12px;font-size:1.2rem;}
.blog-card p{margin-top:10px;color:#54585E;font-size:14.5px;}
.blog-card a.more{margin-top:16px;display:inline-block;font-family:'IBM Plex Mono', monospace;font-size:13px;color:var(--bronze-dark);}
@media (max-width:900px){ .blog-grid{grid-template-columns:1fr;} }

/* Long-form article body */
article.post{padding-top:12px;max-width:760px;}
article.post .post-meta{font-family:'IBM Plex Mono', monospace;font-size:12px;color:var(--aluminium);margin-bottom:10px;}
article.post h2{margin-top:46px;margin-bottom:14px;font-size:1.5rem;}
article.post h3{margin-top:30px;margin-bottom:10px;font-size:1.15rem;}
article.post p{color:#33363B;margin-bottom:16px;font-size:16px;max-width:70ch;}
article.post ul{margin:0 0 20px;padding-left:20px;}
article.post li{margin-bottom:8px;font-size:15.5px;color:#33363B;}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:22px 0;}
.table-wrap table{margin:0;min-width:640px;}
article.post table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14px;}
article.post table th,article.post table td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;}
article.post table th{background:var(--panel);font-family:'IBM Plex Mono', monospace;font-size:11.5px;text-transform:uppercase;letter-spacing:.02em;}

/* small helper: category teaser rows on the homepage */
.teaser-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.teaser-card{background:var(--panel);padding:36px 34px;display:flex;flex-direction:column;}
.teaser-card h3{font-size:1.2rem;margin-bottom:10px;}
.teaser-card p{font-size:14.5px;color:#54585E;flex-grow:1;}
.teaser-card a.more{margin-top:18px;font-family:'IBM Plex Mono', monospace;font-size:13px;color:var(--bronze-dark);}
@media (max-width:900px){ .teaser-grid{grid-template-columns:1fr;} }

/* ── Formulaire de demande de devis ───────────────────────────── */
.quote-form{max-width:760px;}
.quote-form .qf-intro{font-size:15.5px;color:#41454B;line-height:1.75;max-width:68ch;margin-bottom:30px;}
.qf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.qf-field{background:var(--panel);padding:20px 22px;display:flex;flex-direction:column;}
.qf-field.qf-full{grid-column:1 / -1;}
.qf-field label{
  font-family:'IBM Plex Mono', monospace;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--bronze-dark);margin-bottom:9px;
}
.qf-field label .opt{color:var(--aluminium);letter-spacing:0;text-transform:none;font-size:11px;}
.qf-field input,.qf-field select,.qf-field textarea{
  font-family:'IBM Plex Sans', sans-serif;font-size:15px;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:6px 0;width:100%;border-radius:0;-webkit-appearance:none;appearance:none;
}
.qf-field select{background-image:none;cursor:pointer;}
.qf-field textarea{resize:vertical;min-height:96px;line-height:1.6;}
.qf-field input:focus,.qf-field select:focus,.qf-field textarea:focus{
  outline:none;border-bottom-color:var(--bronze);
}
.qf-field input::placeholder,.qf-field textarea::placeholder{color:#B4B7BB;}
.qf-field.qf-error input,.qf-field.qf-error select,.qf-field.qf-error textarea{border-bottom-color:#B33A2B;}
.qf-err{font-size:12.5px;color:#B33A2B;margin-top:7px;display:none;}
.qf-field.qf-error .qf-err{display:block;}

.qf-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;align-items:center;}
.qf-btn{
  font-family:'IBM Plex Mono', monospace;font-size:13px;letter-spacing:.04em;
  padding:14px 22px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.qf-btn:hover{background:var(--bronze);border-color:var(--bronze);}
.qf-btn.qf-alt{background:transparent;color:var(--ink);}
.qf-btn.qf-alt:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.qf-btn svg{width:16px;height:16px;flex-shrink:0;}
.qf-note{font-size:13.5px;color:#6B6F75;margin-top:16px;max-width:60ch;line-height:1.6;}
.qf-sent{
  margin-top:18px;padding:14px 18px;border-left:3px solid var(--bronze);
  background:var(--panel);font-size:14.5px;color:#41454B;display:none;
}
.qf-sent.on{display:block;}
@media (max-width:760px){
  .qf-grid{grid-template-columns:1fr;}
  .qf-actions .qf-btn{flex:1 1 100%;justify-content:center;}
}

/* ── Bandeau livraison ────────────────────────────────────────── */
.ship-band{
  border:1px solid var(--line);background:var(--panel);
  padding:26px 30px;display:flex;gap:22px;align-items:flex-start;margin-top:6px;
}
.ship-band .ship-icon{
  width:34px;height:34px;flex-shrink:0;color:var(--bronze-dark);
}
.ship-band h3{font-size:1.15rem;margin-bottom:8px;}
.ship-band p{font-size:15px;color:#54585E;line-height:1.7;max-width:64ch;margin:0;}
@media (max-width:620px){ .ship-band{flex-direction:column;gap:14px;padding:22px;} }

/* ── Lien « ouvrir dans Google Maps » sous chaque carte ───────── */
.map-open{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-family:'IBM Plex Mono', monospace;font-size:12.5px;letter-spacing:.02em;
  color:var(--bronze);text-decoration:none;
}
.map-open:hover{color:#C79768;text-decoration:underline;}
.map-open svg{width:13px;height:13px;flex-shrink:0;}
.stores-grid .map-open,.maps-stack .map-open{margin-bottom:2px;}

/* ── Étapes d'une commande ────────────────────────────────────── */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);}
.step{padding:30px 26px 30px 0;border-right:1px solid var(--line);}
.step:last-child{border-right:none;}
.step .step-num{
  font-family:'IBM Plex Mono', monospace;color:var(--bronze-dark);font-size:12px;
  display:block;margin-bottom:14px;
}
.step h3{font-size:1rem;margin-bottom:8px;}
.step p{font-size:13.5px;color:#54585E;}
@media (max-width:900px){
  .steps-grid{grid-template-columns:repeat(2,1fr);}
  .step{border-right:none;border-bottom:1px solid var(--line);padding:26px 0;}
}
@media (max-width:560px){
  .steps-grid{grid-template-columns:1fr;}
}

/* ====================================================================
   Plans Google en chargement differé (click-to-load)
   Le plan n'est plus un iframe present au chargement : il n'est injecté
   qu'au clic. Cela supprime deux requêtes tierces de la page d'accueil
   et de la page contact, accélère le premier affichage, et évite les
   iframes dans le HTML servi.
   ==================================================================== */
.map-load{
  width:100%;height:340px;border:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;cursor:pointer;
  background:#1c1f24;color:#E8E6E1;font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;letter-spacing:.02em;text-align:center;padding:16px;
  transition:background .2s ease;
}
.map-load:hover{background:#24282e;}
.map-load svg{width:26px;height:26px;stroke:#C79768;fill:none;stroke-width:1.6;}
.map-load .ml-sub{color:#8d9298;font-size:11px;}
.maps-stack .map-load{height:195px;}
.stores-grid .map-load{height:260px;}

/* ====================================================================
   VISUALISATION 3D — à coller À LA FIN de /assets/style.css
   Tout est préfixé .v3d- : aucun risque de casser une règle existante.
   ==================================================================== */

/* --- 1. La barre de navigation passe à 8 liens : on resserre un peu.
       Sans ça, « Visualisation 3D » fait passer le menu sur deux lignes
       entre 1000 et 1300 px de large.                                --- */
@media (min-width:641px) and (max-width:1300px){
  nav.main{gap:24px}
  nav.main a{font-size:14px}
}

/* --- 2. La section de contact est SOMBRE (var(--charcoal)).
       Les boutons .btn y seraient noirs sur noir : illisibles.
       On les inverse, uniquement dans ce contexte.                   --- */
.contact-section .btn-solid{
  background:var(--paper);
  color:var(--ink);
  border-color:var(--paper);
}
.contact-section .btn-solid:hover{
  background:var(--bronze);
  border-color:var(--bronze);
  color:var(--paper);
}
.contact-section .btn-outline{
  color:#E6E5E1;
  border-color:#4a4d52;
}
.contact-section .btn-outline:hover{
  border-color:var(--bronze);
  color:var(--bronze);
}

/* --- 3. La démonstration en direct --- */
.v3d-demo{
  display:grid;
  grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:48px;
  align-items:start;
}

/* --- le "téléphone" qui contient la démo réelle --- */
.v3d-phone{
  position:relative;
  border:1px solid rgba(21,23,26,.16);
  border-radius:22px;
  background:#0e1116;
  padding:8px;
  box-shadow:0 18px 44px rgba(21,23,26,.13);
}
.v3d-phone::before{                 /* l'encoche, pour que ça se lise comme un téléphone */
  content:"";
  position:absolute;
  top:16px; left:50%;
  width:74px; height:5px;
  transform:translateX(-50%);
  background:#2a3441;
  border-radius:100px;
  z-index:2;
  pointer-events:none;
}
.v3d-phone iframe{
  display:block;
  width:100%;
  height:660px;
  border:0;
  border-radius:15px;
  background:#0e1116;
}

/* --- colonne de droite --- */
.v3d-side h3{
  font-family:"Space Grotesk",sans-serif;
  font-size:24px;
  line-height:1.2;
  letter-spacing:-.01em;
  margin:12px 0 10px;
}
.v3d-side p{
  margin:0 0 20px;
  max-width:44ch;
}
.v3d-qr{
  width:168px;
  padding:12px;
  background:#fff;
  border:1px solid rgba(21,23,26,.14);
  margin:0 0 18px;
}
.v3d-qr img{
  display:block;
  width:100%;
  height:auto;
  image-rendering:pixelated;
}

/* --- les limites, dites honnêtement --- */
.v3d-limits{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px 40px;
  max-width:980px;
}
.v3d-limits li{
  position:relative;
  padding-left:22px;
  line-height:1.62;
}
.v3d-limits li::before{
  content:"";
  position:absolute;
  left:0; top:.62em;
  width:10px; height:1px;
  background:#8A6541;             /* le bronze déjà utilisé par .kicker */
}
.v3d-limits b{font-weight:600}

/* --- teaser sur la page d'accueil --- */
.v3d-teaser{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,320px);
  gap:44px;
  align-items:center;
}
.v3d-teaser-copy h3{
  font-family:"Space Grotesk",sans-serif;
  font-size:30px;
  line-height:1.15;
  letter-spacing:-.015em;
  margin:12px 0 14px;
}
.v3d-teaser-copy p{margin:0 0 22px;max-width:56ch}
.v3d-teaser-media{
  border:1px solid rgba(21,23,26,.14);
  background:#e7e5df;
  aspect-ratio:4/3;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.v3d-teaser-media img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:1220px){ .v3d-products{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){
  .v3d-products{grid-template-columns:1fr}
  .v3d-demo{grid-template-columns:1fr;gap:34px}
  .v3d-phone{max-width:380px}
  .v3d-phone iframe{height:600px}
  .v3d-limits{grid-template-columns:1fr;gap:16px}
  .v3d-teaser{grid-template-columns:1fr;gap:28px}
  .v3d-teaser-media{order:-1}
}
@media (max-width:560px){
  .v3d-phone iframe{height:560px}
  .v3d-teaser-copy h3{font-size:25px}
}

/* --- 4. les deux produits configurables --- */
.v3d-products{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.v3d-prod{
  display:flex;
  flex-direction:column;
  background:var(--panel);
  color:inherit;
  transition:background .2s ease;
}
.v3d-prod:hover{background:#fbfaf8}
.v3d-prod-img{display:block;aspect-ratio:4/3;overflow:hidden;background:#e7e5df}
.v3d-prod-img img{width:100%;height:100%;object-fit:cover;display:block}
.v3d-prod-body{display:flex;flex-direction:column;padding:26px 28px 30px}
.v3d-prod-body h3{font-size:1.2rem;margin:10px 0 10px}
.v3d-prod-body p{font-size:14.5px;color:#54585E;flex-grow:1;margin:0}
.v3d-prod-body .more{
  margin-top:18px;
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  color:var(--bronze-dark);
}
.v3d-prod:hover .more{text-decoration:underline}

/* --- 5. bascule pergola / garde-corps dans la demonstration --- */
.v3d-switch{
  display:inline-flex;
  border:1px solid rgba(21,23,26,.18);
  margin-bottom:22px;
}
.v3d-switch button{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  padding:9px 16px;
  border:0;
  background:transparent;
  color:#54585E;
  cursor:pointer;
}
.v3d-switch button+button{border-left:1px solid rgba(21,23,26,.18)}
.v3d-switch button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* ====================================================================
   Correctif d'ordre de cascade.
   Les requêtes média ci-dessus (lignes 148-161) sont déclarées AVANT la
   règle de base .v3d-products, qui les écrasait : la grille restait donc
   à quatre colonnes sur mobile et débordait de l'écran. On redéclare ici,
   en fin de feuille, les seules règles concernées.
   ==================================================================== */
@media (max-width:1220px){
  .v3d-products{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:900px){
  .v3d-products{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .v3d-prod-body{padding:22px 20px 24px;}
  .v3d-switch{flex-wrap:wrap;}
}