/*
Theme Name: Groupe Protech Energy
Theme URI: https://www.protech-energy.fr
Author: Groupe Protech
Description: Classic WordPress theme for Groupe Protech Energy - électricité générale, domotique, courant faible. Single stylesheet, no build step, no dependencies.
Version: 2.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: Proprietary
Text Domain: protech-energy
*/

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

:root {
  --lime: #A0C02C;
  --lime-soft: #B4C941;
  --olive-dark: #53650D;
  --mid-green: #436D0F;
  --footer-dark: #303540;
  --text-dark: #1c1c1c;
  --text-muted: #666;
  --white: #ffffff;
  --page-bg: #F8F9FA;   /* main page background */
  --band-bg: #F3F4F5;   /* full-width background band (2nd section) */
  --line: #E8EAE2;
  --radius: 14px;
  --radius-card: 24px;
  --radius-block: 0;   /* sharp block corners, matching the badge */
  --shadow-img: 0 20px 46px rgba(28,32,20,.16), 0 2px 8px rgba(28,32,20,.06);

  /* ---------- PAGE GRID ----------
     Single source of truth for the left/right edges.
     The header, green cards, section content and footer all
     use .shell => edges line up pixel for pixel. */
  --shell-max: 1720px;   /* content band; blocks = (1720 - 96) / 2 = 812 */
  --gutter: 48px;        /* inset from the screen edges */

  /* inner padding of the cards (green sections) */
  --card-pad-x: 96px;
  --card-pad-y: 96px;

  /* maximum side of the "text + photo" squares */
  /* "text" and "photo" blocks from the design: 624 x 538 */
  --block-ratio: 624 / 538;
  --block-gap: 96px;

  /* vertical rhythm between sections */
  --gap-section: 104px;

  /* header height and the gap above the hero: the hero height derives from them */
  --header-h: 92px;
  --logo-nudge: 6px;   /* optical nudge of the logo to the right: the round mark next to the
                          straight hero edge reads as overhanging even though the boxes align */
  --hero-gap: 16px;
  --hero-trim: 72px;   /* how much shorter than the viewport the hero is — trimmed at the bottom only */
  --contact-shift: 76px;   /* shift of the Contact block to the right: the gap was 237px on the left
                              and 388px on the right — half the difference evens both gaps out */
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;   /* safeguard: clip creates no scroll container, so the sticky header survives */
}

body.nav-open { overflow: hidden; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  color: var(--text-dark);
  background: var(--page-bg); /* the white cards only read against this background */
}

/* =========================================================
   SHELL — single grid for width / edges
   ========================================================= */
.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell-max));
  margin-left: auto;
  margin-right: auto;
}

/* Green section card: same width as the header, plus rounded corners */
.section-card {
  border-radius: var(--radius-card);
  overflow: hidden;
}

