/* =====================================================================
   GUIDE MAISON BOIS — Styles page d'accueil & header/footer
   ===================================================================== */

/* ---------------- HEADER ---------------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(247,244,239,.85);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);height:72px}
.logo{display:flex;align-items:center;gap:.6rem;font-family:var(--font-serif);font-weight:600;font-size:var(--fs-md);color:var(--ink-900)}
.logo:hover{color:var(--ink-900)}
.logo__mark{width:38px;height:38px;flex-shrink:0}
.nav{display:flex;align-items:center;gap:var(--sp-6)}
.nav a{font-weight:500;font-size:var(--fs-sm);color:var(--ink-700)}
.nav a:hover{color:var(--forest-700)}
.header__cta{display:flex;align-items:center;gap:var(--sp-4)}
.nav-toggle{display:none;width:44px;height:44px;border-radius:var(--r-sm)}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink-900);margin:5px auto;transition:.3s;border-radius:2px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:960px){
  .nav-toggle{display:block}
  .nav,.header__cta .btn--ghost{display:none}
  .site-nav{
    position:fixed;inset:72px 0 auto 0;background:var(--cream);
    flex-direction:column;align-items:flex-start;gap:0;padding:var(--sp-5);
    border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);
    transform:translateY(-120%);transition:transform .35s var(--ease);
  }
  .site-nav.is-open{transform:translateY(0);display:flex}
  .site-nav a{padding:var(--sp-3) 0;font-size:var(--fs-md);width:100%;border-bottom:1px solid var(--line)}
}

/* ---------------- HERO ---------------- */
.hero{position:relative;overflow:hidden;padding-block:var(--sp-8) var(--sp-9)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-8);align-items:center}
.hero h1{margin-block:var(--sp-4) var(--sp-5)}
.hero .lead{margin-bottom:var(--sp-6);max-width:52ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-bottom:var(--sp-6)}
.hero__trust{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-5);font-size:var(--fs-sm);color:var(--ink-500)}
.hero__trust strong{color:var(--ink-900)}
.stars{color:var(--sun);letter-spacing:1px}

.hero__visual{position:relative}
.hero__photo{
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);
  aspect-ratio:4/5;background:var(--forest-800);position:relative;
}
.hero__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(15,61,34,.38))}
.hero__photo img{width:100%;height:100%;object-fit:cover}
.photo-tag{position:absolute;left:16px;bottom:16px;background:rgba(255,255,255,.92);
  padding:.5rem .9rem;border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:600;color:var(--ink-700);box-shadow:var(--shadow-sm);z-index:1}
.hero__float{
  position:absolute;background:#fff;border-radius:var(--r-md);padding:var(--sp-4);
  box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:.75rem;
}
.hero__float--tr{top:24px;right:-12px}
.hero__float--bl{bottom:34px;left:-18px}
.hero__float .card__icon{margin:0;width:42px;height:42px;background:var(--wood-100);color:var(--wood-700)}
.hero__float b{display:block;font-family:var(--font-serif);font-size:var(--fs-md)}
.hero__float span{font-size:var(--fs-xs);color:var(--ink-500)}
@media(max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:var(--sp-7)}
  .hero__photo{aspect-ratio:16/11}
  .hero__float--tr{right:8px}.hero__float--bl{left:8px}
}

/* ---------------- BANDEAU CONFIANCE ---------------- */
.trustbar{border-block:1px solid var(--line);background:var(--white)}
.trustbar__inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-5);padding-block:var(--sp-6)}

/* ---------------- MINI SIMULATEUR ---------------- */
.simu{background:var(--forest-800);color:var(--cream);border-radius:var(--r-lg);overflow:hidden}
.simu__grid{display:grid;grid-template-columns:1fr 1fr}
.simu__form{padding:var(--sp-7)}
.simu__form label{color:var(--forest-100)}
.simu__result{padding:var(--sp-7);background:var(--forest-900);display:flex;flex-direction:column;justify-content:center}
.simu__amount{font-family:var(--font-serif);font-size:var(--fs-3xl);color:var(--wood-300);line-height:1}
.simu__range{color:var(--forest-100);margin:.5rem 0 var(--sp-5)}
.simu .input,.simu .select{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}
.simu .input::placeholder{color:var(--forest-100)}
.simu__bar{height:8px;border-radius:var(--r-full);background:rgba(255,255,255,.12);overflow:hidden;margin-bottom:var(--sp-3)}
.simu__bar span{display:block;height:100%;background:linear-gradient(90deg,var(--wood-500),var(--wood-300));border-radius:var(--r-full);transition:width .5s var(--ease)}
.simu__note{font-size:var(--fs-xs);color:var(--forest-100);opacity:.8}
@media(max-width:800px){.simu__grid{grid-template-columns:1fr}}

