/* Solaris — brand: deep forest green #051F03 + lime #C2F32C on white (inspired by the Solarize template). */
:root {
  --lime: #c2f32c;        /* buttons, highlight cards, figures band */
  --lime-deep: #aedd17;   /* lime hover */
  --green: #2a6b12;       /* small green icons and text on white */
  --green-deep: #051f03;  /* = ink */
  --green-soft: #f2fcd6;  /* pale lime tiles */
  --green-light: #c2f32c; /* green on dark backgrounds */
  --ink: #051f03;
  --ink-2: #3a4a38;
  --muted: #6b7768;
  --line: #e3e9dc;
  --sand: #f5f7f2;
  --white: #fff;
  --dark: #051f03;
  --dark-2: #0c2e0c;
  --whatsapp: #25d366;
  --radius: 28px;
  --radius-sm: 18px;
  --shadow: 0 18px 40px -22px rgba(5, 31, 3, 0.35);
  --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
body {
  margin: 0;
  font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.12; margin: 0 0 0.5em; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); font-weight: 800; max-width: 20ch; line-height: 1.02; } /* tight, like the hero headline */
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; color: var(--ink-2); line-height: 1.35; } /* tighter than the body text default (1.6) */
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.i { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.95em 1.5em; border-radius: 12px; border: 2px solid transparent;
  font: inherit; font-weight: 700; font-size: 0.98rem; text-decoration: none; cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.btn:focus-visible, .choice:focus-within { outline: 3px solid rgba(5, 31, 3, 0.35); outline-offset: 2px; }
.btn-sm { padding: 0.65em 1.15em; font-size: 0.9rem; }
.btn-primary { background: var(--lime); color: var(--ink); }
.btn-primary:hover { background: var(--lime-deep); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--dark-2); }
.btn-light { background: #fff; color: var(--ink); }
.btn-ghost { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.btn-ghost:hover { border-color: #fff; }
.btn-outline { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-outline:hover { border-color: var(--ink); }
.btn-whatsapp { background: var(--whatsapp); color: #fff; }
.link-btn { background: none; border: 0; padding: 0; margin-top: 14px; font: inherit; font-weight: 600; color: var(--muted); text-decoration: underline; cursor: pointer; }

/* Section labels: outlined pills with a lime dot */
.kicker {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 0.45em 1.1em;
  border: 1px solid currentColor; border-radius: 999px;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0; color: var(--ink);
}
.kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1px rgba(5, 31, 3, 0.25); }
.kicker-light { color: var(--lime); }
.kicker-light::before { box-shadow: none; }

.sample-tag {
  display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: #8a5300; background: #ffe7a8; border: 1px dashed #d9a400;
}

/* ---------- slim strip: hours + phone ---------- */
.utility { background: #fff; }
.utility-row { display: flex; justify-content: flex-end; align-items: center; gap: 14px; height: 32px; font-size: 0.76rem; letter-spacing: 0.05em; white-space: nowrap; }
.utility-hours { text-transform: uppercase; color: var(--ink-2); }
.utility .sep { width: 1px; height: 14px; background: var(--ink); opacity: 0.3; }
.utility-phone { font-weight: 700; letter-spacing: 0.08em; }
.utility-phone a { text-decoration: none; }
.utility-phone a:hover { color: var(--green-deep); }

/* ---------- header: logo + menu + buttons on one row (sticky) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(1.4) blur(10px); transition: background-color 0.25s, box-shadow 0.25s;
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.header-row { position: relative; display: flex; align-items: stretch; gap: 20px; height: 60px; }
.brand { display: flex; align-items: center; }
.brand img { height: 26px; width: auto; }
.main-nav { display: flex; align-items: stretch; margin-left: auto; }
.main-nav > a, .nav-drop > a {
  display: flex; align-items: center; gap: 7px; height: 100%; padding: 0 13px; text-decoration: none;
  font-weight: 500; font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}
.main-nav > a:hover, .nav-drop:hover > a, .nav-drop:focus-within > a { color: var(--green); }
.main-nav a.active { box-shadow: inset 0 -3px 0 var(--lime); color: var(--ink); font-weight: 700; }
.main-nav .nav-mobile { display: none; }
/* Home icon in a lime rounded square, left of "Solutions" (desktop only: the phone menu has the "Accueil" link) */
.main-nav > a.nav-home { align-self: center; justify-content: center; width: 36px; height: 36px; padding: 0; margin-right: 6px; border-radius: 10px; border: 1px solid var(--lime); } /* lime outline, no fill */
.main-nav > a.nav-home:hover { background: var(--lime); }
.nav-home .i { width: 18px; height: 18px; color: inherit; }
.main-nav > a.nav-home:hover .i { color: var(--ink); }
/* "Produits" (the shop): shop icon and a lime outline; filled lime on the products page */
.main-nav > a.nav-shop { align-self: center; height: 36px; justify-content: center; padding: 0 14px; margin: 0 6px; border-radius: 10px; }
.main-nav > a.nav-shop:not(.active) { background: rgba(194, 243, 44, 0.35); } /* same lime as the home icon */
.main-nav > a.nav-shop:not(.active):hover { background: var(--lime); color: var(--ink); }
.nav-shop .i { display: block; width: 17px; height: 17px; }
.nav-shop span { line-height: 1; margin-right: -0.05em; } /* centres the label: cancels the letter spacing after the last letter */
.main-nav > a.nav-shop.active { box-shadow: none; background: var(--lime); color: var(--ink); }
.main-nav a.nav-cta { background: var(--green-soft); color: var(--green-deep); }
.caret { width: 9px; height: 6px; fill: currentColor; }
.nav-drop { position: relative; }
.drop-menu {
  position: absolute; top: 100%; left: 0; min-width: 260px; width: max-content; padding: 8px; background: #fff; border: 1px solid var(--line);
  border-radius: 0 0 18px 18px; box-shadow: var(--shadow); display: grid; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.nav-drop:hover .drop-menu, .nav-drop:focus-within .drop-menu { opacity: 1; visibility: visible; transform: none; }
.drop-menu a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; text-decoration: none; font-weight: 600; font-size: 0.92rem; white-space: nowrap; }
.drop-menu a:hover { background: var(--green-soft); color: var(--green-deep); }
.drop-menu .i { color: var(--green); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.btn-block { border-radius: 10px; padding: 0.7em 1.3em; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.btn-block .i { width: 15px; height: 15px; }
.menu-btn { display: none; width: 42px; height: 42px; border: 0; background: var(--sand); border-radius: 12px; cursor: pointer; position: relative; }
.menu-btn span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.2s; }
.menu-btn span:first-child { top: 16px; }
.menu-btn span:last-child { top: 24px; }
.menu-open .menu-btn span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-open .menu-btn span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Home page (body.has-hero): the hero photo runs up behind the hours strip and the menu, which are
   transparent with white text and a white logo; once you scroll (.is-scrolled) the menu turns white again. */
/* The hero is a rounded frame with a white gap (--gap) all around it, including above the hours strip */
.has-hero { --top: 92px; --gap: 12px; padding-top: var(--gap); } /* --top: hours strip 32px + menu 60px */
.has-hero .utility .wrap, .has-hero .site-header .wrap { width: min(var(--wrap), 100% - 2 * (var(--gap) + 16px)); }
.has-hero .utility { position: relative; z-index: 51; background: transparent; color: #fff; }
.has-hero .utility-hours { color: rgba(255, 255, 255, 0.85); }
.has-hero .utility .sep { background: #fff; opacity: 0.5; }
.has-hero .utility-phone a:hover { color: var(--lime); }
.has-hero .site-header:not(.is-scrolled) { background: transparent; backdrop-filter: none; }
.has-hero .site-header:not(.is-scrolled) .brand img { filter: brightness(0) invert(1); }
.has-hero.menu-open .site-header:not(.is-scrolled) { background: rgba(255, 255, 255, 0.96); }
.has-hero.menu-open .site-header:not(.is-scrolled) .brand img { filter: none; }
@media (min-width: 1041px) {
  .has-hero .site-header:not(.is-scrolled) .main-nav > a,
  .has-hero .site-header:not(.is-scrolled) .nav-drop > a { color: #fff; }
  .has-hero .site-header:not(.is-scrolled) .main-nav > a:hover,
  .has-hero .site-header:not(.is-scrolled) .nav-drop:hover > a { color: var(--lime); }
  .has-hero .site-header:not(.is-scrolled) .main-nav > a.nav-shop:hover { color: var(--ink); } /* dark on its lime fill, not lime on lime */
}

/* ---------- hero ---------- */
/* Hero block: the text, then the figures in one row under the buttons, centred over the video */
.hero-block {
  --peek: 150px;
  display: grid; grid-template: auto auto / 1fr; align-content: center;
  margin: clamp(16px, 2.5vw, 28px) 12px 0; /* white gap under the menu bar and at the sides */
  border-radius: 30px; overflow: hidden;
  min-height: calc(100svh - 92px - clamp(16px, 2.5vw, 28px) - var(--peek));
  position: relative; background: var(--dark) center / cover no-repeat; /* the photo, set by main.js */
}
.hero-block + .section { padding-top: clamp(32px, 3.5vw, 44px); } /* "Qui sommes-nous" sits close under the hero */
/* Under the menu: pulled up behind it, full width, rounded at the bottom only */
.has-hero .hero-block { margin: calc(-1 * var(--top)) var(--gap) 0; border-radius: 30px; min-height: calc(100svh - 2 * var(--gap) - 200px); } /* shorter than the first screen: the product strip shows below it */
.has-hero .hero-inner { margin-top: var(--top); } /* keeps the text clear of the menu */
.hero {
  position: relative; z-index: 2; overflow: hidden; color: #fff; padding: clamp(20px, 2.5vw, 36px) 0 0;
  display: flex; align-items: center;
  background:
    radial-gradient(circle at 78% 20%, rgba(21, 128, 61, 0.35), transparent 45%),
    linear-gradient(160deg, #18201b 0%, #0d110f 70%);
}
.hero.has-photo { background: transparent; } /* the photo is on .hero-block, behind the figures too */
/* Black gradient overlay over the whole photo, top to bottom: lighter over the sky, darkest behind the figures */
/* Background video: fills the block under the overlay (z 1), the hero text and the figures (z 2) */
.hero-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.hero-block::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.72) 50%, rgba(0, 0, 0, 0.88) 100%);
}
.hero-art { position: absolute; inset: 0; pointer-events: none; }
.hero-sun { position: absolute; width: min(620px, 70vw); height: min(620px, 70vw); right: -12%; top: -22%; fill: var(--green); opacity: 0.4; animation: spin 90s linear infinite; }
.hero-panels {
  position: absolute; right: -4%; bottom: -10%; width: 62%; height: 62%; opacity: 0.22; transform: perspective(900px) rotateX(58deg) rotateZ(-18deg);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.5) 2px, transparent 2px) 0 0 / 64px 100%,
    linear-gradient(0deg, rgba(255, 255, 255, 0.5) 2px, transparent 2px) 0 0 / 100% 40px,
    linear-gradient(135deg, #2c4f7c, #10233d);
  border-radius: 10px;
}
.has-photo .hero-art { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero-sun { animation: none; } html { scroll-behavior: auto; } }
.hero-inner { position: relative; z-index: 2; max-width: 640px; margin-left: max(16px, (100% - var(--wrap)) / 2); }
/* "BYD authorised distributor" badge: above the hero title and under the "Qui sommes-nous" text */
.byd-badge { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 5px 16px 5px 8px; border-radius: 12px; background: #fff; color: var(--ink); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em; }
.about-head .byd-badge { margin: 20px 0 0; padding-left: 0; } /* on the white page: the logo lines up with the text edge */
.about-head .byd-badge img { padding-left: 0; }
.byd-badge img { height: 32px; width: auto; padding: 3px 10px 3px 8px; border-right: 1px solid var(--line); }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.02; margin-bottom: 0.4em; }
.hero h1 em { font-style: normal; color: var(--green-light); }
.hero-text { color: rgba(255, 255, 255, 0.78); font-size: clamp(1.02rem, 1.6vw, 1.18rem); line-height: 1.35; max-width: 62ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Figures: one row of six under the buttons, split by thin lime dividers */
.hero { grid-area: 1 / 1; }
.stats-band { grid-area: 2 / 1; position: relative; z-index: 2; color: #fff; margin: clamp(26px, 4vh, 44px) 0 clamp(16px, 2vw, 24px); }
.stats {
  list-style: none; margin: 0; padding: 22px 26px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; /* one column per figure */
  background: rgba(194, 243, 44, 0.2); border-radius: 24px; /* lime at 20% */
}
.stats li { padding: 4px 12px; border-left: 1px solid rgba(255, 255, 255, 0.35); }
.stats li:first-child { border-left: 0; padding-left: 0; }
.stat-value { font-size: clamp(1.7rem, 2.6vw, 2.4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--lime); white-space: nowrap; }
.stat-value small { font-size: 0.42em; margin-left: 3px; letter-spacing: 0; }
.stat-label { margin-top: 6px; color: #fff; font-size: 0.88rem; font-weight: 500; line-height: 1.35; }

/* ---------- sections ---------- */
.section { padding: clamp(72px, 9vw, 120px) 0; }
.section-sand { background: #fff; }  /* kept white on request; was the warm off-white */
.section-dark { background: var(--dark); color: #fff; margin: 0 12px; border-radius: 30px; }
.section-dark p { color: rgba(255, 255, 255, 0.7); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.section-lead { max-width: 40ch; }

/* who we are: the photo on the left (almost half), as tall as the section; on the right the pill, heading + text, the
   vision + mission cards, then the buttons */
.about { overflow-x: clip; }
.about-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "photo kicker" "photo head" "photo cards" "photo cta"; column-gap: clamp(28px, 4vw, 56px); row-gap: 24px;
}
.about-kicker { grid-area: kicker; align-self: start; justify-self: start; margin: 0 0 -8px; white-space: nowrap; }
.about-head { grid-area: head; }
.about-head h2 { font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.02; max-width: none; margin-bottom: 0.45em; }
.about-text { margin: 0; font-size: 1.08rem; }
.about-text strong { color: var(--ink); }
/* Two pill buttons, outline only: lime "Nos solutions", dark "Nos services"; filled on hover */
.about-ctas { grid-area: cta; align-self: start; justify-self: start; display: flex; flex-wrap: wrap; gap: 12px; }
.about-ctas .btn { gap: 10px; padding: 0.5em 1.4em; border: 1.5px solid; border-radius: 999px; background: transparent; color: var(--ink); white-space: nowrap; }
.about-ctas .btn-dark { border-color: var(--lime); }
.about-ctas .btn-dark:hover { background: var(--lime); }
.about-ctas .btn-outline { border-color: var(--ink); }
.about-ctas .btn-outline:hover { background: var(--ink); color: #fff; }
.about-ctas .btn-soft { background: var(--green-soft); border-color: transparent; }
.about-ctas .btn-soft:hover { background: var(--lime); border-color: transparent; color: var(--ink); }
.about-ctas .cta-ico { display: inline-flex; background: none; color: inherit; }
.cta-ico .i { width: 16px; height: 16px; }
.about-photo { grid-area: photo; position: relative; min-height: 520px; border-radius: var(--radius); overflow: hidden; }
/* The photo fills its column (it does not set the row height itself) */
.about-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.about-cards { grid-area: cards; align-self: end; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.about-card { border-radius: var(--radius); padding: 30px 28px; }
.about-card h3 { font-size: 1.2rem; margin-bottom: 0.5em; }
.about-card p { margin: 0; font-size: 0.88rem; line-height: 1.35; }
.about-vision { background: var(--ink); color: #fff; }
.about-vision p { color: rgba(255, 255, 255, 0.8); }
.about-mission { background: var(--lime); color: var(--ink); }
.about-mission p { color: rgba(5, 31, 3, 0.82); }

/* Scroll-in effects (main.js adds .reveal-on to <html> and .is-in to each element as it comes on screen) */
.reveal-on [data-reveal] { opacity: 0; }
.reveal-on [data-reveal="left"].is-in { animation: reveal-left 2s ease var(--reveal-delay, 0s) both; }
.reveal-on [data-reveal="down"].is-in { animation: reveal-down 1s ease var(--reveal-delay, 0s) both; }
.reveal-on [data-reveal="fade"].is-in { animation: reveal-fade 2s ease var(--reveal-delay, 0s) both; }
.reveal-on [data-reveal="up"].is-in { animation: reveal-up 2s ease var(--reveal-delay, 0s) both; }
.reveal-on [data-reveal="right"].is-in { animation: reveal-right 2s ease var(--reveal-delay, 0s) both; }
@keyframes reveal-left { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes reveal-down { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: none; } }
@keyframes reveal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes reveal-up { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }
@keyframes reveal-right { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: none; } }
/* Slides from the side must not widen the page */
main { overflow-x: clip; }

/* homes / businesses */
/* 5 solutions on one row (compact cards); 2 per row on tablets, 1 on phones */
.split { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 40px; }
.door {
  position: relative; overflow: hidden; padding: 24px 20px; border-radius: var(--radius);
  background: var(--ink) center / cover no-repeat; color: #fff; display: flex; flex-direction: column; /* the photo is set on each card in index.html */
}
/* Darkens the photo so the white text stays readable */
.door::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 31, 3, 0.45) 0%, rgba(5, 31, 3, 0.8) 40%, rgba(5, 31, 3, 0.94) 100%); }
.door > * { position: relative; }
.door p, .door .ticks li { color: rgba(255, 255, 255, 0.88); }
.door .ticks .i { color: var(--lime); }
.door h3 { font-size: 1.2rem; line-height: 1.05; }
.door p, .door .ticks li { line-height: 1.25; } /* tighter lines in the solution cards */
.door p { font-size: 0.9rem; }
.door .ticks { gap: 8px; margin-bottom: 22px; }
.door .ticks li { align-items: flex-start; gap: 8px; font-size: 0.86rem; }
.door .ticks .i { flex: none; width: 1.1em; height: 1.1em; margin-top: 0.05em; }
.door .btn { line-height: 1.15; padding: 0.85em 1em; font-size: 0.86rem; }
.door-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--lime); color: var(--ink); margin-bottom: 16px; }
.door-icon .i { width: 24px; height: 24px; }
.ticks { list-style: none; padding: 0; margin: 4px 0 28px; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: center; font-weight: 600; color: var(--ink-2); }
.ticks .i { color: var(--green); }
.door .btn { margin-top: auto; align-self: stretch; background: var(--lime); color: var(--ink); } /* every card: lime button on the dark photo */
.door .btn:hover { background: var(--lime-deep); }

/* steps */
.steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; counter-reset: s; }
.steps li { position: relative; display: flex; flex-direction: column; min-height: 320px; background: var(--ink); color: #fff; border-radius: var(--radius); padding: 32px 24px; }
.steps .i { width: 34px; height: 34px; color: var(--lime); margin-bottom: 18px; }
.step-n {
  position: absolute; top: 22px; right: 22px; display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 14px; background: var(--lime); color: var(--ink); font-weight: 800; font-size: 1.1rem; line-height: 1;
}
.steps p { margin: 0; font-size: 0.95rem; color: rgba(255, 255, 255, 0.75); }
.step-link { margin-top: auto; padding-top: 16px; font-weight: 700; font-size: 0.92rem; color: var(--lime); text-decoration: none; } /* at the bottom of every card */
.step-link:hover { text-decoration: underline; }

/* projects */
.projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.project { border-radius: var(--radius); overflow: hidden; background: var(--dark-2); border: 2px solid rgba(194, 243, 44, 0.35); transition: border-color 0.2s; }
.project:hover { border-color: var(--lime); }
.project-media { position: relative; aspect-ratio: 16 / 10; background-size: cover; background-position: center; }
.project-media.drawn {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.28) 2px, transparent 2px) 0 0 / 46px 100%,
    linear-gradient(0deg, rgba(255, 255, 255, 0.28) 2px, transparent 2px) 0 0 / 100% 30px,
    linear-gradient(150deg, #34598a, #142b47 70%);
}
.project-media.drawn::after { content: ""; position: absolute; width: 90px; height: 90px; right: 18px; top: 16px; border-radius: 50%; background: radial-gradient(circle, #fff3c4, #f7c948 55%, transparent 70%); opacity: 0.75; } /* the sun in the drawn placeholder */
.project-kind { position: absolute; left: 14px; top: 14px; z-index: 1; padding: 5px 12px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.project[data-project] { cursor: pointer; } /* opens the project pop-up */
.project[data-project]:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.project-body { padding: 18px 20px 20px; display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.project-body h3 { margin: 0 0 4px; }
.project-city { display: flex; align-items: center; gap: 5px; color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; }
.project-city .i { width: 1em; height: 1em; }
.project-kwp { text-align: right; font-weight: 800; font-size: 1.6rem; line-height: 1; color: var(--green-light); white-space: nowrap; }
.project-kwp small { font-size: 0.55em; color: rgba(255, 255, 255, 0.6); margin-left: 2px; }

/* services */

/* partners */
.partners-band { padding: 26px 0 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.partners-title { max-width: none; margin: 0; text-align: center; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.8rem; color: var(--muted); }
/* Scrolling logo band: two identical lists slide left by one list's width, then start again */
.marquee {
  margin-top: 14px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 80s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.partners { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.partners li { flex: none; display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 24px; font-weight: 800; font-size: 1rem; color: #a9b2ac; }
.partners img { height: 28px; width: auto; max-width: 120px; object-fit: contain; }
.logo-invert { filter: invert(1) hue-rotate(180deg); }  /* white logo text → dark, colours kept */
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; width: auto; }
  .partners { flex-wrap: wrap; justify-content: center; }
  .partners[aria-hidden] { display: none; }
}

/* testimonials */
.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.testimonial { margin: 0; background: var(--ink); color: #fff; border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; }
.testimonial blockquote { margin: 0 0 22px; font-size: 1.02rem; font-weight: 500; color: #fff; }
.testimonial blockquote::before {
  content: "“"; display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px;
  border-radius: 14px; background: var(--lime); color: var(--ink); font-size: 2.6rem; line-height: 1; padding-top: 0.32em; font-weight: 800;
}
.testimonial footer { margin-top: auto; font-weight: 700; }
.testimonial .t-place { display: block; font-weight: 500; color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; }

/* quote */
.quote-section { background: #fff; }
.quote-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.quote-box { background: #fff; border-radius: var(--radius); padding: clamp(22px, 4vw, 36px); box-shadow: var(--shadow); border: 1px solid var(--line); }
/* The form floats on the right of the screen, under the menu, its edge in line with the page blocks; closed, only the tab on the screen edge stays */
.quote-panel {
  position: fixed; top: 104px; right: 16px; z-index: 70; width: min(330px, 100% - 32px); height: var(--quote-h, min(530px, 100svh - 122px)); max-height: calc(100svh - 122px); overflow-y: auto; overscroll-behavior: contain;
  padding: 20px 22px 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45);
  opacity: 0; visibility: hidden; transform: translateX(24px); transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}
.quote-open .quote-panel { opacity: 1; visibility: visible; transform: none; }
.quote-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.quote-panel-head h2 { margin: 0 0 2px; font-size: 1.35rem; }
.quote-panel-head p { margin: 0; font-size: 0.9rem; color: var(--muted); }
.quote-close { flex: none; width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--green-soft); color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.quote-close:hover { background: var(--line); }
/* Compact form inside the panel, so it stays short: icon beside the text, smaller titles and gaps */
.quote-panel { padding: 26px 18px 18px; display: flex; flex-direction: column; }
.quote-panel .quote-card { flex: 1 0 auto; display: flex; flex-direction: column; } /* fills the panel; the buttons sit at its bottom */
.quote-panel-head { margin-bottom: 10px; padding-right: 40px; }
.quote-panel .quote-close { position: absolute; top: 10px; right: 10px; } /* × stays in the top right corner */
.quote-panel-head h2 { font-size: 1.15rem; }
.quote-panel-head p { font-size: 0.85rem; }
.quote-panel .quote-progress { margin-bottom: 12px; }
.quote-panel .qstep legend { font-size: 1.05rem; margin-bottom: 10px; }
.quote-panel .choices { gap: 8px; grid-auto-rows: minmax(73px, 1fr); } /* same height on every step */
.quote-panel .choice { flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; min-height: 0; padding: 10px; font-size: 0.85rem; line-height: 1.2; }
.quote-panel .choice .i { flex: none; width: 22px; height: 22px; }
.quote-panel .fields { gap: 10px; }
.quote-panel .field input, .quote-panel .field textarea { padding: 0.6em 0.8em; }
.quote-panel .summary { padding: 12px 14px; margin-bottom: 12px; font-size: 0.88rem; }
.quote-panel .quote-nav { margin-top: auto; padding-top: 14px; }
.quote-panel .quote-nav .btn { padding: 0.7em 1.2em; }
.quote-tab {
  position: fixed; top: 50%; right: 0; z-index: 60; padding: 18px 10px; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
  background: var(--lime); color: var(--ink); border-radius: 0 12px 12px 0; font-weight: 700; font-size: 0.9rem; text-decoration: none; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.4);
}
.quote-tab:hover { background: var(--lime-deep); }
.quote-open .quote-tab { display: none; }
/* Centred and larger (quote links marked data-quote-center: the solutions): over a dimmed page */
.quote-backdrop { position: fixed; inset: 0; z-index: 95; background: rgba(5, 31, 3, 0.55); opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; }
.quote-centred .quote-backdrop { opacity: 1; visibility: visible; }
.quote-centred { overflow: hidden; }
.quote-centred.quote-open .quote-panel {
  top: 50%; right: auto; bottom: auto; left: 50%; z-index: 96; width: min(580px, 100% - 32px); height: auto; max-height: calc(100svh - 48px);
  padding: 34px 32px 30px; transform: translate(-50%, -50%); transition: opacity 0.2s, visibility 0.2s;
  opacity: 1; visibility: visible; /* even while the home page's own quote section is on screen, which hides the floating panel */
}
.quote-centred .quote-panel-head h2 { font-size: 1.6rem; }
.quote-centred .quote-panel-head p { font-size: 0.98rem; }
.quote-centred .quote-panel .qstep legend { font-size: 1.3rem; margin-bottom: 14px; }
.quote-centred .quote-panel .choices { gap: 12px; grid-auto-rows: minmax(64px, 1fr); }
.quote-centred .quote-panel .choice { gap: 10px; padding: 14px 16px; font-size: 0.98rem; }
.quote-centred .quote-panel .choice .i { width: 26px; height: 26px; }
.quote-centred .quote-panel .field input, .quote-centred .quote-panel .field textarea { padding: 0.8em 1em; }
.quote-centred .quote-panel .quote-nav { padding-top: 22px; }
.quote-centred .quote-panel .quote-nav .btn { padding: 0.9em 1.5em; }
.quote-centred .quote-tab { display: none; }
.quote-instant .quote-panel { transition: none; }
.quote-here .quote-panel, .quote-here .quote-tab { opacity: 0; visibility: hidden; } /* while the section with the same form is on screen */
.quote-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.quote-progress .bar { flex: 1; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.quote-progress i { display: block; height: 100%; width: 20%; background: var(--ink); border-radius: 6px; transition: width 0.3s ease; }
.qstep { border: 0; margin: 0; padding: 0; min-width: 0; }
.qstep legend { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 16px; padding: 0; }
.hint { margin-top: -8px; font-size: 0.92rem; }
.choices { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 12px; } /* every answer button the same height */
.choices-3 { grid-template-columns: repeat(3, 1fr); }
.choice {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 10px; min-height: 64px;
  padding: 16px; border-radius: var(--radius-sm); border: 2px solid var(--line); cursor: pointer; font-weight: 700;
  transition: border-color 0.15s, background-color 0.15s;
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .i { width: 28px; height: 28px; color: var(--green); }
.choice:hover { border-color: var(--lime-deep); }
.choice:has(input:checked) { border-color: var(--ink); background: var(--green-soft); }
.quote-box .choice { flex-direction: row; align-items: center; justify-content: flex-start; } /* section form: icon and text on one line */
.quote-box .choice .i { flex: none; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: grid; gap: 6px; font-weight: 700; font-size: 0.9rem; }
.field-wide { grid-column: 1 / -1; }
.field input, .field textarea {
  width: 100%; min-width: 0;
  font: inherit; font-weight: 500; padding: 0.8em 1em; border-radius: 12px; border: 2px solid var(--line); background: #fff; color: var(--ink); resize: vertical;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.form-error { color: #b42318; font-weight: 700; margin: 12px 0 0; }
.summary { white-space: pre-wrap; font: inherit; font-size: 0.95rem; background: var(--sand); border-radius: var(--radius-sm); padding: 16px 18px; margin: 0 0 18px; border: 1px solid var(--line); }
.send-row { display: flex; flex-wrap: wrap; gap: 10px; }
.quote-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.quote-nav [hidden] { display: none; }

/* faq */
.faq-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(28px, 5vw, 64px); }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 22px; margin-bottom: 12px; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 46px 20px 0; font-weight: 700; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: 1.3rem; font-weight: 600; line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 20px; }

/* footer */
.site-footer { color: var(--ink); padding: 0 0 24px; font-size: 0.9rem; line-height: 1.2; } /* plain, on the page background */
.site-footer > .footer-grid { padding-top: 40px; border-top: 1px solid var(--line); } /* a thin line between the page and the footer */
main > section:last-child { padding-bottom: clamp(56px, 7vw, 88px); } /* the last section sits right above the footer */
.site-footer p { color: var(--muted); max-width: 34ch; }
.site-footer h3 { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.footer-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 36px 56px; } /* the contact column is as wide as its longest line */
@media (min-width: 861px) { .contact-list li span { white-space: nowrap; } } /* the address on one line */
.footer-brand { display: inline-flex; margin-bottom: 12px; }
.footer-brand img { width: auto; height: 30px; }
.contact-list, .footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.contact-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-2); }
.contact-list .i { flex: none; margin-top: 0.05em; color: var(--green); }
.contact-list a, .footer-links a { text-decoration: none; color: var(--ink-2); }
.contact-list a:hover, .footer-links a:hover { color: var(--green-deep); text-decoration: underline; }
.footer-bottom { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.8rem; }

.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; background: var(--whatsapp); color: #fff; box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s, opacity 0.2s, visibility 0.2s;
}
.wa-float:hover { transform: scale(1.06); }
.wa-away .wa-float { opacity: 0; visibility: hidden; transform: translateY(16px); } /* while the home product strip is on screen */
.wa-float svg { width: 30px; height: 30px; }
/* Back to top: a small dark square above the WhatsApp button, shown once you have scrolled a screen */
.to-top {
  position: fixed; right: 26px; bottom: 96px; z-index: 60; display: grid; place-items: center; width: 42px; height: 42px;
  border: 0; border-radius: 12px; background: var(--ink); color: var(--lime); cursor: pointer; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.4);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--dark-2); }
.to-top .i { width: 20px; height: 20px; transform: rotate(-90deg); }

/* ---------- products page ---------- */
.page-head { padding: clamp(24px, 3.5vw, 44px) 0 0; } /* close under the menu */
.page-head h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); font-weight: 800; line-height: 1.02; max-width: 22ch; margin-bottom: 0.35em; }
.page-lead { max-width: 60ch; margin-bottom: 0; font-size: 1.05rem; line-height: 1.3; }
/* Heading with two figures (Solutions and Services pages): text on the left, two big figures on the right, side by side with a thin line between them */
.head-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; column-gap: clamp(28px, 4vw, 64px); }
.head-split .jump { grid-column: 1 / -1; }
/* keeps clear of the floating quote form (330px + 16px from the edge) when the screen is not wide enough to leave room for it */
@media (min-width: 761px) { .head-split { padding-right: max(0px, min(354px, 960px - 50vw)); } }
@media (min-width: 861px) and (max-width: 1180px) {
  .head-split { grid-template-columns: minmax(0, 1fr); }
  .head-stats { justify-self: start; margin-top: 28px; }
  .head-stat:first-child { padding-left: 0; }
}
.head-stats { display: grid; grid-template-columns: 1fr 1fr; }
.head-stat { padding: 4px clamp(18px, 2.4vw, 32px); }
.head-stat + .head-stat { border-left: 1px solid var(--line); }
.head-stat strong { display: block; font-size: clamp(2.2rem, 4.2vw, 3.4rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
.head-stat span { display: block; max-width: 14ch; margin-top: 10px; font-size: 1.15rem; font-weight: 700; line-height: 1.1; }
@media (max-width: 860px) {
  .head-split { grid-template-columns: minmax(0, 1fr); }
  .head-stats { margin-top: 28px; }
  .head-stat:first-child { padding-left: 0; }
}
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.chip {
  font: inherit; font-weight: 700; font-size: 0.9rem; padding: 0.6em 1.2em; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink); transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.section-tight { padding-top: 32px; }
.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.products[hidden], .accessories[hidden], .product[hidden] { display: none; }
.product { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; transition: box-shadow 0.2s, border-color 0.2s; }
.product:hover { border-color: var(--lime-deep); box-shadow: var(--shadow); }
.product-media { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--green-soft) center / cover no-repeat; color: var(--ink); }
.product-media .i { width: 92px; height: 92px; stroke-width: 1; }
/* Product photos are cut-outs on white: shown whole, not cropped */
.product-media.has-image { background-color: #fff; background-size: contain; background-origin: content-box; padding: 22px; border-bottom: 1px solid var(--line); }
.product-cat { position: absolute; left: 14px; top: 14px; padding: 5px 12px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.product-body { display: flex; flex-direction: column; flex: 1; padding: 22px; }
.product-brand { margin: 0 0 4px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.product-body h3 { font-size: 1.3rem; margin-bottom: 6px; }
.product-body .product-price { margin: 0 0 10px; font-size: 1.15rem; font-weight: 800; color: var(--ink); }
.cur { margin-left: 1px; font-size: 0.72em; font-weight: 600; color: var(--muted); } /* the "FCFA" after a price */
.product-body .product-price.is-ask { font-size: 0.92rem; font-weight: 700; color: var(--muted); }
.product-body > p:not(.product-brand):not(.product-price) { font-size: 0.95rem; }
.specs { margin: 4px 0 22px; display: grid; gap: 0; border-top: 1px solid var(--line); }
.specs div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.specs dt { color: var(--muted); }
.specs dd { margin: 0; font-weight: 700; text-align: right; }
.product-actions { margin-top: auto; display: flex; align-items: center; gap: 8px; }
.product-add { flex: 1; padding-inline: 1em; font-size: 0.92rem; }
.product-add.is-added { background: var(--ink); color: var(--lime); }
.product-ask { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; color: var(--whatsapp); }
.product-ask:hover { border-color: var(--whatsapp); }
.product-ask .i { width: 22px; height: 22px; }
.product-acc .product-media .i { width: 56px; height: 56px; }
/* Compact card: the photo and the name are buttons that open the quick view */
.product-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.product-open .product-media { transition: transform 0.3s; }
.product:hover .product-open .product-media { transform: scale(1.02); }
.product-title { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.product-title:hover { text-decoration: underline; text-decoration-color: var(--lime-deep); text-underline-offset: 3px; }
.product-body h3 { font-size: 1.05rem; font-weight: 400; line-height: 1.2; }
.product-body .product-price { margin-bottom: 14px; }

/* Quick view window */
.qv-backdrop { position: fixed; inset: 0; z-index: 92; background: rgba(5, 31, 3, 0.55); }
.qv-backdrop[hidden], .qv[hidden] { display: none; }
.qv { position: fixed; inset: 0; z-index: 93; margin: auto; width: min(940px, 100% - 32px); height: fit-content; max-height: calc(100% - 48px);
  overflow: auto; background: #fff; border-radius: var(--radius); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45); }
.qv-open { overflow: hidden; }
.qv-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 10px;
  background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.qv-body { display: grid; grid-template-columns: 1fr 1fr; }
.qv-media .product-media { height: 100%; min-height: 380px; aspect-ratio: auto; }
.qv-media .product-media .i { width: 120px; height: 120px; }
.qv-info { display: flex; flex-direction: column; gap: 10px; padding: 36px 32px 28px; }
.qv-info h2 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); max-width: none; }
.qv-info .product-brand { margin: 0; }
.qv-info .product-price { margin: 0; font-size: 1.4rem; }
.qv-info .product-price.is-ask { font-size: 1rem; }
.qv-text { margin: 4px 0 0; font-size: 0.98rem; }
.qv-info .specs { margin: 6px 0 10px; }
.qv-info .product-actions { margin-top: auto; padding-top: 6px; }
/* Details dialog: wider, photo stays in view while the details scroll */
.qv { width: min(1040px, 100% - 32px); }
.qv-media { position: sticky; top: 0; align-self: start; height: min(620px, calc(100vh - 48px)); border-right: 1px solid var(--line); }
.qv-media .product-media { min-height: 0; border-bottom: 0; }
.qv-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; }
.qv-cat { padding: 4px 12px; border-radius: 999px; background: var(--green-soft); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.qv-sub { margin: 14px 0 2px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.qv-info .specs { margin: 4px 0 4px; }
.qv-sheet { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; transition: border-color 0.2s, background 0.2s; }
.qv-sheet:hover { border-color: var(--lime-deep); background: var(--green-soft); }
.qv-sheet-ico { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: var(--green-soft); }
.qv-sheet-ico .i { width: 22px; height: 22px; }
.qv-sheet strong { display: block; font-size: 0.95rem; }
.qv-sheet small { display: block; font-size: 0.8rem; color: var(--muted); }
.qv-sheet-dl { flex: none; width: 20px; height: 20px; margin-left: auto; }
.qv-sheet.is-ask .qv-sheet-dl { color: var(--whatsapp); }
@media (max-width: 760px) {
  .qv { width: calc(100% - 16px); max-height: calc(100% - 16px); }
  .qv-body { grid-template-columns: 1fr; }
  .qv-media { position: static; height: 240px; border-right: 0; border-bottom: 1px solid var(--line); }
  .qv-media .product-media { min-height: 220px; }
  .qv-info { padding: 22px 20px 20px; }
}
.accessories { margin-top: clamp(56px, 7vw, 88px); }
.accessories h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.acc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 28px; }
.acc-group { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.acc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.acc-head .i { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--lime); color: var(--ink); }
.acc-head h3 { margin: 0; font-size: 1.08rem; }
.acc-group ul { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.acc-group li { position: relative; padding-left: 16px; font-size: 0.92rem; color: var(--ink-2); }
.acc-group li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.acc-ask { margin-top: auto; font-weight: 700; font-size: 0.9rem; color: var(--green-deep); text-decoration: none; }
.acc-ask:hover { text-decoration: underline; }

/* Shop (products page): filters on the left, product grid on the right */
.shop-layout { display: grid; grid-template-columns: 250px 1fr; gap: 32px; align-items: start; }
.shop-filters { position: sticky; top: calc(var(--head-h, 60px) + var(--bar-h, 121px) + 20px); max-height: calc(100vh - var(--head-h, 60px) - var(--bar-h, 121px) - 40px); overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); }
.shop-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.shop-search:focus-within { border-color: var(--ink); }
.shop-search .i { width: 15px; height: 15px; color: var(--muted); }
.shop-search input { flex: 1; width: 100%; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 0.78rem; }
.filter-group[hidden] { display: none; }
.filter-group h3 { margin: 0 0 6px; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.filter-list { display: grid; gap: 0; }
.filter-check span { font-size: 0.66rem; font-weight: 700; opacity: 0.6; }
.filter-check { display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-weight: 600; font-size: 0.76rem; cursor: pointer; }
.filter-check input { width: 13px; height: 13px; margin: 0; accent-color: var(--ink); }
.filter-check span { margin-left: auto; }
.filter-reset { justify-self: start; padding: 0; border: 0; background: none; font: inherit; font-size: 0.74rem; font-weight: 700; color: var(--green-deep); text-decoration: underline; cursor: pointer; }
.shop-sort { display: grid; gap: 6px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } /* under the search box */
.shop-sort select { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; font-size: 0.76rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.shop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
/* Smaller cards, 4 per row: tighter photo, text and buttons */
.shop-grid .product-media.has-image { padding: 14px; }
.shop-grid .product-media .i { width: 64px; height: 64px; }
.shop-grid .product-body { padding: 14px; }
.shop-grid .product-body h3 { font-size: 0.95rem; }
.shop-grid .product-body .product-price { margin-bottom: 10px; font-size: 1rem; }
.shop-grid .product-add { padding: 0.7em 0.6em; font-size: 0.82rem; }
.shop-grid .product-ask { width: 38px; height: 38px; border-radius: 10px; }
.shop-grid .product-ask .i { width: 19px; height: 19px; }
@media (max-width: 1280px) { .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.shop-empty { display: grid; justify-items: center; gap: 6px; padding: 48px 0; text-align: center; }
.shop-empty[hidden] { display: none; }
.shop-empty .filter-reset { justify-self: center; }

/* Product strip under the hero (like a shop's product bar): scrolls sideways, with arrows on wide screens */
.shop-strip { margin: var(--gap) var(--gap) 0; border-radius: 30px; background: var(--sand); }
.strip-row { display: flex; align-items: center; gap: 8px; }
.shop-strip .strip-row { width: auto; margin-inline: 20px; } /* full width of the strip: arrows and button at its right edge */
.strip-arrow { flex: none; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; font-size: 1.4rem; line-height: 1; color: var(--ink); cursor: pointer; }
.strip-arrow:hover:not(:disabled) { border-color: var(--ink); }
.strip-arrow:disabled { opacity: 0.35; cursor: default; }
/* "+" after the arrows: opens the whole catalogue */
.strip-more { flex: none; display: flex; align-items: center; gap: 8px; height: 36px; margin-left: 4px; padding: 0 8px 0 14px; border-radius: 10px; background: var(--lime); color: var(--ink); font-size: 0.85rem; font-weight: 700; white-space: nowrap; text-decoration: none; }
.strip-more b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--ink); color: var(--lime); font-size: 1.1rem; line-height: 1; }
.strip-more:hover { background: var(--lime-deep); }
.shop-strip-list { flex: 1; min-width: 0; display: flex; gap: 6px; margin: 0; padding: 8px 0; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.shop-strip-list::-webkit-scrollbar { display: none; }
.shop-strip-list li { flex: 0 0 auto; scroll-snap-align: start; }
.shop-strip-list a { display: grid; justify-items: center; align-content: start; gap: 4px; width: 140px; height: 100%; padding: 8px 6px; border-radius: 18px; text-align: center; text-decoration: none; }
.strip-media { display: grid; place-items: center; width: 52px; height: 52px; overflow: hidden; border-radius: 14px; background: #fff; color: var(--green); }
.strip-media img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.strip-media .i { width: 26px; height: 26px; }
.strip-label { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.84rem; font-weight: 400; line-height: 1.2; }
.shop-strip-list small { font-size: 0.75rem; color: var(--muted); }
.shop-strip-list small.has-price { font-weight: 800; color: var(--ink); }
/* the product opened from the strip */
.product.is-picked { border-color: var(--lime-deep); box-shadow: 0 0 0 3px var(--lime); }
.shop-strip + .section { padding-top: clamp(40px, 5vw, 64px); }
/* Home page: tighter gaps from "Qui sommes-nous" down to the quote form */
/* "Nos services" and "Nos solutions" in one rounded lime block, like the figures box */
.about:has(+ .lime-block) { padding-bottom: clamp(40px, 5vw, 64px); }
.lime-block {
  --svc-below: clamp(48px, 6vw, 80px); --sol-above: clamp(40px, 5vw, 64px); /* space under the service cards / above "Nos solutions": the notch fills it */
  width: min(1340px, 100% - 2 * var(--gap)); margin: 0 auto; border-radius: 48px; background: rgba(194, 243, 44, 0.2);
}
.lime-block > #services { padding: clamp(48px, 6vw, 88px) 0 var(--svc-below); background: none; }
.lime-block > #solutions { position: relative; padding: var(--sol-above) 0 clamp(56px, 7vw, 96px); }
/* Curved notch cut into its left edge, between the two: leaves the edge smoothly, rounded tip in the middle */
.lime-block > #solutions::before {
  --notch-h: calc((var(--svc-below) + var(--sol-above)) * 1.6); /* opening along the edge: longer than the gap, its thin ends run into the side margins */
  content: ""; position: absolute; left: 0; top: calc(-1 * var(--svc-below) - (var(--notch-h) - var(--svc-below) - var(--sol-above)) / 2);
  width: clamp(48px, 7vw, 100px); height: var(--notch-h);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C0 35 100 28 100 50S0 65 0 100Z' fill='%23fff'/%3E%3C/svg%3E") left top / 100% 100% no-repeat;
}
.lime-block + .partners-band { margin-top: clamp(32px, 4vw, 48px); }
.lime-block + .home-shop { margin-top: clamp(40px, 5vw, 64px); } /* white space between the lime block and the grey products band */
.partners-band + #devis { padding-top: clamp(40px, 5vw, 64px); }
@media (max-width: 640px) {
  .shop-strip { border-radius: 24px; }
  .strip-arrow { display: none; }
  .shop-strip .strip-row { margin-inline: 12px; }
  .strip-more { padding: 0 7px; margin-left: 0; }
  .strip-more span { display: none; } /* just the "+" on phones */
  .shop-strip-list a { width: 112px; }
  .strip-media { width: 48px; height: 48px; }
}

/* "All our solutions and services" link under the home page sections */
.section-more { margin: 28px 0 0; text-align: center; }

/* ---------- solutions & services page ---------- */
.jump { display: grid; gap: 10px; margin-top: 26px; }
.jump-links { display: flex; flex-wrap: wrap; gap: 8px; }
.jump-links a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: border-color 0.15s, background-color 0.15s; }
.jump-links a:hover { border-color: var(--ink); background: var(--green-soft); }
.jump-links .i { width: 16px; height: 16px; color: var(--green); }
.sol-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 36px; } /* all five in one row, like the service cards; fewer per row on smaller screens */
.sol-list > .sol-detail { flex: 1 1 0; min-width: 0; }
.sol-detail { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; scroll-margin-top: 90px; } /* photo on top, text below */
.sol-panel { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 20px 18px; background: var(--green-soft); color: var(--ink); }
.sol-dark { background: var(--ink); color: #fff; }
.sol-lime { background: var(--lime); }
/* With a photo: the photo fills the panel, darkened at the bottom so the size stays readable */
.sol-panel.has-photo { position: relative; min-height: 320px; color: #fff; background-color: var(--ink); background-size: cover; background-repeat: no-repeat; }
.sol-panel.has-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 31, 3, 0.05) 30%, rgba(5, 31, 3, 0.8)); }
.sol-panel.has-photo > * { position: relative; } /* above the darkening */
.sol-panel.has-photo .sol-range strong { color: var(--lime); }
.sol-panel.has-photo .sol-range small { opacity: 0.85; }
.sol-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--lime); color: var(--ink); }
.sol-lime .sol-icon { background: var(--ink); color: var(--lime); }
.sol-icon .i { width: 26px; height: 26px; }
.sol-range small { display: block; margin-bottom: 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.sol-range strong { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.sol-dark .sol-range strong { color: var(--lime); }
.sol-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 22px 18px 24px; }
.sol-body h3 { margin: 0; font-size: 1.2rem; line-height: 1.15; }
.sol-body > p { margin: 0; font-size: 0.92rem; }
.sol-cols { display: grid; grid-template-columns: 1fr; gap: 14px; }
.sol-cols li { font-size: 0.88rem; }
.sol-cols h4, .svc-card h4 { margin: 0 0 10px; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.sol-cols .ticks { margin: 0; gap: 8px; }
.sol-cols .ticks li, .svc-card .ticks li { align-items: flex-start; line-height: 1.3; }
.sol-cols .ticks .i, .svc-card .ticks .i { flex: none; margin-top: 0.1em; }
.dots { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dots li { position: relative; padding-left: 16px; font-weight: 600; line-height: 1.3; color: var(--ink-2); }
.dots li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: var(--lime-deep); }
.sol-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 6px; }
.sol-actions .btn { justify-content: center; padding: 0.8em 1em; font-size: 0.86rem; }
.svc-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 36px; } /* all five in one row; fewer per row on smaller screens, a shorter last row centred */
.svc-grid > .svc-card { flex: 1 1 0; min-width: 0; }
.svc-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); scroll-margin-top: 90px; transition: border-color 0.2s, box-shadow 0.2s; }
/* photo on top, the icon overlapping its bottom edge */
.svc-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--green-soft); }
.svc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* any photo shape fits the frame */
.svc-content { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 28px 26px 30px; }
.svc-media + .svc-content { padding-top: 0; }
.svc-media + .svc-content .svc-icon { position: relative; margin-top: -26px; outline: 4px solid #fff; }
.svc-card:hover { border-color: var(--lime-deep); box-shadow: var(--shadow); }
.svc-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--lime); color: var(--ink); }
.svc-icon .i { width: 26px; height: 26px; }
.svc-card h3 { margin: 0; font-size: 1.2rem; line-height: 1.15; }
.svc-card p { font-size: 0.92rem; }
.svc-card .ticks li { font-size: 0.88rem; }
.svc-grid .svc-content { gap: 12px; padding: 22px 18px 24px; }
.svc-card p { margin: 0; }
.svc-card .ticks { margin: 4px 0 6px; gap: 8px; }
.svc-link { margin-top: auto; font-weight: 700; color: var(--green-deep); text-decoration: none; }
.svc-link:hover { text-decoration: underline; }
@media (max-width: 1180px) {
  .svc-grid > .svc-card, .sol-list > .sol-detail { flex: 0 0 calc((100% - 2 * 8px) / 3); }
  .steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1000px) {
  .svc-grid > .svc-card, .sol-list > .sol-detail { flex: 0 0 calc((100% - 8px) / 2); }
}
@media (max-width: 640px) {
  .svc-grid > .svc-card, .sol-list > .sol-detail { flex-basis: 100%; }
  .sol-panel.has-photo { min-height: 260px; }
  .svc-media { aspect-ratio: 4 / 3; } /* one card per row: not a full square */
  .svc-content { padding: 24px 22px 26px; }
  .svc-card h3 { font-size: 1.3rem; }
}

/* ---------- "À propos" page ---------- */
#team { padding-bottom: clamp(40px, 5vw, 64px); }
.about:has(+ #team) { padding-bottom: clamp(40px, 5vw, 64px); } /* team right after "Qui sommes-nous" (À propos page) */
.about + #team { padding-top: clamp(8px, 2vw, 24px); }
#services:has(+ #team), #solutions:has(+ #team) { padding-bottom: clamp(40px, 5vw, 64px); } /* team right after the cards (services and solutions pages) */
#services + #team, #solutions + #team { padding-top: clamp(24px, 3vw, 40px); }
#team + #contact-us, #testimonials + #contact-us, #projects + #contact-us { padding-top: clamp(40px, 5vw, 64px); }
#team + #projects { padding-top: clamp(24px, 3vw, 40px); } /* "Réalisations" right after the team (À propos page) */
#projects:has(+ #contact-us) { padding-bottom: clamp(32px, 4vw, 56px); }
#testimonials:has(+ #contact-us) { padding-bottom: 0; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 36px; }
.team-card { text-align: center; }
.team-photo { display: grid; place-items: center; aspect-ratio: 1; margin-bottom: 14px; overflow: hidden; border-radius: var(--radius); background: var(--green-soft); color: var(--green); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-photo .i { width: 40%; height: 40%; }
.team-card h3 { margin: 0 0 4px; font-size: 1.1rem; }
.team-card p { margin: 0; font-size: 0.92rem; color: var(--muted); }
.contact-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 36px; }
.contact-card { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.contact-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 12px; background: var(--lime); color: var(--ink); }
.contact-icon .i { width: 22px; height: 22px; }
.contact-card h3 { margin: 0; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.contact-card p { margin: 0; font-weight: 600; color: var(--ink); line-height: 1.4; }
.contact-card a { color: inherit; text-decoration: none; white-space: nowrap; } /* a phone number never breaks in two */
.contact-card a:hover { color: var(--green-deep); text-decoration: underline; }
/* Map under the contact cards (Google Maps, no key needed) */
.contact-mapbox { position: relative; margin-top: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--green-soft); }
.contact-mapbox iframe { display: block; width: 100%; height: 420px; border: 0; }
/* Shop photo over the left of the map, with its name and address under it */
.map-shop {
  position: absolute; left: 18px; top: 18px; bottom: 18px; z-index: 1; width: min(38%, 440px); margin: 0; display: flex; flex-direction: column;
  overflow: hidden; border-radius: calc(var(--radius) - 8px); background: #fff; box-shadow: 0 20px 50px -20px rgba(5, 31, 3, 0.55);
}
.map-shop img { flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: 40% 50%; }
.map-shop figcaption { display: grid; gap: 2px; padding: 12px 16px 14px; font-size: 0.82rem; line-height: 1.3; color: var(--ink-2); }
.map-shop strong { font-size: 0.95rem; color: var(--ink); }
@media (max-width: 760px) {
  .map-shop { position: static; width: auto; border-radius: 0; box-shadow: none; }
  .map-shop img { flex: none; aspect-ratio: 16 / 10; }
  .contact-mapbox { display: flex; flex-direction: column-reverse; } /* photo above the map */
}
.contact-map { display: inline-block; margin-top: 6px; font-size: 0.88rem; font-weight: 700; color: var(--green-deep) !important; }
@media (max-width: 1100px) {
  .contact-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1000px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-mapbox iframe { height: 300px; }
  .team-grid { gap: 12px; }
}

/* ---------- "Réalisations" page ---------- */
/* on white: dark figures and dividers (the figures are lime on the dark hero elsewhere) */
#projects.real-section .stats li { border-color: rgba(5, 31, 3, 0.15); }
#projects.real-section .stat-value { color: var(--ink); }
#projects.real-section .stat-value small { color: var(--green); }
#projects.real-section .stat-label { color: var(--ink-2); }
.real-section .chips { margin-top: 28px; }
.section-head + .stats { margin-top: 36px; }
.section-head + .projects-full, .wrap + .projects-full { margin-top: 36px; }
#devis + #projects { padding-top: 0; } /* white sections back to back */
#projects + #testimonials { padding-top: clamp(40px, 5vw, 64px); }
#projects:has(+ #testimonials) { padding-bottom: 0; }
.section-dark .chip { background: transparent; border-color: rgba(255, 255, 255, 0.25); color: #fff; }
.section-dark .chip:hover { border-color: var(--lime); }
.section-dark .chip[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.chip span { margin-left: 6px; font-size: 0.8em; opacity: 0.6; }
/* Projects across the whole screen width: square tiles, photo full size, text over a dark fade at the bottom */
.projects-full { grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 28px 6px 0; }
.projects-full .project { position: relative; aspect-ratio: 1; border: 0; border-radius: 0; }
.projects-full .project-media { position: absolute; inset: 0; aspect-ratio: auto; transition: transform 0.4s; }
.projects-full .project:hover .project-media { transform: scale(1.04); }
.projects-full .project-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 48px 18px 16px;
  background: linear-gradient(180deg, transparent, rgba(5, 31, 3, 0.88)); color: #fff; }
.real-empty { margin: 32px 0 0; text-align: center; }

/* Category bar (products page): an icon and an uppercase name per category, the chosen one underlined in lime */
.cat-bar { position: sticky; top: var(--head-h, 60px); z-index: 40; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #fff, var(--sand)); } /* stays under the header while scrolling */
.cat-bar-row { display: flex; justify-content: space-between; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 0 0; }
.cat-item {
  flex: 1 0 auto; display: grid; justify-items: center; gap: 6px; padding: 2px 8px 9px; border: 0; border-bottom: 3px solid transparent; background: none;
  font: inherit; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; color: var(--ink-2); cursor: pointer;
}
.cat-item .i { width: 38px; height: 38px; color: var(--ink); transition: transform 0.2s; }
.cat-item:hover { color: var(--ink); }
.cat-item:hover .i { transform: translateY(-3px); }
.cat-item[aria-pressed="true"] { border-bottom-color: var(--lime); font-weight: 700; color: var(--ink); }
.cat-bar + .section { padding-top: clamp(28px, 4vw, 48px); }
@media (max-width: 760px) {
  .cat-bar-row { justify-content: flex-start; padding-top: 8px; }
  .cat-item { font-size: 0.64rem; padding: 2px 7px 8px; }
  .cat-item .i { width: 32px; height: 32px; }
}

/* Quote cart: header button with a count, and a side panel */
.cart-btn { position: relative; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; font-weight: 700; font-size: 0.74rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.cart-btn:hover { border-color: var(--ink); }
.cart-btn .i { width: 18px; height: 18px; }
.cart-count { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--lime); font-size: 0.72rem; }
.cart-count[hidden] { display: none; }
.cart-btn.bump { animation: bump 0.4s; }
@keyframes bump { 50% { transform: scale(1.12); } }
/* The cart itself: a floating card at the bottom right, over the page (the catalogue stays usable behind it); open on arrival on large screens */
.cart {
  position: fixed; right: 16px; bottom: 16px; z-index: 91; width: min(330px, 100% - 32px); /* as wide as the floating quote form of the other pages */ max-height: calc(100svh - 104px - 16px);
  display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); background: #fff;
  box-shadow: 0 30px 80px -20px rgba(5, 31, 3, 0.5); opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}
.cart-open .cart { opacity: 1; visibility: visible; transform: none; }
.no-quote-panel .quote-panel, .no-quote-panel .quote-tab, .no-quote-panel .quote-backdrop { display: none; } /* products page: the quote cart replaces the floating quote form */
.cart-open .cart-fab { display: none; } /* the open cart sits where the button was */
.cart-head { display: flex; align-items: center; gap: 8px; padding: 16px 14px 16px 18px; background: linear-gradient(120deg, var(--ink) 0%, var(--green) 70%, #5f9a1d 100%); color: #fff; }
.cart-head > div { flex: 1; min-width: 0; }
.cart-kicker { margin: 0 0 4px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lime); }
.cart-head h2 { margin: 0; font-size: 1.3rem; color: #fff; }
.cart-min .cart-head { cursor: pointer; } /* folded: the bar unfolds it */
.cart-badge { display: grid; justify-items: center; min-width: 50px; padding: 5px 8px; border-radius: 14px; background: rgba(255, 255, 255, 0.16); line-height: 1.1; }
.cart-badge strong { font-size: 1.05rem; }
.cart-badge small { font-size: 0.68rem; opacity: 0.85; }
.cart-head-btn { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #fff; color: var(--ink); font: inherit; font-size: 1.3rem; font-weight: 700; line-height: 1; cursor: pointer; }
.cart-head-btn:hover { background: var(--lime); }
.cart-body { flex: 1 1 auto; min-height: 0; display: grid; align-content: start; gap: 12px; padding: 14px 16px; overflow-y: auto; overscroll-behavior: contain; }
.cart-min .cart-body, .cart-min .cart-foot { display: none; } /* folded down to its header */
.cart-items { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cart-items:empty { display: none; }
.cart-item { display: grid; grid-template-columns: 32px 1fr auto auto; align-items: center; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; }
.cart-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--green-soft); }
.cart-icon .i { width: 18px; height: 18px; }
.cart-info { display: grid; min-width: 0; }
.cart-info strong { font-size: 0.84rem; line-height: 1.2; }
.cart-info small { font-size: 0.78rem; color: var(--muted); }
.qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; }
.qty button { width: 24px; height: 30px; border: 0; background: none; font: inherit; font-size: 1.1rem; font-weight: 700; cursor: pointer; }
.qty span { min-width: 22px; font-size: 0.9rem; font-weight: 700; text-align: center; }
.cart-remove { width: 24px; height: 28px; border: 0; border-radius: 8px; background: none; font-size: 1.3rem; color: var(--muted); cursor: pointer; }
.cart-remove:hover { background: #fde8e8; color: #b42318; }
.cart-empty { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink-2); }
.cart-empty[hidden], .cart-total[hidden], .cart-error[hidden], .cart-clear[hidden] { display: none; }
/* Contact details, two per row */
.cart-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cart-form label { display: grid; gap: 6px; min-width: 0; font-size: 0.8rem; font-weight: 700; }
.cart-form label > span { display: flex; align-items: center; gap: 6px; }
.cart-form .i { width: 15px; height: 15px; color: var(--green); }
.cart-form input { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; font: inherit; font-size: 0.9rem; color: var(--ink); }
.cart-form input:focus { outline: none; border-color: var(--lime-deep); box-shadow: 0 0 0 3px rgba(194, 243, 44, 0.35); }
.cart-error { margin: 0; padding: 10px 12px; border-radius: 12px; background: #fdecec; color: #b42318; font-size: 0.85rem; }
.cart-foot { display: grid; gap: 8px; padding: 12px 16px 14px; border-top: 1px solid var(--line); background: var(--sand); }
.cart-foot .btn { justify-content: center; gap: 8px; padding: 0.95em 1em; border: 0; font-size: 0.86rem; cursor: pointer; }
.cart-send { background: var(--lime); color: var(--ink); }
.cart-send:hover { background: var(--lime-deep); }
.cart-wa { background: var(--whatsapp); color: #fff; }
.cart-wa:hover { background: #1fb457; }
/* Floating "Mon devis" button, left of the WhatsApp one */
.cart-fab {
  position: fixed; right: 88px; bottom: 22px; z-index: 61; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 10px 0 18px;
  border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: inherit; font-weight: 700; font-size: 0.92rem; cursor: pointer;
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.4);
}
.cart-fab .i { width: 20px; height: 20px; color: var(--lime); }
.cart-fab:hover { background: var(--dark-2); }
.cart-fab-count { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: 0.85rem; }
.cart-fab-count[hidden] { display: none; }
.cart-fab.bump { animation: bump 0.4s; }
.cart-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin: 0 0 4px; }
.cart-total span { font-weight: 700; }
.cart-total strong { font-size: 1.3rem; }
.cart-total small { flex-basis: 100%; font-size: 0.8rem; color: var(--muted); }
.cart-clear { justify-self: center; border: 0; background: none; font: inherit; font-size: 0.88rem; color: var(--muted); text-decoration: underline; cursor: pointer; }
@media (max-width: 1100px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  /* filters above the products, categories and brands as rows of chips */
  .shop-layout { grid-template-columns: 1fr; gap: 20px; }
  .shop-filters { position: static; max-height: none; overflow: visible; gap: 16px; padding: 16px; }
  .filter-list { display: flex; flex-wrap: wrap; gap: 6px; }
  .filter-check { width: auto; padding: 7px 12px; border: 1px solid var(--line); border-radius: 10px; }
}
@media (max-width: 860px) {
  /* Qui sommes-nous: one column, the photo between the buttons and the cards */
  .about .about-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "kicker" "head" "photo" "cards" "cta"; } /* .about: wins over the 1000px rule further down */
  .about-photo { min-height: 0; aspect-ratio: 4 / 3; }
  .cart-btn-label { display: none; }
}
@media (max-width: 640px) {
  .shop-grid { grid-template-columns: 1fr; }
  .cart { right: 8px; bottom: 8px; width: calc(100% - 16px); max-height: calc(100svh - 80px); }
  .cart-head { padding: 16px 14px 14px 18px; }
  .cart-head h2 { font-size: 1.3rem; }
  .cart-form { grid-template-columns: 1fr; }
  .cart-fab { right: 82px; bottom: 18px; height: 46px; }
}

/* ---------- responsive ---------- */
/* Short laptop screens: a more compact hero and figures, so "Nos solutions" still shows below them */
@media (max-height: 760px) and (min-width: 641px) {
  .hero { padding: 22px 0 0; }
  .hero .kicker { margin-bottom: 10px; }
  .hero h1 { font-size: clamp(2rem, 4.2vw, 2.8rem); margin-bottom: 0.3em; }
  .hero-text { font-size: 1rem; margin-bottom: 0; max-width: 78ch; }
  .hero-ctas { margin-top: 18px; }
  .stats-band { margin: 40px 0 12px; }
  .stat-value { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
  .hero-block + .section { padding-top: 24px; }
}
@media (max-width: 1000px) {
  .products { grid-template-columns: repeat(2, 1fr); }
  .acc-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .hero-inner { max-width: 760px; }
  /* figures: 3 by 2, dividers between columns and rows */
  .stats { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); row-gap: 20px; }
  .stats li { padding: 4px 12px; }
  .stats li:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
  .stats li:nth-child(n + 4) { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.35); }
  .stat-value { font-size: 2.3rem; }
  .projects, .testimonials { grid-template-columns: repeat(2, 1fr); }
  .quote-grid, .faq-wrap { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}
@media (max-width: 1180px) {
  .split { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .split .door:last-child:nth-child(odd) { grid-column: 1 / -1; } /* the odd last card takes the whole row */
  .door { padding: 28px; }
  .door h3 { font-size: 1.4rem; }
  .door .btn { align-self: flex-start; }
}
@media (max-width: 1240px) {
  .main-nav > a, .nav-drop > a { padding: 0 9px; font-size: 0.74rem; }
}
@media (max-width: 1040px) {
  /* The menu moves into a panel under the header; the buttons stay on the row until phone width. */
  .menu-btn { display: block; }
  .header-actions { margin-left: auto; }
  .main-nav {
    position: absolute; top: 100%; left: -16px; right: -16px; margin: 0; flex-direction: column; padding: 8px 16px 18px;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); display: none;
    max-height: calc(100vh - 60px); overflow-y: auto;
  }
  .menu-open .main-nav { display: flex; }
  .has-hero .main-nav { left: calc(-1 * (var(--gap) + 16px)); right: calc(-1 * (var(--gap) + 16px)); }
  .main-nav .nav-mobile { display: flex; }
  .main-nav > a.nav-home { display: none; }
  .main-nav > a.nav-shop { align-self: stretch; height: auto; margin: 0; padding: 15px 8px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .main-nav > a.nav-shop:not(.active) { background: none; }
  .main-nav > a.nav-shop.active { border-radius: 8px; }
  .main-nav > a, .nav-drop > a { height: auto; padding: 15px 8px; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
  .main-nav a.active { box-shadow: none; background: var(--green-soft); border-radius: 8px; }
  .drop-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 6px 14px; min-width: 0; width: auto; }
  .drop-menu a { white-space: normal; }
  .caret { display: none; }
  .main-nav a.nav-cta { margin-top: 12px; border-radius: 8px; justify-content: center; }
}
@media (max-width: 860px) {
  .utility { display: none; }
  .header-actions .btn { display: none; }
  .brand img { height: 24px; }
  .hero-block { min-height: calc(100svh - 60px - clamp(16px, 2.5vw, 28px) - var(--peek)); }  /* no hours/phone strip */
  .has-hero { --top: 60px; }
}
@media (max-width: 640px) {
  .products, .acc-grid { grid-template-columns: 1fr; }
  .split, .projects, .testimonials, .steps { grid-template-columns: 1fr; }
  .steps li { min-height: 0; } /* one per row on phones: no need for the extra height */
  .choices, .choices-3, .fields { grid-template-columns: 1fr; }
  .about .about-cards { grid-template-columns: 1fr; }
  /* Compact hero on phones, so "Nos solutions" shows on the first screen */
  .hero { padding: 26px 0 0; }
  .hero-ctas { flex-wrap: nowrap; gap: 8px; margin-top: 20px; }
  .hero-ctas .btn { flex: 1 1 0; padding-inline: 10px; font-size: 0.88rem; white-space: nowrap; }
  .stats-band { margin: 28px 0; }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
  .stats li, .stats li:nth-child(3n + 1) { padding: 0 10px; border-left: 1px solid rgba(255, 255, 255, 0.35); border-top: 0; }
  .stats li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stats li:nth-child(n + 3) { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.35); }
  .stats li:last-child:nth-child(odd) { grid-column: 1 / -1; } /* an odd last figure takes the whole row */
  .hero-block + .section { padding-top: 20px; }
  .hero-block { margin-left: 8px; margin-right: 8px; border-radius: 24px; }
  .has-hero { --gap: 8px; }
  .has-hero .hero-block { border-radius: 24px; }
  .section-dark { margin-left: 8px; margin-right: 8px; border-radius: 24px; }
  .stat-value { font-size: 2.1rem; }
  .stat-label { margin-top: 4px; font-size: 0.85rem; line-height: 1.4; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-sun { width: 420px; height: 420px; right: -40%; top: -10%; opacity: 0.55; }
  .hero-panels { width: 110%; right: -30%; }
  .quote-nav .btn { flex: 1; }
  .quote-panel { top: auto; right: 8px; bottom: 8px; left: 8px; width: auto; height: auto; max-height: 86svh; }
  .wa-float { width: 52px; height: 52px; }
  .to-top { right: 23px; bottom: 84px; }
}

/* ---------- project pop-up: photo gallery and details ---------- */
.pv-backdrop { position: fixed; inset: 0; z-index: 94; background: rgba(5, 31, 3, 0.6); }
.pv {
  position: fixed; inset: 0; z-index: 95; margin: auto; width: min(1040px, 100% - 32px); height: fit-content; max-height: calc(100% - 48px);
  overflow: auto; overscroll-behavior: contain; background: #fff; border-radius: var(--radius); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45);
}
.pv[hidden], .pv-backdrop[hidden] { display: none; }
.pv-open { overflow: hidden; }
.pv-close {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 10px;
  background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.pv-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.pv-gallery { display: grid; gap: 10px; align-content: start; padding: 14px; }
.pv-main { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; background: var(--dark-2) center / cover no-repeat; }
.pv-main.drawn { background: var(--green-soft); }
.pv-arrow {
  position: absolute; top: 50%; left: 10px; width: 42px; height: 42px; transform: translateY(-50%); border: 0; border-radius: 10px;
  background: rgba(255, 255, 255, 0.92); color: var(--ink); font: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.pv-arrow:hover { background: #fff; }
.pv-next { left: auto; right: 10px; }
.pv-count { position: absolute; right: 12px; bottom: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(5, 31, 3, 0.65); color: #fff; font-size: 0.8rem; font-weight: 700; }
.pv-thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; }
.pv-thumbs button { flex: none; width: 76px; height: 56px; padding: 0; border: 2px solid transparent; border-radius: 10px; background: var(--green-soft) center / cover no-repeat; opacity: 0.65; cursor: pointer; }
.pv-thumbs button:hover { opacity: 1; }
.pv-thumbs [aria-current] { border-color: var(--lime-deep); opacity: 1; }
.pv-info { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 30px 28px 28px 14px; }
.pv-info .project-kind { position: static; }
.pv-info h2 { margin: 2px 0 0; padding-right: 40px; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.05; }
.pv-city { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); }
.pv-city .i { width: 1em; height: 1em; }
.pv-kwp { font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--green); }
.pv-kwp small { margin-left: 3px; font-size: 0.5em; color: var(--muted); }
.pv-text { margin: 4px 0 0; }
.pv-specs { width: 100%; margin: 4px 0 0; }
.pv-specs div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line); }
.pv-specs dt { color: var(--muted); }
.pv-specs dd { margin: 0; font-weight: 700; text-align: right; }
.pv-info .btn { margin-top: 8px; }
@media (max-width: 760px) {
  .pv-body { grid-template-columns: 1fr; }
  .pv-info { padding: 6px 20px 22px; }
}

/* Home page: "Nos produits" (categories + a strip of products, 5 visible at a time) */
.home-shop { padding: clamp(44px, 5vw, 72px) 0; background: #eef0eb; } /* light grey band across the whole width; the white cards stand out on it */
.home-shop-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.home-shop-head .btn { flex: none; }
.home-cats { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.home-cat { display: flex; align-items: center; gap: 12px; height: 100%; padding: 8px 4px; color: var(--ink); text-decoration: none; } /* no box: icon + text, like the products page bar */
.home-cat:hover strong { text-decoration: underline; text-decoration-color: var(--lime-deep); text-underline-offset: 4px; }
.home-cat .i { flex: none; width: 44px; height: 44px; transition: transform 0.2s; }
.home-cat:hover .i { transform: translateY(-3px); }
.home-cat strong { display: block; font-size: 0.95rem; }
.home-cat small { display: block; font-size: 0.78rem; color: var(--muted); }
.home-prods-row { position: relative; margin-top: 16px; }
.home-prods { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 14px) / 5); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 2px 0 12px; }
.home-prods::-webkit-scrollbar { display: none; }
.home-prod { scroll-snap-align: start; align-self: start; }
.home-arrow { position: absolute; top: calc(50% - 30px); z-index: 2; width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 6px 18px rgba(5, 31, 3, 0.12); }
.home-arrow[data-hp="-1"] { left: -18px; }
.home-arrow[data-hp="1"] { right: -18px; }
.home-arrow:disabled { opacity: 0; pointer-events: none; }
.home-prod { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: #fff; color: var(--ink); text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s; }
.home-prod:hover { border-color: var(--lime-deep); box-shadow: 0 10px 28px rgba(5, 31, 3, 0.08); }
.home-prod-media { position: relative; height: 140px; border-bottom: 1px solid var(--line); }
.home-prod-media img { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); object-fit: contain; }
.home-prod-body { display: grid; gap: 4px; padding: 12px 14px 14px; }
.home-prod-body > small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.home-prod-body strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.5em; font-size: 0.92rem; line-height: 1.25; }
.home-prod-price { margin-top: 2px; font-weight: 800; }
.home-prod-price small { font-size: 0.75rem; font-weight: 600; color: var(--muted); }
@media (max-width: 1100px) { .home-cats { grid-template-columns: repeat(3, 1fr); } .home-prods { grid-auto-columns: calc((100% - 2 * 14px) / 3); } }
@media (max-width: 640px) { .home-cats { grid-template-columns: repeat(2, 1fr); } .home-shop-head .btn { width: 100%; justify-content: center; } .home-prods { grid-auto-columns: 46%; gap: 12px; } .home-prod-media { height: 120px; } .home-arrow { display: none; } }