section[id], footer[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

h1, h2, h3, h4 { font-weight: 800; line-height: 1.2; }

/* =========================================================
   ICONS (Lucide, inline SVG)
   ========================================================= */
.icon { flex-shrink: 0; }
.icon-14 { width: 14px; height: 14px; }
.feature-icon svg { width: 20px; height: 20px; color: var(--lime); margin-top: 2px; }
.callout-icon svg { width: 24px; height: 24px; color: rgba(255,255,255,.7); }
.value-icon svg { width: 20px; height: 20px; color: var(--lime); margin-top: 1px; }
.sub-heading svg { width: 18px; height: 18px; color: var(--olive-dark); }  /* spacing comes from the flexbox gap */

/* =========================================================
   HEADER — edges match the edges of the green block exactly
   ========================================================= */
.site-header {
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;              /* distance from the menu to the phone button */
  height: var(--header-h);
  /* .shell provides the width/edges — NO side padding of its own,
     otherwise the logo would sit inside the green card's edge */
}
.site-logo { display: flex; align-items: center; flex-shrink: 0; margin-left: var(--logo-nudge); }
.site-logo img { display: block; height: 52px; width: auto; }  /* horizontal logo */

.main-nav { flex: 1; display: flex; justify-content: flex-end; }  /* menu pushed up against the phone button */

/* ---------- BURGER ---------- */
.nav-toggle {
  display: none;              /* only shows up on tablets and phones */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;               /* 44x44 tap target — the minimum for a finger */
  height: 44px;
  padding: 0 10px;
  background: none;
  border: 0;
  cursor: pointer;
  order: 3;                  /* always to the right of the phone button */
}
.nav-toggle-bar {
  display: block;
  height: 2px;
  background: var(--text-dark);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
body.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(28, 30, 24, .45);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 90;
}
body.nav-open .nav-overlay { display: block; opacity: 1; }
.main-nav-list {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}

/* The Customizer's Additional CSS (wp-custom-css) loads after this file and
   stretches the menu with `justify-content: space-between; width: 100%`.
   Same specificity loses to it, so these rules bump to 0-2-0 and win.
   Desktop only — above 1080px the nav becomes a fixed slide-in panel and
   MUST keep its own column layout. Delete this block once those two lines
   are removed from Appearance > Customize > Additional CSS. */
@media (min-width: 1081px) {
  .site-header .main-nav { justify-content: flex-end; margin: 0; }
  .site-header .main-nav-list { justify-content: flex-end; width: auto; gap: 28px; }
}
.main-nav-list a {
  display: inline-block;
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.main-nav-list a:hover,
.main-nav-list a.is-active {
  color: var(--olive-dark);
  border-bottom-color: var(--lime);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  text-decoration: none;
  transition: opacity .2s ease;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { opacity: .88; }

.btn-phone-pill { background: var(--mid-green); color: var(--white); flex-shrink: 0; }
.btn-lime { background: var(--lime); color: #1c2400; }

/* Outline button: semi-transparent fill + light border.
   Transparency rather than solid olive — the colour adapts to
   the hero gradient, from its dark edge to its light one. */
.btn-outline {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .38);
  color: var(--white);
}
.btn-outline:hover { background: rgba(255, 255, 255, .18); opacity: 1; }

/* =========================================================
   HERO — green card, edges = edges of the menu
   ========================================================= */
.hero {
  margin-top: var(--hero-gap);
  background-image: url('assets/img/hero-bg.jpg');
  background-color: var(--mid-green);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  /* on page load the hero fills the screen: viewport minus header and gap.
     min-height rather than height — taller content grows the block instead of being clipped.
     svh instead of vh: on mobile it ignores the collapsing browser bar. */
  min-height: calc(100vh - var(--header-h) - var(--hero-gap) - var(--hero-trim));
  min-height: calc(100svh - var(--header-h) - var(--hero-gap) - var(--hero-trim));
  color: var(--white);
}
.hero-inner {
  max-width: 780px;
  padding: var(--card-pad-y) var(--card-pad-x);
}

.hero-badge {
  display: inline-block;
  padding: 7px 18px;
  border: 1px solid var(--lime);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 24px;
  color: var(--lime);
}

.hero h1 {
  color: var(--white);
  font-size: clamp(30px, 3vw, 56px);
  margin-bottom: 20px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.hero h1 .highlight { color: var(--lime); }

.hero p {
  font-size: 16px;
  opacity: .92;
  margin-bottom: 32px;
  max-width: 560px;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-actions .btn {
  padding: 19px 28px;
  border-radius: 12px;
  font-size: 15px;
  letter-spacing: .06em;
  gap: 12px;
}
.hero-actions .icon { width: 18px; height: 18px; }

/* =========================================================
   CONTENT SECTIONS — white, no extra backgrounds or shadows
   ========================================================= */
/* Equal top and bottom padding on EVERY section.
   No `.section + .section` exceptions: the two-class rule out-specified
   the targeted `.section-*` rules and the sections collapsed together. */
.section { padding: var(--gap-section) 0; }

/* ---------- FULL-WIDTH BACKGROUND BAND ----------
   The section itself is not width-constrained (.shell on the inner .container is),
   so the background stretches from screen edge to screen edge.
   Inner padding is inherited from .section => the band is symmetric. */
.section-domotique { background: var(--band-bg); position: relative; }

/* Decoration on the second section's boundaries: a mesh pattern in the hero's language.
   The strip straddles the top and bottom edges by half its height, so the
   pattern "stitches" across the seam. Stretched across the width (no-repeat)
   rather than tiled: the generated pattern's edges do not match, so a tile seam would show. */
.section-domotique::before,
.section-domotique::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 92px;
  background: url('assets/img/mesh-divider.svg') no-repeat center / 100% 92px;
  pointer-events: none;
  /* edges fade out, otherwise the pattern is cut off at the screen edges */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent);
}
.section-domotique::before { top: -46px; }
.section-domotique::after  { bottom: -46px; transform: scaleY(-1); }  /* mirrored so the two seams do not look identical */
.section .container { /* .shell sets the edges */ }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* ---------- 624 x 538 BLOCKS ----------
   The text card and the photo share one size from the design — in every
   section including "Un groupe", so all four photos are identical in size.
   minmax(0, 624px) => they shrink on narrow screens instead of overflowing;
   aspect-ratio keeps the height proportional to the width. */
.section .two-col {
  /* 1fr 1fr => the block's left edge = the green block's left edge,
     right to right; at shell 1344 with a 96 gap that is exactly 624px */
  grid-template-columns: 1fr 1fr;
  gap: var(--block-gap);
  align-items: center;
}
.section .col-image {
  aspect-ratio: var(--block-ratio);   /* 624 x 538 */
}
/* the photo fills the whole block: absolute positioning via inset
   guarantees 624x538 coverage whatever the source aspect ratio */
.section .col-image .section-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}
.exp-badge { z-index: 2; }   /* badge above the photo */
/* image left, text right (without the direction: rtl hack) */
.two-col.reverse .col-image { order: 1; }
.two-col.reverse .col-text  { order: 2; }

.col-text { min-width: 0; }

.label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.label-lime { color: var(--lime); }
.label-olive { color: var(--olive-dark); }
.label-dash { display: inline-block; width: 24px; height: 1px; background: var(--lime); }

.section h2 {
  font-size: clamp(24px, 2vw, 34px);
  margin-bottom: 18px;
  color: var(--olive-dark);
  text-transform: uppercase;
}
.section p { color: var(--text-muted); margin-bottom: 20px; font-size: 15.5px; }

.col-image { position: relative; }
.section-img {
  width: 100%;
  aspect-ratio: 5/4;          /* design: 624x501 */
  object-fit: cover;
  border-radius: 0;
  display: block;
  box-shadow: var(--shadow-img);
}

/* "15+ ans d'expertise" badge: a square overhanging the photo's
   bottom-left corner (design: 192px, -32px left, -30px down) */
.exp-badge {
  position: absolute;
  left: -32px;
  bottom: -30px;
  width: 192px;
  height: 192px;
  background: var(--olive-dark);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 12px 28px rgba(30,35,25,.18);
}
.exp-badge b { font-size: 30px; font-weight: 800; line-height: 1; margin-bottom: 8px; }
.exp-badge span {
  max-width: 12ch;          /* a two-word caption wraps centred */
  font-size: 11px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
}

/* =========================================================
   FEATURE LIST (Électricité générale)
   ========================================================= */
.feature-list { list-style: none; margin-top: 8px; }
.feature-list li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 16px;
  align-items: start;
  margin-bottom: 26px;
}
.feature-list li:last-child { margin-bottom: 0; }
.feature-icon { display: flex; justify-content: center; padding-top: 3px; }
.feature-list strong { display: block; color: var(--text-dark); margin-bottom: 4px; font-size: 18px; }
.feature-list p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-muted); max-width: 440px; }

