/* ============================================================
   ConceptAz — feuille de styles unique
   Style B « Chaleureux / naturel » — tokens du handoff
   ============================================================ */

:root{
  /* Couleurs */
  --green:#5B9E2E;
  --green-hover:#4C8726;
  --green-dark:#2F6B3C;
  --ink:#1E3A2F;
  --ink-2:#4B6152;
  --ink-3:#8A968C;
  --ink-4:#9AA79C;
  --cream:#FBF8F1;
  --band:#EFEDE3;
  --surface:#FFFFFF;
  --tint:#EAF3E1;
  --field-border:#E1DED2;
  --on-green:#FFFFFF;
  --on-green-2:#EAF1E4;
  --footer-ink:#7A8C80;

  /* Rayons */
  --r-card:24px;
  --r-lg:32px;
  --r-md:28px;
  --r-ico:16px;
  --r-pill:999px;
  --r-field:12px;

  /* Ombres */
  --sh-card:0 10px 30px rgba(30,58,47,.07);
  --sh-soft:0 8px 24px rgba(30,58,47,.07);
  --sh-img:0 14px 34px rgba(30,58,47,.12);
  --sh-img-lg:0 22px 50px rgba(30,58,47,.18);
  --sh-hero:0 30px 70px rgba(30,58,47,.22);
  --sh-cta:0 26px 60px rgba(47,107,60,.32);
  --sh-btn:0 6px 16px rgba(91,158,46,.28);
  --sh-btn-lg:0 10px 24px rgba(91,158,46,.4);
  --sh-form:0 16px 44px rgba(30,58,47,.1);

  /* Espacements */
  --pad-y:clamp(48px,6vw,96px);
  --pad-x:clamp(18px,4vw,56px);
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }
h1,h2,h3{ margin:0; }
p{ margin:0; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }

