/* ==========================================================================
   Teclecom — Homepage styles
   Requires tokens.css. Naming: BEM (block__element--modifier).
   Order: 1 base · 2 layout · 3 components · 4 sections (page order) · 5 responsive
   ========================================================================== */

/* 1. BASE ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); color: inherit; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--c-blue-700); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 12px 16px; background: var(--c-surface); border-radius: var(--r-ctrl); font-weight: 700; }
.skip-link:focus { top: 16px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* 2. LAYOUT ============================================================== */
.site { position: relative; overflow-x: clip; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.panel-wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--panel-inset); }
.section { padding-top: var(--section-space); }

.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 64px; margin-bottom: var(--stack-lg); }
.section-head__titles { display: flex; flex-direction: column; gap: 18px; }
.section-head__aside { max-width: 430px; }

/* 3. COMPONENTS ========================================================== */
/* Eyebrow */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--c-blue-700); }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--c-blue); }
.eyebrow--on-dark { color: var(--c-blue-300); }

/* Headings & text */
.h2 { font-size: var(--fs-h2); line-height: 1.04; font-weight: 800; letter-spacing: var(--tracking-display); }
.h2--sm { font-size: var(--fs-h2-sm); line-height: var(--lh-heading); }
.h2--on-dark { color: var(--c-on-dark); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--c-muted); }
.lead--on-dark { color: var(--c-on-dark-muted); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 58px; padding: 0 26px; border-radius: var(--r-btn); border: 1.5px solid transparent; font-size: 16px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.btn .icon { width: 18px; height: 18px; }
.btn--primary { background: var(--c-blue); color: var(--c-on-blue); }
.btn--primary:hover { background: #45B4E6; color: var(--c-on-blue); }
.btn--dark { background: var(--c-ink); color: var(--c-on-dark); }
.btn--dark:hover { background: #33363A; color: var(--c-on-dark); }
.btn--ghost { border-color: rgba(255,255,255,.35); color: var(--c-on-dark); font-weight: 600; }
.btn--ghost:hover { border-color: #FFFFFF; color: var(--c-on-dark); }
.btn--outline { border-color: var(--c-ink); color: var(--c-ink); }
.btn--outline:hover { background: var(--c-ink); color: var(--c-on-dark); }
.btn--sm { height: 48px; padding: 0 22px; border-radius: 14px; font-size: 15px; }
.btn--md { height: 52px; padding: 0 22px; border-radius: 14px; font-size: 15px; }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--c-blue-700); }
.link-arrow .icon { width: 16px; height: 16px; }

/* Icon boxes */
.icon { width: 20px; height: 20px; flex-shrink: 0; }
.icon-box { width: 44px; height: 44px; border-radius: var(--r-ctrl); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-box .icon { width: 18px; height: 18px; }
.icon-box--dark { background: var(--c-ink); color: var(--c-on-dark); }
.icon-box--blue { background: var(--c-blue); color: var(--c-on-blue); }
.icon-box--tint { background: var(--c-blue-50); color: var(--c-blue-700); }
.icon-box--outline { border: 1px solid var(--c-border-ctrl); color: var(--c-ink); }
.icon-box--lg { width: 56px; height: 56px; border-radius: var(--r-faq); }
.icon-box--lg .icon { width: 26px; height: 26px; }

/* Tags */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tag { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 13px; border-radius: var(--r-pill); background: var(--c-surface); border: 1px solid var(--c-line-strong); font-size: var(--fs-xs); font-weight: 500; color: var(--c-text-2); }
.tag--active { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-dark); }

/* Media */
.media { position: relative; overflow: hidden; border-radius: var(--r-media); background: #111; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.photo-pill { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 6px 0 16px; border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-ink); font-size: var(--fs-small); font-weight: 700; }
.photo-pill__icon { width: 28px; height: 28px; border-radius: 50%; background: var(--c-ink); color: var(--c-on-dark); display: inline-flex; align-items: center; justify-content: center; }
.photo-pill__icon .icon { width: 14px; height: 14px; }

/* Meta list (spec tables) */
.meta-list { margin: 0; }
.meta-list__row { display: flex; justify-content: space-between; gap: 24px; padding: 13px 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-small); }
.meta-list dt { color: var(--c-subtle); }
.meta-list dd { margin: 0; font-weight: 600; text-align: right; }

/* Stats */
.stat__value { font-family: var(--font-display); font-weight: 800; letter-spacing: var(--tracking-display); line-height: 1; }
.stat__value em { font-style: normal; color: var(--c-blue); }
.stat__label { font-size: var(--fs-small); color: var(--c-muted); }

/* 4. SECTIONS ============================================================ */

/* --- 4.1 Header (light glass bar floating over the hero) --- */
.site-header { position: absolute; z-index: 20; top: calc(var(--panel-inset) + 24px); left: 0; right: 0; transition: top .25s ease; }
.site-header.is-stuck { position: fixed; top: 12px; z-index: 60; }
.site-header__inner { position: relative; max-width: var(--container); margin-inline: auto; padding-inline: calc(var(--panel-inset) + 28px); }
.site-header__bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; padding: 0 12px 0 24px; border-radius: 20px; background: rgba(255,255,255,.88); border: 1px solid var(--c-line); box-shadow: 0 10px 30px rgba(20,30,40,.06); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.site-header__logo img { height: 40px; width: auto; }
.site-nav__list { display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; list-style: none; }
.site-nav__item { position: static; }
.site-nav__link { display: inline-flex; align-items: center; gap: 6px; color: var(--c-ink); font-size: 15px; font-weight: 600; text-decoration: none; padding: 8px 0; transition: color .15s ease; }
.site-nav__link:hover { color: var(--c-blue-700); }
.site-nav__link[aria-current="page"] { color: var(--c-blue-700); }

/* Chevron indicator */
.site-nav__chevron { width: 14px; height: 14px; color: var(--c-muted); transition: transform .22s cubic-bezier(0.16, 1, 0.3, 1), color .15s ease; flex-shrink: 0; }
.site-nav__item--has-dropdown:hover .site-nav__chevron,
.site-nav__item--has-dropdown:focus-within .site-nav__chevron,
.site-nav__item--has-dropdown.is-active .site-nav__chevron { transform: rotate(180deg); color: var(--c-blue-700); }

/*
 * Dropdown container: positioned relative to .site-header__bar (the glass nav bar itself — the nearest
 * position:relative ancestor), not the narrow trigger link — so it spans the full bar width regardless
 * of which item is hovered, and `top: 100%` sits flush against the bar with zero gap. The visible card
 * (background/border/shadow) lives on .site-nav__dropdown-panel, offset down by its own margin-top — so
 * the invisible outer .site-nav__dropdown is one continuous hit-area from the trigger to the panel.
 * Visibility itself is driven by JS toggling `.is-active` (see main.js's hover-intent handler), not by
 * this file's :hover/:focus-within clauses alone — CSS-only hover is unreliable for exactly this pattern
 * (any brief gap or fast/diagonal pointer path drops :hover before the JS-free eye can register it). The
 * :hover/:focus-within clauses stay only as a no-JS fallback.
 */
.site-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s cubic-bezier(0.16, 1, 0.3, 1), visibility .18s;
  z-index: 100;
}

.site-nav__item--has-dropdown:hover .site-nav__dropdown,
.site-nav__item--has-dropdown:focus-within .site-nav__dropdown,
.site-nav__item--has-dropdown.is-active .site-nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.site-nav__dropdown-panel {
  margin-top: 12px;
  padding: 36px 40px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  box-shadow: 0 20px 44px rgba(20, 22, 24, 0.1);
}

.site-nav__dropdown-intro {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--c-line);
}

.site-nav__dropdown-heading {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--c-ink);
  letter-spacing: -0.02em;
  margin: 6px 0 0;
}

/* Plain full-width text grid — no icons, no numbered badges */
.site-nav__dropdown-menu {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 32px;
}

.site-nav__dropdown-item {
  display: block;
  padding: 16px 0;
  border-top: 1px solid var(--c-line);
  text-decoration: none;
}

.site-nav__dropdown-menu .site-nav__dropdown-item:nth-child(-n+3) {
  border-top: none;
  padding-top: 0;
}

.site-nav__dropdown-item-title {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-ink);
  transition: color .15s ease;
}

.site-nav__dropdown-item:hover .site-nav__dropdown-item-title {
  color: var(--c-blue-700);
}

.site-nav__dropdown-item-desc {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--c-muted);
}
.site-header__actions { display: flex; align-items: center; gap: 16px; }
.site-header__phone { display: inline-flex; align-items: center; gap: 8px; color: var(--c-ink); font-size: 15px; font-weight: 600; }
.site-header__phone .icon { width: 16px; height: 16px; color: var(--c-blue-700); }
.site-header__phone:hover { color: var(--c-blue-700); }
.site-header__toggle { display: none; width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--c-line-strong); background: var(--c-surface); color: var(--c-ink); align-items: center; justify-content: center; cursor: pointer; }
.site-header__toggle .icon { width: 22px; height: 22px; }

/* --- 4.2 Hero (light panel · blue diagonal · floating photo composition) --- */
.hero { padding-top: var(--panel-inset); }
.hero__panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 48px; align-items: center; min-height: 860px; padding: 150px 64px 64px; border-radius: var(--r-panel); background: var(--c-surface); overflow: hidden; }
.hero__band { position: absolute; top: 0; right: 0; bottom: 0; width: 35%; background: var(--c-blue); clip-path: polygon(0 0, 100% 0, 100% 100%, 34% 100%); }
.hero__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; max-width: 640px; }
.hero__chip { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 36px; padding: 6px 16px 6px 14px; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-surface); font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; color: var(--c-text-2); }
.hero__chip::before { content: ""; width: 8px; height: 8px; flex-shrink: 0; border-radius: 2px; background: var(--c-blue); transform: rotate(45deg); }
.hero__title { font-size: var(--fs-display); line-height: 1.02; font-weight: 800; letter-spacing: -0.04em; color: var(--c-ink); }
.hero__title .accent { color: var(--c-blue); }
.hero__text { max-width: 560px; font-size: 18px; line-height: 1.6; color: var(--c-muted); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__ctas .btn { border-radius: var(--r-pill); }
.hero__ctas .btn--outline { border-color: var(--c-line-strong); border-width: 1.5px; }
.hero__ctas .btn--outline:hover { border-color: var(--c-ink); }
.hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; width: 100%; max-width: 600px; margin: 12px 0 0; padding: 28px 0 0; border-top: 1px solid var(--c-line-strong); list-style: none; }
.hero__stat { display: flex; flex-direction: column; gap: 8px; }
.hero__stat .stat__value { font-size: var(--fs-stat); color: var(--c-ink); }
.hero__stat .stat__label { line-height: 1.4; }

.hero__visual { position: relative; z-index: 2; height: 640px; }
.hero__photo { position: absolute; top: 0; bottom: 0; left: 80px; width: 380px; margin: 0; border-radius: var(--r-media); overflow: hidden; box-shadow: var(--shadow-float); }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }

/* --- 4.3 Clients --- */
.clients { padding-top: 72px; }
.clients__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 28px; }
.clients__title { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin-top: 14px; }
.clients__grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-card); overflow: hidden; }
.clients__item { display: flex; align-items: center; justify-content: center; height: 88px; padding: 14px 18px; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); margin: 0 -1px -1px 0; position: relative; overflow: hidden; }
.clients__item img { max-width: 100%; max-height: 52px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.clients__item a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.clients__item a:hover img,
.clients__item a:focus-visible img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.08);
}
.clients__item a::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-blue-50);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  z-index: -1;
}
.clients__item a:hover::after,
.clients__item a:focus-visible::after { opacity: 1; }

/* --- 4.4 About --- */
.about__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
.about__media { height: 700px; }
.about__media img { object-position: center 35%; }
.about__mission { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: var(--r-row); background: var(--c-surface); }
.about__mission img { width: 56px; height: 56px; border-radius: 14px; }
.about__mission-kicker { display: block; font-size: var(--fs-xxs); font-weight: 700; letter-spacing: var(--tracking-eyebrow); color: var(--c-blue-700); text-transform: uppercase; }
.about__mission-text { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.3; margin-top: 4px; }
.about__body { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 8px 0; }
.about__intro { display: flex; flex-direction: column; gap: 26px; }
.about__statement { font-family: var(--font-display); font-size: var(--fs-statement); line-height: 1.32; font-weight: 600; letter-spacing: -0.015em; }
.about__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-line-strong); }
.about__stat { display: flex; flex-direction: column; gap: 10px; padding: 28px 24px 28px 0; }
.about__stat:nth-child(even) { padding-left: 28px; padding-right: 0; border-left: 1px solid var(--c-line-strong); }
.about__stat:nth-child(-n+2) { border-bottom: 1px solid var(--c-line-strong); }
.about__stat:nth-child(n+3) { padding-bottom: 0; }
.about__stat .stat__value { font-size: var(--fs-stat-lg); }

