/* ==============================================================
     HEAVEN HOME — Design system
     Palette : noyer sombre / ivoire / laiton — esprit atelier premium
  ============================================================== */
  :root{
    --noir:        #161210;   /* fond sombre, noyer profond   */
    --noir-2:      #201914;   /* sombre secondaire            */
    --ivoire:      #F4EDE2;   /* fond clair, plâtre ivoire    */
    --ivoire-2:    #ECE2D2;   /* clair secondaire             */
    --laiton:      #C46F3A;   /* cuivre du logo */   /* accent or / laiton           */
    --laiton-clair:#E59B66;
    --encre:       #26201A;   /* texte sur fond clair         */
    --sable:       #A89880;   /* texte atténué                */
    --ligne:       rgba(196,111,58,.35);

    --f-display: "Fraunces", Georgia, serif;
    --f-body:    "Karla", "Segoe UI", sans-serif;

    --maxw: 1180px;
    --r: 14px;
    --ease: cubic-bezier(.22,.8,.26,.99);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    font-family:var(--f-body);
    background:var(--noir);
    color:var(--ivoire);
    line-height:1.65;
    font-size:16.5px;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; }
  :focus-visible{ outline:2px solid var(--laiton); outline-offset:3px; border-radius:4px; }

  .wrap{ width:min(var(--maxw), 92vw); margin-inline:auto; }

  /* ---- Grain subtil (texture atelier) ---- */
  body::before{
    content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---- Signature : la ligne de mesure (règle millimétrée or) ---- */
  .regle{
    height:14px; position:relative; opacity:.85;
    background:
      repeating-linear-gradient(90deg, var(--ligne) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(90deg, var(--laiton) 0 1px, transparent 1px 60px);
    background-size:100% 7px, 100% 14px;
    background-repeat:no-repeat;
    background-position:bottom left, bottom left;
    mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }

  /* ---- Typo titres ---- */
  .eyebrow{
    font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
    color:var(--laiton); font-weight:600; display:inline-flex; align-items:center; gap:.7rem;
  }
  .eyebrow::before{ content:""; width:34px; height:1px; background:var(--laiton); }
  h1,h2,h3{ font-family:var(--f-display); font-weight:480; line-height:1.12; }
  h2{ font-size:clamp(1.9rem, 4vw, 2.9rem); margin:.7rem 0 1rem; letter-spacing:-.01em; }
  .lead{ max-width:62ch; color:#CDBFA9; }
  .light .lead{ color:#5E5547; }
  em.or{ font-style:italic; color:var(--laiton-clair); }

  /* ---- Boutons ---- */
  .btn{
    display:inline-flex; align-items:center; gap:.6rem;
    padding:.95rem 1.7rem; border-radius:999px; font-weight:700; font-size:.95rem;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
    will-change:transform;
  }
  .btn svg{ width:17px; height:17px; transition:transform .35s var(--ease); }
  .btn:hover svg{ transform:translateX(4px); }
  .btn-or{ background:var(--laiton); color:#1d1508; box-shadow:0 8px 28px rgba(196,111,58,.28); }
  .btn-or:hover{ transform:translateY(-3px); background:var(--laiton-clair); box-shadow:0 14px 36px rgba(196,111,58,.4); }
  .btn-ghost{ border:1px solid rgba(244,237,226,.35); color:var(--ivoire); }
  .btn-ghost:hover{ transform:translateY(-3px); border-color:var(--laiton); color:var(--laiton-clair); }
  .light .btn-ghost{ border-color:rgba(38,32,26,.3); color:var(--encre); }
  .light .btn-ghost:hover{ border-color:var(--laiton); color:#9a5526; }
  .btn-wa{ background:#1faa53; color:#fff; box-shadow:0 8px 24px rgba(31,170,83,.3); }
  .btn-wa:hover{ transform:translateY(-3px); background:#23bd5d; }

  /* ==============================================================
     HEADER
  ============================================================== */
  header{
    position:fixed; inset:0 0 auto 0; z-index:100;
    transition:background .4s, box-shadow .4s, padding .4s;
    padding:1.2rem 0;
  }
  header.scrolled{ background:rgba(22,18,16,.92); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--ligne); padding:.7rem 0; }
  .nav{ display:flex; align-items:center; justify-content:space-between; }
  .logo{ font-family:var(--f-display); font-size:1.25rem; letter-spacing:.12em; font-weight:600; }
  .logo span{ color:var(--laiton); }
  .logo small{ display:block; font-family:var(--f-body); font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--sable); font-weight:600; }
  .nav ul{ display:flex; gap:2.2rem; align-items:center; }
  .nav ul a{ font-size:.92rem; font-weight:600; position:relative; padding:.3rem 0; }
  .nav ul a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--laiton); transition:width .35s var(--ease); }
  .nav ul .btn{ padding:.65rem 1.25rem; font-size:.88rem; }
  .nav ul .btn::after{ display:none; }
  .nav ul a:hover::after{ width:100%; }
  .burger{ display:none; background:none; border:0; cursor:pointer; padding:.4rem; }
  .burger span{ display:block; width:26px; height:2px; background:var(--ivoire); margin:6px 0; transition:.35s var(--ease); }
  .menu-open .burger span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .menu-open .burger span:nth-child(2){ opacity:0; }
  .menu-open .burger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

  /* ==============================================================
     HERO
  ============================================================== */
  .hero{
    min-height:100svh; display:flex; flex-direction:column; justify-content:center;
    position:relative; padding:8.5rem 0 0;
    background:
      radial-gradient(900px 520px at 78% 12%, rgba(196,111,58,.13), transparent 65%),
      radial-gradient(700px 480px at 8% 90%, rgba(196,111,58,.07), transparent 60%),
      var(--noir);
  }
  .hero .eyebrow{ animation:rise .9s var(--ease) both .1s; }
  .hero h1{
    font-size:clamp(2.5rem, 6.4vw, 4.7rem);
    max-width:15ch; margin:1.2rem 0 1.4rem;
    animation:rise .9s var(--ease) both .25s;
  }
  .hero h1 .souligne{ position:relative; white-space:nowrap; }
  .hero h1 .souligne::after{
    content:""; position:absolute; left:0; right:0; bottom:.04em; height:.5em;
    background:linear-gradient(90deg, rgba(196,111,58,.32), rgba(196,111,58,.12));
    z-index:-1; transform:scaleX(0); transform-origin:left;
    animation:trace 1s var(--ease) both 1.1s;
  }
  .hero p{ max-width:56ch; color:#CDBFA9; font-size:1.08rem; animation:rise .9s var(--ease) both .4s; }
  .hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.2rem; animation:rise .9s var(--ease) both .55s; }

  .hero-stats{
    margin-top:auto; padding:2.6rem 0 2.2rem;
    display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
    border-top:1px solid rgba(196,111,58,.18);
    animation:rise 1s var(--ease) both .75s;
  }
  .stat b{ font-family:var(--f-display); font-size:clamp(1.7rem,3vw,2.4rem); color:var(--laiton-clair); font-weight:500; display:block; }
  .stat small{ color:var(--sable); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; }

  @keyframes rise{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }
  @keyframes trace{ to{ transform:scaleX(1); } }

  /* ---- Ruban défilant ---- */
  .ruban{ background:var(--noir-2); border-block:1px solid var(--ligne); overflow:hidden; padding:.9rem 0; }
  .ruban-piste{ display:flex; gap:3rem; width:max-content; animation:defile 30s linear infinite; }
  .ruban span{ font-family:var(--f-display); font-style:italic; color:var(--laiton); font-size:1.05rem; white-space:nowrap; }
  .ruban span::after{ content:"✦"; margin-left:3rem; font-style:normal; opacity:.5; font-size:.7rem; vertical-align:middle; }
  @keyframes defile{ to{ transform:translateX(-50%); } }

  /* ==============================================================
     SECTIONS GÉNÉRIQUES
  ============================================================== */
  section{ padding:6rem 0; position:relative; }
  .light{ background:var(--ivoire); color:var(--encre); }
  .light-2{ background:var(--ivoire-2); }
  .sec-head{ max-width:680px; margin-bottom:3.2rem; }

  /* ---- Révélation au scroll ---- */
  .reveal{ opacity:0; transform:translateY(36px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
  .reveal.in{ opacity:1; transform:none; }
  .stagger > *{ opacity:0; transform:translateY(30px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
  .stagger.in > *{ opacity:1; transform:none; }
  .stagger.in > *:nth-child(1){ transition-delay:.05s } .stagger.in > *:nth-child(2){ transition-delay:.13s }
  .stagger.in > *:nth-child(3){ transition-delay:.21s } .stagger.in > *:nth-child(4){ transition-delay:.29s }
  .stagger.in > *:nth-child(5){ transition-delay:.37s } .stagger.in > *:nth-child(6){ transition-delay:.45s }
  .stagger.in > *:nth-child(7){ transition-delay:.53s } .stagger.in > *:nth-child(8){ transition-delay:.61s }

  /* ==============================================================
     SERVICES
  ============================================================== */
  .grille-services{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
  .carte-s{
    background:#FBF7EF; border:1px solid rgba(38,32,26,.08); border-radius:var(--r);
    padding:1.8rem 1.5rem; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  }
  .carte-s:hover{ transform:translateY(-7px); box-shadow:0 22px 44px rgba(38,32,26,.1); border-color:var(--laiton); }
  .carte-s svg{ width:34px; height:34px; stroke:var(--laiton); stroke-width:1.4; fill:none; margin-bottom:1rem; }
  .carte-s h3{ font-size:1.18rem; margin-bottom:.5rem; }
  .carte-s p{ font-size:.92rem; color:#5E5547; }
  .carte-s a{ display:inline-block; margin-top:.9rem; font-size:.85rem; font-weight:700; color:#9a5526; }
  .carte-s a:hover{ text-decoration:underline; }

  /* ==============================================================
     RÉALISATIONS
  ============================================================== */
  .galerie{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:240px; gap:1rem; }
  .galerie figure{
    position:relative; border-radius:var(--r); overflow:hidden; cursor:pointer;
    background:linear-gradient(140deg, #2A211A, #1C1611);
  }
  .galerie figure:nth-child(1){ grid-row:span 2; }
  .galerie figure:nth-child(4){ grid-column:span 2; }
  .galerie img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease), filter .8s; }
  .galerie figure:hover img{ transform:scale(1.06); filter:brightness(.75); }
  .galerie figcaption{
    position:absolute; inset:auto 0 0 0; padding:2.2rem 1.3rem 1.1rem;
    background:linear-gradient(transparent, rgba(10,7,5,.55) 45%, rgba(10,7,5,.92));
    display:flex; justify-content:space-between; align-items:end; gap:1rem;
  }
  .galerie figcaption b{
    font-family:var(--f-display); font-weight:500; font-size:1.05rem; color:#fff;
    text-shadow:0 1px 6px rgba(0,0,0,.8), 0 0 2px rgba(0,0,0,.6);
  }
  .galerie figcaption small{
    color:var(--laiton-clair); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
    text-shadow:0 1px 6px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.7); font-weight:600;
  }
  /* Placeholder élégant tant que vos photos ne sont pas en ligne */
  .galerie .ph{
    width:100%; height:100%; display:grid; place-items:center;
    background:
      radial-gradient(420px 260px at 70% 20%, rgba(196,111,58,.16), transparent 70%),
      repeating-linear-gradient(135deg, rgba(196,111,58,.05) 0 2px, transparent 2px 18px),
      linear-gradient(140deg, #2A211A, #191410);
    transition:transform .8s var(--ease);
  }
  .galerie figure:hover .ph{ transform:scale(1.05); }
  .galerie .ph span{ font-family:var(--f-display); font-style:italic; color:rgba(229,155,102,.5); font-size:1rem; }

  /* ==============================================================
     TÉMOIGNAGES
  ============================================================== */
  .temoignages{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
  .carte-t{
    background:#FBF7EF; border:1px solid rgba(38,32,26,.08); border-radius:var(--r);
    padding:1.9rem 1.6rem; display:flex; flex-direction:column; gap:1rem;
    transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  }
  .carte-t:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(38,32,26,.1); }
  .t-haut{ display:flex; align-items:center; gap:.9rem; }
  .t-avatar{
    width:46px; height:46px; flex-shrink:0; border-radius:50%;
    display:grid; place-items:center; font-family:var(--f-display);
    font-size:1.25rem; font-weight:600; color:#1d1508;
    background:linear-gradient(135deg, var(--laiton-clair), var(--laiton));
    box-shadow:0 4px 14px rgba(196,111,58,.3);
  }
  .etoiles{ color:var(--laiton); letter-spacing:.18em; font-size:.95rem; }
  .carte-t blockquote{ font-family:var(--f-display); font-style:italic; font-size:1.06rem; line-height:1.55; color:#3B332A; }
  .carte-t footer{ font-size:.85rem; color:#5E5547; padding-top:.2rem; border-top:1px solid rgba(38,32,26,.08); }
  .carte-t footer b{ color:var(--encre); }

  /* ==============================================================
     POURQUOI NOUS
  ============================================================== */
  .atouts{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.2rem 2.5rem; }
  .atout{ border-top:1px solid rgba(38,32,26,.15); padding-top:1.2rem; transition:border-color .4s; }
  .atout:hover{ border-top-color:var(--laiton); }
  .atout h3{ font-size:1.12rem; margin-bottom:.4rem; }
  .atout p{ font-size:.93rem; color:#5E5547; }

  /* ==============================================================
     PROCESSUS (séquence numérotée justifiée : c'est un parcours)
  ============================================================== */
  .etapes{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.4rem 2rem; counter-reset:etape; }
  .etape{ position:relative; padding-left:0; }
  .etape::before{
    counter-increment:etape; content:"0" counter(etape);
    font-family:var(--f-display); font-size:2.6rem; color:transparent;
    -webkit-text-stroke:1px var(--laiton); display:block; margin-bottom:.5rem; line-height:1;
  }
  .etape h3{ font-size:1.15rem; margin-bottom:.4rem; }
  .etape p{ font-size:.92rem; color:#C2B49D; }

  /* ==============================================================
     TARIFS INDICATIFS
  ============================================================== */
  .tarifs{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
  .carte-p{
    background:#FBF7EF; border:1px solid rgba(38,32,26,.08); border-radius:var(--r);
    padding:1.9rem 1.6rem 1.6rem; text-align:left; position:relative; overflow:hidden;
    display:flex; flex-direction:column;
    transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  }
  .carte-p:hover{ transform:translateY(-6px); border-color:var(--laiton); box-shadow:0 20px 40px rgba(38,32,26,.1); }
  /* numéro en filigrane façon plan d'atelier */
  .carte-p-num{
    position:absolute; top:.6rem; right:1rem; font-family:var(--f-display);
    font-size:3.2rem; line-height:1; color:transparent;
    -webkit-text-stroke:1px rgba(196,111,58,.22); pointer-events:none; transition:-webkit-text-stroke .4s;
  }
  .carte-p:hover .carte-p-num{ -webkit-text-stroke:1px rgba(196,111,58,.45); }
  .carte-p h3{ font-size:1.12rem; position:relative; z-index:1; }
  .carte-p .prix-devis{
    font-family:var(--f-display); font-size:1.65rem; color:var(--encre);
    margin-top:.8rem; line-height:1.1; display:flex; flex-direction:column;
  }
  .carte-p .prix-devis-sub{
    font-family:var(--f-body); font-size:.72rem; letter-spacing:.14em;
    text-transform:uppercase; color:#9a5526; margin-top:.3rem; font-weight:600;
  }
  .carte-p ul{ margin-top:1.1rem; flex-grow:1; }
  .carte-p li{ font-size:.87rem; color:#5E5547; padding:.28rem 0 .28rem 1.3rem; position:relative; }
  .carte-p li::before{ content:""; position:absolute; left:0; top:.85rem; width:7px; height:7px; border:1.3px solid var(--laiton); transform:rotate(45deg); }
  .carte-p-cta{
    margin-top:1.4rem; font-size:.88rem; font-weight:700; color:#9a5526;
    display:inline-block; transition:gap .3s, color .3s; position:relative; z-index:1;
  }
  .carte-p-cta:hover{ color:var(--laiton); letter-spacing:.01em; }
  .note-tarifs{ margin-top:1.6rem; font-size:.86rem; color:#6E6354; text-align:center; max-width:60ch; margin-inline:auto; }

  /* ==============================================================
     FAQ
  ============================================================== */
  .faq{ max-width:780px; margin-inline:auto; }
  .faq details{
    border-bottom:1px solid rgba(38,32,26,.14); padding:1.2rem 0;
  }
  .faq summary{
    cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem;
    font-family:var(--f-display); font-size:1.15rem; font-weight:500;
  }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary::after{ content:"+"; font-size:1.5rem; color:var(--laiton); transition:transform .35s var(--ease); flex-shrink:0; }
  .faq details[open] summary::after{ transform:rotate(45deg); }
  .faq details p{ padding-top:.8rem; font-size:.95rem; color:#5E5547; max-width:65ch; }

  /* ==============================================================
     BANDE CTA
  ============================================================== */
  .cta-band{
    background:linear-gradient(120deg, #2A2014, #161210 60%);
    border-block:1px solid var(--ligne); text-align:center; padding:5rem 0;
  }
  .cta-band h2{ max-width:18ch; margin-inline:auto; }

  /* ==============================================================
     CONTACT
  ============================================================== */
  .contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:3.5rem; align-items:start; }
  .coord li{ display:flex; gap:1rem; padding:.9rem 0; border-bottom:1px solid rgba(196,111,58,.15); align-items:center; }
  .coord svg{ width:22px; height:22px; stroke:var(--laiton); stroke-width:1.5; fill:none; flex-shrink:0; }
  .coord b{ display:block; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sable); font-weight:600; }
  .coord a:hover{ color:var(--laiton-clair); }

  form{ background:var(--noir-2); border:1px solid var(--ligne); border-radius:var(--r); padding:2rem; }
  form h3{ font-size:1.4rem; margin-bottom:1.4rem; }
  .champ{ margin-bottom:1.1rem; }
  .champ label{ display:block; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sable); margin-bottom:.4rem; font-weight:600; }
  .champ input, .champ select, .champ textarea{
    width:100%; background:rgba(244,237,226,.05); border:1px solid rgba(196,111,58,.25);
    border-radius:8px; padding:.85rem 1rem; color:var(--ivoire); font-family:var(--f-body); font-size:.95rem;
    transition:border-color .3s, background .3s;
  }
  .champ input:focus, .champ select:focus, .champ textarea:focus{ outline:none; border-color:var(--laiton); background:rgba(244,237,226,.08); }
  .champ select option{ background:var(--noir-2); }
  form .btn{ width:100%; justify-content:center; }
  .form-note{ font-size:.8rem; color:var(--sable); margin-top:.9rem; text-align:center; }

  /* ==============================================================
     FOOTER
  ============================================================== */
  footer.site{
    background:#100D0B; padding:4rem 0 2rem; border-top:1px solid var(--ligne); font-size:.92rem;
  }
  .foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:2.5rem; margin-bottom:3rem; }
  .foot-grid h4{ font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--laiton); margin-bottom:1rem; }
  .foot-grid p, .foot-grid a{ color:#B7A98F; }
  .foot-grid a:hover{ color:var(--laiton-clair); }
  .foot-grid li{ padding:.25rem 0; }
  .socios{ display:flex; gap:.8rem; margin-top:1.2rem; }
  .socios a{
    width:42px; height:42px; border:1px solid var(--ligne); border-radius:50%;
    display:grid; place-items:center; transition:transform .35s var(--ease), background .3s, border-color .3s;
  }
  .socios a:hover{ transform:translateY(-4px); background:var(--laiton); border-color:var(--laiton); }
  .socios a:hover svg{ stroke:#1d1508; }
  .socios svg{ width:18px; height:18px; stroke:var(--laiton); stroke-width:1.6; fill:none; }
  .copy{ border-top:1px solid rgba(196,111,58,.12); padding-top:1.6rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; color:#8B7E6E; font-size:.82rem; }

  /* ---- Bouton WhatsApp flottant ---- */
  .wa-flot{
    position:fixed; right:1.4rem; bottom:1.4rem; z-index:90;
    width:58px; height:58px; border-radius:50%; background:#1faa53;
    display:grid; place-items:center; box-shadow:0 10px 30px rgba(31,170,83,.45);
    transition:transform .35s var(--ease);
    animation:pulse 2.6s infinite;
  }
  .wa-flot:hover{ transform:scale(1.1); }
  .wa-flot svg{ width:28px; height:28px; fill:#fff; }
  @keyframes pulse{
    0%{ box-shadow:0 10px 30px rgba(31,170,83,.45), 0 0 0 0 rgba(31,170,83,.45); }
    70%{ box-shadow:0 10px 30px rgba(31,170,83,.45), 0 0 0 18px rgba(31,170,83,0); }
    100%{ box-shadow:0 10px 30px rgba(31,170,83,.45), 0 0 0 0 rgba(31,170,83,0); }
  }

  /* ==============================================================
     RESPONSIVE
  ============================================================== */
  @media (max-width:980px){
    .grille-services{ grid-template-columns:repeat(2,1fr); }
    .galerie{ grid-template-columns:repeat(2,1fr); }
    .galerie figure:nth-child(4){ grid-column:span 1; }
    .temoignages, .atouts, .etapes{ grid-template-columns:repeat(2,1fr); }
    .tarifs{ grid-template-columns:repeat(2,1fr); }
    .contact-grid{ grid-template-columns:1fr; }
    .foot-grid{ grid-template-columns:1fr 1fr; }
    .hero-stats{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:640px){
    .nav ul{
      position:fixed; inset:0; background:rgba(16,13,11,.97); flex-direction:column;
      justify-content:center; gap:2rem; font-size:1.3rem;
      opacity:0; pointer-events:none; transition:opacity .35s;
    }
    .menu-open .nav ul{ opacity:1; pointer-events:auto; }
    .burger{ display:block; z-index:110; position:relative; }
    .nav .btn{ display:none; }
    .menu-open .nav ul .btn{ display:inline-flex; }
    .grille-services, .galerie, .temoignages, .atouts, .etapes, .tarifs{ grid-template-columns:1fr; }
    .galerie figure{ grid-column:auto !important; }
    .galerie figure:nth-child(1){ grid-row:span 1; }
    .galerie{ grid-auto-rows:230px; }
    section{ padding:4.2rem 0; }
  }

  /* ---- Accessibilité : réduction des animations ---- */
  @media (prefers-reduced-motion:reduce){
    *, *::before, *::after{ animation:none !important; transition:none !important; }
    .reveal, .stagger > *{ opacity:1 !important; transform:none !important; }
    html{ scroll-behavior:auto; }
  }

/* ==============================================================
   LOGO IMAGE (header & footer)
============================================================== */
.logo{ display:flex; align-items:center; gap:.8rem; }
.logo img{ height:44px; width:auto; transition:transform .35s var(--ease); }
.logo:hover img{ transform:scale(1.06); }
.logo .logo-txt{ line-height:1.1; }
header.scrolled .logo img{ height:38px; }
footer.site .logo img{ height:52px; }

/* ==============================================================
   PAGES PRODUITS
============================================================== */
.hero-produit{
  padding:10rem 0 4.5rem; position:relative; overflow:hidden;
  background:
    radial-gradient(800px 460px at 80% 10%, rgba(196,111,58,.14), transparent 65%),
    var(--noir);
}
/* Image de fond optionnelle : définie par --hero-img sur la section.
   Le voile dégradé garantit la lisibilité du texte par-dessus la photo. */
.hero-produit::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(100deg, rgba(18,14,11,.93) 0%, rgba(18,14,11,.78) 38%, rgba(18,14,11,.32) 78%, rgba(18,14,11,.5) 100%),
    linear-gradient(0deg, var(--noir) 2%, transparent 42%),
    var(--hero-img, none);
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.2s var(--ease);
}
.hero-produit.has-bg::after{ opacity:1; }
.hero-produit .wrap, .hero-produit .marque{ position:relative; z-index:1; }
.fil-ariane{ font-size:.82rem; color:var(--sable); margin-bottom:1.6rem; }
.fil-ariane a:hover{ color:var(--laiton-clair); }
.fil-ariane span{ color:var(--laiton); }
.hero-produit h1{ font-family:var(--f-display); font-weight:480; font-size:clamp(2.2rem,5vw,3.6rem); max-width:18ch; line-height:1.12; margin:.9rem 0 1.2rem; }
.hero-produit .lead{ font-size:1.07rem; }
.hero-produit .marque{
  position:absolute; right:4%; top:50%; transform:translateY(-50%);
  width:min(300px, 24vw); opacity:.16; pointer-events:none;
  transition:opacity .8s var(--ease);
}
.hero-produit.has-bg .marque{ opacity:.08; }

.deux-col{ display:grid; grid-template-columns:1.15fr .85fr; gap:3.5rem; align-items:start; }
.deux-col h2{ font-size:clamp(1.6rem,3vw,2.2rem); }
.bloc-texte p{ margin-bottom:1.1rem; color:#CDBFA9; }
.light .bloc-texte p{ color:#4A4136; }

.encart-materiaux{
  background:#FBF7EF; border:1px solid rgba(38,32,26,.08); border-left:3px solid var(--laiton);
  border-radius:var(--r); padding:1.8rem 1.6rem;
}
.encart-materiaux h3{ font-size:1.05rem; margin-bottom:1rem; letter-spacing:.04em; }
.encart-materiaux li{
  font-size:.93rem; color:#4A4136; padding:.55rem 0 .55rem 1.6rem; position:relative;
  border-bottom:1px solid rgba(38,32,26,.07);
}
.encart-materiaux li:last-child{ border-bottom:none; }
.encart-materiaux li::before{
  content:""; position:absolute; left:0; top:1rem; width:9px; height:9px;
  border:1.5px solid var(--laiton); transform:rotate(45deg);
}
.encart-materiaux li b{ color:var(--encre); }

/* Bandeau "pourquoi moins cher" */
.equation{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:2.5rem;
}
.equation > div{
  background:var(--noir-2); border:1px solid var(--ligne); border-radius:var(--r);
  padding:1.5rem 1.3rem; transition:transform .4s var(--ease), border-color .4s;
}
.equation > div:hover{ transform:translateY(-5px); border-color:var(--laiton); }
.equation b{ font-family:var(--f-display); font-size:1.05rem; font-weight:500; display:block; margin-bottom:.4rem; color:var(--laiton-clair); }
.equation p{ font-size:.88rem; color:#C2B49D; }
.equation-somme{
  margin-top:2rem; text-align:center; font-family:var(--f-display); font-style:italic;
  font-size:clamp(1.2rem,2.4vw,1.6rem); color:var(--laiton-clair);
}

/* Galerie produit compacte */
.galerie-produit{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; grid-auto-rows:250px; }

/* Étapes condensées */
.mini-etapes{ display:flex; gap:0; flex-wrap:wrap; counter-reset:me; border-top:1px solid rgba(38,32,26,.12); }
.mini-etapes > div{ flex:1 1 200px; padding:1.4rem 1.4rem 1.4rem 0; counter-increment:me; }
.mini-etapes > div::before{
  content:"0" counter(me); font-family:var(--f-display); color:transparent;
  -webkit-text-stroke:1px var(--laiton); font-size:1.7rem; display:block; margin-bottom:.3rem;
}
.mini-etapes h3{ font-size:1rem; margin-bottom:.3rem; }
.mini-etapes p{ font-size:.86rem; color:#5E5547; }

/* Maillage interne entre services */
.autres-services{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.autres-services a{
  border:1px solid var(--ligne); border-radius:10px; padding:1.1rem 1.2rem;
  font-size:.92rem; font-weight:700; display:flex; justify-content:space-between; align-items:center; gap:.6rem;
  transition:background .3s, transform .35s var(--ease), border-color .3s;
}
.autres-services a:hover{ background:rgba(196,111,58,.1); transform:translateY(-3px); border-color:var(--laiton); }
.autres-services a::after{ content:"→"; color:var(--laiton); }

@media (max-width:980px){
  .deux-col{ grid-template-columns:1fr; }
  .equation{ grid-template-columns:repeat(2,1fr); }
  .autres-services{ grid-template-columns:repeat(2,1fr); }
  .galerie-produit{ grid-template-columns:repeat(2,1fr); }
  .hero-produit .marque{ display:none; }
}
@media (max-width:640px){
  .equation, .autres-services, .galerie-produit{ grid-template-columns:1fr; }
  .hero-produit{ padding-top:8rem; }
}

/* ==============================================================
   PHOTOS DE RÉALISATIONS (uploadées par nom de fichier)
   — l'image recouvre le placeholder dès qu'elle existe
============================================================== */
.galerie figure{ isolation:isolate; }
.photo-realisation{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover;
}
.galerie figcaption{ z-index:2; }

/* ==============================================================
   ANIMATIONS THÉMATIQUES — l'atelier de menuiserie
============================================================== */

/* 1. Révélation "panneau coulissant" des photos (comme une porte
      de placard qui s'ouvre) */
.galerie.stagger > figure{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1s var(--ease), opacity .6s var(--ease), transform .8s var(--ease);
}
.galerie.stagger.in > figure{ clip-path:inset(0 0 0 0); }

/* 2. La règle millimétrée se "trace" quand elle entre à l'écran */
.regle{ transform:scaleX(0); transform-origin:left; transition:transform 1.6s var(--ease); }
.regle.in{ transform:scaleX(1); }

/* 3. Équerres de mesure au survol des cartes (coins qui s'ouvrent
      comme un gabarit de menuisier) */
.carte-s, .carte-p, .carte-t{ position:relative; }
.carte-s::before, .carte-s::after,
.carte-p::before, .carte-p::after{
  content:""; position:absolute; width:0; height:0; pointer-events:none;
  transition:width .4s var(--ease), height .4s var(--ease), opacity .3s;
  opacity:0;
}
.carte-s::before, .carte-p::before{
  top:10px; left:10px;
  border-top:2px solid var(--laiton); border-left:2px solid var(--laiton);
}
.carte-s::after, .carte-p::after{
  bottom:10px; right:10px;
  border-bottom:2px solid var(--laiton); border-right:2px solid var(--laiton);
}
.carte-s:hover::before, .carte-s:hover::after,
.carte-p:hover::before, .carte-p:hover::after{
  width:22px; height:22px; opacity:1;
}

/* 4. Soulignement qui se trace sous les mots en cuivre des titres */
.sec-head h2 em.or{ position:relative; }
.sec-head h2 em.or::after{
  content:""; position:absolute; left:0; right:0; bottom:-.08em; height:2px;
  background:linear-gradient(90deg, var(--laiton), var(--laiton-clair));
  transform:scaleX(0); transform-origin:left;
  transition:transform .9s var(--ease) .45s;
}
.sec-head.reveal.in h2 em.or::after{ transform:scaleX(1); }

/* 5. Filigrane du monogramme qui "respire" sur les pages produits */
.hero-produit .marque{ animation:flotter 9s ease-in-out infinite alternate; }
@keyframes flotter{
  from{ transform:translateY(-52%) rotate(-1.2deg); }
  to{   transform:translateY(-48%) rotate(1.2deg); }
}

/* 6. Plan technique animé du hero (cotations qui se dessinent) */
.cotation{
  position:absolute; right:5%; top:50%; transform:translateY(-55%);
  width:min(420px, 30vw); pointer-events:none; opacity:.9;
}
.cotation .trait{
  fill:none; stroke:var(--laiton); stroke-width:1.2;
  stroke-dasharray:1000; stroke-dashoffset:1000;
  animation:dessiner 2.6s var(--ease) forwards 1s;
}
.cotation .trait-2{ animation-delay:1.7s; }
.cotation .trait-3{ animation-delay:2.3s; stroke-dasharray:6 6; stroke-dashoffset:1000; opacity:.55; }
.cotation text{
  font-family:var(--f-body); font-size:11px; letter-spacing:.14em;
  fill:var(--laiton-clair); opacity:0;
  animation:apparaitre .8s ease forwards 3s;
}
@keyframes dessiner{ to{ stroke-dashoffset:0; } }
@keyframes apparaitre{ to{ opacity:.9; } }
@media (max-width:980px){ .cotation{ display:none; } }

/* Réduction de mouvement : tout reste visible */
@media (prefers-reduced-motion:reduce){
  .galerie.stagger > figure{ clip-path:none !important; }
  .regle{ transform:none !important; }
  .cotation .trait{ stroke-dashoffset:0 !important; }
  .cotation text{ opacity:.9 !important; }
}

/* ==============================================================
   RAFFINEMENTS UX/UI (v2)
============================================================== */

/* Sélection de texte aux couleurs de la marque */
::selection{ background:rgba(196,111,58,.28); color:var(--ivoire); }
.light ::selection{ background:rgba(196,111,58,.22); color:var(--encre); }

/* Barre de progression de lecture (façon règle millimétrée en haut) */
.progress-bar{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:200;
  background:linear-gradient(90deg, var(--laiton), var(--laiton-clair));
  box-shadow:0 0 12px rgba(196,111,58,.5);
  transition:width .1s linear;
}

/* Lien d'évitement (accessibilité clavier) */
.skip-link{
  position:absolute; left:-999px; top:0; z-index:300;
  background:var(--laiton); color:#1d1508; padding:.8rem 1.4rem;
  font-weight:700; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* CTA flottant WhatsApp : libellé qui se déploie au survol (desktop) */
@media (hover:hover) and (min-width:641px){
  .wa-flot{ width:auto; padding:0 1.1rem; border-radius:30px; gap:.5rem; }
  .wa-flot::after{
    content:"Devis WhatsApp"; color:#fff; font-weight:700; font-size:.9rem;
    max-width:0; overflow:hidden; white-space:nowrap; opacity:0;
    transition:max-width .4s var(--ease), opacity .3s, margin .4s;
  }
  .wa-flot:hover::after{ max-width:160px; opacity:1; margin-right:.3rem; }
  .wa-flot svg{ flex-shrink:0; }
}

/* Boutons : effet de brillance qui balaie au survol */
.btn-or{ position:relative; overflow:hidden; }
.btn-or::before{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg); transition:left .6s var(--ease);
}
.btn-or:hover::before{ left:130%; }

/* Cartes services : l'icône prend la couleur cuivre au survol */
.carte-s svg{ transition:stroke .4s var(--ease), transform .4s var(--ease); }
.carte-s:hover svg{ transform:translateY(-3px) scale(1.08); }

/* États focus homogènes et visibles */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--laiton); outline-offset:3px; border-radius:6px;
}

/* Champs de formulaire : label qui passe en cuivre quand le champ est actif */
.champ:focus-within label{ color:var(--laiton-clair); transition:color .3s; }

/* Micro-confirmation visuelle après envoi du formulaire */
.form-ok{
  margin-top:1rem; padding:.9rem 1.1rem; border-radius:8px;
  background:rgba(31,170,83,.12); border:1px solid rgba(31,170,83,.4);
  color:#7ee2a5; font-size:.9rem; text-align:center;
  opacity:0; transform:translateY(8px); transition:opacity .4s, transform .4s;
}
.form-ok.show{ opacity:1; transform:none; }

/* Defilement plus doux des ancres avec compensation du header fixe */
:target{ scroll-margin-top:90px; }