/* ==========================================================================
   LE CIMENTIER — style.css
   Redesign: white + green, friendly and approachable, mascot-led branding.
   ========================================================================== */

:root{
  --white:          #FFFFFF;
  --cream:          #F7FAF6;   /* soft off-white background */
  --green-light:    #E7F3EA;   /* pale green section backgrounds */
  --green:          #2F8F4E;   /* primary brand green */
  --green-dark:     #256B3B;   /* hover / deep accent */
  --green-pale-txt: #3E8B58;
  --charcoal:       #26302B;   /* text, near-black with a green cast */
  --charcoal-soft:  #55625B;
  --gold:           #F4B942;   /* warm friendly accent, used sparingly */
  --border:         #DCE8DF;

  --font-display: "Baloo 2", "Nunito", sans-serif;
  --font-body: "Nunito", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Nunito", sans-serif; /* kept for label styling, no longer monospace */
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  background:var(--white);
  color:var(--charcoal);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
.container{ max-width:1180px; margin:0 auto; padding:0 24px; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:3px solid var(--green);
  outline-offset:2px;
}

/* ---------- Divider (lighter touch than before) ---------- */
.joint-line{
  height:4px;
  background:linear-gradient(90deg, var(--green) 0%, var(--gold) 100%);
  width:100%;
  opacity:.55;
  border:none;
}
.joint-vert{ display:none; }

/* ---------- Typography ---------- */
h1,h2,h3{ font-family:var(--font-display); font-weight:700; line-height:1.08; color:var(--charcoal); }
h1{ font-size:clamp(2.4rem, 6.5vw, 4.4rem); }
h2{ font-size:clamp(1.8rem, 4.5vw, 2.7rem); }
h3{ font-size:1.3rem; }
p{ max-width:62ch; }
.eyebrow{
  font-family:var(--font-body);
  font-weight:800;
  text-transform:uppercase;
  font-size:.78rem;
  letter-spacing:.1em;
  color:var(--green-dark);
  display:flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:""; width:22px; height:3px; border-radius:2px; background:var(--gold); display:inline-block; }
.lead{ font-size:1.12rem; color:var(--charcoal-soft); max-width:56ch; }

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font-body);
  font-weight:700;
  font-size:.95rem;
  display:inline-flex; align-items:center; gap:.6em;
  padding:.9em 1.7em;
  border-radius:999px;
  border:2px solid var(--green);
  background:transparent;
  color:var(--green-dark);
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(47,143,78,.18); }
.btn-primary{ background:var(--green); border-color:var(--green); color:var(--white); }
.btn-primary:hover{ background:var(--green-dark); border-color:var(--green-dark); }
.btn-ghost-light{ border-color:var(--white); color:var(--white); }
.btn-ghost-light:hover{ background:var(--white); color:var(--green-dark); }

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 24px;
  max-width:1180px; margin:0 auto;
}
.logo{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  color:var(--charcoal);
}
.logo img{ width:46px; height:46px; border-radius:12px; object-fit:cover; object-position:50% 35%; box-shadow:0 2px 8px rgba(38,48,43,.12); }
.logo .wordmark{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.4rem;
  letter-spacing:.01em;
}
.logo .wordmark span{ color:var(--green); }
nav ul{ list-style:none; display:flex; gap:26px; align-items:center; }
nav a{ text-decoration:none; font-weight:700; font-size:.95rem; color:var(--charcoal); padding:4px 0; }
nav a:hover{ color:var(--green); }
.nav-actions{ display:flex; align-items:center; gap:16px; }
.lang-switch{
  font-family:var(--font-body);
  font-weight:700;
  font-size:.8rem;
  border:2px solid var(--green);
  border-radius:999px;
  text-decoration:none;
  padding:.4em .85em;
  color:var(--green-dark);
}
.lang-switch:hover{ background:var(--green); color:#fff; }
.tel-link{
  font-family:var(--font-body);
  font-weight:700;
  text-decoration:none;
  font-size:.95rem;
  color:var(--green-dark);
  display:none;
}
.menu-toggle{ display:none; background:none; border:none; cursor:pointer; flex-direction:column; gap:5px; padding:8px; }
.menu-toggle span{ width:26px; height:3px; border-radius:2px; background:var(--charcoal); display:block; }

@media (min-width: 860px){ .tel-link{ display:inline; } }
@media (max-width: 900px){
  nav{ position:fixed; inset:70px 0 0 0; background:var(--white); display:none; padding:24px; overflow-y:auto; }
  nav.open{ display:block; }
  nav ul{ flex-direction:column; align-items:flex-start; gap:22px; }
  nav ul li{ width:100%; }
  nav a{ font-size:1.3rem; }
  .menu-toggle{ display:flex; }
}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(160deg, var(--green-light) 0%, var(--cream) 60%);
  color:var(--charcoal);
  position:relative;
  overflow:hidden;
}
.hero-inner{
  padding:80px 24px 64px;
  max-width:1180px; margin:0 auto;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:40px;
  align-items:center;
}
.hero h1{ margin:.25em 0 .3em; }
.hero h1 em{ font-style:normal; color:var(--green); }
.hero .lead{ color:var(--charcoal-soft); margin-bottom:2em; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:16px; }
.hero-mascot{ display:flex; justify-content:center; position:relative; }
.hero-mascot img{
  width:300px;
  height:auto;
  transform:rotate(-6deg);
  filter:drop-shadow(0 18px 26px rgba(47,143,78,.22));
}
@media (min-width:861px){
  .hero-mascot{ margin-left:-56px; }
}