/* --- 4.5 Expertises (Domaines d’activité showcase) --- */
.section-head__aside-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.xp-showcase {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.xp-card {
  position: relative;
  display: block;
  height: 340px;
  border-radius: var(--r-card);
  overflow: hidden;
  text-decoration: none;
  color: var(--c-on-dark);
  background: #0E1720;
  box-shadow: var(--shadow-sm);
  transition: transform 0.28s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.28s cubic-bezier(0.2, 0, 0, 1);
}

.xp-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  color: var(--c-on-dark);
}

.xp-card__media { position: absolute; inset: 0; }
.xp-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0, 0, 1);
}
.xp-card:hover .xp-card__media img { transform: scale(1.06); }
.xp-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9,15,20,0) 38%, rgba(8,13,17,.9) 100%);
}

.xp-card__num {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--c-on-dark);
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(6px);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.25);
}

.xp-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.xp-card__cat {
  font-size: var(--fs-xxs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: rgba(255,255,255,.72);
}

.xp-card__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--c-on-dark);
  margin: 0;
}

.xp-card__desc {
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: rgba(255,255,255,.82);
  margin: 0;
}

.xp-card__arrow {
  margin-top: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.xp-card__arrow .icon { width: 16px; height: 16px; }
.xp-card:hover .xp-card__arrow {
  background: var(--c-blue);
  border-color: var(--c-blue);
  transform: translateX(3px);
}

/* --- 4.6 Power (courant fort) --- */
.power__projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.project-card { display: flex; flex-direction: column; gap: 18px; }
.project-card__title { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; }
.project-card__media { height: 360px; }
.project-card__media--light { background: #EEF0F1; }
.project-card__media--tall { height: 460px; }

/*
 * Client-logo cards (the "Ils nous ont fait confiance" trust entries, not documented project case
 * studies — see front-page.php's `_teclecom_client_logo` post-meta check in the Réalisations loop): a
 * brand logo is a small, mostly-flat mark, not jobsite photography, so cropping it with object-fit:cover
 * into a tall photo slot (the project-card__media default) zooms in on a random corner of it and looks
 * broken. This variant shows the logo at a natural contained size on a neutral card instead, with a real
 * factual one-line description of the company underneath (never an invented claim about project work).
 */
.project-card__media--logo { height: 220px; background: var(--c-bg); display: flex; align-items: center; justify-content: center; padding: 32px; }
.media.project-card__media--logo img { width: auto; height: auto; max-width: 70%; max-height: 60%; object-fit: contain; }
.project-card__client-desc { font-size: var(--fs-small); line-height: 1.5; color: var(--c-muted); }
.power__features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: var(--stack-lg); }
.feature-card { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 28px; border-radius: var(--r-card); background: var(--c-surface); border: 1px solid var(--c-line); }
.feature-card--dark { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-dark); }
.feature-card--photo { padding: 0; overflow: hidden; justify-content: flex-start; gap: 0; }
.feature-card__img { height: 190px; }
.feature-card__img img { width: 100%; height: 100%; object-fit: cover; }
.feature-card__body { display: flex; flex-direction: column; gap: 10px; }
.feature-card--photo .feature-card__body { padding: 24px; }
.feature-card__title { font-size: 22px; font-weight: 800; line-height: 1.2; }
.feature-card--photo .feature-card__title { font-size: var(--fs-h4); }
.feature-card__text { font-size: var(--fs-body); line-height: 1.6; color: var(--c-muted); }
.feature-card--dark .feature-card__text { color: var(--c-on-dark-muted); }

/* --- 4.7 Low current (courant faible) --- */
.lowcurrent { padding-top: 80px; }
.lowcurrent__panel { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 48px; min-height: 760px; padding: 64px 56px 64px 64px; border-radius: var(--r-panel); background: #111315; overflow: hidden; }
.lowcurrent__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; opacity: .55; }
.lowcurrent__panel::after { content: ""; position: absolute; inset: 0; background: rgba(17,19,21,.45); }
.lowcurrent__content { position: relative; z-index: 1; max-width: 520px; display: flex; flex-direction: column; gap: 24px; }
.lowcurrent__title { font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.lowcurrent__text { color: #D0D5DA; }
.systems-card { position: relative; z-index: 1; width: 640px; flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; padding: 32px; border-radius: var(--r-media); background: var(--c-surface); }
.systems-card__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px dashed #D5D9DC; }
.systems-card__title { font-size: var(--fs-h4); font-weight: 800; }
.systems-card__count { font-size: var(--fs-small); font-weight: 600; color: var(--c-muted); }
.systems-card__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding-top: 20px; border-top: 1px dashed #D5D9DC; }
.systems-card__facts div { display: flex; flex-direction: column; gap: 6px; }
.systems-card__facts dt { font-size: var(--fs-xxs); color: var(--c-subtle); }
.systems-card__facts dd { margin: 0; font-size: var(--fs-small); font-weight: 700; }

/* --- 4.8 Systems gallery (bento) --- */
.gallery { padding-top: 24px; }
.gallery__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 320px 320px; gap: 16px; margin: 0; padding: 0; list-style: none; }
.gallery__item--wide { grid-column: span 2; }
.gallery__item--tall { grid-row: span 2; }
.gallery__item .media { height: 100%; }

/* --- 4.9 Method --- */
.method__grid { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 80px; }
.method__intro { display: flex; flex-direction: column; gap: 26px; }
.method__media { height: 330px; margin-top: 12px; }
.steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-line-strong); }
.step { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 24px; padding: 34px 0; border-bottom: 1px solid var(--c-line-strong); }
.step__num { font-family: var(--font-display); font-size: 40px; font-weight: 800; letter-spacing: var(--tracking-display); line-height: 1; color: var(--c-blue); }
.step__body { display: flex; flex-direction: column; gap: 10px; max-width: 620px; }
.step__title { font-size: var(--fs-h3-lg); font-weight: 800; }
.step__text { font-size: 16px; line-height: var(--lh-body); color: var(--c-muted); }

/* --- 4.10 Team --- */
.team__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.team-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 190px; padding: 26px; border-radius: var(--r-card); background: var(--c-surface); border: 1px solid var(--c-line); }
.team-card .stat__value { font-size: 52px; }
.team-card__label { font-size: var(--fs-body); color: var(--c-muted); }
.team-card--tint { background: var(--c-blue-50); border-color: var(--c-blue-50); }
.team-card--tint .team-card__label { color: var(--c-text-2); }
.team-card--total { position: relative; grid-row: span 2; padding: 32px; background: var(--c-ink); border-color: var(--c-ink); overflow: hidden; }
.team-card--total::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 260px; height: 260px; background: var(--c-blue); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.team-card--total .team-card__label { position: relative; z-index: 1; font-weight: 600; color: var(--c-on-dark-muted); order: -1; }
.team-card--total .stat__value { position: relative; z-index: 1; font-size: var(--fs-stat-xl); color: var(--c-on-dark); }

/* --- 4.11 Projects --- */
.projects__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.projects__nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.projects__nav-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 1.5px solid var(--c-line-strong);
  color: var(--c-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  box-shadow: var(--shadow-sm);
  padding: 0;
}
.projects__nav-btn .icon {
  width: 20px;
  height: 20px;
}
.projects__nav-btn:hover:not(:disabled) {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-on-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.projects__nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}
.projects__carousel {
  position: relative;
  width: 100%;
}
.projects__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 4px 16px;
  cursor: grab;
}
.projects__track.is-dragging {
  scroll-behavior: auto;
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}
.projects__track::-webkit-scrollbar {
  display: none;
}
/* Reusable overlay case-study card — used by the homepage Réalisations carousel (inside
   .projects__track) and the /projets/ archive grid (inside .projects__grid) so both stay visually
   consistent instead of drifting into two different card designs. */
.projects__track .project-card, .projects__grid .project-card {
  position: relative;
  height: 430px;
  border-radius: var(--r-card);
  overflow: hidden;
  background: #0E1720;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.projects__track .project-card {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 280px;
  max-width: calc((100% - 48px) / 3);
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}
.project-card > a { display: block; width: 100%; height: 100%; position: relative; }
.projects__track .project-card:hover, .projects__grid .project-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.projects__track .project-card__media, .projects__grid .project-card__media { position: absolute; inset: 0; height: 100%; border-radius: 0; overflow: hidden; }
.projects__track .project-card__media img, .projects__grid .project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,0,0,1); }
.project-card:hover .project-card__media img { transform: scale(1.06); }
.project-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9,15,20,0) 40%, rgba(8,13,17,.92) 100%);
}
.project-card__num {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--c-on-dark);
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(6px);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.25);
}
.project-card__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.project-card__eyebrow { font-size: var(--fs-xxs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: rgba(255,255,255,.72); }
.projects__track .project-card__title, .projects__grid .project-card__title { font-size: 1.15rem; line-height: 1.25; color: var(--c-on-dark); font-weight: 800; }
.project-card__desc { font-size: var(--fs-xs); line-height: 1.45; color: rgba(255,255,255,.82); margin: 4px 0 0; }

/* Client-logo trust cards keep the light contained-logo treatment (not a photo case study). */
.projects__track .project-card--logo, .projects__grid .project-card--logo { height: auto; background: var(--c-surface); border: 1px solid var(--c-line); padding: 14px 14px 18px; box-shadow: none; }
.project-card--logo:hover { box-shadow: var(--shadow-md); }
.project-card--logo > a { display: flex; flex-direction: column; gap: 10px; height: auto; }
.project-card--logo .project-card__title { color: var(--c-ink); font-size: var(--fs-body); }
.project-card--logo .project-card__media { position: static; height: 130px; padding: 18px; background: var(--c-bg); display: flex; align-items: center; justify-content: center; border-radius: calc(var(--r-card) - 8px); }
.project-card--logo .project-card__media img { width: auto; height: auto; max-width: 70%; max-height: 60%; object-fit: contain; }
.meta-list--compact { gap: 4px; }
.meta-list--compact .meta-list__row { font-size: var(--fs-xxs); padding: 6px 0; }

.projects__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }
.projects__pagination { display: flex; align-items: center; gap: 14px; }
.projects__dots { display: flex; align-items: center; gap: 6px; }
.projects__dots button { display: block; padding: 10px 0; border: 0; background: none; cursor: pointer; }
.projects__dots button::before { content: ""; display: block; width: 22px; height: 3px; border-radius: 2px; background: var(--c-line-strong); transition: width var(--dur) var(--ease), background var(--dur) var(--ease); }
.projects__dots button.is-active::before { width: 34px; background: var(--c-ink); }
.projects__dots button:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.projects__nav[hidden] { display: none; }
.projects__counter { font-size: var(--fs-small); font-weight: 700; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.projects__cta { display: flex; justify-content: center; margin-top: 32px; }
.projects__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.projects__illustration { background: #0D1822; }
.projects__badge { position: absolute; right: 16px; top: 16px; padding: 7px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #E6EAEE; font-size: var(--fs-xxs); }

/* --- 4.12 Values --- */
.values { padding-top: 100px; }
.values__panel { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 64px; padding: 80px 48px; border-radius: var(--r-panel); background: var(--c-surface); }
.values__intro { display: flex; flex-direction: column; gap: 22px; }
.values__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.value-card { display: flex; flex-direction: column; gap: 14px; padding: 26px; border: 1px solid var(--c-line); border-radius: var(--r-row); }
.value-card__title { font-size: var(--fs-h5); font-weight: 800; }
.value-card__text { font-size: var(--fs-small); line-height: 1.6; color: var(--c-muted); }

/* --- 4.13 FAQ --- */
.faq__grid { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 64px; }
.faq__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.faq__list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-faq); }
.faq-item__q { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 26px; font-size: 17px; font-weight: 700; list-style: none; cursor: pointer; }
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__icon { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--c-border-ctrl); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background-color var(--dur) var(--ease); }
.faq-item__icon .icon { width: 14px; height: 14px; }
.faq-item__icon .icon-minus { display: none; }
.faq-item[open] .faq-item__icon { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-dark); }
.faq-item[open] .faq-item__icon .icon-plus { display: none; }
.faq-item[open] .faq-item__icon .icon-minus { display: block; }
.faq-item__a { padding: 0 26px 24px; margin-top: -8px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-muted); }

