/* =========================================================
   LYON ÉLAGAGE — GENERAL.CSS
   Thème : vert nature + anthracite + blanc
   ========================================================= */

/* ---------- Variables ---------- */
:root{
  --green: #2e7d32;
  --green-dark:#1f5e24;
  --bg: #121513;
  --panel: #171c19;
  --ink:#212923;
  --text:#f3f6f3;
  --muted:#b8c2bb;

  --acc-r:#ff8a3d;
  --acc-g:#57d27f;
  --acc-b:#49b3ff;

  --radius:18px;
  --shadow:0 14px 40px rgba(0,0,0,.35);
}

/* ---------- Reset/Global ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
    margin: 0;
    color: #f4f8ff;
    font-family: Montserrat, Arial, sans-serif;
    background: radial-gradient(900px 350px at 85% -5%, rgba(253, 212, 52, .20), transparent 60%), linear-gradient(160deg, rgba(0, 0, 0, 1), rgba(43, 116, 48, 0.7) 30%, rgb(161, 197, 38, 0.5)), url(images/BackG.png) center / cover no-repeat fixed;
    min-height: 100vh;
   
	
}

/* Portrait mode → image différente */
@media (orientation: portrait) {
body{
    margin: 0;
    color: #f4f8ff;
    font-family: Montserrat, Arial, sans-serif;
    background: radial-gradient(900px 350px at 85% -5%, rgba(253, 212, 52, .20), transparent 60%), linear-gradient(160deg, rgba(0, 0, 0, 1), rgba(43, 116, 48, 0.7) 15%, rgb(161, 197, 38, 0.5)), url(images/BackG.png) center / cover no-repeat fixed;
    min-height: 100vh;	
}
}