/* =========================================================
   DOT LIST (Domotique)
   ========================================================= */
/* Icon + text on one line. The inner .feature-icon is display: flex,
   i.e. a block-level box: without its own flex context it took the whole
   line and the caption dropped below the icon. */
.sub-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--olive-dark);
  margin-bottom: 14px !important;
}
.sub-heading .feature-icon { padding-top: 0; }
.dot-list { list-style: none; display: grid; gap: 9px; margin-bottom: 28px; }  /* single column: the entries are long */
.dot-list li { padding-left: 20px; position: relative; font-size: 14px; color: var(--text-dark); }
.dot-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 8px; height: 8px;
  border: 2px solid var(--lime);
  border-radius: 50%;
}

.callout-box {
  background: var(--olive-dark);
  color: var(--white);
  border-radius: var(--radius);
  padding: 24px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.callout-box strong { display: block; margin-bottom: 6px; font-size: 13px; letter-spacing: .06em; }
.callout-box p { color: rgba(255,255,255,.85); margin: 0; font-size: 13.5px; }
.callout-icon { display: flex; }

/* =========================================================
   SECTION MULTISERVICE — the second green card,
   same edges and same corner radius as the hero
   ========================================================= */
.section-multiservice {
  /* background across the full screen width: no .shell, no radius, no side margins */
  margin: var(--gap-section) 0 0;
  padding: var(--card-pad-y) 0;
  background-image: url('assets/img/multiservice-bg.jpg');  /* mirrored: dark side on the right */
  background-color: var(--mid-green);
  background-size: cover;
  background-position: center;
}
/* the content inside still follows the shared band — .shell sets the edges */
.section-multiservice > .container { padding: 0; }
.section-multiservice .col-text {
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
}
.section-multiservice h2 { color: var(--white); }
.section-multiservice h2 .highlight { color: var(--lime); }
.section-multiservice p { color: rgba(255,255,255,.85); }

.value-cards { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.value-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 18px 20px;
}
.value-icon { display: flex; flex-shrink: 0; }
.value-card strong { display: block; color: var(--white); font-size: 13px; letter-spacing: .06em; margin-bottom: 4px; }
.value-card p { color: rgba(255,255,255,.75); margin: 0; font-size: 13px; }

/* =========================================================
   STATIC PAGES — mentions légales, politique de confidentialité
   ========================================================= */
/* Long legal copy is unreadable across the full 1520px band, so the text
   blocks get a character-based measure while keeping the .shell left edge. */
.section-page .page-header,
.section-page .entry-content { max-width: 78ch; }

.section-page .page-header { margin-bottom: 44px; }
.section-page h1 {
  font-size: clamp(28px, 2.6vw, 44px);
  color: var(--olive-dark);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.page-meta { font-size: 13px; color: var(--text-muted); margin: 0; }

.entry-content { color: var(--text-muted); font-size: 15.5px; line-height: 1.7; }
/* Same specificity as `.section h2` (0,1,1) — this block sits later in the
   file, so it wins: legal headings must not be uppercase like section titles. */
.entry-content h2 {
  font-size: 20px;
  color: var(--text-dark);
  text-transform: none;
  margin: 40px 0 12px;
}
.entry-content h3 {
  font-size: 16.5px;
  color: var(--olive-dark);
  margin: 28px 0 10px;
}
.entry-content > :first-child { margin-top: 0; }
.entry-content p { margin-bottom: 18px; }
.entry-content strong { color: var(--text-dark); }

/* Bulleted lists reuse the lime ring of .dot-list; numbered lists stay numbered */
.entry-content ul { list-style: none; display: grid; gap: 9px; margin: 0 0 20px; padding: 0; }
.entry-content ul li { position: relative; padding-left: 20px; }
.entry-content ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 8px; height: 8px;
  border: 2px solid var(--lime);
  border-radius: 50%;
}
.entry-content ol { margin: 0 0 20px; padding-left: 22px; }
.entry-content ol li { margin-bottom: 9px; }

.entry-content a { color: var(--olive-dark); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { color: var(--lime); }
.entry-content hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }

/* Cookie / data-retention tables are common on this kind of page */
.entry-content table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 14px; }
.entry-content th,
.entry-content td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.entry-content th { background: var(--band-bg); color: var(--text-dark); font-weight: 700; }