/* --- 4.14 Contact --- */
.contact { padding-top: 90px; }
.contact__panel { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; padding: 80px 64px; border-radius: var(--r-panel); background: var(--c-ink); overflow: hidden; }
.contact__panel::before { content: ""; position: absolute; right: 0; top: 0; width: 320px; height: 320px; background: var(--c-blue); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.contact__info { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.contact__intro { display: flex; flex-direction: column; gap: 24px; }
.contact__title { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.125rem); }
.contact__channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 540px; }
.channel { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 18px; background: var(--c-ink-soft); border: 1px solid rgba(255,255,255,.12); color: var(--c-on-dark); }
.channel:hover { color: var(--c-on-dark); border-color: var(--c-blue); }
.channel__label { font-size: var(--fs-xxs); font-weight: 700; letter-spacing: var(--tracking-eyebrow); color: var(--c-blue-300); text-transform: uppercase; }
.channel__value { font-size: 19px; font-weight: 700; }
.quote-form { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 36px; border-radius: var(--r-media); background: var(--c-surface); }
.quote-form__head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.quote-form__title { font-size: 22px; font-weight: 800; color: var(--c-ink); margin: 0; }
.quote-form__subtitle { font-size: var(--fs-small); color: var(--c-muted); margin: 0; }
.quote-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); }
.field input, .field select, .field textarea { height: 50px; padding: 0 14px; border-radius: var(--r-ctrl); border: 1px solid var(--c-line-strong); background: var(--c-input); font-size: 15px; color: var(--c-ink); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.field textarea { height: 110px; padding-top: 12px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--c-blue-700); background: #FFFFFF; box-shadow: 0 0 0 3px var(--c-blue-50); outline: none; }
.quote-form .btn { width: 100%; margin-top: 6px; }
.quote-form__note { font-size: var(--fs-xxs); color: var(--c-subtle); margin-top: 4px; }

/* Request forms (mu-plugins/teclecom-leads.php) inside .quote-form */
.tc-form { display: flex; flex-direction: column; gap: 14px; width: 100%; margin: 0; }
.tc-field { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.tc-field label { font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); }
/* Honeypot: never visible to people, never read by screen readers */
.tc-hp { position: absolute !important; left: -99999px !important; width: 0 !important; height: 0 !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; }
.tc-field input,
.tc-field select,
.tc-field textarea {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border-radius: var(--r-ctrl);
  border: 1px solid var(--c-line-strong);
  background: var(--c-input);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
  box-sizing: border-box;
}
.tc-field textarea { height: 105px; padding: 12px 16px; resize: vertical; }
.tc-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2355585C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
  cursor: pointer;
}
.tc-field input:focus,
.tc-field select:focus,
.tc-field textarea:focus { border-color: var(--c-blue-700); background: #FFFFFF; box-shadow: 0 0 0 3px var(--c-blue-50); outline: none; }
.tc-field .is-invalid { border-color: var(--c-error); }
.tc-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  margin-top: 6px;
  padding: 0 26px;
  border-radius: var(--r-btn);
  border: none;
  background: var(--c-ink);
  color: var(--c-on-dark);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tc-submit:hover { background: #33363A; box-shadow: 0 8px 20px rgba(20, 30, 40, 0.15); }
.tc-submit[disabled] { opacity: .6; cursor: progress; }
.tc-note { margin: 0; font-size: var(--fs-xxs); color: var(--c-subtle); }
.tc-response:empty { display: none; }
.tc-response {
  padding: 12px 16px;
  border-radius: var(--r-ctrl);
  font-size: var(--fs-small);
  font-weight: 600;
  border: 1px solid var(--c-line);
}
.tc-response--ok { background: var(--c-blue-50); border-color: rgba(44, 167, 224, 0.3); color: var(--c-text-2); }
.tc-response--error { background: var(--c-error-bg); border-color: rgba(138, 31, 31, 0.25); color: var(--c-error); }

/* --- 4.13b FAQ page: search, filter pills, category groups --- */
.faq-toolbar { display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; }
.faq-search { position: relative; display: flex; align-items: center; }
.faq-search .icon { position: absolute; left: 20px; width: 20px; height: 20px; color: var(--c-muted); pointer-events: none; }
.faq-search input {
  width: 100%;
  height: 60px;
  padding: 0 20px 0 54px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--c-line-strong);
  background: var(--c-surface);
  font-size: var(--fs-body);
  color: var(--c-ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.faq-search input:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 4px var(--c-blue-50); }
.faq-search input::-webkit-search-cancel-button { cursor: pointer; }
.faq-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.faq-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--c-line-strong);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-small);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.faq-pill__count { font-size: var(--fs-xxs); color: var(--c-muted); background: var(--c-bg); border-radius: var(--r-pill); padding: 2px 8px; }
.faq-pill:hover { border-color: var(--c-blue); }
.faq-pill.is-active { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-dark); }
.faq-pill.is-active .faq-pill__count { background: rgba(255,255,255,.15); color: var(--c-on-dark); }
.faq-empty { text-align: center; padding: 40px 0; color: var(--c-muted); font-size: var(--fs-body); }
.faq-empty a { color: var(--c-blue); font-weight: 700; }
.faq-category { margin-top: 44px; }
.faq-category:first-of-type { margin-top: 0; }
.faq-category__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 800; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--c-line); }
.faq__list--full { display: flex; flex-direction: column; gap: 12px; }

/* --- 4.14a Contact page: map + locate cards --- */
.contact-locate { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.contact-locate__map { height: 100%; min-height: 420px; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--c-line); }
.contact-locate__map iframe { display: block; width: 100%; height: 100%; min-height: 420px; }
.contact-locate__cards { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.contact-locate__card { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: var(--r-card); background: var(--c-surface); border: 1px solid var(--c-line); }
.contact-locate__card-title { font-size: var(--fs-small); font-weight: 700; margin-bottom: 4px; }
.contact-locate__card-text { font-size: var(--fs-small); color: var(--c-muted); line-height: 1.5; }
.contact-locate__card-text a { color: inherit; }
@media (max-width: 860px) {
  .contact-locate { grid-template-columns: 1fr; }
  .contact-locate__map { min-height: 300px; }
  .contact-locate__map iframe { min-height: 300px; }
}

/* --- 4.14b Single project (case-study detail page) --- */
.project-hero__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(9,15,20,.82) 0%, rgba(9,15,20,.25) 45%, rgba(9,15,20,0) 70%); }
.project-hero__overlay { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 40px; display: flex; flex-direction: column; gap: 14px; }
.project-hero__title { max-width: 760px; }
.project-hero__chips { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; margin: 0; padding: 0; }
.project-hero__chips li { display: inline-flex; align-items: center; gap: 8px; color: var(--c-on-dark); font-size: var(--fs-small); font-weight: 600; }
.project-hero__chips .icon { width: 18px; height: 18px; opacity: .85; }
.project-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
.project-detail-grid__aside .spec-card { position: sticky; top: 100px; }
.project-gallery__count { font-size: var(--fs-small); color: var(--c-muted); }
.project-gallery__trigger { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.project-gallery__trigger img { width: 100%; height: 100%; object-fit: cover; }
.project-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(6,10,14,.94); display: flex; align-items: center; justify-content: center; padding: 24px; }
.project-lightbox[hidden] { display: none; }
.project-lightbox__frame { max-width: min(1100px, 92vw); max-height: 84vh; margin: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.project-lightbox__frame img { max-width: 100%; max-height: 76vh; object-fit: contain; border-radius: 12px; }
.project-lightbox__frame figcaption { color: var(--c-on-dark); opacity: .75; font-size: var(--fs-small); }
.project-lightbox__close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: var(--c-on-dark); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.project-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: var(--c-on-dark); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.project-lightbox__nav--prev { left: 20px; }
.project-lightbox__nav--next { right: 20px; }
.project-lightbox__close:hover, .project-lightbox__nav:hover { background: rgba(255,255,255,.2); }
@media (max-width: 860px) {
  .project-detail-grid { grid-template-columns: 1fr; }
  .project-detail-grid__aside .spec-card { position: static; }
  .project-lightbox__nav { width: 42px; height: 42px; }
}

/* --- 4.15 Footer (shared by every page) --- */
.site-footer { margin-top: 16px; padding: 64px 0 28px; background: var(--c-ink); color: var(--c-on-dark); }
.site-footer__top { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); gap: 48px; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.footer-brand__logo { width: 200px; height: auto; }
.footer-brand__text { max-width: 380px; font-size: var(--fs-small); line-height: 1.7; color: #D5D9DC; }
.footer-brand__tag { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 14px; border-radius: var(--r-pill); border: 1px solid rgba(44,167,224,.45); background: rgba(44,167,224,.08); font-size: var(--fs-xxs); font-weight: 700; letter-spacing: .06em; color: var(--c-blue-300); }
.footer-col { display: flex; flex-direction: column; gap: 22px; }
.footer-col__title { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-on-dark); }
.footer-col__title::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-blue); flex-shrink: 0; }
.footer-col ul { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.footer-col a { color: #D5D9DC; font-size: var(--fs-small); line-height: 1.5; }
.footer-col a:hover { color: var(--c-blue-300); }
.footer-contact__list li { display: flex; align-items: center; gap: 12px; font-size: var(--fs-small); color: #D5D9DC; }
.footer-contact__list .icon { width: 18px; height: 18px; color: var(--c-blue-300); }
.footer-contact__list a { color: var(--c-on-dark); font-weight: 700; }
.footer-contact .btn { align-self: flex-start; height: 52px; padding: 0 22px; border-radius: 14px; font-size: 15px; box-shadow: 0 12px 32px rgba(44,167,224,.35); }
.footer-contact .btn .icon { width: 16px; height: 16px; }
.site-footer__legal { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); font-size: var(--fs-xs); color: #8E959C; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 0; padding: 0; list-style: none; }
.footer-legal li + li::before { content: "·"; margin: 0 12px; color: #5E656C; }

/* 5. RESPONSIVE ========================================================== */
@media (max-width: 1280px) {
  .xp-item__head { grid-template-columns: 44px 250px minmax(0, 1fr) 88px 44px; gap: 20px; }
  .xp-item__detail { grid-template-columns: 320px minmax(0, 1fr); gap: 28px; }
  .systems-card { width: 560px; }
  .clients__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  /* header → burger */


  .section-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .about__grid, .method__grid, .faq__grid, .values__panel, .contact__panel { grid-template-columns: 1fr; gap: 40px; }
  .about__media { height: 520px; }
  .method__media { height: 300px; }

  .power__features { grid-template-columns: 1fr 1fr; }
  .projects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lowcurrent__panel { flex-direction: column; align-items: stretch; min-height: 0; padding: 56px 32px 32px; }
  .systems-card { width: auto; }
  .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 280px; }
  .gallery__item--tall { grid-row: span 1; }
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-card--total { grid-column: span 2; grid-row: span 1; min-height: 240px; }
  .values__panel { padding: 56px 32px; }
  .contact__panel { padding: 56px 32px; }
  .clients__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* 37 project dots (one per Réalisation) can never fit inside anything narrower than the full 1440px
   desktop container — the row needs ~1030px on its own. Below that, it silently ran off the right edge
   and, because .site carries overflow-x:clip as a safety net against any accidental horizontal scroll,
   took the "01 / 37" counter and the two 48px prev/next buttons off-screen with it — genuinely
   unreachable by mouse or touch on tablet and mobile alike. Keep the counter + nav buttons, which
   already fit any width; drop the dots row below the point they stop fitting.
   See .claude/velix/PROGRESS.md — mobile audit 2026-09-29. */
@media (max-width: 1100px) {
  .projects__dots { display: none; }
  .projects__pagination { gap: 0; }
}

@media (max-width: 760px) {

  .clients__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .clients__title { font-size: 24px; }
  .clients__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .clients__item { height: 76px; padding: 12px; }

  .about__media { height: 420px; }
  .about__stat, .about__stat:nth-child(even) { padding: 22px 12px 22px 0; }
  .about__stat:nth-child(even) { padding-left: 16px; }


  .power__projects, .projects__grid, .power__features, .values__grid { grid-template-columns: 1fr; }
  .xp-showcase { grid-template-columns: 1fr; gap: 16px; }
  .xp-card { height: 300px; }
  .project-card__media, .project-card__media--tall { height: 300px; }
  .projects__actions { width: 100%; justify-content: space-between; }
  .projects__track .project-card { flex: 0 0 85%; max-width: 85%; min-width: 270px; }
  .meta-list__row { flex-direction: column; gap: 2px; }
  .meta-list dd { text-align: left; }

  .lowcurrent__panel { padding: 48px 20px 20px; }
  .systems-card { padding: 22px; }
  .systems-card__facts { grid-template-columns: 1fr; }
  .gallery__grid { grid-template-columns: 1fr; grid-auto-rows: 260px; }
  .gallery__item--wide { grid-column: span 1; }

  .step { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 26px 0; }
  .step__num { font-size: 32px; }
  .team__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .team-card { padding: 20px; min-height: 160px; }
  .team-card .stat__value { font-size: 40px; }
  .values__panel, .contact__panel { padding: 40px 20px; }
  .contact__panel::before { width: 160px; height: 160px; }
  .contact__channels, .quote-form__row { grid-template-columns: 1fr; }
  .quote-form { padding: 24px; }
}

/* Small structural resets used by the markup */
.about__media { margin: 0; }
.xp-item__heading { margin: 0; font: inherit; }

/* Quote form notices (used by the WordPress form handler) */
.quote-form__notice { margin: 0; padding: 12px 14px; border-radius: var(--r-ctrl); font-size: var(--fs-small); font-weight: 600; }
.quote-form__notice--ok { background: var(--c-blue-50); color: var(--c-text-2); }
.quote-form__notice--error { background: var(--c-error-bg); color: var(--c-error); }

/* Header + hero responsive ---------------------------------------------- */
@media (max-width: 1280px) {
  .site-nav__list { gap: 22px; }
  .site-header__phone span { display: none; }
  .site-header__phone { padding: 12px; margin: -12px; }
  .hero__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
  .hero__photo { left: 56px; width: 340px; }
}
@media (max-width: 1100px) {
  .site-header__toggle { display: inline-flex; }
  .site-nav { position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: none; padding: 12px; border-radius: 20px; background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: 0 20px 40px rgba(20,30,40,.12); max-height: calc(100vh - 120px); overflow-y: auto; }
  .site-header.is-open .site-nav { display: block; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .site-nav__link { display: flex; justify-content: space-between; align-items: center; padding: 12px 10px; border-radius: 10px; font-size: 17px; }
  .site-nav__link:hover { background: var(--c-bg); }

  .site-nav__dropdown {
    position: static;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .site-nav__dropdown-intro,
  .site-nav__dropdown-item-desc {
    display: none;
  }
  .site-nav__dropdown-panel {
    margin-top: 2px;
    padding: 0 0 6px 12px;
    border: none;
    box-shadow: none;
    background: transparent;
    border-left: 2px solid var(--c-blue-50);
    border-radius: 0;
  }
  .site-nav__dropdown-menu {
    display: block;
  }
  .site-nav__dropdown-item {
    padding: 8px 10px;
    border-top: none !important;
  }
  .site-nav__dropdown-item-title {
    font-size: 14px;
  }

  .hero__panel { grid-template-columns: 1fr; gap: 40px; min-height: 0; padding: 140px 32px 40px; }
  .hero__band { top: auto; width: 100%; height: 500px; clip-path: polygon(0 36%, 100% 0, 100% 100%, 0 100%); }
  .hero__content { max-width: 680px; }
  .hero__visual { height: 560px; }
  .hero__photo { left: 50%; width: min(400px, 60%); transform: translateX(-50%); }
}
@media (max-width: 760px) {
  .site-header__actions .btn { display: none; }
  .site-header__logo img { height: 34px; }
  .site-header__bar { height: 64px; padding: 0 8px 0 16px; }

  .hero__panel { padding: 120px 20px 24px; gap: 32px; }
  .hero__chip { font-size: var(--fs-xxs); }
  .hero__text { font-size: 16px; }
  .hero__ctas { width: 100%; }
  .hero__ctas .btn { flex: 1 1 100%; }
  .hero__stats { gap: 12px; padding-top: 22px; }
  .hero__stat .stat__value { font-size: 30px; }
  .hero__stat .stat__label { font-size: var(--fs-xs); }
  .hero__visual { height: 500px; }
  .hero__band { height: 420px; clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%); }
  .hero__photo { width: 74%; }
}

/* Any CTA button placed directly in a section (not inside .hero__ctas/.page-hero__ctas, which already
   go full-width below) can carry long French copy that used to get silently clipped off the right edge
   on narrow screens: .btn forced white-space:nowrap plus a fixed 58px height, so the browser had no way
   to shrink it below its one-line text width. Letting it wrap removes that trap everywhere at once.
   See .claude/velix/PROGRESS.md — mobile audit 2026-09-29. */
@media (max-width: 760px) {
  .btn { white-space: normal; height: auto; min-height: 54px; padding-top: 12px; padding-bottom: 12px; text-align: center; }
  .btn--sm { min-height: 46px; }
  .btn--md { min-height: 50px; }
}

/* ==========================================================================
   6. PAGE — ENTREPRISE (/entreprise/)
   Reuses tokens + base components. Page-specific blocks only.
   ========================================================================== */

/* Generic chip (same look as .hero__chip) and active nav link */
.chip { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 36px; padding: 6px 16px 6px 14px; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-surface); font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; color: var(--c-text-2); }
.chip::before { content: ""; width: 8px; height: 8px; flex-shrink: 0; border-radius: 2px; background: var(--c-blue); transform: rotate(45deg); }
.site-nav__link[aria-current="page"] { color: var(--c-blue-700); }
.site-nav__link[aria-current="page"]::after { content: ""; display: block; height: 2px; margin-top: 4px; border-radius: 2px; background: var(--c-blue); }

/* Breadcrumb */
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-xs); color: var(--c-subtle); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before { content: ""; width: 5px; height: 5px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.breadcrumb a { color: var(--c-muted); font-weight: 600; }
.breadcrumb [aria-current="page"] { color: var(--c-ink); font-weight: 600; }

/* 6.1 Page hero */
.page-hero { padding-top: var(--panel-inset); }
.page-hero__panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 56px; align-items: center; min-height: 760px; padding: 150px 64px 72px; border-radius: var(--r-panel); background: var(--c-surface); overflow: hidden; }
.page-hero__band { position: absolute; top: 0; right: 0; bottom: 0; width: 38%; background: var(--c-blue); clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%); }
.page-hero__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; max-width: 660px; }
.page-hero__title { font-size: clamp(2.375rem, 1.3rem + 3.4vw, 3.875rem); line-height: 1.04; font-weight: 800; letter-spacing: -0.04em; }
.page-hero__title .accent { color: var(--c-blue); }
.page-hero__text { max-width: 580px; font-size: 18px; line-height: 1.6; color: var(--c-muted); }
.page-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.page-hero__ctas .btn { border-radius: var(--r-pill); }
.page-hero__ctas .btn--outline { border-color: var(--c-line-strong); }
.page-hero__ctas .btn--outline:hover { border-color: var(--c-ink); }
.page-hero__visual { position: relative; z-index: 2; padding-left: 24px; }
/* Hero without a visual (Entreprise, Expertises, Projets, FAQ, Contact — 2026-09-29): drop the reserved
   500px second grid column so the content doesn't leave a large empty gap on the right, and shorten the
   panel since it's no longer sized to fit a tall id-card/mosaic. */
.page-hero__panel--single { grid-template-columns: 1fr; min-height: 0; padding-bottom: 96px; }
.page-hero__panel--single .page-hero__content { max-width: 760px; }

.id-card { position: relative; padding: 30px 32px 14px; border-radius: var(--r-media); background: var(--c-surface); box-shadow: var(--shadow-float); }
.id-card__head { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; border-bottom: 1px dashed #D5D9DC; }
.id-card__head img { width: 48px; height: 48px; border-radius: 12px; }
.id-card__kicker { display: block; font-size: var(--fs-xxs); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--c-blue-700); }
.id-card__name { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.id-card .meta-list__row:last-child { border-bottom: 0; }

/* 6.2 Story */
.story__grid { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 80px; }
.story__intro { display: flex; flex-direction: column; gap: 20px; }
.story__text { display: flex; flex-direction: column; gap: 20px; }
.story__text p { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--c-muted); }
.story__text p:first-child { font-family: var(--font-display); font-size: var(--fs-statement); line-height: 1.32; font-weight: 600; letter-spacing: -0.015em; color: var(--c-ink); }
.story__strip { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; margin: 56px 0 0; padding: 0; list-style: none; }
.story__strip .media { height: 340px; }


/* 6.4 Values list */
.values-list__grid { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 64px; }
.values-list__intro { display: flex; flex-direction: column; gap: 22px; }
.values-list__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; margin: 0; padding: 0; list-style: none; }
.value-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding: 28px 0; border-top: 1px solid var(--c-line-strong); }
.value-row__title { font-size: var(--fs-h5); font-weight: 800; margin-bottom: 6px; }
.value-row__text { font-size: var(--fs-body); line-height: 1.6; color: var(--c-muted); }

