/* =========================================================
   Arboréa Paysage — Feuille de style
   Palette reprise du logo et du flyer
   ========================================================= */

:root{
  --vert-fonce:  #33402c;   /* vert forêt du flyer */
  --vert-fonce2: #2a3524;
  --vert:        #4a7c3f;
  --vert-clair:  #7cb342;
  --vert-pale:   #eef3e8;
  --brun:        #6b4a2b;
  --corail:      #e2543f;   /* accent rouge/corail du flyer */
  --corail-fonce:#c8432f;
  --creme:       #faf8f3;
  --blanc:       #ffffff;
  --texte:       #2c3327;
  --texte-doux:  #5c6555;
  --ombre:       0 10px 30px rgba(30,40,25,.12);
  --ombre-douce: 0 4px 16px rgba(30,40,25,.08);
  --radius:      16px;
  --max:         1160px;
  --serif: "Fraunces", Georgia, serif;
  --sans:  "Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--sans);
  color:var(--texte);
  background:var(--creme);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.container{ width:100%; max-width:var(--max); margin:0 auto; padding:0 22px; }

h1,h2,h3,h4{ font-family:var(--serif); line-height:1.15; color:var(--vert-fonce); font-weight:700; }
a{ color:var(--vert); text-decoration:none; }
a:hover{ color:var(--corail); }
img{ max-width:100%; display:block; }

/* ---------------- Boutons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--sans); font-weight:800; font-size:1rem;
  padding:.85rem 1.6rem; border-radius:50px; border:2px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
  text-align:center; line-height:1.2;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--corail); color:#fff; box-shadow:0 6px 18px rgba(226,84,63,.35); }
.btn-primary:hover{ background:var(--corail-fonce); color:#fff; }
.btn-ghost{ background:transparent; border-color:currentColor; color:var(--vert-fonce); }
.btn-ghost:hover{ background:var(--vert-fonce); color:#fff; }
.btn-block{ display:flex; width:100%; }
.btn-lg{ padding:1.05rem 1.6rem; font-size:1.08rem; }

/* ---------------- En-tête ---------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,248,243,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(51,64,44,.1);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.6rem 22px; }
.brand{ display:flex; align-items:center; gap:.7rem; color:var(--vert-fonce); }
.brand-logo{ height:54px; width:auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-name{ font-family:var(--serif); font-weight:700; font-size:1.35rem; color:var(--vert-fonce); }
.brand-tag{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brun); font-weight:700; }

.site-nav{ display:flex; align-items:center; gap:1.6rem; }
.site-nav a{ color:var(--vert-fonce); font-weight:700; font-size:.98rem; }
.site-nav a:hover{ color:var(--corail); }
.nav-phone{ background:var(--vert-fonce); color:#fff !important; padding:.5rem 1rem; border-radius:50px; }
.nav-phone:hover{ background:var(--corail); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span{ width:26px; height:3px; background:var(--vert-fonce); border-radius:3px; transition:.25s; }

/* ---------------- Héro ---------------- */
.hero{
  position:relative; color:#fff; overflow:hidden;
  background:
    radial-gradient(1100px 500px at 80% -10%, rgba(124,179,66,.35), transparent 60%),
    linear-gradient(160deg, var(--vert-fonce) 0%, var(--vert-fonce2) 55%, #1f2a1a 100%);
}
.hero-overlay{
  position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%237cb342' stroke-opacity='0.10' stroke-width='2'%3E%3Cpath d='M60 10 C40 40 40 70 60 110 C80 70 80 40 60 10Z'/%3E%3Cpath d='M60 40 L60 110 M60 60 L42 50 M60 75 L78 64'/%3E%3C/g%3E%3C/svg%3E");
}
.hero-inner{ position:relative; z-index:2; padding:5.5rem 22px 5rem; max-width:860px; }
.hero-eyebrow{ text-transform:uppercase; letter-spacing:.18em; font-weight:800; font-size:.8rem; color:var(--vert-clair); margin-bottom:1rem; }
.hero h1{ color:#fff; font-size:clamp(2.2rem, 5.5vw, 4rem); margin-bottom:1.2rem; }
.hero-sub{ font-size:clamp(1.05rem,2vw,1.3rem); max-width:640px; color:rgba(255,255,255,.9); margin-bottom:2rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:2.2rem; }
.hero .btn-ghost{ color:#fff; }
.hero .btn-ghost:hover{ background:#fff; color:var(--vert-fonce); }
.hero-badges{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; font-weight:700; color:rgba(255,255,255,.92); font-size:.95rem; }

/* ---------------- Bandeau urgence ---------------- */
.urgence-bar{ background:var(--corail); color:#fff; }
.urgence-bar .container{ display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:center; justify-content:center; text-align:center; padding:.8rem 22px; font-size:1.02rem; }
.urgence-bar a{ color:#fff; text-decoration:underline; }

/* ---------------- Sections génériques ---------------- */
.section{ padding:5rem 0; }
.section-alt{ background:var(--vert-pale); }
.section-dark{ background:linear-gradient(160deg,var(--vert-fonce),var(--vert-fonce2)); color:#fff; }
.section-eyebrow{ text-transform:uppercase; letter-spacing:.16em; font-weight:800; font-size:.8rem; color:var(--corail); margin-bottom:.6rem; }
.section-eyebrow.light{ color:var(--vert-clair); }
.section-title{ font-size:clamp(1.8rem,3.5vw,2.7rem); margin-bottom:1rem; max-width:20ch; }
.section-title.light{ color:#fff; }
.section-lead{ max-width:60ch; color:var(--texte-doux); font-size:1.1rem; margin-bottom:2.5rem; }
.section-lead.light{ color:rgba(255,255,255,.85); }

/* ---------------- Services ---------------- */
.services-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.4rem; }
.service-card{
  background:#fff; border-radius:var(--radius); padding:1.8rem 1.6rem;
  box-shadow:var(--ombre-douce); border:1px solid rgba(51,64,44,.06);
  transition:transform .18s ease, box-shadow .18s ease;
}
.service-card:hover{ transform:translateY(-4px); box-shadow:var(--ombre); }
.service-ico{
  width:56px; height:56px; border-radius:14px; background:var(--vert-pale);
  display:flex; align-items:center; justify-content:center; font-size:1.7rem; margin-bottom:1rem;
}
.service-card h3{ font-size:1.2rem; margin-bottom:.5rem; }
.service-card p{ color:var(--texte-doux); font-size:.98rem; }
.services-cta{ text-align:center; margin-top:2.8rem; }

/* ---------------- Atouts ---------------- */
.atouts-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.6rem; }
.atout{ background:#fff; border-radius:var(--radius); padding:1.8rem; box-shadow:var(--ombre-douce); }
.atout-num{ font-family:var(--serif); font-size:2rem; font-weight:700; color:var(--vert-clair); margin-bottom:.4rem; }
.atout h3{ font-size:1.15rem; margin-bottom:.5rem; }
.atout p{ color:var(--texte-doux); font-size:.97rem; }
.citation{
  margin-top:3rem; text-align:center; font-family:var(--serif); font-style:italic;
  font-size:clamp(1.4rem,3vw,2rem); color:var(--vert-fonce);
}
.citation span{ display:block; font-size:1rem; font-style:normal; color:var(--brun); margin-top:.6rem; font-family:var(--sans); font-weight:700; }

/* ---------------- Zone ---------------- */
.zone-inner{ display:grid; grid-template-columns:1.4fr 1fr; gap:2.5rem; align-items:start; }
.zone-list{ list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.5rem .8rem; }
.zone-list li{ position:relative; padding-left:1.4rem; color:var(--texte); font-weight:600; }
.zone-list li::before{ content:"🌿"; position:absolute; left:0; font-size:.85rem; }
.zone-card{ background:var(--vert-fonce); color:#fff; border-radius:var(--radius); padding:2rem; box-shadow:var(--ombre); position:sticky; top:90px; }
.zone-card h3{ color:#fff; font-size:1.4rem; margin-bottom:.6rem; }
.zone-card p{ color:rgba(255,255,255,.85); margin-bottom:1.2rem; }
.zone-card .btn{ margin-bottom:.8rem; }
.zone-card .btn-ghost{ color:#fff; }
.zone-card .btn-ghost:hover{ background:#fff; color:var(--vert-fonce); }
.zone-hours{ text-align:center; margin-top:.4rem; margin-bottom:0 !important; font-size:.95rem; }

/* ---------------- Devis ---------------- */
.devis-inner{ display:grid; grid-template-columns:1fr 1.1fr; gap:3rem; align-items:start; }
.devis-contact{ list-style:none; margin-top:1.5rem; display:grid; gap:.7rem; font-size:1.05rem; }
.devis-contact a{ color:#fff; text-decoration:underline; }
.devis-form{ background:#fff; border-radius:var(--radius); padding:2rem; box-shadow:var(--ombre); color:var(--texte); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group{ margin-bottom:1.1rem; }
.form-group label{ display:block; font-weight:700; font-size:.92rem; margin-bottom:.35rem; color:var(--vert-fonce); }
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:.8rem .9rem; border:1.5px solid #d7ddd0; border-radius:10px;
  font-family:var(--sans); font-size:1rem; color:var(--texte); background:#fff; transition:border .15s ease, box-shadow .15s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:none; border-color:var(--vert); box-shadow:0 0 0 3px rgba(74,124,63,.15);
}
.form-group textarea{ resize:vertical; }
.form-note{ text-align:center; font-weight:700; margin-top:1rem; min-height:1.2rem; }
.form-note.ok{ color:var(--vert); }
.form-note.err{ color:var(--corail); }
.form-legal{ font-size:.8rem; color:var(--texte-doux); text-align:center; margin-top:.8rem; }

/* ---------------- Pied de page ---------------- */
.site-footer{ background:var(--vert-fonce2); color:rgba(255,255,255,.8); padding-top:3.5rem; }
.footer-inner{ display:grid; grid-template-columns:1.6fr 1fr 1.2fr 1.2fr; gap:2rem; padding-bottom:2.5rem; }
.footer-col h4{ color:#fff; font-size:1.05rem; margin-bottom:.9rem; }
.footer-col ul{ list-style:none; display:grid; gap:.5rem; font-size:.95rem; }
.footer-col a{ color:rgba(255,255,255,.8); }
.footer-col a:hover{ color:var(--vert-clair); }
.footer-brand .brand-name{ color:#fff; font-size:1.5rem; }
.footer-brand p{ margin-top:.6rem; font-size:.95rem; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding:1.2rem 0; font-size:.88rem; text-align:center; }

/* ---------------- Bouton d'appel flottant ---------------- */
.fab-call{
  position:fixed; right:18px; bottom:18px; z-index:90; display:none;
  width:58px; height:58px; border-radius:50%; background:var(--corail); color:#fff;
  align-items:center; justify-content:center; font-size:1.5rem; box-shadow:0 8px 22px rgba(226,84,63,.5);
}
.fab-call:hover{ color:#fff; transform:scale(1.05); }

/* ---------------- Responsive ---------------- */
@media (max-width:860px){
  .zone-inner, .devis-inner{ grid-template-columns:1fr; }
  .zone-card{ position:static; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  .nav-toggle{ display:flex; }
  .site-nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--creme); border-bottom:1px solid rgba(51,64,44,.12);
    padding:.5rem 22px 1rem; box-shadow:var(--ombre-douce);
    display:none;
  }
  .site-nav.open{ display:flex; }
  .site-nav a{ padding:.8rem 0; border-bottom:1px solid rgba(51,64,44,.08); }
  .nav-phone{ text-align:center; margin-top:.6rem; }
  .form-row{ grid-template-columns:1fr; }
  .fab-call{ display:flex; }
  .section{ padding:3.5rem 0; }
  .hero-inner{ padding:3.5rem 22px; }
}
@media (max-width:480px){
  .footer-inner{ grid-template-columns:1fr; }
  .hero-cta .btn{ width:100%; }
}