.shadow {
  box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.22), 0 6px 20px 0 rgba(200, 200, 200, 0.18);
}
.shadow2 {
  box-shadow: 4px 4px 8px 20px rgb(84 92 84 / 38%), 8px 48px 34px 20px rgb(84 92 84 / 38%);
}
.radius {
  border-radius: 2vh;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
.invisible{ position:absolute; inset:auto; width:1px; height:1px; overflow:hidden; }

/* Containers */
.wrap{ width:min(1180px,92vw); margin-inline:auto; }

/* ---------- Typo utilitaires ---------- */
.section-title{
  margin:3.2rem 0 1.6rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:clamp(1.3rem,2.6vw,2rem);
  background:linear-gradient(90deg,#fff,#dce7df);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
p{ line-height:1.6; color:var(--muted); }

/* ---------- Boutons ---------- */
.btn{
  --h:48px;
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--h); padding:0 1.2rem;
  border-radius:999px; font-weight:800; letter-spacing:.04em;
  border:2px solid transparent; transition:.2s ease; text-transform:uppercase;
}
.btn--primary{ background:var(--green); color:#fff; box-shadow:0 10px 24px rgba(46,125,50,.35); }
.btn--primary:hover{ transform:translateY(-2px); filter:saturate(110%); }
.btn--ghost{ background:transparent; color:var(--text); border-color:#ffffff33; }
.btn--ghost:hover{ background:#ffffff14; transform:translateY(-2px); }
.cta-row{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1rem; }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; padding-top:4.5rem; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; pointer-events:none; }
.hero__ray{ position:absolute; filter:blur(22px); opacity:.38; mix-blend-mode:screen; }
.ray--r{ background:radial-gradient(45% 45% at 70% 10%, var(--acc-r), transparent 70%); inset:-15% 0 auto 40%; }
.ray--g{ background:radial-gradient(45% 45% at 30% 60%, var(--acc-g), transparent 70%); inset:auto 10% -20% auto; }
.ray--b{ background:radial-gradient(50% 50% at 0% 0%, var(--acc-b), transparent 70%); inset:-10% auto auto -10%; }

.hero__grid{
  display:grid; gap:2.2rem; align-items:center;
  grid-template-columns:1.1fr .9fr;
  padding:6rem 0 4rem;
}
@media (max-width:980px){ .hero__grid{ grid-template-columns:1fr; padding:4.5rem 0 2rem; } }

.hero__diagonal{
  position:relative; inset:auto 0 0 0; height:110px;
  background:
    linear-gradient(180deg, transparent, #0000 30%),
    linear-gradient(100deg, var(--green), var(--green-dark));
  clip-path:polygon(0 0, 70% 0, 100% 100%, 0% 100%);
  opacity:.95;
}

.hero__brand{ display:flex; align-items:center; gap:1.2rem; }
@media (max-width:640px){ .hero__brand{ flex-direction:column; text-align:center; } }
.brand__logo{ width:min(140px,30vw); filter:drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
.brand__title{ font-size:clamp(2.1rem,5.2vw,3.8rem); margin:.1rem 0 .2rem; font-weight:900; line-height:1; }
.brand__tag{ color:#d6ddd7; font-weight:600; }

.hero__shot{ display:flex; justify-content:flex-end; }
.shot-card{
  background:linear-gradient(180deg,#1b241f,#171d1a);
  border:1px solid #ffffff1a; border-radius:var(--radius);
  padding:1.6rem 1.4rem; max-width:520px; box-shadow:var(--shadow);
}
.shot-card h2{ margin:0 0 .5rem; font-size:1.35rem; }
.pill-list{ list-style:none; display:flex; gap:.5rem; flex-wrap:wrap; margin:.8rem 0 0; padding:0; }
.pill-list li{ background:#ffffff14; border:1px solid #ffffff22; padding:.35rem .6rem; border-radius:999px; font-size:.9rem; }

/* Étoiles */
.about__bullets .rating{ display:inline-flex; align-items:center; gap:.45rem; }
.about__bullets .stars{ display:inline-flex; gap:.25rem; line-height:0; color:#ffd64a; }
.about__bullets .star{ width:1.05em; height:1.05em; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.about__bullets .star path{ fill:currentColor; }
.about__bullets .star--partial path{ fill:none; }
.about__bullets .star--partial path:first-of-type{ fill:url(#le-grad-49); }
.about__bullets .rating__text{ color:var(--text); font-weight:800; }

/* =========================================================
   NAVIGATION SERVICES
   ========================================================= */
.service-nav{ background:#0f1411; border-block:1px solid #ffffff12; }
.service-nav__row{
  display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; justify-content:center;
  padding:1rem 0;
}
.sn-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem .9rem; border-radius:999px; font-weight:800;
  background:#ffffff0f; border:1px solid #ffffff24; color:#fff; transition:.2s ease;
}
.sn-btn:hover{ background:#ffffff1d; transform:translateY(-2px); }
.sn-btn--cta{ background:var(--green); border-color:transparent; }
.sn-btn--cta:hover{ filter:saturate(112%); }

/* =========================================================
   À PROPOS
   ========================================================= */
.about{
  display:grid; grid-template-columns:1.1fr .9fr; gap:1.2rem; align-items:center;
  margin-top:2.2rem;
}
.about__text p{ margin:.4rem 0; }
.about__bullets{ color:#dbe5dd; font-weight:700; margin-top:.6rem; }
.about__photo{
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  border:1px solid #ffffff1a; transform:translateY(10px); opacity:0; transition:.45s ease;
}
.about__photo.in{ transform:none; opacity:1; }
@media (max-width:980px){ .about{ grid-template-columns:1fr; } }

/* =========================================================
   SERVICES — Cartes
   ========================================================= */
.cards{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(3, minmax(210px,1fr));
}
.cards--6{
  grid-template-columns:repeat(3, minmax(210px,1fr));
}
@media (max-width:980px){ .cards, .cards--6{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){ .cards, .cards--6{ grid-template-columns:1fr; } }

.card{
  background:linear-gradient(180deg,#1b231e,#141914);
  border:1px solid #ffffff1b; border-radius:var(--radius);
  padding:1.2rem 1.1rem; box-shadow:var(--shadow);
  transform:translateY(8px); opacity:0; transition:.4s ease;
}
.card.in{ transform:none; opacity:1; }
.card h3{ margin:.2rem 0 .4rem; font-size:1.15rem; }
.card p{ margin:0 0 .6rem; }
.card ul{ margin:.2rem 0 0 1.1rem; padding:0; }
.card__ctas{ margin-top:.8rem; }

.card__icon{
  width:46px; height:46px; display:grid; place-items:center; border-radius:12px; margin-bottom:.35rem;
  background:#ffffff10; border:1px solid #ffffff1a;
}
.card__icon svg{ width:26px; height:26px; fill:#fff; }

.card__icon--elagage{ background:linear-gradient(45deg,#2bb673,#7ce0a8); }
.card__icon--abattage{ background:linear-gradient(45deg,#e67e22,#f7b267); }
.card__icon--haie{ background:linear-gradient(45deg,#3ea34d,#8bd08f); }
.card__icon--nacelle{ background:linear-gradient(45deg,#2d9cdb,#7cc3ef); }
.card__icon--dechets{ background:linear-gradient(45deg,#4f5d75,#8a98ad); }
.card__icon--gazon{ background:linear-gradient(45deg,#1f8a3b,#5fd27b); }

/* =========================================================
   STRIPE
   ========================================================= */
.stripe{
  margin:4rem 0;
  background:
    linear-gradient(135deg, #1a211c 35%, #0e120f 35% 36%, #1a211c 36% 65%, #0e120f 65% 66%, #1a211c 66%),
    repeating-linear-gradient(90deg, transparent 0 40px, #ffffff07 40px 41px);
  border-block:1px solid #ffffff10;
}
.stripe__inner{
  padding:3rem 0; text-align:center;
  transform:translateY(10px); opacity:0; transition:.45s ease;
}
.stripe__inner.in{ transform:none; opacity:1; }

.stripe__photo{
  margin:1.2rem auto 0; width:25vw; border-radius:16px; overflow:hidden;
  border:1px solid #ffffff1a; box-shadow:var(--shadow);
}
@media (orientation: portrait) {
  .stripe__photo{ width:80vw; }
}

/* =========================================================
   PARTENAIRES
   ========================================================= */
.partners__frame{
  background:linear-gradient(180deg,#171e19,#121612);
  border:1px solid #ffffff18; border-radius:var(--radius); padding:1rem;
  box-shadow:var(--shadow);
  display:flex; justify-content:center;
}

/* =========================================================
   CONTACT + MAP
   ========================================================= */
.contact{
  display:grid; grid-template-columns:1.2fr .8fr; gap:1.2rem; margin-bottom:4rem;
}
@media (max-width:980px){ .contact{ grid-template-columns:1fr; } }

/* empêche la grille du formulaire de rester à 2 colonnes sur mobile */
@media (max-width: 780px){
  .contact .grid{ grid-template-columns:1fr; }
}

label{ min-width:0; }
.recaptcha{ display:flex; justify-content:flex-start; overflow:hidden; }
@media (max-width: 380px){
  .g-recaptcha{ transform: scale(.9); transform-origin: left top; }
}

.contact__card{
  background:linear-gradient(180deg,#1a211c,#131814);
  border:1px solid #ffffff1c; border-radius:var(--radius);
  padding:1.3rem; box-shadow:var(--shadow);
  transform:translateY(10px); opacity:0; transition:.45s ease;
}
.contact__card.in{ transform:none; opacity:1; }

.contact__aside{
  display:grid; gap:1rem; align-content:start;
  transform:translateY(10px); opacity:0; transition:.45s ease;
}
.contact__aside.in{ transform:none; opacity:1; }

.grid{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.grid--wide{ grid-column:1 / -1; }

label{ display:grid; gap:.35rem; font-weight:700; color:#e7eee8; }
input, textarea{
  width:100%; padding:.9rem 1rem; border-radius:12px;
  border:1px solid #ffffff2a; background:#0f1411; color:#fff; outline:none;
}
input::placeholder, textarea::placeholder{ color:#9aa79d; }
input:focus, textarea:focus{ border-color:#ffffff66; box-shadow:0 0 0 3px #ffffff14; }

button{ border:0; }

.mini-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.mini-kpis > div{
  background:#0f1411; border:1px solid #ffffff1c; border-radius:12px; padding:.9rem; text-align:center;
}
.mini-kpis strong{ font-size:1.2rem; display:block; }
.mini-kpis span{ color:#c9d6cc; font-size:.9rem; }

.mapbox{
  overflow:hidden; border-radius:16px; border:1px solid #ffffff1a; box-shadow:var(--shadow);
  aspect-ratio:16/10; background:#0b0f0c;
}
.mapbox iframe{ width:100%; height:100%; border:0; }

.as-badge{
  display:flex; align-items:center; gap:.45rem;
  background:#0f1411; border:1px solid #ffffff1c;
  border-radius:999px; padding:.6rem .9rem; color:#d5ded7; font-weight:700;
}
.dot{ width:.7rem; height:.7rem; border-radius:50%; }
.dot--r{ background:var(--acc-r); }
.dot--g{ background:var(--acc-g); }
.dot--b{ background:var(--acc-b); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:#0d120e; border-top:1px solid #ffffff14; padding:1.6rem 0; }
.footer__grid{ display:grid; gap:.8rem; grid-template-columns:1fr auto 1fr; align-items:center; }
.footer__logo img{ width:80px; opacity:.95; filter:grayscale(.05) drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
.footer a{ border-bottom:1px dashed #ffffff33; }
.footer .legal{ text-align:right; color:#c7d2ca; }

@media (max-width:780px){
  .footer__grid{ grid-template-columns:1fr; text-align:center; }
  .footer .legal{ text-align:center; }
}

/* =========================================================
   QUICKBAR (mobile only)
   ========================================================= */
.quickbar{
  position:fixed; inset:auto 0 16px 0; display:flex; justify-content:center; gap:.8rem; z-index:50;
  pointer-events:none;
}
.quickbar a {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: .45rem;
    font-weight: 900;
    background: var(--acc-g);
    border: 1px solid var(--green);
    color: #fff;
    height: 44px;
    padding: 0 .9rem;
    border-radius: 999px;
    box-shadow: var(--shadow);
}
.quickbar svg{ width:18px; height:18px; fill:#fff; }
@media (min-width:980px){ .quickbar{ display:none; } }

/* =========================================================
   Reveal
   ========================================================= */
.card, .stripe__inner, .contact__card, .contact__aside{ will-change: transform, opacity; }