/* 6.5 Organisation chart */
.org { padding-top: 100px; }
.org__panel { padding: 80px 48px 56px; border-radius: var(--r-panel); background: var(--c-surface); }
.org__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 64px; margin-bottom: 48px; }
.org__chart { display: flex; flex-direction: column; align-items: center; }
.org-node { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 28px; border-radius: var(--r-faq); background: var(--c-ink); color: var(--c-on-dark); text-align: center; }
.org-node__title { font-family: var(--font-display); font-size: 18px; font-weight: 800; }
.org-node__sub { font-size: var(--fs-xs); color: var(--c-on-dark-muted); }
.org__stem { width: 2px; height: 32px; background: var(--c-line-strong); }
.org__branches { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; width: 100%; padding-top: 24px; }
.org__branches::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 2px; background: var(--c-line-strong); }
.org-branch { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-bg); }
.org-branch::before { content: ""; position: absolute; top: -25px; left: 50%; width: 2px; height: 24px; background: var(--c-line-strong); }
.org-branch__title { display: flex; align-items: center; gap: 12px; font-size: var(--fs-h5); font-weight: 800; }
.org-branch .tags .tag { background: var(--c-surface); }
.org__field { width: 100%; margin-top: 24px; padding: 28px; border-radius: var(--r-card); background: var(--c-blue-50); }
.org__field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.org__field-title { font-size: var(--fs-h5); font-weight: 800; }
.org__field-total { font-size: var(--fs-small); font-weight: 700; color: var(--c-blue-700); }
.org__roles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.org-role { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-height: 128px; padding: 18px; border-radius: var(--r-faq); background: var(--c-surface); }
.org-role .stat__value { font-size: 36px; }
.org-role__label { font-size: var(--fs-xs); line-height: 1.4; color: var(--c-text-2); }
.org__stem--down { margin-top: 0; }
.org__quals { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.org__quals-label { font-size: var(--fs-small); font-weight: 700; }

/* 6.6 Approach (3-phase cycle) */
.approach__grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; counter-reset: phase; }
.phase { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 32px; border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-surface); }
.phase__num { font-family: var(--font-display); font-size: 40px; font-weight: 800; letter-spacing: var(--tracking-display); line-height: 1; color: var(--c-blue); }
.phase__title { font-size: var(--fs-h3-lg); font-weight: 800; }
.phase__text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-muted); }
.phase + .phase::before { content: ""; position: absolute; top: 50%; left: -24px; width: 24px; height: 2px; background: var(--c-blue); }
.phase--last { background: var(--c-ink); border-color: var(--c-ink); }
.phase--last .phase__title { color: var(--c-on-dark); }
.phase--last .phase__text { color: var(--c-on-dark-muted); }
.approach__cf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 28px; padding: 22px 26px; border-radius: var(--r-card); background: var(--c-surface); border: 1px solid var(--c-line); }
.approach__cf-label { font-size: var(--fs-small); font-weight: 700; }
.approach__cf ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: cf; }
.approach__cf li { counter-increment: cf; }
.approach__cf li::before { content: counter(cf) "."; margin-right: 6px; color: var(--c-blue-700); font-weight: 700; }

/* 6.7 Strengths */
.strengths__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.strengths__grid .feature-card { height: 100%; }

/* 6.8 CTA band */
.cta-band { padding-top: 100px; }
.cta-band__panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; padding: 72px 64px; border-radius: var(--r-panel); background: var(--c-ink); overflow: hidden; }
.cta-band__panel::before { content: ""; position: absolute; right: 0; top: 0; width: 180px; height: 180px; background: var(--c-blue); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.cta-band__content { position: relative; display: flex; flex-direction: column; gap: 20px; max-width: 700px; }
.cta-band__actions { position: relative; display: flex; flex-wrap: wrap; gap: 12px; }

/* Entreprise responsive */
@media (max-width: 1280px) {
  .page-hero__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
  .org__roles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .strengths__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .page-hero__panel { grid-template-columns: 1fr; gap: 40px; min-height: 0; padding: 140px 32px 40px; }
  .page-hero__band { top: auto; width: 100%; height: 420px; clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%); }
  .page-hero__visual { max-width: 520px; width: 100%; margin-inline: auto; padding: 0 0 24px; }
  .story__grid, .values-list__grid { grid-template-columns: 1fr; gap: 40px; }
  .story__strip { grid-template-columns: 1fr 1fr; }
  .story__strip li:first-child { grid-column: span 2; }
  .org__panel { padding: 56px 32px 40px; }
  .org__head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .approach__grid { grid-template-columns: 1fr; gap: 16px; }
  .phase + .phase::before { top: -16px; left: 50%; width: 2px; height: 16px; }
  .cta-band__panel { grid-template-columns: 1fr; padding: 56px 32px; }
}
@media (max-width: 760px) {
  .page-hero__panel { padding: 120px 20px 24px; }
  .page-hero__band { height: 360px; }
  .page-hero__ctas { width: 100%; }
  .page-hero__ctas .btn { flex: 1 1 100%; }
  .id-card { padding: 22px 20px 8px; }
  .story__strip { grid-template-columns: 1fr; }
  .story__strip li:first-child { grid-column: span 1; }
  .story__strip .media { height: 260px; }
  .values-list__items { grid-template-columns: 1fr; }
  .org__panel { padding: 40px 20px 28px; }
  .org__branches { grid-template-columns: 1fr; padding-top: 0; gap: 16px; }
  .org__branches::before, .org-branch::before { display: none; }
  .org__stem { height: 20px; }
  .org__field { padding: 20px; }
  .org__roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strengths__grid { grid-template-columns: 1fr; }
  .cta-band__panel { padding: 40px 20px; }
  .cta-band__panel::before { width: 150px; height: 150px; }
  .cta-band__actions .btn { flex: 1 1 100%; }
}