/* =========================================================
   FOOTER — full-width background, content on the same grid
   ========================================================= */
.site-footer { background: var(--footer-dark); color: rgba(255,255,255,.8); padding: 72px 0 20px; }
/* The footer background spans the screen, its content follows the shared
   .shell band, flush with the menu, the hero and the section blocks. */
.footer-top {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* exact thirds: left / centre / right */
  gap: 48px;
  padding-bottom: 56px;
}
/* The outer columns hug the band's edges and the middle one is centred,
   so the blocks read as "left / centre / right". */
.footer-contact {
  justify-self: center;
  text-align: left;
  position: relative;
  left: var(--contact-shift);   /* shift right from the geometric centre */
}
.footer-certifications { justify-self: end; text-align: right; }

.footer-logo-row { background: var(--white); display: inline-block; padding: 12px 18px; border-radius: 8px; margin-bottom: 18px; }
.footer-logo-row img { display: block; height: 64px; width: auto; }  /* vertical logo: mark above the wordmark */
.footer-col h3 { color: var(--lime); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col p { font-size: 13.5px; margin-bottom: 12px; }
.footer-brand p { line-height: 1.65; max-width: 42ch; }  /* comfortable line length in the wide column */

.footer-contact p {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;   /* icons aligned in one column on the left */
  gap: 10px;
}
/* mailto/tel in the contact column: same colour as the surrounding text,
   the link only reveals itself on hover — like the bottom-bar links */
.footer-contact a { color: inherit; text-decoration: none; }
.footer-contact a:hover { color: var(--lime); }

.contact-icon { flex-shrink: 0; display: flex; margin-top: 2px; }
.contact-icon svg { width: 16px; height: 16px; color: var(--lime); }

/* 3 logos on the first row, 2 on the second, tight and right-aligned.
   A three-column grid does not work here: a column takes the width of the
   widest logo (Eurovent 115px vs Qualifelec 49px), which left a 66px hole in
   the first row. Flex-wrap with a max-width sized for three logos
   (57+75+49 + gaps = 197px) wraps exactly after the third, and
   justify-content: flex-end keeps both rows flush with the right edge. */
.cert-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 205px;
  margin-left: auto;
}
.cert-logo {
  height: 44px;
  width: auto;
  background: var(--white);
  border-radius: 6px;
  padding: 6px 10px;
  object-fit: contain;
}