/* Typo utilitaires */
.cond{ font-family:'Barlow Condensed','Barlow',system-ui,sans-serif; font-weight:800; }
.eyebrow{
  display:block; font-size:13px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--green);
}
.h1{ font-size:clamp(38px,5.5vw,66px); line-height:1.03; margin:14px 0 20px; }
.h1-hero{ font-size:clamp(40px,6.5vw,74px); line-height:1.02; color:#fff; margin:0 0 20px; }
.h2{ font-size:clamp(32px,4.5vw,52px); line-height:1.06; margin:12px 0 0; }
.h2-cta{ font-size:clamp(32px,5vw,58px); line-height:1.04; margin:0 0 16px; }
.lead{ font-size:19px; color:var(--ink-2); }
.center{ text-align:center; }

/* Icônes */
.ico{
  width:26px; height:26px; flex:none;
  fill:none; stroke:var(--green-dark);
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.ico-box{
  width:56px; height:56px; border-radius:var(--r-ico); background:var(--tint);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.ico-box-lg{ width:64px; height:64px; border-radius:18px; margin-bottom:0; }
.ico-box-lg .ico{ width:30px; height:30px; }
.ico-box-sm{ width:48px; height:48px; border-radius:14px; margin-bottom:0; }
.ico-box-sm .ico{ width:22px; height:22px; }

/* ---------- Conteneurs & sections ---------- */
.wrap{ max-width:1300px; margin:0 auto; }
.wrap-1200{ max-width:1200px; margin:0 auto; }
.wrap-1100{ max-width:1100px; margin:0 auto; }
.wrap-1000{ max-width:1000px; margin:0 auto; }
.section{ padding:var(--pad-y) var(--pad-x); }
.section-band{ background:var(--band); }
.section-head{ text-align:center; margin-bottom:52px; }
.page-head{ padding:clamp(44px,6vw,84px) var(--pad-x) clamp(24px,3vw,40px); text-align:center; }
.page-head .lead{ max-width:60ch; margin:0 auto; }

/* ---------- En-tête ---------- */
.site-header{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:14px var(--pad-x);
  background:rgba(251,248,241,.9);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{
  height:52px; width:52px; object-fit:cover; border-radius:var(--r-ico);
  box-shadow:0 3px 10px rgba(30,58,47,.14);
}
.brand span{ font-size:24px; }
.brand em{ color:var(--green); font-style:normal; }

.nav{ display:flex; align-items:center; gap:26px; font-size:15px; font-weight:600; }
.nav a{ opacity:.85; }
.nav a:hover{ opacity:1; color:var(--green); }
.nav a[aria-current="page"]{ color:var(--green); opacity:1; }
.nav .btn{ opacity:1; }

.burger{
  display:none; width:46px; height:46px; border:none; border-radius:14px;
  background:var(--tint); cursor:pointer; padding:0;
  align-items:center; justify-content:center;
}
.burger span{
  display:block; width:20px; height:2px; background:var(--ink); border-radius:2px;
  position:relative; transition:background .18s;
}
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:20px; height:2px;
  background:var(--ink); border-radius:2px; transition:transform .18s, top .18s;
}
.burger span::before{ top:-6px; }
.burger span::after{ top:6px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* ---------- Boutons ---------- */
.btn{
  display:inline-block; border:none; cursor:pointer; text-align:center;
  font-family:inherit; font-weight:700; border-radius:var(--r-pill);
  padding:15px 30px; font-size:16px; transition:background .18s, transform .18s;
}
.btn-sm{ padding:12px 24px; font-size:15px; }
.btn-green{ background:var(--green); color:#fff; box-shadow:var(--sh-btn); }
.btn-green:hover{ background:var(--green-hover); }
.btn-green-lg{ box-shadow:var(--sh-btn-lg); }
.btn-ink{ background:var(--ink); color:#fff; padding:14px 30px; }
.btn-ink:hover{ background:var(--green-dark); }
.btn-white{ background:#fff; color:var(--green-dark); padding:16px 34px; }
.btn-white:hover{ transform:translateY(-2px); }
.btn-ghost{
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.4); color:#fff;
}
.btn-ghost:hover{ background:rgba(255,255,255,.24); }
.btn-outline{
  border:1px solid rgba(255,255,255,.55); color:#fff; padding:16px 34px; background:transparent;
}
.btn-outline:hover{ background:rgba(255,255,255,.12); }
.link-underline{
  display:inline-block; font-weight:700; color:var(--green);
  border-bottom:2px solid var(--green); padding-bottom:2px;
}
.link-underline:hover{ color:var(--green-hover); border-color:var(--green-hover); }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }
.btn-row-center{ justify-content:center; }

/* ---------- Hero accueil ---------- */
.hero{ padding:clamp(40px,6vw,88px) var(--pad-x); }
.hero-frame{
  position:relative; max-width:1300px; margin:0 auto;
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-hero);
}
.hero-frame img{
  width:100%; height:clamp(420px,52vw,600px); object-fit:cover; display:block;
}
.hero-veil{
  position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(20,40,30,.82) 0%,rgba(20,40,30,.5) 46%,rgba(20,40,30,.1) 100%);
}
.hero-body{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(28px,5vw,72px); max-width:660px;
}
.hero-badge{
  display:inline-flex; align-self:flex-start; align-items:center; gap:8px;
  background:rgba(91,158,46,.9); color:#fff; padding:8px 16px;
  border-radius:var(--r-pill); font-size:13px; font-weight:700; letter-spacing:.04em;
  margin-bottom:22px;
}
.hero-badge .ico{ width:17px; height:17px; stroke:#fff; }
.hero-body .lead{ color:var(--on-green-2); margin:0 0 32px; max-width:48ch; }

/* ---------- Cartes ---------- */
.grid{ display:grid; gap:22px; }
.grid-auto-250{ grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.grid-auto-230{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.grid-auto-220{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.grid-auto-300{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:26px; }
.grid-2{ grid-template-columns:1fr 1fr; }

.card{
  background:var(--surface); border-radius:var(--r-card);
  padding:34px 30px; box-shadow:var(--sh-card);
}
.card h3{ font-size:24px; margin:0 0 10px; }
.card p{ font-size:15.5px; color:var(--ink-2); }
.card ul{ margin:0; padding-left:18px; font-size:15.5px; color:var(--ink-2); }
.card-step{ padding:32px 28px; }
.card-step h3{ font-size:22px; margin:14px 0 8px; }
.card-step p{ font-size:15px; }
.step-num{ font-size:40px; color:var(--green); line-height:1; }

/* Blocs prestations détaillés */
.service-row{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,40px);
  align-items:flex-start; background:var(--surface); border-radius:var(--r-card);
  padding:clamp(28px,3vw,44px); box-shadow:var(--sh-card);
}
.service-row h2{ font-size:30px; margin:0 0 12px; }
.service-row p{ font-size:16.5px; color:var(--ink-2); margin:0 0 16px; max-width:70ch; }
.service-row ul{ margin:0; padding-left:20px; font-size:16.5px; color:var(--ink-2); }
.service-list{ display:flex; flex-direction:column; gap:24px; }
.tags{ display:flex; flex-wrap:wrap; gap:10px; }
.tag{
  background:var(--tint); color:var(--green-dark); font-weight:700; font-size:14px;
  padding:8px 16px; border-radius:var(--r-pill);
}

/* Galerie réalisations */
.gallery{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.gallery img{
  width:100%; height:clamp(300px,38vw,440px); object-fit:cover;
  border-radius:var(--r-card); box-shadow:var(--sh-img);
}
.project{
  background:var(--surface); border-radius:var(--r-card); overflow:hidden;
  box-shadow:0 12px 34px rgba(30,58,47,.1);
}
.project img{ width:100%; height:280px; object-fit:cover; display:block; }
.project-body{ padding:26px 28px; }
.project-body h2{ font-size:26px; margin:0 0 8px; }
.project-body p{ font-size:15.5px; color:var(--ink-2); }
.badge{
  display:inline-block; background:var(--tint); color:var(--green-dark);
  font-weight:700; font-size:13px; padding:6px 14px;
  border-radius:var(--r-pill); margin-bottom:12px;
}
.project-empty{
  background:#F4F2EA; border:2px dashed #C9CFBE; border-radius:var(--r-card);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:40px 28px; min-height:280px;
}
.project-empty h2{ font-size:24px; margin:0 0 8px; }
.project-empty p{ font-size:15px; color:#6B7A6E; margin:0 0 18px; max-width:34ch; }

/* À propos */
.about{
  display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(28px,5vw,64px);
  align-items:center; padding:clamp(44px,6vw,88px) var(--pad-x);
  max-width:1200px; margin:0 auto;
}
.about img{
  width:100%; height:clamp(340px,42vw,500px); object-fit:cover;
  border-radius:var(--r-md); box-shadow:var(--sh-img-lg);
}
.about p{ font-size:18px; color:var(--ink-2); margin:0 0 16px; }
.about p:last-of-type{ margin:0; }
.note{ font-size:13px; color:var(--ink-4); font-style:italic; margin-top:20px; }

/* ---------- Bloc CTA vert ---------- */
.cta{ padding:clamp(30px,5vw,72px) var(--pad-x); }
.cta-inner{
  max-width:1100px; margin:0 auto;
  background:linear-gradient(135deg,var(--green-dark),var(--green));
  border-radius:var(--r-lg); padding:clamp(40px,6vw,72px);
  text-align:center; color:#fff; box-shadow:var(--sh-cta);
}
.cta-inner p{ font-size:19px; color:var(--on-green-2); margin:0 0 32px; max-width:52ch; margin-inline:auto; }
.cta-foot{ font-size:13px; color:#D6E7CD; margin:26px 0 0; }

/* ---------- Contact ---------- */
.contact-grid{
  flex:1; max-width:1200px; width:100%; margin:0 auto;
  padding:clamp(40px,5vw,80px) var(--pad-x);
  display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(28px,4vw,64px);
  align-items:start;
}
.contact-grid > div:first-child p.lead{ margin:0 0 32px; max-width:44ch; font-size:18px; }
.info-list{ display:flex; flex-direction:column; gap:16px; }
.info-card{
  display:flex; align-items:center; gap:16px; background:var(--surface);
  border-radius:18px; padding:18px 22px; box-shadow:var(--sh-soft);
}
.info-card small{ display:block; font-size:13px; color:var(--ink-3); }
.info-card strong{ font-weight:700; font-size:17px; }
a.info-card:hover{ box-shadow:0 10px 28px rgba(30,58,47,.12); }

.form-card{
  background:var(--surface); border-radius:var(--r-md);
  padding:clamp(28px,3vw,44px); box-shadow:var(--sh-form);
}
.form-card h2{ font-size:26px; margin:0 0 22px; }
.field{
  display:flex; flex-direction:column; gap:7px;
  font-size:13px; font-weight:700; color:var(--ink-2); margin-top:16px;
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field-row .field{ margin-top:0; }
.field input,.field select,.field textarea{
  font-family:inherit; padding:13px 15px; border:1.5px solid var(--field-border);
  border-radius:var(--r-field); font-size:15px; background:var(--cream); color:var(--ink);
}
.field textarea{ resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--green); outline:none;
}
.form-card .btn{ margin-top:22px; width:100%; padding:16px; font-size:16px; }
.form-note{ font-size:12.5px; color:var(--ink-4); text-align:center; margin:14px 0 0; }
.form-error{
  margin-top:16px; padding:13px 16px; border-radius:var(--r-field);
  background:#FBEAEA; color:#8B2F2F; font-size:14.5px; font-weight:600;
}
.check-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.check-list li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:var(--ink-2); line-height:1.5; }
.check-list .ico{ width:20px; height:20px; stroke:var(--green); margin-top:3px; }
.sent-state{ text-align:center; padding:40px 12px; }
.sent-state .ico-box{
  width:72px; height:72px; border-radius:50%; margin:0 auto 20px;
}
.sent-state .ico{ width:34px; height:34px; }
.sent-state h2{ font-size:30px; margin:0 0 10px; }
.sent-state p{ font-size:16.5px; color:var(--ink-2); }

/* ---------- Contenu légal ---------- */
.legal{ max-width:820px; margin:0 auto; padding:clamp(40px,5vw,80px) var(--pad-x); }
.legal h2{ font-size:24px; margin:40px 0 12px; }
.legal p,.legal li{ font-size:16.5px; color:var(--ink-2); }
.legal ul{ padding-left:20px; }
.legal a{ color:var(--green); font-weight:600; }

/* ---------- Pied de page ---------- */
.site-footer{
  padding:30px var(--pad-x); display:flex; flex-wrap:wrap; gap:12px;
  align-items:center; justify-content:space-between;
  font-size:13px; color:var(--footer-ink);
}
.site-footer .cond{ font-size:16px; color:var(--ink); }
.site-footer a:hover{ color:var(--green); }
.footer-links{ display:flex; gap:16px; flex-wrap:wrap; }

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .burger{ display:flex; }
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:4px;
    padding:12px var(--pad-x) 20px;
    background:rgba(251,248,241,.98);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    box-shadow:0 18px 30px rgba(30,58,47,.1);
    display:none;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:13px 4px; font-size:17px; border-bottom:1px solid #EFEDE3; }
  .nav .btn{ margin-top:12px; border-bottom:none; padding:14px 24px; }
  .about,.contact-grid,.gallery,.grid-2{ grid-template-columns:1fr; }
  .about img{ height:clamp(240px,55vw,340px); }
  .service-row{ grid-template-columns:1fr; gap:20px; }
  /* Sur mobile le visuel remplit le cadre et c'est le texte qui donne la hauteur :
     le contenu ne peut jamais être rogné, quelle que soit la longueur du titre. */
  .hero-frame img{ position:absolute; inset:0; width:100%; height:100%; }
  .hero-veil{
    background:linear-gradient(180deg,rgba(20,40,30,.35) 0%,rgba(20,40,30,.88) 72%);
  }
  .hero-body{
    position:relative; inset:auto; justify-content:flex-end;
    min-height:clamp(460px,105vw,600px);
  }
  .field-row{ grid-template-columns:1fr; }
  .site-footer{ justify-content:center; text-align:center; }
}
@media (max-width:520px){
  .btn-row .btn{ width:100%; }
  .brand span{ font-size:21px; }
  .brand img{ height:46px; width:46px; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}

/* ---------- Lien de nav actif (piloté par body[data-page]) ---------- */
body[data-page="accueil"]      .nav a[href="index.html"],
body[data-page="services"]     .nav a[href="services.html"],
body[data-page="realisations"] .nav a[href="realisations.html"],
body[data-page="a-propos"]     .nav a[href="a-propos.html"],
body[data-page="contact"]      .nav a[href="contact.html"].btn{ color:var(--green); opacity:1; }
body[data-page="contact"] .nav a[href="contact.html"].btn{ color:#fff; }
.site-footer em{ color:var(--green); font-style:normal; }