/* Footer responsive -------------------------------------------------------- */
@media (max-width: 1100px) {
  .site-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand__text { max-width: 560px; }
}
@media (max-width: 760px) {
  .site-footer { padding-top: 48px; }
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .footer-contact { grid-column: 1 / -1; }
  .site-footer__legal { flex-direction: column; align-items: flex-start; }
  .footer-legal { gap: 6px 16px; }
  .footer-legal li + li::before { display: none; }
}

/* ==========================================================================
   7. PAGE — EXPERTISES (/expertises/)
   Reuses tokens, .page-hero, .breadcrumb, .chip, .cta-band and base components.
   ========================================================================== */

/* 7.1 Hero mosaic (4 domain photos) */
.xp-mosaic { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 220px 220px; gap: 14px; margin: 0; padding: 0 0 36px; list-style: none; }
.xp-mosaic li:nth-child(even) { transform: translateY(36px); }
.xp-mosaic .media { height: 100%; box-shadow: 0 18px 40px rgba(20,30,40,.18); }
.xp-mosaic .photo-pill { left: 12px; bottom: 12px; height: 34px; padding: 0 12px; font-size: var(--fs-xs); }

/* 7.2 Mosaic tiles are the page's domain index (links to the sections) */
.xp-mosaic__link { display: block; height: 100%; border-radius: var(--r-media); }
.xp-mosaic__link .media img { transition: transform 400ms var(--ease); }
.xp-mosaic__link:hover .media img { transform: scale(1.04); }
.xp-mosaic__link:hover .photo-pill__icon { background: var(--c-blue); color: var(--c-on-blue); }
.xp-mosaic__link .photo-pill__icon .icon { transform: rotate(90deg); }
.xp-mosaic__num { position: absolute; top: 12px; left: 12px; padding: 3px 9px; border-radius: var(--r-pill); background: rgba(17,19,21,.72); color: var(--c-on-dark); font-size: var(--fs-xxs); font-weight: 700; letter-spacing: .06em; }

/* 7.3 Domain head (shared by the 4 domains) */
.domain { scroll-margin-top: 24px; }
.domain-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 64px; align-items: center; }
.domain-head__body { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.domain-head__index { display: flex; align-items: center; gap: 14px; }
.domain-head__count { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-eyebrow); color: var(--c-subtle); }
.domain-head__media { height: 420px; }
.domain--dark .domain-head__count { color: var(--c-on-dark-subtle); }

/* 7.4 Courant fort — spec cards */
.spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 48px 0 0; padding: 0; list-style: none; }
.spec-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  padding: 32px 28px;
  border-radius: var(--r-card);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.spec-card:hover {
  transform: translateY(-3px);
  border-color: rgba(44, 167, 224, 0.45);
  box-shadow: 0 16px 36px -4px rgba(20, 30, 40, 0.08);
}
.spec-card--dark {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-on-dark);
}
.spec-card--dark:hover {
  border-color: var(--c-blue);
  box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.35);
}
.spec-card__head { display: flex; align-items: center; gap: 14px; }
.spec-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 800;
  line-height: 1.25;
  margin: 0;
}
.spec-card__text {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-muted);
  margin: 0;
}
.spec-card--dark .spec-card__text { color: var(--c-on-dark-muted); }
.spec-card .meta-list { margin: 4px 0 0; }
.spec-card .meta-list__row:last-child { border-bottom: 0; }
.checklist { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.checklist li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; font-size: var(--fs-body); line-height: 1.5; color: var(--c-text-2); }
.checklist .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--c-blue-700); }
.spec-card--dark .checklist li { color: #D5D9DC; }
.spec-card--dark .checklist .icon { color: var(--c-blue); }
.spec-card__note {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed var(--c-line-strong);
  font-size: var(--fs-xs);
  color: var(--c-subtle);
  line-height: 1.5;
}
.spec-card--dark .spec-card__note {
  border-top-color: rgba(255, 255, 255, 0.12);
  color: var(--c-on-dark-subtle);
}

/* 7.5 Courant faible — dark panel with 12 system cards */
.domain-panel { padding-top: var(--section-space); }
.domain-panel__inner { padding: 72px 48px 48px; border-radius: var(--r-panel); background: var(--c-ink); color: var(--c-on-dark); }
.domain-panel .domain-head__media { height: 380px; }
.systems-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}
.system-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--r-row);
  background: var(--c-ink-soft);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.system-card:hover {
  transform: translateY(-4px);
  border-color: rgba(44, 167, 224, 0.5);
  box-shadow: 0 18px 40px -4px rgba(0, 0, 0, 0.38);
}
.system-card__media {
  position: relative;
  height: 160px;
  background: #111315;
  overflow: hidden;
}
.system-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .92;
  transition: transform 0.4s var(--ease), opacity 0.3s ease;
}
.system-card:hover .system-card__media img {
  transform: scale(1.05);
  opacity: 1;
}
.system-card__media--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 14px), #1A1C1F;
}
.system-card__media--icon .icon {
  width: 48px;
  height: 48px;
  color: var(--c-blue);
  stroke-width: 1.5;
  transition: transform 0.3s var(--ease);
}
.system-card:hover .system-card__media--icon .icon {
  transform: scale(1.1);
}
.system-card__badge {
  /* In-flow pill under the title (both current call sites put it between .system-card__title and
     .system-card__text) — absolute+top/left with no positioned ancestor here used to escape the card
     entirely and pin itself to the top-left of the document, over the header. See PROGRESS.md 2026-09-29. */
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(17, 20, 24, 0.85);
  backdrop-filter: blur(8px);
  color: var(--c-blue-300);
  font-size: var(--fs-xxs);
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid rgba(44, 167, 224, 0.25);
}
.system-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 20px 24px;
  flex-grow: 1;
}
.system-card__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--c-on-dark);
  margin: 0;
}
.system-card__title .icon {
  width: 18px;
  height: 18px;
  color: var(--c-blue);
  flex-shrink: 0;
}
.system-card__text {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--c-on-dark-muted);
  margin: 0;
}
.system-card__specs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: auto 0 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  list-style: none;
}
.system-card__specs li {
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--c-on-dark-subtle);
  display: flex;
  align-items: center;
  gap: 8px;
}
.system-card__specs li::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: var(--c-blue);
  flex-shrink: 0;
  transform: rotate(45deg);
}
.system-card--link {
  background: var(--c-blue);
  border-color: var(--c-blue);
  color: var(--c-on-blue);
}
.system-card--link:hover {
  color: var(--c-on-blue);
  background: #45B4E6;
}
.system-card--link .system-card__media--icon { background: rgba(255,255,255,.18); }
.system-card--link .system-card__media--icon .icon, .system-card--link .system-card__title .icon { color: var(--c-on-blue); }
.system-card--link .system-card__title, .system-card--link .system-card__text { color: var(--c-on-blue); }

.cf-process { margin-top: 48px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,.1); }
.cf-process__title { font-size: var(--fs-h4); font-weight: 800; margin-bottom: 24px; }
.cf-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.cf-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 20px;
  border-radius: var(--r-row);
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255, 255, 255, 0.03);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.cf-step:hover {
  transform: translateY(-3px);
  border-color: rgba(44, 167, 224, 0.45);
  background: rgba(255, 255, 255, 0.06);
}
.cf-step__num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: var(--c-blue);
}
.cf-step__title { font-size: 16px; font-weight: 800; color: var(--c-on-dark); margin: 0; }
.cf-step ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cf-step li { font-size: var(--fs-xs); line-height: 1.5; color: var(--c-on-dark-muted); }
.cf-step li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 8px 2px 0; border-radius: 1px; background: var(--c-blue); transform: rotate(45deg); }

/* 7.6 VDI split */
.vdi__grid { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 64px; align-items: stretch; }
.vdi__media { min-height: 620px; }
.vdi__body { display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.vdi__statement { font-family: var(--font-display); font-size: var(--fs-statement); line-height: 1.32; font-weight: 600; letter-spacing: -0.015em; }
.vdi__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; padding: 28px 0 0; border-top: 1px solid var(--c-line-strong); }
.vdi__rooms { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.vdi__rooms-label { font-size: var(--fs-small); font-weight: 700; }

/* 7.7 Solaire */
.solar { padding-top: var(--section-space); }
.solar__panel { padding: 72px 48px 48px; border-radius: var(--r-panel); background: var(--c-surface); }
.solar-stat { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 16px; min-height: 380px; padding: 36px; border-radius: var(--r-media); background: var(--c-blue); color: var(--c-on-blue); overflow: hidden; }
.solar-stat__img { position: absolute; right: 0; bottom: 0; width: 58%; height: 52%; object-fit: cover; border-top-left-radius: var(--r-media); }
.solar-stat__value { position: relative; font-family: var(--font-display); font-size: clamp(4rem, 3rem + 3vw, 6.5rem); font-weight: 800; letter-spacing: -0.05em; line-height: .9; }
.solar-stat__label { position: relative; max-width: 240px; font-size: var(--fs-body); font-weight: 700; line-height: 1.45; }
.missions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}
.mission {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 20px;
  border-radius: var(--r-row);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mission:hover {
  transform: translateY(-3px);
  border-color: rgba(44, 167, 224, 0.45);
  box-shadow: 0 14px 30px -4px rgba(20, 30, 40, 0.07);
}
.mission__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.25;
  margin: 0;
}
.mission ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mission li { font-size: var(--fs-small); line-height: 1.45; color: var(--c-muted); }
.mission li::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 8px;
  border-radius: 1px;
  background: var(--c-blue);
  vertical-align: middle;
}
.solar__note { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 18px 22px; border-radius: var(--r-row); background: var(--c-blue-50); font-size: var(--fs-body); font-weight: 600; color: var(--c-text-2); }
.solar__note .icon { color: var(--c-blue-700); }

/* 7.8 Sectors */
.sectors__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.sector-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  padding: 28px;
  border-radius: var(--r-card);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.sector-card:hover {
  transform: translateY(-3px);
  border-color: rgba(44, 167, 224, 0.45);
  box-shadow: 0 14px 30px -4px rgba(20, 30, 40, 0.08);
}
.sector-card__title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 800; margin: 0; }
.sector-card__text { font-size: var(--fs-body); line-height: 1.6; color: var(--c-muted); margin: 0; }

/* ==========================================================================
   8. DEDICATED EXPERTISE SUBPAGES (courant-fort, courant-faible, vdi, solaire, maintenance)
   Uses strict tokens only. Reusable across all subpages.
   ========================================================================== */

/* 8.1 KPI / Key Indicators Grid */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: var(--stack-lg) 0 0;
  padding: 0;
  list-style: none;
}
.kpi-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  padding: 22px 20px;
  border-radius: var(--r-card);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  min-width: 0;
}
.kpi-card .eyebrow {
  font-size: 11px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.kpi-card .eyebrow::before {
  width: 14px;
  height: 2px;
  flex-shrink: 0;
}
.kpi-card:hover {
  transform: translateY(-3px);
  border-color: rgba(44, 167, 224, 0.45);
  box-shadow: 0 12px 28px -4px rgba(20, 30, 40, 0.08);
}
.kpi-card--dark {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-on-dark);
}
.kpi-card--dark:hover {
  border-color: var(--c-blue);
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.35);
}
.kpi-card__val {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 0.92rem + 0.45vw, 1.3125rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--c-ink);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-card--dark .kpi-card__val {
  color: #FFFFFF;
}
.kpi-card__text {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--c-muted);
  margin: 2px 0 0;
}
.kpi-card--dark .kpi-card__text {
  color: var(--c-on-dark-muted);
}

/* 8.2 Subpage Hero Visual (Single Photo with Badge) */
.page-hero__single-media {
  position: relative;
  min-height: 440px;
  height: 100%;
  border-radius: var(--r-media);
  overflow: hidden;
  box-shadow: var(--shadow-float);
  background: #111;
}
.page-hero__single-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 8.3 3-Column Spec Grid */
.spec-grid--3col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: var(--stack-lg) 0 0;
  padding: 0;
  list-style: none;
}

/* 8.4 Subpage Sections with Theme Panels */
.subpage-panel {
  padding-top: var(--section-space);
}
.subpage-panel__inner {
  padding: 72px 48px 64px;
  border-radius: var(--r-panel);
}
.subpage-panel__inner > .container {
  max-width: 100%;
  padding-inline: 0;
}
.subpage-panel--tint .subpage-panel__inner {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
}
.subpage-panel--dark .subpage-panel__inner {
  background: var(--c-ink);
  color: var(--c-on-dark);
}
.subpage-panel--white .subpage-panel__inner {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
}
.subpage-panel__head {
  max-width: 760px;
  margin-bottom: var(--stack-lg);
}

.domain-head__feature-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.domain-head__feature-card .spec-card {
  height: 100%;
}