/* Full-width separator line: it lives on the wrapper, which is not
   constrained by the .shell band, while the text inside stays aligned to the band. */
.footer-bottom-bar {
  margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 34px 0 14px;   /* 14 + 20 (footer padding) = 34 on top: text centred in the bar */
  font-size: 12.5px;
}
.footer-links { display: flex; gap: 18px; }
.footer-links a { color: rgba(255,255,255,.7); text-decoration: none; }
.footer-links a:hover { color: var(--lime); }

/* =========================================================
   RESPONSIVE — the gutter changes in ONE place,
   so the header and the cards always stay aligned
   ========================================================= */
@media (max-width: 1440px) {
  :root { --gutter: 32px; --block-gap: 72px; --card-pad-x: 56px; --card-pad-y: 64px; --gap-section: 88px; --header-h: 88px; }
  .site-logo img { height: 48px; }
  .two-col { gap: 64px; }
}
@media (max-width: 1080px) {
  :root { --gutter: 32px; --gap-section: 72px; --block-gap: 56px; --header-h: 84px; }
  .header-inner { gap: 16px; }
  /* .main-nav goes position: fixed, so only the logo, the phone button and the
     burger stay in flow — push the last two to the right edge as a group */
  .btn-phone-pill { margin-left: auto; }
  .site-logo img { height: 44px; }
  .nav-toggle { display: flex; }

  /* The menu becomes a panel sliding in from the right. It stops fitting on one
     row sooner than expected: at 1024px it needs 948px of the available 960. */
  .main-nav {
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    width: min(340px, 84vw);
    display: block;
    flex: none;
    padding: 20px;
    background: var(--white);
    border-left: 1px solid var(--line);
    box-shadow: -12px 0 32px rgba(28,32,20,.12);
    transform: translateX(100%);
    transition: transform .28s ease;
    overflow-y: auto;
    z-index: 100;
    visibility: hidden;
  }
  body.nav-open .main-nav { transform: translateX(0); visibility: visible; }

  .main-nav-list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .main-nav-list a {
    display: block;
    padding: 15px 12px;          /* row height > 44px */
    font-size: 13px;
    border-bottom: 1px solid var(--line);
    border-left: 3px solid transparent;
  }
  .main-nav-list a:hover,
  .main-nav-list a.is-active {
    border-bottom-color: var(--line);
    border-left-color: var(--lime);
    background: rgba(160, 192, 44, .10);
  }
}
@media (max-width: 900px) {
  :root { --gutter: 24px; --card-pad-x: 32px; --card-pad-y: 40px; --radius-card: 18px; --header-h: 80px; --hero-trim: 48px; }
  .header-inner { justify-content: space-between; }
  .site-logo img { height: 42px; }
  /* Specificity beats the media query: the desktop rule .section .two-col
     scores (0,2,0) and out-specifies the plain .two-col (0,1,0), so the
     sections stayed in two columns. Repeat the desktop selector — equal
     specificity, and this block sits later in the file. */
  .two-col,
  .section .two-col {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .section .col-image { aspect-ratio: auto; }
  .section-domotique::before, .section-domotique::after { height: 66px; background-size: 100% 66px; }
  .section-domotique::before { top: -33px; }
  .section-domotique::after { bottom: -33px; }
  /* The column loses its aspect-ratio while the photo was position: absolute, so the
     parent stayed zero-height and the images did not show. Put them back in flow. */
  .section .col-image .section-img {
    position: static;
    height: auto;
    aspect-ratio: 5/4;
  }
  .exp-badge { width: 132px; height: 132px; left: -16px; bottom: -18px; }
  .exp-badge b { font-size: 24px; }
  .exp-badge span { font-size: 10px; }
  /* On narrow screens the order is the same in ALL sections: text first,
     then the photo. The markup order differs (in Domotique and "Un groupe" the
     image comes first), which made the sections read inconsistently. */
  .two-col .col-text,
  .two-col.reverse .col-text { order: 1; }
  .two-col .col-image,
  .two-col.reverse .col-image { order: 2; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  /* with a single column, centring and the right shift make no sense */
  .footer-contact { justify-self: start; left: 0; }
  .footer-certifications { justify-self: start; text-align: left; }
  .cert-logos { margin-left: 0; }

  .hero-inner { max-width: none; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; --card-pad-x: 24px; --card-pad-y: 32px; --gap-section: 48px; --header-h: 72px; }
  .site-logo img { height: 38px; }
  .feature-list li { margin-bottom: 28px; }
  /* The overhang (left/bottom negative) works on desktop, but at this width the
     badge nearly touched the screen edge and hung over the wave divider below
     the photo. Tuck it inside the photo's corner instead. */
  .exp-badge { width: 104px; height: 104px; left: 12px; bottom: 12px; }
  /* was flex-direction: column — the icon dropped below the text and stretched the block */
  .callout-box { flex-direction: row; align-items: center; gap: 14px; padding: 20px; }
  .callout-icon { flex-shrink: 0; }
  .callout-icon svg { width: 20px; height: 20px; }
  .footer-bottom { flex-direction: column; }
}

/* Below ~410px the logo (180px) + the phone-number button (171px) no longer fit
   on screen and the whole page picked up a horizontal scrollbar.
   Keep the icon only: a 44px tap target, with the number read out via aria-label. */
/* The full header needs about 520px: logo 180 + gaps 32 + burger 44 + the
   button with the number 160. Below that the number goes and only the icon
   stays, the number being read out via aria-label. This used to trigger only
   under 420px, so on a 390-430px iPhone the row overflowed. */
@media (max-width: 560px) {
  .btn-phone-text { display: none; }
  .btn-phone-pill { padding: 13px; }
  .btn-phone-pill .icon { width: 18px; height: 18px; }
  .site-logo img { height: 40px; }
  .header-inner { gap: 12px; }
}

@media (max-width: 480px) {
  /* two side-by-side buttons do not fit and wrapped into a staircase */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
}
@media (max-width: 360px) {
  /* at 320px a 40px logo (190px) plus the two 44px targets and the gaps
     no longer fit into 288px */
  .site-logo img { height: 34px; }
}