.hero-badges{
  display:flex; flex-wrap:wrap; gap:28px;
  margin-top:56px;
  padding-top:24px;
  border-top:1px solid var(--border);
}
.hero-badge{ font-family:var(--font-body); font-size:.85rem; color:var(--charcoal-soft); }
.hero-badge b{ display:block; color:var(--green-dark); font-size:1.05rem; font-family:var(--font-display); }

@media (max-width:860px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-mascot{ order:-1; }
  .hero-mascot img{ width:150px; }
}

/* ---------- Sections ---------- */
section{ padding:76px 0; }
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head h2{ margin-top:.3em; }

/* ---------- Services ---------- */
.services-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.service-card{
  border:1px solid var(--border);
  border-radius:20px;
  padding:28px 24px;
  background:var(--white);
  box-shadow:0 4px 18px rgba(38,48,43,.05);
  transition:transform .15s ease, box-shadow .15s ease;
}
.service-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(38,48,43,.09); }
.service-icon{
  margin-bottom:16px;
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  background:var(--green-light);
  border-radius:14px;
}
.service-card h3{ margin-bottom:.5em; font-size:1.15rem; }
.service-card p{ color:var(--charcoal-soft); font-size:.95rem; }
.service-list{ list-style:none; margin-top:14px; font-size:.88rem; color:var(--charcoal-soft); }
.service-list li{ padding:.32em 0; border-top:1px dashed var(--border); }
.service-list li:first-child{ border-top:none; }

@media (max-width:1080px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .services-grid{ grid-template-columns:1fr; } }