.domain__cta-wrap {
  margin-top: var(--stack-lg);
  text-align: center;
}
.domain__cta-wrap--left {
  margin-top: var(--stack-md);
  text-align: left;
}

.btn--outline-on-dark {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--c-on-dark);
}
.btn--outline-on-dark:hover {
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
  color: var(--c-on-dark);
}

/* Expertises & Subpages responsive rules */
@media (max-width: 1280px) {
  .domain-head { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 40px; }
  .systems-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .missions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .cf-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .kpi-grid { gap: 12px; }
  .kpi-card { padding: 18px 16px; }
  .kpi-card__val { font-size: 1.15rem; }
}

@media (max-width: 1024px) {
  .xp-mosaic { max-width: 560px; margin-inline: auto; width: 100%; }
  .domain-head, .vdi__grid { grid-template-columns: 1fr; gap: 28px; }
  .domain-head__media { height: 340px; }
  .systems-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .missions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sectors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .spec-grid--3col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .vdi__media { min-height: 360px; }
  .domain-panel__inner, .solar__panel { padding: 56px 32px 32px; }
  .subpage-panel__inner { padding: 52px 32px 40px; }
  .page-hero__single-media { min-height: 360px; }
}

@media (max-width: 768px) {
  .xp-mosaic { grid-template-rows: 150px 150px; gap: 10px; padding-bottom: 24px; }
  .xp-mosaic li:nth-child(even) { transform: translateY(24px); }
  .spec-grid { grid-template-columns: 1fr; gap: 14px; }
  .spec-grid--3col { grid-template-columns: 1fr; gap: 14px; }
  .systems-grid { grid-template-columns: 1fr; gap: 14px; }
  .missions { grid-template-columns: 1fr; gap: 12px; }
  .cf-steps { grid-template-columns: 1fr; gap: 12px; }
  .sectors__grid { grid-template-columns: 1fr; gap: 14px; }
  .vdi__list { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: 1fr; gap: 12px; }
  .kpi-card { padding: 22px 20px; }
  .spec-card { padding: 24px 20px; }
  .domain-panel__inner, .solar__panel { padding: 36px 18px 24px; }
  .subpage-panel__inner { padding: 36px 18px 28px; }
  .solar-stat { min-height: 280px; padding: 24px; }
  .solar-stat__img { width: 50%; height: 45%; }
  .page-hero__single-media { min-height: 240px; }
  .domain-head__media { height: 260px; }
}

/* ==========================================================================
   Homepage refresh (2026-09-25)
   - 4.5b Expertises carousel (replaces the static 3-column .xp-showcase grid)
   - Light "Demander un devis" footer button, "Développé par" credit line
   ========================================================================== */

/* --- Expertises carousel --- */
.xp-carousel { position: relative; width: 100%; }
.xp-carousel__viewport { position: relative; margin-inline: calc(var(--gutter) * -0.35); }
.xp-carousel__track {
  display: flex; gap: 20px; margin: 0; padding: 6px calc(var(--gutter) * 0.35) 18px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scroll-padding-inline: calc(var(--gutter) * 0.35); scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab;
}
.xp-carousel__track::-webkit-scrollbar { display: none; }
.xp-carousel__track.is-dragging { scroll-behavior: auto; scroll-snap-type: none; cursor: grabbing; user-select: none; }
.xp-carousel__slide { flex: 0 0 calc((100% - 40px) / 3); min-width: 0; scroll-snap-align: start; }

.xp-carousel .xp-card { height: 460px; border-radius: var(--r-media); box-shadow: 0 10px 30px rgba(20,40,60,.12); isolation: isolate; }
.xp-carousel .xp-card:hover, .xp-carousel .xp-card:focus-visible { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(20,40,60,.26); }
.xp-carousel .xp-card__scrim { background: linear-gradient(180deg, rgba(9,15,20,0) 18%, rgba(8,13,17,.55) 52%, rgba(8,13,17,.94) 100%); }
.xp-carousel .xp-card__body { padding: 24px 26px 26px; gap: 8px; align-items: flex-start; }
.xp-carousel .xp-card__title { font-size: 1.4rem; line-height: 1.2; }
.xp-card__pill {
  display: inline-flex; align-items: center; margin-top: 2px; padding: 5px 12px; border-radius: var(--r-pill);
  border: 1px solid rgba(124,203,238,.55); background: rgba(44,167,224,.22); color: #fff;
  font-size: var(--fs-xxs); font-weight: 700; letter-spacing: .02em; backdrop-filter: blur(6px);
}
/* Description opens on hover/focus (grid-rows 0fr -> 1fr animates height without JS measurement);
   touch devices have no hover, so it is always shown there. */
.xp-carousel .xp-card__desc {
  display: grid; grid-template-rows: 0fr; margin: 0; max-width: 34ch; opacity: 0; overflow: hidden;
  font-size: var(--fs-small); line-height: 1.55; color: rgba(255,255,255,.88);
  transition: grid-template-rows .4s var(--ease), opacity .3s var(--ease), margin .4s var(--ease);
}
.xp-carousel .xp-card:hover .xp-card__desc, .xp-carousel .xp-card:focus-visible .xp-card__desc { grid-template-rows: 1fr; opacity: 1; margin-top: 4px; }
@supports not (grid-template-rows: 0fr) { .xp-carousel .xp-card__desc { display: block; max-height: 0; } .xp-carousel .xp-card:hover .xp-card__desc { max-height: 8em; } }
@media (hover: none) { .xp-carousel .xp-card__desc { grid-template-rows: 1fr; opacity: 1; margin-top: 4px; } }
.xp-card__cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 12px; font-size: var(--fs-small); font-weight: 700; color: #fff; }
.xp-carousel .xp-card__arrow { margin-top: 0; width: 40px; height: 40px; background: rgba(255,255,255,.14); }
.xp-carousel .xp-card:hover .xp-card__arrow, .xp-carousel .xp-card:focus-visible .xp-card__arrow { background: var(--c-blue); border-color: var(--c-blue); transform: translateX(4px); }
.xp-carousel .xp-card:focus-visible { outline: none; box-shadow: var(--focus-ring), 0 22px 48px rgba(20,40,60,.26); }

/* Staggered reveal — only armed once JS has flagged the carousel, so no-JS visitors still see every slide. */
.xp-carousel[data-xp-ready] .xp-carousel__slide { opacity: 0; transform: translateY(28px) scale(.98); }
.xp-carousel[data-xp-ready].is-inview .xp-carousel__slide {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--xp-i, 0) * 90ms);
}

.xp-carousel__footer { display: flex; align-items: center; gap: 24px; margin-top: 18px; }
.xp-carousel__progress { flex: 1; height: 3px; border-radius: 2px; background: var(--c-line-strong); overflow: hidden; }
.xp-carousel__progress span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--c-blue); transition: width .35s var(--ease); }
.xp-carousel__counter { min-width: 64px; font-size: var(--fs-small); font-weight: 700; color: var(--c-muted); font-variant-numeric: tabular-nums; text-align: right; }
.xp-carousel__nav { display: flex; gap: 10px; }

@media (max-width: 1100px) {
  .xp-carousel__slide { flex-basis: calc((100% - 20px) / 2); }
  .xp-carousel .xp-card { height: 420px; }
}
@media (max-width: 640px) {
  .xp-carousel__viewport { margin-inline: calc(var(--gutter) * -1); }
  .xp-carousel__track { padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); gap: 14px; }
  .xp-carousel__slide { flex-basis: 84%; }
  .xp-carousel .xp-card { height: 400px; }
  .xp-carousel__footer { gap: 14px; }
  .xp-carousel__counter { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .xp-carousel__track { scroll-behavior: auto; }
  .xp-carousel[data-xp-ready] .xp-carousel__slide { opacity: 1; transform: none; }
}

/* --- Footer: light "Demander un devis" button + credit --- */
.btn--light { background: #F4F8FB; color: var(--c-ink); }
.btn--light:hover, .btn--light:focus-visible { background: #FFFFFF; color: var(--c-blue-700); }
.footer-contact .btn.btn--light { box-shadow: 0 12px 32px rgba(0,0,0,.28); }
.footer-credit { margin: 0; color: #B4BAC0; font-size: var(--fs-xs); }
.footer-credit a { color: #FFFFFF; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px; transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease); }
.footer-credit a:hover, .footer-credit a:focus-visible { color: var(--c-blue-300); text-decoration-color: currentColor; }

/* Hero without the chip/stat strip: keep the CTA row balanced */
.hero__ctas { margin-bottom: 4px; }
.footer-col .btn.btn--light, .footer-contact .btn.btn--light { background: #F4F8FB; color: var(--c-ink); font-weight: 700; }
.footer-col .btn.btn--light:hover, .footer-col .btn.btn--light:focus-visible { background: #FFFFFF; color: var(--c-blue-700); }

/* --- Notre méthode (homepage): stepper timeline ---------------------------------------------------
   Namespaced .mth-* so /methode/ (page-methode.php, still on .method/.steps) is unaffected. */
.mth__panel { padding: clamp(24px, 4vw, 56px); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-panel); box-shadow: 0 1px 2px rgba(20,40,60,.04); }
.mth__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: clamp(32px, 4vw, 56px); }
.mth__titles { display: flex; flex-direction: column; gap: 18px; max-width: 620px; }
.mth__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 440px; }

.mth__track { position: relative; --mth-gap: 24px; }
.mth__line { position: absolute; z-index: 0; top: 21px; left: 22px; height: 2px; border-radius: 2px; background: var(--c-line-strong);
  width: calc((100% + var(--mth-gap)) / var(--mth-n) * (var(--mth-n) - 1)); overflow: hidden; }
.mth__line span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--c-blue), var(--c-blue-700)); transform-origin: left center; }
.mth__steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--mth-n), minmax(0, 1fr)); gap: var(--mth-gap); margin: 0; padding: 0; list-style: none; }
.mth-step { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.mth-step__node {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-surface); border: 2px solid var(--c-line-strong); color: var(--c-muted);
  font-family: var(--font-display); font-size: 14px; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 6px var(--c-surface);
}
.mth-step__card {
  position: relative; flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 26px 24px 28px; overflow: hidden;
  background: var(--c-bg); border: 1px solid transparent; border-radius: var(--r-card);
  transition: transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.mth-step__card:hover { transform: translateY(-6px); background: var(--c-surface); border-color: var(--c-blue); box-shadow: 0 18px 40px rgba(20,40,60,.12); }
.mth-step__ghost { position: absolute; right: 14px; top: 2px; font-family: var(--font-display); font-size: 84px; font-weight: 800; line-height: 1; letter-spacing: var(--tracking-display); color: var(--c-blue); opacity: .1; pointer-events: none; user-select: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.mth-step__card:hover .mth-step__ghost { opacity: .2; transform: translateY(4px); }
.mth-step__card .icon-box { background: var(--c-blue-50); color: var(--c-blue-700); }
.mth-step__title { font-size: 1.25rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
.mth-step__text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-muted); }

/* Reveal: armed by JS only (no-JS visitors keep everything visible). The line draws left to right and each
   node lights up as the line reaches it, then the cards rise in behind it. */
.mth__panel[data-mth-ready] .mth__line span { transform: scaleX(0); }
.mth__panel[data-mth-ready] .mth-step__card { opacity: 0; transform: translateY(24px); }
.mth__panel[data-mth-ready].is-inview .mth__line span { transform: scaleX(1); transition: transform 1.5s var(--ease) .15s; }
.mth__panel[data-mth-ready].is-inview .mth-step__card { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); transition-delay: calc(.2s + var(--i) * .3s), calc(.2s + var(--i) * .3s), 0s, 0s, 0s; }
.mth__panel.is-inview .mth-step__node { background: var(--c-blue); border-color: var(--c-blue); color: var(--c-on-blue); transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease); transition-delay: calc(.15s + var(--i) * .5s); }
.mth__panel:not([data-mth-ready]) .mth-step__node { background: var(--c-blue); border-color: var(--c-blue); color: var(--c-on-blue); }

@media (max-width: 1100px) {
  .mth__head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .mth__line { display: none; }
  .mth__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--mth-gap); }
}
@media (max-width: 640px) {
  .mth__steps { grid-template-columns: 1fr; gap: 20px; }
  .mth__line { display: block; top: 22px; bottom: 22px; left: 21px; width: 2px; height: auto; }
  .mth__line span { transform-origin: center top; }
  .mth__panel[data-mth-ready] .mth__line span { transform: scaleY(0); }
  .mth__panel[data-mth-ready].is-inview .mth__line span { transform: scaleY(1); transition-duration: 2s; }
  .mth-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 16px; }
  .mth-step__ghost { font-size: 64px; }
  /* end the vertical line at the last node instead of running down beside the last card */
  .mth-step { position: relative; }
  .mth-step:last-child::after { content: ""; position: absolute; left: 0; top: 46px; bottom: -1px; width: 44px; background: var(--c-surface); }
}
@media (prefers-reduced-motion: reduce) {
  .mth__panel[data-mth-ready] .mth-step__card { opacity: 1; transform: none; }
  .mth__panel[data-mth-ready] .mth__line span { transform: none; }
}