/* ---------------- COCONS / GUIDES ---------------- */
.topic{position:relative;display:flex;flex-direction:column;height:100%}
.topic__k{font-family:var(--font-serif);font-size:var(--fs-sm);color:var(--wood-500);font-weight:600}
.topic h3{font-size:var(--fs-md);margin:.35rem 0 .5rem}
.topic p{font-size:var(--fs-sm);color:var(--ink-500);flex:1}
.topic__link{margin-top:var(--sp-4);font-weight:600;font-size:var(--fs-sm);display:inline-flex;align-items:center;gap:.4rem}
.topic__link svg{width:15px;height:15px;transition:transform .2s}
.topic:hover .topic__link svg{transform:translateX(4px)}

/* ---------------- INSPIRATIONS ---------------- */
.inspirations{background:var(--white)}
.inspirations__grid{display:grid;grid-template-columns:1.25fr 1fr .8fr;gap:var(--sp-5);align-items:stretch}
.inspiration-card{position:relative;min-height:330px;overflow:hidden;border-radius:var(--r-lg);background:var(--forest-800);box-shadow:var(--shadow-sm)}
.inspiration-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.inspiration-card:hover img{transform:scale(1.04)}
.inspiration-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(15,61,34,.86))}
.inspiration-card__content{position:absolute;z-index:1;bottom:0;left:0;right:0;padding:var(--sp-5);color:#fff}
.inspiration-card__content span{font-family:var(--font-serif);font-size:var(--fs-lg);font-weight:600}
.inspiration-card__content p{margin-top:.25rem;font-size:var(--fs-sm);color:var(--forest-100)}
.inspiration-card--link{display:flex;flex-direction:column;justify-content:center;padding:var(--sp-6);color:var(--cream);background:linear-gradient(145deg,var(--forest-800),var(--forest-900))}
.inspiration-card--link::after{display:none}
.inspiration-card--link .eyebrow{color:var(--wood-300)}
.inspiration-card--link h3{margin:var(--sp-4) 0;color:#fff;font-size:var(--fs-lg)}
.inspiration-card--link .topic__link{color:#fff}
@media(max-width:900px){.inspirations__grid{grid-template-columns:1fr 1fr}.inspiration-card--link{grid-column:1/-1;min-height:220px}}
@media(max-width:600px){.inspirations__grid{grid-template-columns:1fr}.inspiration-card{min-height:280px}.inspiration-card--link{grid-column:auto;min-height:220px}}

/* ---------------- COMPARATIF ---------------- */
.compare{overflow:hidden;border-radius:var(--r-md);border:1px solid var(--line);background:#fff}
.compare table{width:100%;border-collapse:collapse}
.compare th,.compare td{padding:var(--sp-4) var(--sp-5);text-align:left;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.compare thead th{background:var(--forest-050);font-family:var(--font-serif);font-size:var(--fs-base)}
.compare tbody th{font-weight:600}
.compare .win{color:var(--forest-700);font-weight:600}
.compare td:first-child,.compare th:first-child{font-weight:600}
.compare tr:last-child td{border-bottom:none}

/* ---------------- TÉMOIGNAGES ---------------- */
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-6);box-shadow:var(--shadow-sm)}
.quote p{font-family:var(--font-serif);font-size:var(--fs-md);color:var(--ink-900);line-height:var(--lh-snug)}
.quote__author{display:flex;align-items:center;gap:.75rem;margin-top:var(--sp-5)}
.avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--forest-500),var(--wood-500));display:grid;place-items:center;color:#fff;font-weight:600}
.quote__author b{display:block;font-size:var(--fs-sm)}
.quote__author span{font-size:var(--fs-xs);color:var(--ink-500)}

/* ---------------- EEAT / EXPERTS ---------------- */
.expert{display:flex;gap:var(--sp-4);align-items:flex-start}
.expert .avatar{width:56px;height:56px;flex-shrink:0}
.expert h4{font-size:var(--fs-base)}
.expert span{font-size:var(--fs-xs);color:var(--wood-600);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.expert p{font-size:var(--fs-sm);color:var(--ink-600,var(--ink-700));margin-top:.35rem}

/* ---------------- CTA FINAL ---------------- */
.cta-final{background:linear-gradient(135deg,var(--forest-800),var(--forest-900));color:var(--cream);border-radius:var(--r-lg);padding:var(--sp-8);text-align:center}
.cta-final h2{color:#fff;margin-bottom:var(--sp-4)}
.cta-final .lead{color:var(--forest-100);margin-inline:auto;margin-bottom:var(--sp-6)}
.cta-final .hero__actions{justify-content:center}

/* ---------------- FOOTER ---------------- */
.site-footer{background:var(--ink-900);color:#C9C9C4;padding-block:var(--sp-8) var(--sp-6);font-size:var(--fs-sm)}
.site-footer a{color:#C9C9C4}
.site-footer a:hover{color:#fff}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--sp-6)}
.footer__grid h4{color:#fff;font-family:var(--font-sans);font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--sp-4)}
.footer__grid li+li{margin-top:.6rem}
.footer__brand .logo{color:#fff;margin-bottom:var(--sp-4)}
.footer__brand p{color:#96968F;max-width:34ch}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-4);
  margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid #333;color:#8A8A83;font-size:var(--fs-xs)}
@media(max-width:800px){.footer__grid{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.footer__grid{grid-template-columns:1fr}}