/* ---------- Trust / stamp strip ---------- */
.stamp-strip{ background:var(--green); color:var(--white); }
.stamp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.stamp{ text-align:left; }
.stamp .ring{
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
  font-family:var(--font-display);
  font-weight:700;
  color:var(--white);
}
.stamp b{ display:block; font-family:var(--font-display); font-size:1.1rem; margin-bottom:.2em; }
.stamp span{ font-size:.88rem; color:#E4F3E9; }
@media (max-width:860px){ .stamp-grid{ grid-template-columns:repeat(2,1fr); row-gap:32px; } }

/* ---------- Gallery ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.gallery-tile{
  aspect-ratio:4/3;
  background:var(--green-light);
  border:1.5px dashed var(--green);
  border-radius:16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px;
  color:var(--green-dark);
  text-align:center;
  padding:16px;
}
.gallery-tile svg{ width:32px; height:32px; opacity:.7; }
.gallery-tile span{ font-family:var(--font-body); font-weight:700; font-size:.8rem; max-width:20ch; }
.gallery-photo{
  border-radius:16px;
  overflow:hidden;
  background:var(--white);
  border:1px solid var(--border);
  box-shadow:0 4px 14px rgba(38,48,43,.05);
}
.gallery-photo img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.gallery-photo figcaption{ padding:12px 14px; font-weight:700; font-size:.88rem; color:var(--charcoal-soft); }
.gallery-feature{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:300px 1fr;
  gap:28px;
  align-items:center;
  background:var(--green-light);
  border-radius:20px;
  padding:22px;
  border:1px solid var(--border);
}
.gallery-feature img{ width:100%; border-radius:14px; display:block; }
.gallery-feature h3{ margin-bottom:.3em; }
.gallery-feature p{ color:var(--charcoal-soft); font-size:.95rem; }
@media (max-width:760px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery-feature{ grid-template-columns:1fr; }
}

/* ---------- Service area ---------- */
.area-wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start; }
.area-list{
  list-style:none;
  display:grid; grid-template-columns:1fr 1fr; gap:10px 24px;
  font-family:var(--font-body); font-weight:700; font-size:.95rem;
}
.area-list li{ padding-left:1.3em; position:relative; }
.area-list li::before{
  content:"";
  position:absolute; left:0; top:.5em;
  width:9px; height:9px; border-radius:50%; background:var(--gold);
}
.area-card{ border-radius:20px; padding:32px; background:var(--green-light); border:1px solid var(--border); }
.area-card h3{ margin-bottom:.4em; }
@media (max-width:860px){ .area-wrap{ grid-template-columns:1fr; } }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--gold); color:var(--charcoal); }
.cta-band-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; }
.cta-band h2{ color:var(--charcoal); font-size:clamp(1.7rem,4vw,2.4rem); }
.cta-band .btn{ border-color:var(--charcoal); color:var(--charcoal); }
.cta-band .btn:hover{ background:var(--charcoal); color:var(--gold); }

/* ---------- Contact ---------- */
.contact-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.contact-info dl{ margin-top:24px; }
.contact-info dt{ font-family:var(--font-body); font-weight:800; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--green-dark); margin-top:20px; }
.contact-info dd{ font-size:1.1rem; margin-top:.2em; }
.contact-info a{ text-decoration:none; }
.contact-info a:hover{ color:var(--green); }

form{ display:flex; flex-direction:column; gap:16px; }
.field{ display:flex; flex-direction:column; gap:6px; }
label{ font-family:var(--font-body); font-weight:800; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--charcoal-soft); }
input, textarea, select{
  font-family:var(--font-body);
  font-size:1rem;
  padding:.85em .9em;
  border:1.5px solid var(--border);
  border-radius:12px;
  background:var(--white);
  color:var(--charcoal);
}
input:focus, textarea:focus, select:focus{ border-color:var(--green); }
textarea{ min-height:130px; resize:vertical; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:760px){ .contact-wrap{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } }
.form-note{ font-size:.82rem; color:var(--charcoal-soft); }

/* ---------- Footer ---------- */
footer{ background:var(--cream); color:var(--charcoal-soft); padding:52px 0 26px; border-top:1px solid var(--border); }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; padding-bottom:32px; }
.footer-grid h4{ font-family:var(--font-body); font-weight:800; text-transform:uppercase; font-size:.8rem; letter-spacing:.08em; color:var(--charcoal); margin-bottom:14px; }
.footer-logo{ display:flex; align-items:center; gap:10px; }
.footer-logo img{ width:38px; height:38px; border-radius:10px; object-fit:cover; object-position:50% 35%; }
.footer-logo .wordmark{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--charcoal); }
.footer-logo .wordmark span{ color:var(--green); }
footer ul{ list-style:none; }
footer ul li{ margin-bottom:8px; }
footer a{ text-decoration:none; color:var(--charcoal-soft); }
footer a:hover{ color:var(--green); }
.footer-bottom{
  border-top:1px solid var(--border);
  padding-top:20px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  font-size:.82rem;
}
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- Skip link ---------- */
.skip-link{ position:absolute; left:-999px; top:0; background:var(--green); color:#fff; padding:12px 18px; z-index:100; border-radius:0 0 8px 0; }
.skip-link:focus{ left:0; top:0; }