/* ==========================================================================
   Inner pages (2026-09-25): compact hero + "Notre approche" cards
   ========================================================================== */
.page-hero__panel { min-height: 0; padding: 124px 56px 52px; gap: 40px; }
.page-hero__content { gap: 18px; max-width: 620px; }
.page-hero__title { font-size: clamp(1.75rem, 1.05rem + 2vw, 2.625rem); line-height: 1.1; letter-spacing: -0.03em; }
.page-hero__text { max-width: 540px; font-size: 16px; line-height: 1.6; }
.page-hero__single-media { min-height: 300px; }
.id-card { padding: 24px 26px 8px; }
@media (max-width: 1100px) {
  .page-hero__panel { padding: 112px 28px 32px; gap: 28px; }
  .page-hero__band { height: 320px; }
}
@media (max-width: 760px) {
  .page-hero__panel { padding: 100px 20px 24px; }
  .page-hero__band { height: 260px; }
  .page-hero__title { font-size: clamp(1.625rem, 1.2rem + 2.4vw, 2rem); }
}

/* Notre approche: three clean cards, the last one filled blue (no connector lines).
   Blue-700 rather than the brand blue for the filled card so white text keeps AA contrast (4.6:1). */
.approach__grid { gap: 24px; }
.phase { gap: 16px; padding: 38px 34px 42px; border-radius: var(--r-media); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.phase:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(20,40,60,.12); }
.phase + .phase::before { display: none; }
.phase__num { font-size: 48px; margin-bottom: 8px; }
.phase__title { font-size: 1.75rem; }
.phase--last { background: var(--c-blue-700); border-color: var(--c-blue-700); }
.phase--last .phase__num, .phase--last .phase__title { color: #fff; }
.phase--last .phase__text { color: rgba(255,255,255,.94); }

/* ===== Expertise detail pages (2026-09-29 rewrite) — inc/expertise-layout.php ===== */
/* Each page shares hero/intro/links/CTA, but its core section has its own layout (rows, grouped tiles,
   columns, cards + steps, bento) so the five pages no longer read as the same card grid. */
.xpd-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.xpd-intro__media { margin: 0; aspect-ratio: 4 / 3; }
.xpd-intro__body { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.xpd-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--c-line-strong); }
.xpd-facts li { display: flex; flex-direction: column; gap: 6px; padding: 20px 18px 0 0; }
.xpd-facts li + li { padding-left: 18px; border-left: 1px solid var(--c-line); }
.xpd-facts strong { font-size: clamp(1.25rem, 1rem + .8vw, 1.625rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--c-ink); }
.xpd-facts span { font-size: var(--fs-small); line-height: 1.45; color: var(--c-muted); }

/* Solaire: figures panel in place of a photo */
.xpd-stats { display: grid; gap: 1px; border-radius: var(--r-media); overflow: hidden; background: rgba(255, 255, 255, .14); }
.xpd-stats__item { display: flex; flex-direction: column; gap: 8px; padding: 32px 36px; background: var(--c-ink); }
.xpd-stats__item:first-child { background: var(--c-blue); }
.xpd-stats__item strong { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--c-on-dark); }
.xpd-stats__item:first-child strong, .xpd-stats__item:first-child span { color: var(--c-on-blue); }
.xpd-stats__item span { font-size: var(--fs-body); color: var(--c-on-dark-muted); }

/* Courant fort: editorial numbered rows */
.xpd-rows { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--c-ink); }
.xpd-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.35fr); gap: 32px; align-items: start; padding: 36px 0; border-bottom: 1px solid var(--c-line); }
.xpd-row__num { padding-top: 6px; font-size: var(--fs-small); font-weight: 800; letter-spacing: .08em; color: var(--c-blue-700); }
.xpd-row__title { font-size: var(--fs-h4); font-weight: 800; line-height: 1.2; }
.xpd-row__body { display: flex; flex-direction: column; gap: 16px; }
.xpd-row__text { font-size: var(--fs-body); line-height: 1.6; color: var(--c-muted); }

/* Courant faible: systems grouped by purpose */
.xpd-groups { display: flex; flex-direction: column; gap: 40px; }
.xpd-group { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; padding-top: 28px; border-top: 1px solid var(--c-line-strong); }
.xpd-group__head { display: flex; flex-direction: column; gap: 6px; }
.xpd-group__title { font-size: var(--fs-h4); font-weight: 800; line-height: 1.2; }
.xpd-group__text { color: var(--c-muted); }
.xpd-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.xpd-tile { display: flex; align-items: flex-start; gap: 14px; padding: 20px; border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-surface); transition: border-color .2s ease; }
.xpd-tile:hover { border-color: var(--c-blue); }
.xpd-tile__title { font-size: 16px; font-weight: 700; line-height: 1.3; }
.xpd-tile__text { margin-top: 4px; font-size: var(--fs-small); line-height: 1.5; color: var(--c-muted); }

/* VDI: numbered columns + certification callout */
.xpd-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.xpd-col { display: flex; flex-direction: column; gap: 14px; padding: 32px 28px; border: 1px solid var(--c-line); border-top: 3px solid var(--c-blue); border-radius: var(--r-card); background: var(--c-surface); }
.xpd-col__num { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--c-line-strong); }
.xpd-col__title { font-size: var(--fs-h4); font-weight: 800; line-height: 1.2; }
.xpd-col__text { line-height: 1.6; color: var(--c-muted); }
.xpd-callout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 20px; padding: 36px 40px; border-radius: var(--r-card); background: var(--c-ink); }
.xpd-callout__title { font-size: var(--fs-h4); font-weight: 800; line-height: 1.2; color: var(--c-on-dark); }
.xpd-callout__text { margin-top: 8px; line-height: 1.6; color: var(--c-on-dark-muted); }

/* Solaire: solution cards + steps */
.xpd-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.xpd-card { display: flex; flex-direction: column; gap: 16px; padding: 32px; border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-surface); }
.xpd-card__title { font-size: var(--fs-h4); font-weight: 800; line-height: 1.2; }
.xpd-card__text { line-height: 1.6; color: var(--c-muted); }
.xpd-subtitle { margin: 64px 0 24px; font-size: var(--fs-h4); font-weight: 800; }
.xpd-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; margin: 0; padding: 0; list-style: none; counter-reset: xpd-step; }
.xpd-steps li { display: flex; flex-direction: column; gap: 8px; padding-top: 20px; border-top: 2px solid var(--c-line-strong); counter-increment: xpd-step; }
.xpd-steps li:first-child { border-top-color: var(--c-blue); }
.xpd-steps li::before { content: counter(xpd-step, decimal-leading-zero); font-size: var(--fs-small); font-weight: 800; letter-spacing: .08em; color: var(--c-blue-700); }
.xpd-steps strong { font-size: 18px; font-weight: 800; }
.xpd-steps span { line-height: 1.55; color: var(--c-muted); }

/* Maintenance: 24/7 feature + stacked offers */
.xpd-bento { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; }
.xpd-bento__feature { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 28px; padding: 40px; border-radius: var(--r-card); background: var(--c-blue); color: var(--c-on-blue); }
.xpd-bento__kicker { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.xpd-bento__title { margin-top: 10px; font-size: var(--fs-h3); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.xpd-bento__text { margin-top: 12px; line-height: 1.6; }
.xpd-bento__list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.xpd-bento__item { display: flex; align-items: flex-start; gap: 18px; padding: 26px 28px; border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-surface); }
.xpd-bento__item-title { font-size: 18px; font-weight: 800; line-height: 1.25; }
.xpd-bento__item-text { margin-top: 6px; line-height: 1.6; color: var(--c-muted); }

/* Other expertises: one compact row instead of a card grid */
.xpd-links-wrap { padding-bottom: 0; }
.xpd-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 28px; border-top: 1px solid var(--c-line); }
.xpd-links__label { margin-right: 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--c-muted); }
.xpd-links__item { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-surface); font-size: var(--fs-small); font-weight: 600; color: var(--c-ink); transition: border-color .2s ease, background .2s ease, color .2s ease; }
.xpd-links__item .icon { width: 14px; height: 14px; }
.xpd-links__item:hover { border-color: var(--c-ink); background: var(--c-ink); color: var(--c-on-dark); }

@media (max-width: 1100px) {
  .xpd-intro { gap: 40px; }
  .xpd-row { grid-template-columns: 56px minmax(0, 1fr); gap: 12px 24px; }
  .xpd-row__body { grid-column: 2; }
  .xpd-group { grid-template-columns: 1fr; gap: 16px; }
  .xpd-cols, .xpd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xpd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
}
@media (max-width: 860px) {
  .xpd-intro, .xpd-bento { grid-template-columns: 1fr; }
  .xpd-facts { grid-template-columns: 1fr; }
  .xpd-facts li { padding: 16px 0 0; }
  .xpd-facts li + li { margin-top: 16px; padding-left: 0; border-left: 0; border-top: 1px solid var(--c-line); }
  .xpd-cols, .xpd-cards { grid-template-columns: 1fr; }
  .xpd-callout { grid-template-columns: 1fr; gap: 18px; padding: 28px 24px; }
  .xpd-bento__feature { padding: 28px 24px; }
  .xpd-stats__item { padding: 26px 24px; }
}
@media (max-width: 560px) {
  .xpd-row { grid-template-columns: 1fr; gap: 10px; padding: 28px 0; }
  .xpd-row__body { grid-column: auto; }
  .xpd-steps { grid-template-columns: 1fr; }
  .xpd-tile, .xpd-bento__item { padding: 18px; }
}

/* ===== Expertises hub (/expertises/, 2026-09-29 rewrite) — page-expertises.php ===== */
.xph-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.xph-card { grid-column: span 2; scroll-margin-top: 120px; }
.xph-card--wide { grid-column: span 3; }
.xph-card__link { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-surface); color: var(--c-ink); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.xph-card__link:hover { border-color: var(--c-ink); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .35); transform: translateY(-2px); }
.xph-card__link:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 3px; }
.xph-card__media { display: block; aspect-ratio: 4 / 3; border-radius: 0; }
.xph-card--wide .xph-card__media { aspect-ratio: 16 / 9; }
.xph-card__media img { transition: transform .5s ease; }
.xph-card__link:hover .xph-card__media img { transform: scale(1.04); }
.xph-card__media--brand { display: flex; align-items: center; justify-content: center; background: var(--c-blue); color: var(--c-on-blue); }
.xph-card__media--brand .icon { width: 72px; height: 72px; stroke-width: 1.5; }
.xph-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 12px; padding: 26px 28px 28px; }
.xph-card__num { font-size: var(--fs-small); font-weight: 800; letter-spacing: .08em; color: var(--c-blue-700); }
.xph-card__title { font-size: var(--fs-h4); font-weight: 800; line-height: 1.2; }
.xph-card__text { line-height: 1.55; color: var(--c-muted); }
.xph-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.xph-card__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font-weight: 700; }
.xph-card__cta .icon { width: 16px; height: 16px; transition: transform .2s ease; }
.xph-card__link:hover .xph-card__cta .icon { transform: translateX(4px); }

.xph-needs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.xph-need { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 32px 28px; border-radius: var(--r-card); background: var(--c-bg); border: 1px solid var(--c-line); }
.xph-need__title { font-size: var(--fs-h4); font-weight: 800; line-height: 1.2; }
.xph-need__text { line-height: 1.6; color: var(--c-muted); }
.xph-need__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }

@media (max-width: 1100px) {
  .xph-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xph-card, .xph-card--wide { grid-column: span 1; }
  .xph-card:last-child { grid-column: 1 / -1; }
  .xph-card:last-child .xph-card__media { aspect-ratio: 16 / 7; }
  .xph-needs { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .xph-grid { grid-template-columns: 1fr; }
  .xph-card:last-child .xph-card__media, .xph-card--wide .xph-card__media { aspect-ratio: 4 / 3; }
  .xph-card__body { padding: 22px; }
  .xph-need { padding: 26px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .xph-card__link, .xph-card__media img, .xph-card__cta .icon { transition: none; }
  .xph-card__link:hover { transform: none; }
}

/* ===== Mobile / tablet header & menu (≤1100px, 2026-09-29) — header.php + main.js ===== */
/* Hamburger ↔ close icon, dimmed backdrop, page scroll lock, accordion sub-menus, and a menu footer with
   the quote CTA + phone (both hidden from the bar on small screens). Desktop is untouched. */
.site-header__toggle-close { display: none; }
.site-header__backdrop { display: none; }
.site-nav__mobile-cta { display: none; }

@media (max-width: 1100px) {
  html.nav-open { overflow: hidden; }
  .site-header__inner { position: relative; z-index: 1; }
  .site-header__backdrop { position: fixed; inset: 0; display: block; background: rgba(15, 20, 25, .45); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
  .site-header.is-open .site-header__backdrop { opacity: 1; visibility: visible; }

  .site-header__toggle { transition: background .15s ease, border-color .15s ease, color .15s ease; }
  .site-header.is-open .site-header__toggle { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-dark); }
  .site-header.is-open .site-header__toggle-open { display: none; }
  .site-header.is-open .site-header__toggle-close { display: block; }

  /* Panel: animates in instead of popping, scrolls on its own, never lets the page scroll behind it */
  .site-nav { display: block; padding: 10px; max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; }
  .site-header.is-open .site-nav { opacity: 1; visibility: visible; transform: none; }

  .site-nav__list > li + li { border-top: 1px solid var(--c-line); }
  .site-nav__link { min-height: 52px; padding: 12px 14px; font-size: 17px; }
  .site-nav__link[aria-current="page"] { background: var(--c-blue-50); color: var(--c-blue-700); box-shadow: inset 3px 0 0 var(--c-blue); }
  .site-nav__link[aria-current="page"]::after { content: none; }

  /* Accordion sub-menus */
  .site-nav__chevron { width: 20px; height: 20px; }
  .site-nav__item--has-dropdown:hover .site-nav__chevron,
  .site-nav__item--has-dropdown:focus-within .site-nav__chevron,
  .site-nav__item--has-dropdown.is-active .site-nav__chevron { transform: none; color: var(--c-muted); }
  .site-nav__item--has-dropdown.is-sub-open .site-nav__chevron { transform: rotate(180deg); color: var(--c-blue-700); }
  .site-nav__dropdown { display: none; }
  .site-nav__item--has-dropdown.is-sub-open .site-nav__dropdown { display: block; }
  .site-nav__dropdown-panel { margin: 0 0 10px 14px; padding: 0 0 0 12px; border-left: 2px solid var(--c-blue-50); }
  .site-nav__dropdown-intro { display: block; margin: 0; padding: 0; border: 0; }
  .site-nav__dropdown-intro > div { display: none; }
  .site-nav__dropdown-intro .link-arrow { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 10px; font-size: 15px; font-weight: 700; color: var(--c-blue-700); }
  .site-nav__dropdown-item,
  .site-nav__dropdown-menu .site-nav__dropdown-item:nth-child(-n+3) { display: flex; align-items: center; min-height: 48px; padding: 10px; border: 0; border-radius: 10px; }
  .site-nav__dropdown-item:hover, .site-nav__dropdown-item:focus-visible { background: var(--c-bg); }
  .site-nav__dropdown-item-title { font-size: 15px; font-weight: 600; }

  /* Menu footer: quote CTA + phone */
  .site-nav__mobile-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--c-line); }
  .site-nav__mobile-cta .btn { justify-content: center; min-height: 52px; border-radius: 14px; }
  .site-nav__mobile-cta .btn--outline { border-color: var(--c-line-strong); }
  .site-nav__mobile-cta .icon { width: 18px; height: 18px; }
}
@media (max-width: 480px) {
  .site-header__inner { padding-inline: calc(var(--panel-inset) + 12px); }
  .site-nav__mobile-cta { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav, .site-header__backdrop { transition: none; }
}

/* ===== Homepage hero (2026-09-30 redesign) — front-page.php ===== */
/* Two floating cards removed; the photo now fills the whole right column. The H1 is exactly 3 lines on
   tablet/desktop: each .hero__line is a block, and the font is sized to the column itself (container
   units) — the longest line measures 12.24em in Manrope 800, so 7.9cqi always fits (12.24 × 0.079 ≈ 0.97). */
.hero__panel { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 56px; min-height: 820px; padding: 148px 56px 56px 64px; }
.hero__band { width: 40%; }
.hero__content { container-type: inline-size; width: 100%; max-width: 760px; gap: 30px; }
.hero__title { font-size: clamp(2.25rem, 4vw, 3.75rem); font-size: min(3.75rem, 7.9cqi); line-height: 1.06; letter-spacing: -0.035em; text-wrap: balance; }
.hero__line { display: block; }
.hero__text { max-width: 540px; font-size: 19px; }
.hero__visual { height: auto; align-self: stretch; display: flex; }
.hero__photo { position: relative; inset: auto; left: auto; width: 100%; min-height: 560px; flex: 1; border-radius: var(--r-media); box-shadow: 0 30px 60px -28px rgba(15, 20, 25, .45); }
.hero__photo img { position: absolute; inset: 0; object-position: center 45%; }

@media (max-width: 1280px) {
  .hero__panel { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 44px; padding: 140px 44px 48px 48px; }
  .hero__photo { min-height: 500px; }
}
@media (max-width: 1100px) {
  .hero__panel { grid-template-columns: 1fr; gap: 44px; min-height: 0; padding: 136px 40px 40px; }
  .hero__band { top: auto; width: 100%; height: 55%; clip-path: polygon(0 28%, 100% 0, 100% 100%, 0 100%); }
  .hero__content { max-width: 720px; }
  .hero__visual { display: block; }
  .hero__photo { left: auto; width: 100%; min-height: 0; aspect-ratio: 16 / 10; transform: none; }
}
@media (max-width: 760px) {
  .hero__panel { padding: 116px 20px 20px; gap: 32px; }
  /* Phones: natural wrapping at a readable size instead of 3 forced lines */
  .hero__line { display: inline; }
  .hero__title { font-size: clamp(2rem, 9.5cqi, 2.75rem); line-height: 1.1; }
  .hero__text { font-size: 16px; }
  .hero__visual { height: auto; }
  .hero__photo { width: 100%; aspect-ratio: 4 / 3; }
}
/* Tablet/phone: the blue band is drawn from the photo's own box (not the whole panel), so it always starts
   partway down the photo and can never slide up behind the text or buttons, whatever the photo's height. */
@media (max-width: 1100px) {
  .hero__band { display: none; }
  .hero__visual { position: relative; z-index: 1; }
  .hero__visual::before { content: ""; position: absolute; z-index: -1; top: 38%; right: -40px; bottom: -40px; left: -40px; background: var(--c-blue); clip-path: polygon(0 34%, 100% 0, 100% 100%, 0 100%); }
}
@media (max-width: 760px) {
  .hero__visual::before { right: -20px; bottom: -20px; left: -20px; }
}

/* Homepage "L'entreprise" section: figures removed (they live on /entreprise/), button instead (2026-09-30) */
.about__cta { align-self: flex-start; margin-top: 4px; }

/* Breathing room between the last section (usually the dark CTA band) and the dark footer on every page —
   measured 16px on all 11 templates before (2026-09-30). */
main#main { padding-bottom: clamp(56px, 7vw, 104px); }

/* Project cards on phones: square instead of a fixed 430px portrait (one card no longer fills the screen),
   with a floor so place + title + scope always fit over the photo (2026-09-30). */
@media (max-width: 640px) {
  .projects__grid .project-card, .projects__track .project-card { height: auto; aspect-ratio: 1 / 1; min-height: 300px; }
}

/* 2026-09-30 — Blue buttons: white text on the darker brand blue. White on the light brand blue (#2CA7E0)
   is only ~2.7:1 contrast; on --c-blue-700 (#1974A6) it is ~5.1:1 (WCAG AA). Applies to every .btn--primary. */
.btn--primary { background: var(--c-blue-700); color: #fff; }
.btn--primary:hover, .btn--primary:focus-visible { background: #15699A; color: #fff; }
.btn--primary .icon { color: currentColor; }

/* 2026-09-30 — No decorative blue marks before labels: the dash before eyebrow labels and the diamond in chips. */
.eyebrow::before, .chip::before, .hero__chip::before { content: none; display: none; }

/* 2026-09-30 — "Fiche chantier" (single Projet): label above value, value on the full card width, so values
   read on one line instead of being squeezed into a right-aligned half column. */
.meta-list--stacked .meta-list__row { flex-direction: column; justify-content: flex-start; gap: 4px; padding: 14px 0; }
.meta-list--stacked dt { font-size: var(--fs-xxs); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--c-subtle); }
.meta-list--stacked dd { text-align: left; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--c-ink); }

/* 2026-09-30 — "Autres expertises" at the bottom of each expertise page: the /expertises/ hub cards
   (teclecom_xp_card), 4 in a row instead of a row of pill links. */
.xpd-others .section-head { align-items: flex-end; }
.xph-grid--others { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.xph-grid--others .xph-card { grid-column: auto; }
.xph-grid--others .xph-card__media { aspect-ratio: 4 / 3; }
.xph-grid--others .xph-card__body { padding: 22px 22px 24px; }
@media (max-width: 1100px) {
  .xph-grid--others { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xph-grid--others .xph-card:last-child { grid-column: auto; }
  .xph-grid--others .xph-card:last-child .xph-card__media { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .xph-grid--others { grid-template-columns: 1fr; }
}

/* 2026-09-30 — Maintenance "Astreinte 24/7" card, per client mockup: everything white on the blue card —
   white icon tile with blue icon, white kicker/title/text, white phone button with blue text. */
.xpd-bento__feature { color: #fff; }
.xpd-bento__kicker, .xpd-bento__title { color: #fff; }
.xpd-bento__text { color: #fff; font-weight: 500; }
.xpd-bento__icon { background: #fff; color: var(--c-blue-700); }
.xpd-bento__call { background: #fff; color: var(--c-blue-700); border: 0; border-radius: 14px; font-weight: 700; }
.xpd-bento__call:hover, .xpd-bento__call:focus-visible { background: var(--c-ink); color: #fff; }
.xpd-bento__call .icon { color: currentColor; }

/* 2026-09-30 — Footer, per client mockup: no blue dot before column titles, tighter link list. */
.footer-col__title::before { content: none; display: none; }
.footer-col ul { gap: 8px; }

/* 2026-09-30 — Lighthouse/axe accessibility fixes (measured contrast):
   - accent word in hero titles: #2CA7E0 on white was 2.72:1 (large text needs 3:1) → #299BD0 = 3.14:1;
   - decorative "ghost" step numbers are CSS-generated content (data-n), so they are not text for
     assistive tech/contrast checks — they were real text at 1.09:1. */
.hero__title .accent, .page-hero__title .accent { color: #299BD0; }
.mth-step__ghost::before { content: attr(data-n); }

/* 2026-09-30 — Contact map placeholder (click-to-load, see main.js). */
.map-facade { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; height: 100%; min-height: inherit; padding: 32px 24px; text-align: center; background: var(--c-blue-50) linear-gradient(rgba(25,116,166,.06) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(25,116,166,.06) 1px, transparent 1px) 0 0 / 28px 28px; }
.map-facade__pin { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c-surface); color: var(--c-blue-700); box-shadow: 0 10px 24px -12px rgba(15,20,25,.35); }
.map-facade__pin .icon { width: 26px; height: 26px; }
.map-facade__addr { font-weight: 700; color: var(--c-ink); }
.map-facade__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.contact-locate__map .map-facade { min-height: 420px; }
@media (max-width: 860px) { .contact-locate__map .map-facade { min-height: 300px; } }

/* 2026-09-30 — Inner-page hero band on tablet/phone: was a 260–420px full-width diagonal anchored at the
   bottom, sliding behind the title (accent word blue-on-blue, 1.15:1 on /contact/). Now a slim corner
   triangle within the hero's bottom padding, so it never sits behind text. */
@media (max-width: 1100px) {
  .page-hero__band { top: auto; left: auto; right: 0; bottom: 0; width: 46%; height: 64px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
}
@media (max-width: 760px) {
  .page-hero__band { width: 52%; height: 40px; }
}
/* Room for that corner under the buttons (measured: buttons ended 24–32px above the hero's bottom edge),
   keeping ≥16px between the triangle and the buttons. */
@media (max-width: 1100px) {
  .page-hero__panel { padding-bottom: 80px; }
  .page-hero__band { height: 56px; }
}
@media (max-width: 760px) {
  .page-hero__panel { padding-bottom: 64px; }
  .page-hero__band { height: 44px; }
}

/* 2026-10-01 — Lighthouse accessibility, remaining items:
   map placeholder: the shorthand "background: color gradient…" was invalid (a colour must be the LAST
   layer), so the dark .media backing showed through (text at 1.16:1) — split into colour + images;
   Entreprise phase numbers #2CA7E0 → dark brand blue (2.72 → 5.1:1); Fiche chantier labels #7A7E83 →
   --c-muted (4.08 → 7.2:1). */
.map-facade { background-color: var(--c-blue-50); background-image: linear-gradient(rgba(25,116,166,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(25,116,166,.07) 1px, transparent 1px); background-size: 28px 28px; }
.phase__num { color: var(--c-blue-700); }
.meta-list--stacked dt { color: var(--c-muted); }

/* 2026-10-01 — last Lighthouse contrast items: Méthode step numbers → dark brand blue; VDI decorative
   column numbers as CSS content (like the homepage step numbers); Maintenance 24/7 card keeps the client
   mockup (blue card, all-white content) but on the deeper brand blue — white text 5.1:1 instead of 2.72:1. */
.step__num { color: var(--c-blue-700); }
.xpd-col__num::before { content: attr(data-n); }
.xpd-bento__feature { background: var(--c-blue-700); }
.xpd-bento__icon, .xpd-bento__call { color: var(--c-blue-700); }