/* ==========================================================================
   APEX SERVICES — feuille de styles pour WordPress / Elementor
   Tout est isolé sous « .apex » : aucun style ne fuit vers le thème,
   et les styles du thème ne peuvent pas casser le bloc.
   ========================================================================== */

:root {
  /* Base de calcul de toutes les tailles. Le site ne dépend donc PAS
     de la taille de police du thème (certains thèmes mettent html à 62.5%).
     Mettre 1rem à la place de 16px pour suivre les préférences du navigateur. */
  --apex-rem: 16px;
  --apex-header-h: 118px;      /* recalculé en direct par le JS */
  --apex-blue-700: #0062b4;    /* manquait dans le CSS d'origine (.file-clear) */
  --apex-blue-600-rgb: 0, 127, 232;
  --apex-blue-500-rgb: 13, 150, 255;
}

/* --------------------------------------------------------------------------
   NEUTRALISATION DES STYLES DU THÈME
   Tout est écrit avec :where() : ces règles battent les styles du thème
   (sélecteurs d'élément) mais ne peuvent jamais écraser les styles du site.
   Elles rétablissent exactement les valeurs par défaut du navigateur.
   -------------------------------------------------------------------------- */
.apex {
  box-sizing: border-box;
  width: 100%; max-width: 100%;
  letter-spacing: normal; word-spacing: normal; text-indent: 0;
  text-align: start; text-transform: none; text-shadow: none;
  font-style: normal; font-variant: normal; font-stretch: normal;
}
.apex :where(section, article, aside, nav, header, footer, main, div, form, fieldset, figcaption, address) {
  margin: 0; padding: 0; border: 0; background: none; font-style: inherit;
}
.apex :where(h1, h2, h3, h4, h5, h6) {
  font-family: inherit; font-weight: bold; color: inherit;
  letter-spacing: normal; text-transform: none; line-height: inherit;
}
.apex :where(h1) { font-size: 2em;    margin: .67em 0; }
.apex :where(h2) { font-size: 1.5em;  margin: .83em 0; }
.apex :where(h3) { font-size: 1.17em; margin: 1em 0; }
.apex :where(h4) { font-size: 1em;    margin: 1.33em 0; }
.apex :where(h5) { font-size: .83em;  margin: 1.67em 0; }
.apex :where(h6) { font-size: .67em;  margin: 2.33em 0; }
.apex :where(p) { margin: 1em 0; }
.apex :where(blockquote) { margin: 1em 40px; }
.apex :where(figure) { margin: 1em 40px; padding: 0; border: 0; background: none; }
.apex :where(ul, ol) { margin: 1em 0; padding: 0 0 0 40px; list-style-position: outside; }
.apex :where(ul) { list-style-type: disc; }
.apex :where(ol) { list-style-type: decimal; }
.apex :where(li) { margin: 0; padding: 0; list-style: inherit; }
.apex :where(small) { font-size: 80%; color: inherit; }
.apex :where(b, strong) { font-weight: bolder; color: inherit; }
.apex :where(em, i) { font-style: italic; color: inherit; }
.apex :where(sup) { font-size: smaller; vertical-align: super; }
.apex :where(sub) { font-size: smaller; vertical-align: sub; }
.apex :where(details, summary) { margin: 0; padding: 0; border: 0; background: none; }
.apex :where(summary) { list-style: none; }
.apex :where(img, svg, video) { border: 0; border-radius: 0; box-shadow: none; height: auto; }
.apex :where(input, select, textarea, button) {
  margin: 0; border: 0; border-radius: 0; background: none;
  color: inherit; box-shadow: none; text-transform: none; letter-spacing: normal;
}
.apex :where(button) { padding: 1px 6px; }
.apex :where(input) { padding: 1px 2px; }
.apex :where(select) { padding: 0; }
.apex :where(textarea) { padding: 2px; }
.apex :where(a) { color: inherit; text-decoration: none; box-shadow: none; }
.apex :where(a:hover, a:focus, a:active, a:visited) { color: inherit; text-decoration: none; }
.apex :where(table) { border-collapse: collapse; border-spacing: 0; margin: 0; }

:root {
  --apex-navy-950: #031126;
  --apex-navy-900: #061a36;
  --apex-navy-800: #0a2850;
  --apex-blue-600: #007fe8;
  --apex-blue-500: #0d96ff;
  --apex-blue-300: #80caff;
  --apex-ice: #edf7ff;
  --apex-white: #ffffff;
  --apex-ink: #07172c;
  --apex-muted: #5f6f83;
  --apex-line: rgba(7, 23, 44, 0.13);
  --apex-shadow: 0 24px 70px rgba(3, 17, 38, 0.15);
  --apex-radius: calc(1.25 * var(--apex-rem));
  --apex-container: min(1180px, calc(100% - calc(2.25 * var(--apex-rem))));
  --apex-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --apex-body: "Manrope", Arial, sans-serif;
}
.apex * {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
.apex {
  color: var(--apex-ink);
  background: var(--apex-white);
  font-family: var(--apex-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.apex-on {
  margin: 0;
  overflow-x: hidden;
}
body.apex-menu-open {
  overflow: hidden;
}
.apex img {
  display: block;
  max-width: 100%;
}
.apex a {
  color: inherit;
  text-decoration: none;
}
.apex button, .apex input, .apex textarea, .apex select {
  font: inherit;
}
.apex button {
  cursor: pointer;
}
.apex ::selection {
  color: var(--apex-white);
  background: var(--apex-blue-600);
}
.apex :focus-visible {
  outline: 3px solid var(--apex-blue-300);
  outline-offset: 4px;
}
.apex .skip-link {
  position: fixed;
  z-index: 9999;
  top: calc(0.6 * var(--apex-rem));
  left: calc(0.6 * var(--apex-rem));
  transform: translateY(-160%);
  padding: calc(0.75 * var(--apex-rem)) calc(1 * var(--apex-rem));
  color: var(--apex-white);
  background: var(--apex-navy-950);
  border-radius: calc(0.5 * var(--apex-rem));
}
.apex .skip-link:focus {
  transform: none;
}
.apex .container {
  width: var(--apex-container);
  margin-inline: auto;
}
.apex .section {
  position: relative;
  padding: calc(7.5 * var(--apex-rem)) 0;
}
.apex .section-tight {
  padding: calc(5 * var(--apex-rem)) 0;
}
.apex .section-ice {
  background: var(--apex-ice);
}
.apex .section-navy {
  overflow: hidden;
  color: var(--apex-white);
  background: var(--apex-navy-950);
}
.apex .section-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: linear-gradient(rgba(255,255,255,.7) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}
.apex .eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0 calc(1 * var(--apex-rem));
  color: var(--apex-blue-600);
  font-size: calc(0.76 * var(--apex-rem));
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}
.apex .section-navy .eyebrow {
  color: var(--apex-blue-300);
}
.apex .display {
  margin: 0;
  font-family: var(--apex-display);
  font-size: clamp(calc(3.7 * var(--apex-rem)), 8vw, calc(7.7 * var(--apex-rem)));
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.94;
  text-transform: uppercase;
}
.apex .display > .text-blue {
  display: block;
}
.apex .display-two-lines > span {
  display: block;
}
.apex .display-medium {
  font-size: clamp(calc(3 * var(--apex-rem)), 5vw, calc(4.2 * var(--apex-rem)));
}
.apex .display-small {
  font-size: clamp(calc(2.45 * var(--apex-rem)), 4.2vw, calc(3.6 * var(--apex-rem)));
}
.apex .text-blue {
  color: var(--apex-blue-500);
}
.apex .lead {
  max-width: calc(46 * var(--apex-rem));
  margin: calc(1.5 * var(--apex-rem)) 0 0;
  color: var(--apex-muted);
  font-size: clamp(calc(1 * var(--apex-rem)), 1.6vw, calc(1.16 * var(--apex-rem)));
}
.apex .section-navy .lead {
  color: rgba(255,255,255,.68);
}
.apex .section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(calc(18 * var(--apex-rem)), 0.65fr);
  gap: calc(3 * var(--apex-rem));
  align-items: end;
  margin-bottom: calc(3.5 * var(--apex-rem));
}
.apex .section-heading .lead {
  margin: 0;
}
.apex .button {
  display: inline-flex;
  min-height: calc(3.4 * var(--apex-rem));
  align-items: center;
  justify-content: center;
  gap: calc(0.8 * var(--apex-rem));
  padding: calc(0.85 * var(--apex-rem)) calc(1.35 * var(--apex-rem));
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: calc(0.87 * var(--apex-rem));
  font-weight: 800;
  letter-spacing: 0.025em;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.apex .button:hover {
  transform: translateY(-3px);
}
.apex .button-primary {
  color: var(--apex-white);
  background: var(--apex-blue-600);
  box-shadow: 0 14px 32px rgba(var(--apex-blue-600-rgb),.26);
}
.apex .button-primary:hover {
  background: var(--apex-blue-500);
  box-shadow: 0 18px 40px rgba(var(--apex-blue-600-rgb),.34);
}
.apex .button-light {
  color: var(--apex-navy-950);
  background: var(--apex-white);
}
.apex .button-outline {
  border-color: rgba(255,255,255,.32);
  color: var(--apex-white);
  background: transparent;
}
.apex .button-dark-outline {
  border-color: rgba(7,23,44,.22);
  color: var(--apex-navy-950);
  background: transparent;
}
.apex .button-arrow {
  transition: transform .25s ease;
}
.apex .button:hover .button-arrow {
  transform: translateX(5px);
}
.apex .topbar {
  color: var(--apex-white);
  background: var(--apex-blue-600);
  font-size: calc(0.74 * var(--apex-rem));
  font-weight: 700;
}
.apex .topbar-inner {
  min-height: calc(2.35 * var(--apex-rem));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(1 * var(--apex-rem));
}
.apex .topbar-links {
  display: flex;
  align-items: center;
  gap: calc(1.35 * var(--apex-rem));
}
.apex .topbar-contact-label {
  opacity: .72;
  font-size: calc(.64 * var(--apex-rem));
  letter-spacing: .12em;
  text-transform: uppercase;
}
.apex .topbar a:hover {
  text-decoration: underline;
}
.apex .site-header {
  position: sticky;
  z-index: 1000;
  top: 0;
  color: var(--apex-white);
  background: rgba(3,17,38,.94);
  border-bottom: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(18px);
  transition: box-shadow .25s ease, background .25s ease;
}
.apex .site-header.scrolled {
  background: rgba(3,17,38,.985);
  box-shadow: 0 12px 36px rgba(0,0,0,.18);
}
.apex .header-inner {
  min-height: calc(5.4 * var(--apex-rem));
  display: flex;
  align-items: center;
  gap: calc(2 * var(--apex-rem));
}
.apex .brand {
  display: inline-flex;
  align-items: center;
  gap: calc(0.8 * var(--apex-rem));
  flex: 0 0 auto;
}
.apex .brand img {
  width: calc(3.8 * var(--apex-rem));
  height: calc(3.8 * var(--apex-rem));
  object-fit: contain;
}
.apex .brand-copy {
  display: grid;
  font-family: var(--apex-display);
  line-height: .9;
  text-transform: uppercase;
}
.apex .brand-copy strong {
  font-size: calc(1.7 * var(--apex-rem));
  letter-spacing: .035em;
}
.apex .brand-copy span {
  color: var(--apex-blue-300);
  font-size: calc(.75 * var(--apex-rem));
  font-weight: 700;
  letter-spacing: .23em;
}
.apex .brand-switcher {
  display: flex;
  gap: calc(.25 * var(--apex-rem));
  padding: calc(.25 * var(--apex-rem));
  margin-left: calc(.5 * var(--apex-rem));
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
}
.apex .brand-switcher a {
  padding: calc(.48 * var(--apex-rem)) calc(.72 * var(--apex-rem));
  border-radius: 999px;
  color: rgba(255,255,255,.65);
  font-size: calc(.68 * var(--apex-rem));
  font-weight: 800;
  text-transform: uppercase;
}
.apex .brand-switcher a[aria-current="page"], .apex .brand-switcher a:hover {
  color: var(--apex-white);
  background: rgba(var(--apex-blue-500-rgb),.25);
}
.apex .main-nav {
  display: flex;
  align-items: center;
  gap: calc(1.5 * var(--apex-rem));
  margin-left: auto;
}
.apex .main-nav > a {
  position: relative;
  padding: calc(.7 * var(--apex-rem)) 0;
  color: rgba(255,255,255,.76);
  font-size: calc(.78 * var(--apex-rem));
  font-weight: 800;
  text-transform: uppercase;
}
.apex .main-nav > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: calc(.38 * var(--apex-rem));
  height: 2px;
  background: var(--apex-blue-500);
  transition: right .25s ease;
}
.apex .main-nav > a:hover, .apex .main-nav > a[aria-current="page"] {
  color: var(--apex-white);
}
.apex .main-nav > a:hover::after, .apex .main-nav > a[aria-current="page"]::after {
  right: 0;
}
.apex .header-cta {
  margin-left: calc(.4 * var(--apex-rem));
}
.apex .menu-toggle {
  display: none;
  width: calc(3 * var(--apex-rem));
  height: calc(3 * var(--apex-rem));
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  color: var(--apex-white);
  background: transparent;
}
.apex .menu-toggle span, .apex .menu-toggle::before, .apex .menu-toggle::after {
  content: "";
  display: block;
  width: calc(1.15 * var(--apex-rem));
  height: 2px;
  background: currentColor;
  transition: transform .25s ease, opacity .25s ease;
}
.apex .menu-toggle span {
  margin: calc(.27 * var(--apex-rem)) auto;
}
body.apex-menu-open .apex .menu-toggle span {
  opacity: 0;
}
body.apex-menu-open .apex .menu-toggle::before {
  transform: translateY(calc(.29 * var(--apex-rem))) rotate(45deg);
}
body.apex-menu-open .apex .menu-toggle::after {
  transform: translateY(calc(-.29 * var(--apex-rem))) rotate(-45deg);
}
.apex .hero {
  position: relative;
  min-height: calc(100svh - calc(7.75 * var(--apex-rem)));
  display: grid;
  align-items: stretch;
  overflow: hidden;
  color: var(--apex-white);
  background: var(--apex-navy-950);
}
.apex .hero-media {
  position: absolute;
  inset: 0;
}
.apex .hero-media img {
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: center;
  transform: translateY(var(--apex-hero-shift, 0));
}
.apex .hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3,17,38,.97) 0%, rgba(3,17,38,.85) 43%, rgba(3,17,38,.18) 77%), linear-gradient(0deg, rgba(3,17,38,.86), transparent 52%);
}
.apex .hero-content {
  position: relative;
  z-index: 2;
  width: var(--apex-container);
  margin: 0 auto;
  padding: calc(6 * var(--apex-rem)) 0 calc(5.5 * var(--apex-rem));
}
.apex .hero-copy {
  max-width: calc(60 * var(--apex-rem));
}
.apex .hero-copy .display {
  max-width: none;
  font-size: clamp(calc(4 * var(--apex-rem)), 5.7vw, calc(5.75 * var(--apex-rem)));
}
.apex .hero-copy .lead {
  max-width: calc(40 * var(--apex-rem));
  color: rgba(255,255,255,.78);
}
.apex .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(.85 * var(--apex-rem));
  margin-top: calc(2 * var(--apex-rem));
}
.apex .hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: calc(1 * var(--apex-rem)) calc(2 * var(--apex-rem));
  margin-top: calc(2.7 * var(--apex-rem));
  padding-top: calc(1.4 * var(--apex-rem));
  border-top: 1px solid rgba(255,255,255,.16);
}
.apex .hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: calc(.55 * var(--apex-rem));
  color: rgba(255,255,255,.72);
  font-size: calc(.8 * var(--apex-rem));
  font-weight: 700;
}
.apex .hero-trust span::before {
  content: "✓";
  display: grid;
  width: calc(1.4 * var(--apex-rem));
  height: calc(1.4 * var(--apex-rem));
  place-items: center;
  border-radius: 50%;
  color: var(--apex-navy-950);
  background: var(--apex-blue-300);
  font-size: calc(.7 * var(--apex-rem));
}
.apex .hero-index {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(2,minmax(calc(9 * var(--apex-rem)),1fr));
  color: var(--apex-white);
  background: var(--apex-blue-600);
}
.apex .hero-index a {
  padding: calc(1.3 * var(--apex-rem)) calc(1.6 * var(--apex-rem));
  border-left: 1px solid rgba(255,255,255,.18);
  transition: background .2s ease;
}
.apex .hero-index a:hover {
  background: var(--apex-blue-500);
}
.apex .hero-index small {
  display: block;
  opacity: .7;
  font-size: calc(.6 * var(--apex-rem));
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.apex .hero-index strong {
  font-family: var(--apex-display);
  font-size: calc(1.45 * var(--apex-rem));
  text-transform: uppercase;
}
.apex .trust-band {
  color: var(--apex-white);
  background: var(--apex-blue-600);
}
.apex .trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.apex .trust-item {
  min-height: calc(7.5 * var(--apex-rem));
  display: grid;
  align-content: center;
  padding: calc(1 * var(--apex-rem)) calc(1.5 * var(--apex-rem));
  border-left: 1px solid rgba(255,255,255,.2);
}
.apex .trust-item:first-child {
  border-left: 0;
}
.apex .trust-item strong {
  font-family: var(--apex-display);
  font-size: calc(2 * var(--apex-rem));
  line-height: 1;
  text-transform: uppercase;
}
.apex .trust-item span {
  margin-top: calc(.35 * var(--apex-rem));
  color: rgba(255,255,255,.72);
  font-size: calc(.72 * var(--apex-rem));
  font-weight: 700;
  text-transform: uppercase;
}
.apex .services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--apex-line);
  border-left: 1px solid var(--apex-line);
}
.apex .service-card {
  position: relative;
  min-height: calc(19 * var(--apex-rem));
  display: flex;
  flex-direction: column;
  padding: calc(2 * var(--apex-rem));
  overflow: hidden;
  border-right: 1px solid var(--apex-line);
  border-bottom: 1px solid var(--apex-line);
  background: var(--apex-white);
  transition: color .3s ease, background .3s ease, transform .3s ease;
}
.apex .service-card::after {
  content: "";
  position: absolute;
  right: calc(-4 * var(--apex-rem));
  bottom: calc(-4 * var(--apex-rem));
  width: calc(11 * var(--apex-rem));
  height: calc(11 * var(--apex-rem));
  border: 1px solid rgba(var(--apex-blue-500-rgb),.22);
  border-radius: 50%;
  transition: transform .4s ease, background .4s ease;
}
.apex .service-card:hover {
  z-index: 2;
  color: var(--apex-white);
  background: var(--apex-navy-900);
  transform: translateY(-7px);
  box-shadow: var(--apex-shadow);
}
.apex .service-card:hover::after {
  transform: scale(1.4);
  background: rgba(var(--apex-blue-500-rgb),.13);
}
.apex .service-number {
  color: var(--apex-blue-600);
  font-family: var(--apex-display);
  font-size: calc(1.1 * var(--apex-rem));
  font-weight: 700;
}
.apex .service-icon {
  width: calc(3.25 * var(--apex-rem));
  height: calc(3.25 * var(--apex-rem));
  display: grid;
  place-items: center;
  margin: calc(2.5 * var(--apex-rem)) 0 calc(1.2 * var(--apex-rem));
  color: var(--apex-blue-600);
  border: 1px solid var(--apex-line);
  border-radius: 50%;
  background: var(--apex-ice);
  font-size: calc(1.2 * var(--apex-rem));
}
.apex .service-icon:first-child {
  margin-top: calc(.2 * var(--apex-rem));
}
.apex .service-card h3 {
  margin: 0;
  font-family: var(--apex-display);
  font-size: calc(2 * var(--apex-rem));
  line-height: 1.08;
  text-transform: uppercase;
}
.apex .service-card p {
  margin: calc(.9 * var(--apex-rem)) 0 calc(1.5 * var(--apex-rem));
  color: var(--apex-muted);
  font-size: calc(.9 * var(--apex-rem));
}
.apex .service-card:hover p {
  color: rgba(255,255,255,.68);
}
.apex .service-link {
  margin-top: auto;
  color: var(--apex-blue-600);
  font-size: calc(.74 * var(--apex-rem));
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.apex .service-card:hover .service-link {
  color: var(--apex-blue-300);
}
.apex .comparison-layout {
  display: grid;
  grid-template-columns: minmax(calc(28 * var(--apex-rem)),.9fr) minmax(0,1.1fr);
  gap: calc(3 * var(--apex-rem));
  align-items: center;
}
.apex .comparison-layout .display-small {
  font-size: clamp(calc(2.7 * var(--apex-rem)), 3.8vw, calc(3.35 * var(--apex-rem)));
}
.apex .roof-compare {
  --apex-compare-position: 24%;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  color: var(--apex-white);
  background: var(--apex-navy-900);
  border: calc(.75 * var(--apex-rem)) solid var(--apex-white);
  border-radius: calc(var(--apex-radius) + calc(.45 * var(--apex-rem)));
  box-shadow: var(--apex-shadow);
}
.apex .roof-compare-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 54%;
  pointer-events: none;
}
.apex .roof-compare-before {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 calc(100% - var(--apex-compare-position)) 0 0);
}
.apex .roof-compare-divider {
  position: absolute;
  z-index: 3;
  inset-block: 0;
  left: var(--apex-compare-position);
  width: 2px;
  background: var(--apex-white);
  box-shadow: 0 0 18px rgba(3,17,38,.45);
  pointer-events: none;
}
.apex .roof-compare-handle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(3 * var(--apex-rem));
  height: calc(3 * var(--apex-rem));
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--apex-ink);
  background: var(--apex-white);
  box-shadow: 0 12px 30px rgba(3,17,38,.26);
  transform: translate(-50%,-50%);
}
.apex .roof-compare-label {
  position: absolute;
  z-index: 2;
  top: calc(1 * var(--apex-rem));
  padding: calc(.6 * var(--apex-rem)) calc(.82 * var(--apex-rem));
  font-size: calc(.68 * var(--apex-rem));
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
}
.apex .roof-compare-label-before {
  left: calc(1 * var(--apex-rem));
  background: rgba(3,17,38,.9);
}
.apex .roof-compare-label-after {
  right: calc(1 * var(--apex-rem));
  background: var(--apex-blue-600);
}
.apex .roof-compare-hint {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(1 * var(--apex-rem));
  padding: calc(.58 * var(--apex-rem)) calc(.85 * var(--apex-rem));
  color: var(--apex-white);
  background: rgba(3,17,38,.84);
  font-size: calc(.62 * var(--apex-rem));
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1;
  text-transform: uppercase;
  transform: translateX(-50%);
  pointer-events: none;
  white-space: nowrap;
}
.apex .roof-compare.is-previewing .roof-compare-before {
  transition: clip-path 850ms cubic-bezier(.22,1,.36,1);
}
.apex .roof-compare.is-previewing .roof-compare-divider {
  transition: left 850ms cubic-bezier(.22,1,.36,1);
}
.apex .feature-list {
  display: grid;
  gap: 0;
  margin-top: calc(2.1 * var(--apex-rem));
  border-top: 1px solid var(--apex-line);
}
.apex .feature-list div {
  display: grid;
  grid-template-columns: calc(2.5 * var(--apex-rem)) 1fr;
  gap: calc(.8 * var(--apex-rem));
  padding: calc(1 * var(--apex-rem)) 0;
  border-bottom: 1px solid var(--apex-line);
}
.apex .feature-list b {
  color: var(--apex-blue-600);
  font-size: calc(1.35 * var(--apex-rem));
  line-height: 1;
}
.apex .feature-list strong {
  font-size: calc(.9 * var(--apex-rem));
}
.apex .choice-layout {
  display: grid;
  grid-template-columns: 1fr .7fr;
  gap: calc(4 * var(--apex-rem));
  align-items: start;
}
.apex .choice-list {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: calc(.7 * var(--apex-rem));
  margin-top: calc(2.3 * var(--apex-rem));
}
.apex .choice-button {
  padding: calc(1 * var(--apex-rem)) calc(1.1 * var(--apex-rem));
  text-align: left;
  color: var(--apex-white);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: calc(.75 * var(--apex-rem));
  background: rgba(255,255,255,.035);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.apex .choice-button:hover, .apex .choice-button.active {
  border-color: var(--apex-blue-500);
  background: rgba(var(--apex-blue-500-rgb),.15);
  transform: translateX(5px);
}
.apex .choice-button small {
  display: block;
  color: var(--apex-blue-300);
  font-size: calc(.62 * var(--apex-rem));
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.apex .choice-button strong {
  display: block;
  margin-top: calc(.25 * var(--apex-rem));
  font-size: calc(.9 * var(--apex-rem));
}
.apex .recommendation {
  position: sticky;
  top: calc(8 * var(--apex-rem));
  padding: calc(2.2 * var(--apex-rem));
  color: var(--apex-ink);
  border-radius: var(--apex-radius);
  background: var(--apex-white);
  box-shadow: 0 20px 60px rgba(0,0,0,.24);
}
.apex .recommendation-label {
  color: var(--apex-blue-600);
  font-size: calc(.66 * var(--apex-rem));
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.apex .recommendation h3 {
  margin: calc(.75 * var(--apex-rem)) 0 calc(.7 * var(--apex-rem));
  font-family: var(--apex-display);
  font-size: calc(2.35 * var(--apex-rem));
  line-height: 1.06;
  text-transform: uppercase;
}
.apex .recommendation p {
  margin: 0 0 calc(1.4 * var(--apex-rem));
  color: var(--apex-muted);
  font-size: calc(.88 * var(--apex-rem));
}
.apex .project-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr .9fr;
  gap: calc(.85 * var(--apex-rem));
}
.apex .project-card {
  position: relative;
  min-height: calc(32 * var(--apex-rem));
  overflow: hidden;
  border-radius: calc(1 * var(--apex-rem));
  background: var(--apex-navy-900);
}
.apex .project-card:not(:first-child) {
  min-height: calc(27 * var(--apex-rem));
}
.apex .project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s cubic-bezier(.2,.7,.2,1);
}
.apex .project-card:hover img {
  transform: scale(1.055);
}
.apex .project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(3,17,38,.95), transparent 60%);
}
.apex .project-caption {
  position: absolute;
  z-index: 2;
  inset: auto calc(1.4 * var(--apex-rem)) calc(1.4 * var(--apex-rem));
  color: var(--apex-white);
}
.apex .project-caption small {
  color: var(--apex-blue-300);
  font-size: calc(.62 * var(--apex-rem));
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.apex .project-caption h3 {
  margin: calc(.4 * var(--apex-rem)) 0 0;
  font-family: var(--apex-display);
  font-size: calc(2 * var(--apex-rem));
  line-height: 1.06;
  text-transform: uppercase;
}
.apex .auto-gallery {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-auto-rows: calc(18 * var(--apex-rem));
  gap: calc(.85 * var(--apex-rem));
}
.apex .gallery-card {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: calc(1 * var(--apex-rem));
  background: var(--apex-navy-900);
  cursor: zoom-in;
}
.apex .gallery-card.gallery-wide {
  grid-column: span 2;
}
.apex .gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}
.apex .gallery-card:hover img {
  transform: scale(1.055);
  filter: contrast(1.04);
}
.apex .gallery-card::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(0deg,rgba(3,17,38,.9),transparent);
}
.apex .gallery-card figcaption {
  position: absolute;
  z-index: 2;
  left: calc(1.2 * var(--apex-rem));
  bottom: calc(1 * var(--apex-rem));
  color: var(--apex-white);
  font-family: var(--apex-display);
  font-size: calc(1.25 * var(--apex-rem));
  font-weight: 700;
  text-transform: uppercase;
}
.apex .process-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  margin-top: calc(3.5 * var(--apex-rem));
  border-top: 1px solid rgba(255,255,255,.15);
}
.apex .process-step {
  position: relative;
  padding: calc(2.2 * var(--apex-rem)) calc(1.6 * var(--apex-rem)) 0 0;
}
.apex .process-step::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: calc(.5 * var(--apex-rem));
  height: calc(.5 * var(--apex-rem));
  border-radius: 50%;
  background: var(--apex-blue-500);
  box-shadow: 0 0 0 calc(.45 * var(--apex-rem)) rgba(var(--apex-blue-500-rgb),.14);
}
.apex .process-step b {
  color: var(--apex-blue-300);
  font-family: var(--apex-display);
  font-size: calc(1.2 * var(--apex-rem));
}
.apex .process-step h3 {
  margin: calc(1.4 * var(--apex-rem)) 0 calc(.55 * var(--apex-rem));
  font-family: var(--apex-display);
  font-size: calc(1.8 * var(--apex-rem));
  line-height: 1.08;
  text-transform: uppercase;
}
.apex .process-step p {
  margin: 0;
  color: rgba(255,255,255,.6);
  font-size: calc(.86 * var(--apex-rem));
}
.apex .reviews-shell {
  position: relative;
  overflow: hidden;
}
.apex .review-heading {
  display: grid;
  grid-template-columns: 1fr .65fr;
  gap: calc(3 * var(--apex-rem));
  align-items: end;
  margin-bottom: calc(2.5 * var(--apex-rem));
}
.apex .review-heading .lead {
  margin: 0;
}
.apex .review-track {
  display: flex;
  align-items: stretch;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.apex .review-slide {
  display: flex;
  flex: 0 0 100%;
}
.apex .review-card {
  width: 100%;
  min-height: calc(22 * var(--apex-rem));
  display: flex;
  flex-direction: column;
  padding: clamp(calc(2 * var(--apex-rem)),5vw,calc(4 * var(--apex-rem)));
  border: 1px solid rgba(var(--apex-blue-500-rgb),.16);
  border-radius: calc(1.25 * var(--apex-rem));
  background: var(--apex-white);
  box-shadow: 0 22px 55px rgba(3,17,38,.09);
}
.apex .review-card-single {
  max-width: calc(58 * var(--apex-rem));
  margin-inline: auto;
}
.apex .review-stars {
  color: var(--apex-blue-600);
  font-size: calc(1 * var(--apex-rem));
  letter-spacing: .22em;
}
.apex .review-text {
  max-width: calc(48 * var(--apex-rem));
  margin: calc(1.25 * var(--apex-rem)) 0 calc(2 * var(--apex-rem));
  color: var(--apex-navy-900);
  font-size: clamp(calc(1.35 * var(--apex-rem)),2.4vw,calc(2.1 * var(--apex-rem)));
  font-weight: 700;
  line-height: 1.45;
}
.apex .review-person {
  display: flex;
  align-items: center;
  gap: calc(.85 * var(--apex-rem));
  margin-top: auto;
}
.apex .review-avatar {
  width: calc(3 * var(--apex-rem));
  height: calc(3 * var(--apex-rem));
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--apex-white);
  border-radius: 50%;
  background: var(--apex-navy-900);
  font-size: calc(.76 * var(--apex-rem));
  font-weight: 800;
}
.apex .review-person strong, .apex .review-person small {
  display: block;
}
.apex .review-person strong {
  font-size: calc(.88 * var(--apex-rem));
}
.apex .review-person small {
  margin-top: calc(.15 * var(--apex-rem));
  color: var(--apex-muted);
  font-size: calc(.7 * var(--apex-rem));
}
.apex .review-controls {
  display: flex;
  gap: calc(.55 * var(--apex-rem));
  justify-content: flex-end;
  margin-top: calc(2 * var(--apex-rem));
}
.apex .round-button {
  width: calc(3 * var(--apex-rem));
  height: calc(3 * var(--apex-rem));
  display: grid;
  place-items: center;
  color: var(--apex-navy-950);
  border: 1px solid var(--apex-line);
  border-radius: 50%;
  background: var(--apex-white);
  transition: color .2s ease, background .2s ease;
}
.apex .round-button:hover {
  color: var(--apex-white);
  background: var(--apex-blue-600);
}
.apex .coverage-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: calc(4 * var(--apex-rem));
  align-items: center;
}
.apex .coverage-map {
  position: relative;
  min-height: calc(29 * var(--apex-rem));
  overflow: hidden;
  border-radius: var(--apex-radius);
  background: var(--apex-navy-950);
}
.apex .coverage-map .leaflet-control-attribution {
  font-size: calc(.58 * var(--apex-rem));
}
.apex .coverage-map .leaflet-control-zoom a {
  color: var(--apex-navy-950);
}
.apex .map-popup {
  font-family: var(--apex-body);
  font-weight: 800;
}
.apex .coverage-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(.6 * var(--apex-rem));
  margin-top: calc(1.8 * var(--apex-rem));
}
.apex .coverage-list span {
  padding: calc(.55 * var(--apex-rem)) calc(.8 * var(--apex-rem));
  color: var(--apex-navy-800);
  border: 1px solid var(--apex-line);
  border-radius: 999px;
  background: var(--apex-white);
  font-size: calc(.72 * var(--apex-rem));
  font-weight: 800;
}
.apex .faq-list {
  max-width: calc(58 * var(--apex-rem));
  margin: calc(3 * var(--apex-rem)) auto 0;
  border-top: 1px solid var(--apex-line);
}
.apex .faq-list details {
  border-bottom: 1px solid var(--apex-line);
}
.apex .faq-list summary {
  position: relative;
  padding: calc(1.45 * var(--apex-rem)) calc(3 * var(--apex-rem)) calc(1.45 * var(--apex-rem)) 0;
  list-style: none;
  font-family: var(--apex-display);
  font-size: calc(1.5 * var(--apex-rem));
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  cursor: pointer;
}
.apex .faq-list summary::-webkit-details-marker {
  display: none;
}
.apex .faq-list summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: calc(1.25 * var(--apex-rem));
  color: var(--apex-blue-600);
  font-family: var(--apex-body);
  font-size: calc(1.6 * var(--apex-rem));
  transition: transform .2s ease;
}
.apex .faq-list details[open] summary::after {
  transform: rotate(45deg);
}
.apex .faq-list details p {
  max-width: calc(48 * var(--apex-rem));
  margin: calc(-.35 * var(--apex-rem)) 0 calc(1.5 * var(--apex-rem));
  color: var(--apex-muted);
}
.apex .cta-panel {
  position: relative;
  overflow: hidden;
  padding: calc(5 * var(--apex-rem));
  color: var(--apex-white);
  border-radius: calc(1.5 * var(--apex-rem));
  background: var(--apex-blue-600);
  box-shadow: var(--apex-shadow);
}
.apex .cta-panel::after {
  content: "APEX";
  position: absolute;
  right: calc(-1 * var(--apex-rem));
  bottom: calc(-3.2 * var(--apex-rem));
  color: rgba(255,255,255,.09);
  font-family: var(--apex-display);
  font-size: calc(14 * var(--apex-rem));
  font-weight: 800;
  line-height: 1;
}
.apex .cta-panel > * {
  position: relative;
  z-index: 1;
}
.apex .cta-panel .display-small {
  max-width: none;
}
.apex .cta-panel .text-blue {
  color: var(--apex-navy-950);
}
.apex .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(.8 * var(--apex-rem));
  margin-top: calc(2 * var(--apex-rem));
}
.apex .page-hero {
  position: relative;
  overflow: hidden;
  padding: calc(8.5 * var(--apex-rem)) 0 calc(6 * var(--apex-rem));
  color: var(--apex-white);
  background: var(--apex-navy-950);
}
.apex .page-hero::after {
  content: "";
  position: absolute;
  inset: 0 0 0 48%;
  opacity: .22;
  background: url("https://apexservicesmontreal.com/wp-content/uploads/apex/texture-apex.jpg") center/cover no-repeat;
}
.apex .page-hero .container {
  position: relative;
  z-index: 1;
}
.apex .page-hero .display {
  max-width: none;
  font-size: clamp(calc(4 * var(--apex-rem)), 5.7vw, calc(5.75 * var(--apex-rem)));
}
.apex .breadcrumbs {
  display: flex;
  gap: calc(.55 * var(--apex-rem));
  margin-bottom: calc(2.2 * var(--apex-rem));
  color: rgba(255,255,255,.5);
  font-size: calc(.7 * var(--apex-rem));
  font-weight: 800;
  text-transform: uppercase;
}
.apex .breadcrumbs a {
  color: var(--apex-blue-300);
}
.apex .detail-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: calc(1 * var(--apex-rem));
}
.apex .detail-card {
  position: relative;
  min-height: calc(24 * var(--apex-rem));
  padding: calc(2.3 * var(--apex-rem));
  overflow: hidden;
  border: 1px solid var(--apex-line);
  border-radius: var(--apex-radius);
  background: var(--apex-white);
}
.apex .detail-card .detail-image {
  width: calc(100% + calc(4.6 * var(--apex-rem)));
  max-width: none;
  height: calc(13 * var(--apex-rem));
  margin: calc(-2.3 * var(--apex-rem)) calc(-2.3 * var(--apex-rem)) calc(1.9 * var(--apex-rem));
  object-fit: cover;
}
.apex .detail-card .service-number {
  font-size: calc(1.4 * var(--apex-rem));
}
.apex .detail-card h2 {
  max-width: 14ch;
  margin: 0 0 calc(1 * var(--apex-rem));
  font-family: var(--apex-display);
  font-size: calc(2.8 * var(--apex-rem));
  line-height: 1.04;
  text-transform: uppercase;
}
.apex .detail-card p {
  color: var(--apex-muted);
}
.apex .detail-card ul {
  display: grid;
  gap: calc(.5 * var(--apex-rem));
  padding: 0;
  margin: calc(1.4 * var(--apex-rem)) 0 0;
  list-style: none;
  font-size: calc(.82 * var(--apex-rem));
  font-weight: 700;
}
.apex .detail-card li::before {
  content: "✓";
  margin-right: calc(.6 * var(--apex-rem));
  color: var(--apex-blue-600);
}
.apex .detail-card .ghost {
  position: absolute;
  right: calc(-1 * var(--apex-rem));
  bottom: calc(-2.3 * var(--apex-rem));
  color: rgba(var(--apex-blue-500-rgb),.06);
  font-family: var(--apex-display);
  font-size: calc(9 * var(--apex-rem));
  font-weight: 800;
}
.apex .auto-hero .hero-media::after {
  background: linear-gradient(90deg,rgba(3,17,38,.98),rgba(3,17,38,.78) 48%,rgba(3,17,38,.12)),linear-gradient(0deg,rgba(3,17,38,.9),transparent 55%);
}
.apex .package-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: calc(1 * var(--apex-rem));
}
.apex .package-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: calc(2.2 * var(--apex-rem));
  border: 1px solid var(--apex-line);
  border-radius: var(--apex-radius);
  background: var(--apex-white);
  transition: transform .25s ease, box-shadow .25s ease;
}
.apex .package-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--apex-shadow);
}
.apex .package-card.featured {
  color: var(--apex-white);
  border-color: var(--apex-blue-600);
  background: var(--apex-navy-950);
}
.apex .package-tag {
  align-self: flex-start;
  padding: calc(.4 * var(--apex-rem)) calc(.65 * var(--apex-rem));
  color: var(--apex-blue-600);
  border-radius: 999px;
  background: var(--apex-ice);
  font-size: calc(.62 * var(--apex-rem));
  font-weight: 800;
  text-transform: uppercase;
}
.apex .package-card h3 {
  margin: calc(2.4 * var(--apex-rem)) 0 calc(.4 * var(--apex-rem));
  font-family: var(--apex-display);
  font-size: calc(2.35 * var(--apex-rem));
  line-height: 1.04;
  text-transform: uppercase;
}
.apex .package-card p {
  margin: 0;
  color: var(--apex-muted);
  font-size: calc(.86 * var(--apex-rem));
}
.apex .package-card.featured p {
  color: rgba(255,255,255,.65);
}
.apex .package-card ul {
  display: grid;
  gap: calc(.65 * var(--apex-rem));
  padding: calc(1.5 * var(--apex-rem)) 0;
  margin: calc(1.5 * var(--apex-rem)) 0;
  border-top: 1px solid var(--apex-line);
  border-bottom: 1px solid var(--apex-line);
  list-style: none;
  font-size: calc(.82 * var(--apex-rem));
}
.apex .package-card.featured ul {
  border-color: rgba(255,255,255,.14);
}
.apex .package-card li::before {
  content: "✓";
  margin-right: calc(.55 * var(--apex-rem));
  color: var(--apex-blue-500);
  font-weight: 900;
}
.apex .package-card .button {
  margin-top: auto;
}
.apex .package-price {
  display: flex;
  align-items: flex-start;
  margin: calc(1.4 * var(--apex-rem)) 0 calc(.2 * var(--apex-rem));
  font-family: var(--apex-display);
  font-weight: 800;
  line-height: 1;
}
.apex .package-price small {
  margin: calc(.25 * var(--apex-rem)) calc(.2 * var(--apex-rem)) 0 0;
  font-family: var(--apex-body);
  font-size: calc(.66 * var(--apex-rem));
  text-transform: uppercase;
}
.apex .package-price strong {
  font-size: calc(3 * var(--apex-rem));
}
.apex .package-price sup {
  margin-top: calc(.25 * var(--apex-rem));
  font-size: calc(1.2 * var(--apex-rem));
}
.apex .package-duration {
  color: var(--apex-blue-600) !important;
  font-size: calc(.72 * var(--apex-rem)) !important;
  font-weight: 800;
  text-transform: uppercase;
}
.apex .contact-layout {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: calc(5 * var(--apex-rem));
  align-items: start;
}
.apex .contact-list {
  display: grid;
  gap: calc(.7 * var(--apex-rem));
  margin-top: calc(2 * var(--apex-rem));
}
.apex .contact-item {
  display: grid;
  grid-template-columns: calc(2.8 * var(--apex-rem)) 1fr;
  gap: calc(.9 * var(--apex-rem));
  align-items: center;
  padding: calc(1 * var(--apex-rem)) 0;
  border-bottom: 1px solid var(--apex-line);
}
.apex .contact-item b {
  color: var(--apex-blue-600);
}
.apex .contact-symbol {
  width: calc(2.45 * var(--apex-rem));
  height: calc(2.45 * var(--apex-rem));
  display: grid;
  place-items: center;
  color: var(--apex-blue-600);
  border: 1px solid rgba(var(--apex-blue-600-rgb),.24);
  border-radius: 50%;
  background: var(--apex-ice);
  font-size: calc(.8 * var(--apex-rem));
  font-weight: 900;
}
.apex .contact-item small {
  display: block;
  color: var(--apex-muted);
  font-size: calc(.67 * var(--apex-rem));
  font-weight: 800;
  text-transform: uppercase;
}
.apex .contact-item strong {
  display: block;
  font-size: calc(.9 * var(--apex-rem));
}
.apex .quote-form {
  padding: calc(2.5 * var(--apex-rem));
  border-radius: var(--apex-radius);
  background: var(--apex-ice);
  box-shadow: var(--apex-shadow);
}
.apex .form-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: calc(1 * var(--apex-rem));
}
.apex .field {
  display: grid;
  gap: calc(.45 * var(--apex-rem));
}
.apex .field.full {
  grid-column: 1 / -1;
}
.apex .field label {
  font-size: calc(.68 * var(--apex-rem));
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.apex .field input, .apex .field select, .apex .field textarea {
  width: 100%;
  min-height: calc(3.4 * var(--apex-rem));
  padding: calc(.8 * var(--apex-rem)) calc(1 * var(--apex-rem));
  color: var(--apex-ink);
  border: 1px solid rgba(7,23,44,.16);
  border-radius: calc(.65 * var(--apex-rem));
  background: var(--apex-white);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.apex .field textarea {
  min-height: calc(9 * var(--apex-rem));
  resize: vertical;
}
.apex .field input:focus, .apex .field select:focus, .apex .field textarea:focus {
  outline: 0;
  border-color: var(--apex-blue-600);
  box-shadow: 0 0 0 3px rgba(var(--apex-blue-500-rgb),.12);
}
.apex .file-input {
  position: absolute;
  width: 1px !important;
  height: 1px;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.apex .file-upload {
  display: flex;
  align-items: center;
  gap: calc(1 * var(--apex-rem));
  min-height: calc(6.5 * var(--apex-rem));
  padding: calc(1 * var(--apex-rem)) calc(1.2 * var(--apex-rem));
  color: var(--apex-navy-800);
  border: 2px dashed rgba(var(--apex-blue-600-rgb),.32);
  border-radius: calc(.8 * var(--apex-rem));
  background: rgba(255,255,255,.7);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.apex .file-upload:hover {
  border-color: var(--apex-blue-600);
  background: var(--apex-white);
  transform: translateY(-2px);
}
.apex .field:focus-within .file-upload {
  border-color: var(--apex-blue-600);
  box-shadow: 0 0 0 3px rgba(var(--apex-blue-500-rgb),.12);
}
.apex .file-upload-icon {
  width: calc(2.7 * var(--apex-rem));
  height: calc(2.7 * var(--apex-rem));
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--apex-white);
  border-radius: 50%;
  background: var(--apex-blue-600);
  font-size: calc(1.2 * var(--apex-rem));
}
.apex .file-upload strong, .apex .file-upload small {
  display: block;
}
.apex .file-upload strong {
  font-size: calc(.78 * var(--apex-rem));
  letter-spacing: .04em;
}
.apex .file-upload small {
  margin-top: calc(.2 * var(--apex-rem));
  color: var(--apex-muted);
  font-size: calc(.68 * var(--apex-rem));
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.apex .file-selection {
  margin: 0;
  color: var(--apex-muted);
  font-size: calc(.7 * var(--apex-rem));
}
.apex .file-clear {
  width: max-content;
  padding: 0;
  color: var(--apex-blue-700);
  border: 0;
  background: transparent;
  font-size: calc(.7 * var(--apex-rem));
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: calc(.2 * var(--apex-rem));
}
.apex .file-clear:hover {
  color: var(--apex-navy-900);
}
.apex .form-note {
  margin: calc(1 * var(--apex-rem)) 0 0;
  color: var(--apex-muted);
  font-size: calc(.72 * var(--apex-rem));
}
.apex .form-success {
  display: none;
  margin-top: calc(1 * var(--apex-rem));
  padding: calc(.8 * var(--apex-rem)) calc(1 * var(--apex-rem));
  color: #0a5f38;
  border-radius: calc(.65 * var(--apex-rem));
  background: #dcfaea;
  font-size: calc(.8 * var(--apex-rem));
  font-weight: 700;
}
.apex .form-success.show {
  display: block;
}
.apex .lightbox {
  width: min(92vw, 1120px);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: calc(1 * var(--apex-rem));
  background: var(--apex-navy-950);
  box-shadow: 0 28px 90px rgba(0,0,0,.5);
}
.apex .lightbox::backdrop {
  background: rgba(3,17,38,.86);
  backdrop-filter: blur(10px);
}
.apex .lightbox img {
  width: 100%;
  max-height: 84vh;
  object-fit: contain;
  border-radius: calc(1 * var(--apex-rem));
}
.apex .lightbox button {
  position: absolute;
  z-index: 2;
  top: calc(-.9 * var(--apex-rem));
  right: calc(-.9 * var(--apex-rem));
  width: calc(2.8 * var(--apex-rem));
  height: calc(2.8 * var(--apex-rem));
  display: grid;
  place-items: center;
  color: var(--apex-navy-950);
  border: 0;
  border-radius: 50%;
  background: var(--apex-white);
  font-size: calc(1.4 * var(--apex-rem));
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.apex .legal-content {
  max-width: calc(52 * var(--apex-rem));
}
.apex .legal-content h2 {
  margin: calc(2.6 * var(--apex-rem)) 0 calc(.7 * var(--apex-rem));
  font-family: var(--apex-display);
  font-size: calc(2 * var(--apex-rem));
  text-transform: uppercase;
}
.apex .legal-content p, .apex .legal-content li {
  color: var(--apex-muted);
}
.apex .site-footer {
  color: var(--apex-white);
  background: var(--apex-navy-950);
}
.apex .footer-main {
  display: grid;
  grid-template-columns: 1.35fr repeat(3,minmax(0,1fr));
  gap: 0;
  padding: calc(4.5 * var(--apex-rem)) 0 calc(3.5 * var(--apex-rem));
}
.apex .footer-brand p {
  max-width: calc(25 * var(--apex-rem));
  color: rgba(255,255,255,.55);
  font-size: calc(.86 * var(--apex-rem));
}
.apex .footer-column {
  min-width: 0;
  padding-left: calc(2 * var(--apex-rem));
  border-left: 1px solid rgba(255,255,255,.1);
}
.apex .footer-title {
  margin: 0 0 calc(1 * var(--apex-rem));
  color: var(--apex-blue-300);
  font-size: calc(.66 * var(--apex-rem));
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.apex .footer-links {
  display: grid;
  gap: calc(.55 * var(--apex-rem));
}
.apex .footer-links a, .apex .footer-links span {
  color: rgba(255,255,255,.67);
  font-size: calc(.8 * var(--apex-rem));
  overflow-wrap: anywhere;
}
.apex .footer-links a:hover {
  color: var(--apex-white);
}
.apex .footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: calc(1 * var(--apex-rem));
  padding: calc(1.2 * var(--apex-rem)) 0;
  color: rgba(255,255,255,.42);
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: calc(.7 * var(--apex-rem));
}
.apex .mobile-actions {
  display: none;
}
.apex [data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.apex [data-reveal].revealed {
  opacity: 1;
  transform: none;
}
.apex [data-reveal-delay="1"] {
  transition-delay: .1s;
}
.apex [data-reveal-delay="2"] {
  transition-delay: .2s;
}
.apex [data-reveal-delay="3"] {
  transition-delay: .3s;
}
@media (max-width: 1080px) {
  .apex .brand-switcher {
    display: none;
  }
  .apex .main-nav {
    gap: calc(1 * var(--apex-rem));
  }
  .apex .header-cta {
    display: none;
  }
  .apex .section-heading, .apex .comparison-layout, .apex .choice-layout, .apex .coverage-grid, .apex .contact-layout {
    grid-template-columns: 1fr;
  }
  .apex .services-grid {
    grid-template-columns: repeat(2,1fr);
  }
  .apex .package-grid {
    grid-template-columns: repeat(2,1fr);
  }
  .apex .recommendation {
    position: static;
  }
  .apex .project-grid {
    grid-template-columns: repeat(2,1fr);
  }
  .apex .project-card:first-child {
    grid-column: 1 / -1;
  }
  .apex .footer-main {
    grid-template-columns: repeat(2,1fr);
  }
}
@media (max-width: 760px) {
  :root {
    --apex-container: min(100% - calc(1.35 * var(--apex-rem)), 1180px);
  }
  body.apex-on {
    padding-bottom: calc(4.2 * var(--apex-rem));
  }
  .apex .section {
    padding: calc(5.2 * var(--apex-rem)) 0;
  }
  .apex .section-tight {
    padding: calc(3.8 * var(--apex-rem)) 0;
  }
  .apex .display {
    font-size: clamp(calc(3.35 * var(--apex-rem)),17vw,calc(5.4 * var(--apex-rem)));
    line-height: .98;
  }
  .apex .display-medium {
    font-size: clamp(calc(3 * var(--apex-rem)),14vw,calc(4.6 * var(--apex-rem)));
  }
  .apex .display-small {
    font-size: clamp(calc(2.65 * var(--apex-rem)),12vw,calc(4 * var(--apex-rem)));
  }
  .apex .section-heading {
    gap: calc(1.4 * var(--apex-rem));
    margin-bottom: calc(2.5 * var(--apex-rem));
  }
  .apex .topbar-inner {
    min-height: calc(2 * var(--apex-rem));
    justify-content: center;
  }
  .apex .topbar-links a:not(:first-child), .apex .topbar-label, .apex .topbar-contact-label {
    display: none;
  }
  .apex .header-inner {
    min-height: calc(4.7 * var(--apex-rem));
  }
  .apex .brand img {
    width: calc(3.1 * var(--apex-rem));
    height: calc(3.1 * var(--apex-rem));
  }
  .apex .brand-copy strong {
    font-size: calc(1.45 * var(--apex-rem));
  }
  .apex .brand-copy span {
    font-size: calc(.62 * var(--apex-rem));
  }
  .apex .menu-toggle {
    display: grid;
    margin-left: auto;
  }
  .apex .main-nav {
    position: fixed;
    z-index: 999;
    inset: calc(6.7 * var(--apex-rem)) 0 auto;
    max-height: calc(100svh - calc(6.7 * var(--apex-rem)));
    display: grid;
    align-content: start;
    gap: 0;
    padding: calc(1 * var(--apex-rem)) calc(1.2 * var(--apex-rem)) calc(2 * var(--apex-rem));
    overflow-y: auto;
    background: var(--apex-navy-950);
    border-top: 1px solid rgba(255,255,255,.12);
    transform: translateY(-130%);
    opacity: 0;
    pointer-events: none;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s ease;
  }
  body.apex-menu-open .apex .main-nav {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .apex .main-nav > a {
    padding: calc(1 * var(--apex-rem)) calc(.25 * var(--apex-rem));
    border-bottom: 1px solid rgba(255,255,255,.1);
    font-family: var(--apex-display);
    font-size: calc(1.6 * var(--apex-rem));
  }
  .apex .hero {
    min-height: calc(100svh - calc(6.7 * var(--apex-rem)));
    align-items: stretch;
  }
  .apex .hero-media::after {
    background: linear-gradient(0deg,rgba(3,17,38,.98) 3%,rgba(3,17,38,.66) 72%,rgba(3,17,38,.3));
  }
  .apex .hero-media img {
    object-position: 58% center;
  }
  .apex .hero-content {
    padding: calc(7 * var(--apex-rem)) 0 calc(3.5 * var(--apex-rem));
  }
  .apex .hero-copy .lead {
    font-size: calc(.95 * var(--apex-rem));
  }
  .apex .hero-trust {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: calc(.85 * var(--apex-rem));
  }
  .apex .hero-index {
    display: none;
  }
  .apex .trust-grid {
    grid-template-columns: repeat(2,1fr);
  }
  .apex .trust-item {
    min-height: calc(6 * var(--apex-rem));
    padding: calc(.85 * var(--apex-rem));
    border-bottom: 1px solid rgba(255,255,255,.18);
  }
  .apex .trust-item strong {
    font-size: calc(1.55 * var(--apex-rem));
  }
  .apex .services-grid, .apex .detail-grid, .apex .package-grid, .apex .project-grid, .apex .form-grid {
    grid-template-columns: 1fr;
  }
  .apex .auto-gallery {
    grid-template-columns: repeat(2,1fr);
    grid-auto-rows: calc(15 * var(--apex-rem));
  }
  .apex .service-card {
    min-height: calc(16 * var(--apex-rem));
    padding: calc(1.5 * var(--apex-rem));
  }
  .apex .service-icon {
    margin-top: calc(1.8 * var(--apex-rem));
  }
  .apex .comparison-layout {
    gap: calc(2.6 * var(--apex-rem));
  }
  .apex .roof-compare {
    border-width: calc(.4 * var(--apex-rem));
    border-radius: calc(1 * var(--apex-rem));
  }
  .apex .choice-list {
    grid-template-columns: 1fr;
  }
  .apex .project-card, .apex .project-card:not(:first-child) {
    min-height: calc(25 * var(--apex-rem));
  }
  .apex .project-card:first-child {
    grid-column: auto;
  }
  .apex .process-grid {
    grid-template-columns: 1fr;
    border-top: 0;
  }
  .apex .process-step {
    padding: calc(1.3 * var(--apex-rem)) 0 calc(1.3 * var(--apex-rem)) calc(2 * var(--apex-rem));
    border-left: 1px solid rgba(255,255,255,.15);
  }
  .apex .process-step::before {
    top: calc(1.65 * var(--apex-rem));
    left: -4px;
  }
  .apex .review-heading {
    grid-template-columns: 1fr;
    gap: calc(1 * var(--apex-rem));
  }
  .apex .review-card {
    min-height: calc(20 * var(--apex-rem));
    padding: calc(1.6 * var(--apex-rem));
  }
  .apex .review-text {
    font-size: calc(1.25 * var(--apex-rem));
  }
  .apex .coverage-map {
    min-height: calc(22 * var(--apex-rem));
  }
  .apex .cta-panel {
    padding: calc(3 * var(--apex-rem)) calc(1.5 * var(--apex-rem));
    border-radius: calc(1 * var(--apex-rem));
  }
  .apex .cta-panel::after {
    font-size: calc(8 * var(--apex-rem));
  }
  .apex .page-hero {
    padding: calc(6 * var(--apex-rem)) 0 calc(4 * var(--apex-rem));
  }
  .apex .detail-card {
    min-height: calc(22 * var(--apex-rem));
    padding: calc(1.6 * var(--apex-rem));
  }
  .apex .detail-card .detail-image {
    width: calc(100% + calc(3.2 * var(--apex-rem)));
    margin: calc(-1.6 * var(--apex-rem)) calc(-1.6 * var(--apex-rem)) calc(1.6 * var(--apex-rem));
  }
  .apex .contact-layout {
    gap: calc(2.5 * var(--apex-rem));
  }
  .apex .quote-form {
    padding: calc(1.3 * var(--apex-rem));
  }
  .apex .footer-main {
    grid-template-columns: 1fr;
    gap: calc(2 * var(--apex-rem));
    padding: calc(4 * var(--apex-rem)) 0 calc(2.5 * var(--apex-rem));
  }
  .apex .footer-column {
    padding-left: 0;
    padding-top: calc(2 * var(--apex-rem));
    border-top: 1px solid rgba(255,255,255,.1);
    border-left: 0;
  }
  .apex .footer-bottom {
    display: grid;
  }
  .apex .mobile-actions {
    position: fixed;
    z-index: 1200;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    color: var(--apex-white);
    background: var(--apex-navy-950);
    box-shadow: 0 -12px 34px rgba(3,17,38,.2);
  }
  .apex .mobile-actions a {
    min-height: calc(4.2 * var(--apex-rem));
    display: grid;
    place-items: center;
    font-size: calc(.75 * var(--apex-rem));
    font-weight: 800;
    text-transform: uppercase;
  }
  .apex .mobile-actions a:last-child {
    background: var(--apex-blue-600);
  }
}
@media (max-width: 460px) {
  .apex .auto-gallery {
    grid-template-columns: 1fr;
    grid-auto-rows: calc(18 * var(--apex-rem));
  }
  .apex .gallery-card.gallery-wide {
    grid-column: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .apex *, .apex *::before, .apex *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .apex [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   ADAPTATIONS WORDPRESS — en-tête fixe, ancres, barre d'admin
   ========================================================================== */

/* L'en-tête est un template Elementor séparé : on le fixe au viewport et on
   compense la hauteur sur le body (le JS mesure la hauteur réelle). */
.apex-header-root { position: fixed; z-index: 1000; inset: 0 0 auto; width: 100%; }
.apex .site-header { position: static; }
body.apex-on { padding-top: var(--apex-header-h); }

/* barre d'administration WordPress */
body.admin-bar .apex-header-root { top: 32px; }
@media (max-width: 782px) { body.admin-bar .apex-header-root { top: 46px; } }

/* hauteurs qui dépendaient d'un en-tête de taille fixe */
.apex .hero { min-height: calc(100svh - var(--apex-header-h)); }
@media (max-width: 760px) {
  .apex .hero { min-height: calc(100svh - var(--apex-header-h)); }
  .apex .main-nav { inset: var(--apex-header-h) 0 auto; max-height: calc(100svh - var(--apex-header-h)); }
}

/* les ancres (#realisations, #vitres...) ne passent plus sous l'en-tête */
.apex[id], .apex [id] { scroll-margin-top: calc(var(--apex-header-h) + 16px); }

/* --------------------------------------------------------------------------
   MENU — la barre bleue sous le lien actif était collée au mot et décentrée.
   Espace égal au-dessus et en dessous de la barre.
   -------------------------------------------------------------------------- */
.apex .main-nav > a { padding: calc(1.2 * var(--apex-rem)) 0; }
.apex .main-nav > a::after { bottom: calc(.55 * var(--apex-rem)); }
@media (max-width: 760px) {
  .apex .main-nav > a { padding: calc(1 * var(--apex-rem)) calc(.25 * var(--apex-rem)); }
}

/* --------------------------------------------------------------------------
   THÈME APEX AUTO — orange et blanc au lieu de bleu et blanc.
   S'applique à la page Auto et à l'en-tête quand on est sur cette page :
   menu, bouton de soumission, barre du haut, forfaits, encadrés, tout suit.
   -------------------------------------------------------------------------- */
.apex[data-page="auto"],
.apex-theme-auto {
  --apex-blue-600: #ee6002;
  --apex-blue-500: #ff7a29;
  --apex-blue-300: #ffb27a;
  --apex-blue-700: #c04e00;
  --apex-blue-600-rgb: 238, 96, 2;
  --apex-blue-500-rgb: 255, 122, 41;
  --apex-ice: #fff4ec;
}
/* l'orange à 25 % sur le marine tire vers le brun : on monte l'opacité
   pour que la division sélectionnée reste franche */
.apex.apex-theme-auto .brand-switcher a[aria-current="page"],
.apex.apex-theme-auto .brand-switcher a:hover {
  background: rgba(var(--apex-blue-500-rgb), .42);
}

/* --------------------------------------------------------------------------
   PIED DE PAGE — le texte de la colonne marque venait toucher le trait vertical
   de la colonne suivante. On lui donne la même gouttière (2rem) que celle qui
   sépare les autres colonnes de leur trait.
   -------------------------------------------------------------------------- */
.apex .footer-brand { padding-right: calc(2 * var(--apex-rem)); }
@media (max-width: 760px) {
  .apex .footer-brand { padding-right: 0; }
}

/* --------------------------------------------------------------------------
   LOGOS — maison pour Apex Services, montagne pour Apex Auto
   -------------------------------------------------------------------------- */
.apex .brand-mark-auto { display: none; }
.apex.apex-theme-auto .brand-mark-auto { display: block; }
.apex.apex-theme-auto .brand-mark-services { display: none; }
/* la montagne est large et basse : on lui donne plus de largeur pour qu'elle
   pèse visuellement autant que la maison */
.apex .brand img.brand-mark-auto { width: calc(5.1 * var(--apex-rem)); }

/* --------------------------------------------------------------------------
   ELEMENTOR — on annule les marges et paddings des conteneurs qui hébergent
   un bloc Apex, pour que le bloc touche vraiment les bords de la page.
   -------------------------------------------------------------------------- */
.elementor-widget:has(> .elementor-widget-container > .apex),
.elementor-widget-html:has(> .elementor-widget-container > .apex),
.elementor-widget-container:has(> .apex) { margin: 0; padding: 0; }

.e-con:has(> .elementor-widget > .elementor-widget-container > .apex),
.e-con-inner:has(> .elementor-widget > .elementor-widget-container > .apex),
.e-con:has(> .e-con-inner > .elementor-widget > .elementor-widget-container > .apex),
.elementor-container:has(.apex),
.elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget > .elementor-widget-container > .apex),
.elementor-widget-wrap:has(> .elementor-widget > .elementor-widget-container > .apex) {
  margin: 0; padding: 0; max-width: 100%; width: 100%;
}

/* Sécurité : si le conteneur Elementor impose une largeur max, décommenter.
.apex-breakout { width: 100vw; margin-left: calc(50% - 50vw); }
*/

/* ==========================================================================
   OPTIMISATIONS MOBILE
   ========================================================================== */

/* --- 1. plus aucun débordement horizontal --------------------------------
   Les grilles CSS ont un min-width:auto par défaut : un mot long dans un titre
   élargit la colonne au-delà de l'écran. On remet min-width:0 et on autorise
   la coupure des mots trop longs. */
@media (max-width: 1080px) {
  .apex .section-heading > *, .apex .trust-grid > *, .apex .services-grid > *,
  .apex .detail-grid > *, .apex .package-grid > *, .apex .project-grid > *,
  .apex .form-grid > *, .apex .auto-gallery > *, .apex .comparison-layout > *,
  .apex .choice-layout > *, .apex .coverage-grid > *, .apex .contact-layout > *,
  .apex .footer-main > *, .apex .process-grid > *, .apex .review-heading > *,
  .apex .hero-trust > *, .apex .hero-copy > *, .apex .feature-list > *,
  .apex .choice-list > *, .apex .container > * { min-width: 0; }

  .apex .display, .apex .display-medium, .apex .display-small,
  .apex .review-text, .apex .trust-item strong, .apex .service-card h3,
  .apex .detail-card h2, .apex .package-card h3, .apex .process-step h3,
  .apex .faq-list summary, .apex .project-caption h3, .apex .recommendation h3,
  .apex .gallery-card figcaption, .apex .hero-index strong {
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

/* --- 2. cibles tactiles d'au moins 44 px ----------------------------------
   On vise (pointer: coarse) : ça couvre le téléphone en portrait ET en
   paysage, et la tablette, pas seulement les écrans étroits. */
@media (pointer: coarse), (max-width: 900px) {
  .apex .footer-links { gap: 0; }
  .apex .footer-links a, .apex .footer-links span {
    min-height: 44px; display: flex; align-items: center;
  }
  .apex .footer-bottom { gap: 0; }
  .apex .footer-bottom a { min-height: 44px; display: inline-flex; align-items: center; }
  .apex .breadcrumbs { align-items: center; }
  .apex .breadcrumbs a, .apex .breadcrumbs span {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .apex .topbar a { min-height: 44px; display: inline-flex; align-items: center; }
  .apex .contact-item a { min-height: 44px; display: inline-flex; align-items: center; }
  .apex .service-link { min-height: 40px; display: inline-flex; align-items: center; }
  .apex .coverage-list span { min-height: 38px; display: inline-flex; align-items: center; }
}

/* --- 3. rien sous 12 px sur mobile ---------------------------------------
   Les petites étiquettes en majuscules passaient à 10-11 px, illisible sur
   un écran de téléphone tenu à bout de bras. */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1080px) {
  .apex .topbar { font-size: calc(.78 * var(--apex-rem)); }
  .apex .topbar-contact-label { font-size: calc(.75 * var(--apex-rem)); }
  .apex .hero-index small { font-size: calc(.75 * var(--apex-rem)); }
  .apex .eyebrow,
  .apex .trust-item span,
  .apex .service-link,
  .apex .coverage-list span,
  .apex .footer-title,
  .apex .footer-bottom,
  .apex .breadcrumbs,
  .apex .contact-item small,
  .apex .recommendation-label,
  .apex .package-tag,
  .apex .package-price small,
  .apex .package-duration,
  .apex .field label,
  .apex .file-upload strong,
  .apex .form-note,
  .apex .file-selection,
  .apex .file-clear,
  .apex .review-person small,
  .apex .project-caption small,
  .apex .choice-button small,
  .apex .gallery-card figcaption,
  .apex .mobile-actions a { font-size: calc(.78 * var(--apex-rem)); }

  .apex .footer-links a, .apex .footer-links span { font-size: calc(.88 * var(--apex-rem)); }
  .apex .footer-brand p { font-size: calc(.92 * var(--apex-rem)); }
  .apex .service-card p, .apex .package-card p, .apex .process-step p,
  .apex .detail-card p, .apex .detail-card ul { font-size: calc(.92 * var(--apex-rem)); }
  .apex .roof-compare-label { font-size: calc(.75 * var(--apex-rem)); }
  .apex .roof-compare-hint { font-size: calc(.75 * var(--apex-rem)); }
  .apex .brand-copy span { font-size: calc(.75 * var(--apex-rem)); }
  .apex .file-upload small { font-size: calc(.78 * var(--apex-rem)); }
  /* le CSS d'origine met !important sur cette ligne */
  .apex .package-duration { font-size: calc(.78 * var(--apex-rem)) !important; }
}

/* --- 3 bis. très petits écrans (iPhone SE) -------------------------------
   « Soumission » en Barlow Condensed 24 px dépassait la colonne de 9 px. */
@media (max-width: 360px) {
  .apex .trust-grid { grid-template-columns: 1fr; }
  .apex .trust-item { min-height: 0; padding: calc(1 * var(--apex-rem)) calc(.9 * var(--apex-rem)); }
  .apex .display { font-size: clamp(2.6rem, 15vw, 4rem); }
  .apex .cta-panel::after { font-size: calc(6 * var(--apex-rem)); }
}

/* --- 3 ter. téléphone en paysage (844 x 390) -----------------------------
   Le bandeau garde ses 4 colonnes jusqu'à 1080 px : « Soumission » en
   Barlow Condensed 32 px dépassait la colonne. */
@media (min-width: 361px) and (max-width: 920px) {
  .apex .trust-item { padding: calc(.8 * var(--apex-rem)); }
  .apex .trust-item strong { font-size: calc(1.35 * var(--apex-rem)); }
}

/* --- 4. iPhone : encoche et barre d'accueil ------------------------------
   Si le thème déclare viewport-fit=cover, la barre d'actions du bas se
   retrouve sous l'indicateur d'accueil. Ces marges valent 0 sinon. */
@media (max-width: 760px) {
  .apex .mobile-actions { padding-bottom: env(safe-area-inset-bottom, 0px); }
  body.apex-on {
    padding-bottom: calc(4.2 * var(--apex-rem) + env(safe-area-inset-bottom, 0px));
  }
  .apex .mobile-actions a,
  .apex .main-nav,
  .apex .container {
    padding-left: max(0px, env(safe-area-inset-left, 0px));
    padding-right: max(0px, env(safe-area-inset-right, 0px));
  }
}

/* --- 5. confort tactile --------------------------------------------------- */
.apex { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.apex a, .apex button, .apex summary, .apex label, .apex [role="button"] {
  -webkit-tap-highlight-color: rgba(var(--apex-blue-500-rgb), .18);
  touch-action: manipulation;
}
.apex .main-nav { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.apex .roof-compare, .apex .roof-compare * { -webkit-user-select: none; user-select: none; }
.apex .review-track { touch-action: pan-y; }

/* --- 6. la lightbox en plein écran sur téléphone -------------------------- */
@media (max-width: 760px) {
  .apex .lightbox { width: min(96vw, 100%); }
  .apex .lightbox img { max-height: 76vh; }
  .apex .lightbox button { top: calc(-.6 * var(--apex-rem)); right: calc(-.4 * var(--apex-rem)); }
}

/* ==========================================================================
   RETOUCHES MOBILE — demandées à la revue
   ========================================================================== */

/* --- 1. les filets du bandeau s'alignent -----------------------------------
   Chaque case avait un filet à gauche sauf la première : en deux colonnes,
   la case 3 gardait donc un filet au bord gauche de l'écran, sans vis-à-vis
   dans la rangée du dessus. On dessine plutôt une vraie croix. */
@media (max-width: 760px) {
  /* le texte des cases s'aligne sur la marge de la page, au lieu d'être
     décalé de 13 px vers la droite par rapport au reste du contenu */
  .apex .trust-item { padding-left: 0; padding-right: calc(.9 * var(--apex-rem)); }
  .apex .trust-item:nth-child(even) { padding-left: calc(.9 * var(--apex-rem)); padding-right: 0; }
  .apex .coverage-map.carte-sans-tuiles { background: radial-gradient(circle at 50% 45%, #0a2850, var(--apex-navy-950) 70%); }
.apex .carte-legende {
  position: absolute; z-index: 500; inset: auto 0 0;
  padding: calc(1.4 * var(--apex-rem)) calc(1.1 * var(--apex-rem)) calc(1.6 * var(--apex-rem));
  color: rgba(255,255,255,.86);
  background: linear-gradient(0deg, rgba(3,17,38,.96) 55%, rgba(3,17,38,0));
  font-size: calc(.72 * var(--apex-rem)); font-weight: 700; line-height: 1.55;
  text-align: center; pointer-events: none;
}
/* sans fond de rues, il n'y a rien à zoomer : on retire les boutons */
.apex .carte-sans-tuiles .leaflet-control-zoom { display: none; }

.apex .carte-repli { text-align: left; padding-left: 0; padding-right: 0; }
}
@media (max-width: 360px) {
  .apex .trust-item, .apex .trust-item:nth-child(even) { padding-left: 0; padding-right: 0; }
}

@media (min-width: 361px) and (max-width: 760px) {
  .apex .trust-item { border-left: 0; border-bottom: 0; }
  .apex .trust-item:nth-child(even) { border-left: 1px solid rgba(255,255,255,.22); }
  .apex .trust-item:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.22); }
}
@media (max-width: 360px) {
  .apex .trust-item { border-left: 0; border-bottom: 0; }
  .apex .trust-item:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,.22); }
}

/* --- 2. le bouton menu : trois traits serrés et centrés -------------------
   Le bouton est une grille de 48 px avec trois lignes automatiques : par
   défaut elles s'étirent pour remplir la hauteur, ce qui écartait les traits
   quoi qu'on mette en marge. align-content: center règle vraiment l'espacement,
   et l'écart du X est recalculé en conséquence. */
.apex .menu-toggle { align-content: center; }
.apex .menu-toggle span, .apex .menu-toggle::before, .apex .menu-toggle::after {
  width: calc(1.4 * var(--apex-rem));
  border-radius: 2px;
}
.apex .menu-toggle span { margin: calc(.31 * var(--apex-rem)) auto; }
body.apex-menu-open .apex .menu-toggle::before { transform: translateY(calc(.44 * var(--apex-rem))) rotate(45deg); }
body.apex-menu-open .apex .menu-toggle::after  { transform: translateY(calc(-.44 * var(--apex-rem))) rotate(-45deg); }

/* --- 3. les trois arguments du héros, alignés en liste --------------------
   En deux colonnes, le troisième restait seul sur sa rangée et les textes
   se coupaient à des endroits différents. */
@media (max-width: 760px) {
  .apex .hero-trust {
    grid-template-columns: 1fr;
    gap: calc(.72 * var(--apex-rem));
    margin-top: calc(2.2 * var(--apex-rem));
    padding-top: calc(1.3 * var(--apex-rem));
  }
  .apex .hero-trust span { align-items: flex-start; }
  .apex .hero-trust span::before { margin-top: calc(.1 * var(--apex-rem)); flex: 0 0 auto; }
}

/* --- 4. le texte respire sur les côtés -----------------------------------
   La marge latérale était de 10,8 px : le texte touchait presque le bord.
   On passe à 19 px de chaque côté, sur toutes les pages. */
@media (max-width: 760px) {
  :root { --apex-container: min(100% - calc(2.4 * var(--apex-rem)), 1180px); }
  .apex .cta-panel { padding: calc(2.8 * var(--apex-rem)) calc(1.5 * var(--apex-rem)); }
  /* le titre doit tenir sans se couper au trait d'union (« PARLEZ-NOUS ») */
  .apex .cta-panel .display-small { font-size: clamp(2.2rem, 10.5vw, 3.4rem); }
}

/* --- 5. plus de vide en haut du héros ------------------------------------
   Les 7 rem de marge servaient à dégager l'ancien en-tête non fixe.
   L'en-tête est fixe et le body compense déjà : le bloc est simplement
   centré dans la hauteur du héros. */
@media (max-width: 760px) {
  .apex .hero-content {
    padding: calc(2.4 * var(--apex-rem)) 0 calc(3.2 * var(--apex-rem));
    align-self: center;
  }
}

/* --- 6. la carte de couverture ------------------------------------------- */
.apex .coverage-map { background: var(--apex-navy-900); }
.apex .coverage-map .leaflet-container { width: 100%; height: 100%; background: var(--apex-navy-950); }
.apex .coverage-map.carte-sans-tuiles { background: radial-gradient(circle at 50% 45%, #0a2850, var(--apex-navy-950) 70%); }
.apex .carte-legende {
  position: absolute; z-index: 500; inset: auto 0 0;
  padding: calc(1.4 * var(--apex-rem)) calc(1.1 * var(--apex-rem)) calc(1.6 * var(--apex-rem));
  color: rgba(255,255,255,.86);
  background: linear-gradient(0deg, rgba(3,17,38,.96) 55%, rgba(3,17,38,0));
  font-size: calc(.72 * var(--apex-rem)); font-weight: 700; line-height: 1.55;
  text-align: center; pointer-events: none;
}
/* sans fond de rues, il n'y a rien à zoomer : on retire les boutons */
.apex .carte-sans-tuiles .leaflet-control-zoom { display: none; }

.apex .carte-repli {
  display: grid; align-content: center; gap: calc(.9 * var(--apex-rem));
  height: 100%; padding: calc(1.6 * var(--apex-rem));
  color: rgba(255,255,255,.82); text-align: center;
}
.apex .carte-repli strong { font-family: var(--apex-display); font-size: calc(1.6 * var(--apex-rem)); text-transform: uppercase; }
.apex .carte-repli span { font-size: calc(.82 * var(--apex-rem)); color: rgba(255,255,255,.6); }
@media (max-width: 760px) {
  .apex .coverage-map { min-height: calc(24 * var(--apex-rem)); }
  .apex .coverage-grid { gap: calc(2 * var(--apex-rem)); }
  /* les boutons + / - passent en bas à gauche : en haut ils se retrouvaient
     sous l'en-tête fixe quand on arrivait sur la carte en défilant */
  .apex .coverage-map .leaflet-top.leaflet-left {
    top: auto; bottom: 12px; left: 12px;
  }
  .apex .coverage-map .leaflet-control-zoom a { width: 38px; height: 38px; line-height: 38px; font-size: 20px; }
}




/* ==========================================================================
   MENU MOBILE — position et densité
   ========================================================================== */

/* Le décalage de 32 px sous l'en-tête venait du backdrop-filter : un ancêtre
   filtré devient le repère des éléments en position fixed, donc le menu se
   positionnait par rapport à l'en-tête et non par rapport à l'écran.
   Sur mobile le fond est déjà quasi opaque : le flou n'apporte rien et coûte
   cher à l'affichage. */
@media (max-width: 900px) {
  .apex .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(3,17,38,.985); }
}

/* Menu déroulé plus compact : cinq lignes serrées plutôt qu'un écran entier. */
@media (max-width: 760px) {
  .apex .main-nav {
    padding: calc(.4 * var(--apex-rem)) calc(1.2 * var(--apex-rem)) calc(1.4 * var(--apex-rem));
  }
  .apex .main-nav > a {
    padding: calc(.62 * var(--apex-rem)) calc(.25 * var(--apex-rem));
    font-size: calc(1.35 * var(--apex-rem));
    line-height: 1.2;
  }
}


/* ==========================================================================
   RYTHME VERTICAL MOBILE — on resserre partout
   Les espacements avaient été dessinés pour un grand écran. Sur un téléphone
   ils obligeaient à défiler dans du vide entre chaque bloc.
   ========================================================================== */
@media (max-width: 760px) {
  /* l'en-tête est fixe et le body compense déjà : les 6 rem du haut de page
     ne servaient plus à rien */
  .apex .page-hero { padding: calc(1.6 * var(--apex-rem)) 0 calc(2.2 * var(--apex-rem)); }
  .apex .breadcrumbs { margin-bottom: calc(1.4 * var(--apex-rem)); }

  /* entre deux sections : 108 px au lieu de 166 */
  .apex .section { padding: calc(2.6 * var(--apex-rem)) 0; }
  .apex .section-tight { padding: calc(1.9 * var(--apex-rem)) 0; }

  /* à l'intérieur des sections */
  .apex .section-heading { margin-bottom: calc(1.4 * var(--apex-rem)); gap: calc(.9 * var(--apex-rem)); }
  .apex .lead { margin-top: calc(1.1 * var(--apex-rem)); }
  .apex .hero-actions { margin-top: calc(1.5 * var(--apex-rem)); }
  .apex .cta-actions { margin-top: calc(1.5 * var(--apex-rem)); }
  .apex .process-grid { margin-top: calc(1.7 * var(--apex-rem)); }
  .apex .faq-list { margin-top: calc(1.5 * var(--apex-rem)); }
  .apex .choice-list { margin-top: calc(1.6 * var(--apex-rem)); }
  .apex .feature-list { margin-top: calc(1.5 * var(--apex-rem)); }
  .apex .contact-list { margin-top: calc(1.4 * var(--apex-rem)); }
  .apex .coverage-list { margin-top: calc(1.2 * var(--apex-rem)); }
  .apex .review-controls { margin-top: calc(1.3 * var(--apex-rem)); }
  .apex .cta-panel { padding: calc(2.4 * var(--apex-rem)) calc(1.5 * var(--apex-rem)); }
  .apex .quote-form { padding: calc(1.2 * var(--apex-rem)); }

  /* les cartes gardaient une hauteur minimale calculée pour le bureau :
     du vide sous le texte sur presque toutes les tuiles */
  .apex .service-card { min-height: calc(12.5 * var(--apex-rem)); padding: calc(1.3 * var(--apex-rem)); }
  .apex .service-icon { margin: calc(1.2 * var(--apex-rem)) 0 calc(.8 * var(--apex-rem)); }
  .apex .service-card p { margin: calc(.7 * var(--apex-rem)) 0 calc(1.1 * var(--apex-rem)); }
  .apex .detail-card { padding: calc(1.35 * var(--apex-rem)); }
  .apex .detail-card .detail-image { width: calc(100% + calc(2.7 * var(--apex-rem))); margin: calc(-1.35 * var(--apex-rem)) calc(-1.35 * var(--apex-rem)) calc(1.2 * var(--apex-rem)); height: calc(11 * var(--apex-rem)); }
  .apex .detail-card ul { margin-top: calc(1 * var(--apex-rem)); }
  .apex .package-card { padding: calc(1.5 * var(--apex-rem)); }
  .apex .package-card h3 { margin-top: calc(1.6 * var(--apex-rem)); }
  .apex .package-card ul { padding: calc(1.1 * var(--apex-rem)) 0; margin: calc(1.1 * var(--apex-rem)) 0; }
  .apex .detail-card { min-height: calc(17 * var(--apex-rem)); }
  .apex .project-card, .apex .project-card:not(:first-child) { min-height: calc(19 * var(--apex-rem)); }
  .apex .review-card { min-height: calc(15 * var(--apex-rem)); }
  .apex .coverage-map { min-height: calc(20 * var(--apex-rem)); }
  .apex .auto-gallery { grid-auto-rows: calc(13 * var(--apex-rem)); }

  /* pied de page */
  .apex .footer-main { padding: calc(2.2 * var(--apex-rem)) 0 calc(1.5 * var(--apex-rem)); gap: calc(1.1 * var(--apex-rem)); }
  .apex .footer-column { padding-top: calc(1.1 * var(--apex-rem)); }
}
@media (max-width: 460px) {
  .apex .auto-gallery { grid-auto-rows: calc(15 * var(--apex-rem)); }
}

/* ==========================================================================
   FORMULAIRE CONTACT FORM 7
   Le balisage de Contact Form 7 est glissé dans la grille .quote-form
   existante : on neutralise ses habillages et on restyle ses éléments
   propres (erreurs, réponse, téléversement, bouton).
   ========================================================================== */

.apex form.quote-form { margin: 0; }
.apex .wpcf7 { max-width: 100%; }
.apex .wpcf7-form-control-wrap { display: block; width: 100%; }
.apex .field p { margin: 0; }
.apex .quote-form p { margin: 0; }
.apex .quote-form .eyebrow,
.apex .quote-form .display { margin-bottom: calc(.6 * var(--apex-rem)); }
.apex .quote-form .form-grid { margin-top: calc(1.4 * var(--apex-rem)); }

/* champ invalide -------------------------------------------------------- */
.apex .wpcf7-not-valid-tip {
  margin-top: calc(.35 * var(--apex-rem));
  color: #b3261e;
  font-size: calc(.72 * var(--apex-rem));
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.apex .field input.wpcf7-not-valid,
.apex .field select.wpcf7-not-valid,
.apex .field textarea.wpcf7-not-valid {
  border-color: #b3261e;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .12);
}

/* message de réponse ---------------------------------------------------- */
.apex form.init .wpcf7-response-output,
.apex form.resetting .wpcf7-response-output,
.apex form.submitting .wpcf7-response-output { display: none; }
.apex .wpcf7-response-output {
  margin: calc(1.1 * var(--apex-rem)) 0 0;
  padding: calc(.85 * var(--apex-rem)) calc(1.1 * var(--apex-rem));
  border: 1px solid rgba(10, 95, 56, .25);
  border-radius: calc(.75 * var(--apex-rem));
  background: rgba(10, 95, 56, .07);
  color: #0a5f38;
  font-size: calc(.78 * var(--apex-rem));
  font-weight: 600;
  line-height: 1.5;
}
.apex .wpcf7 form.invalid .wpcf7-response-output,
.apex .wpcf7 form.unaccepted .wpcf7-response-output,
.apex .wpcf7 form.payment-required .wpcf7-response-output,
.apex .wpcf7 form.failed .wpcf7-response-output,
.apex .wpcf7 form.aborted .wpcf7-response-output {
  border-color: rgba(179, 38, 30, .3);
  background: rgba(179, 38, 30, .07);
  color: #b3261e;
}

/* téléversement --------------------------------------------------------- */
.apex .champ-fichiers { display: grid; gap: calc(.6 * var(--apex-rem)); }
.apex .field input[type="file"].wpcf7-form-control {
  min-height: calc(3.1 * var(--apex-rem));
  padding: calc(.55 * var(--apex-rem)) calc(.75 * var(--apex-rem));
  border: 1px dashed rgba(11, 37, 69, .28);
  background: var(--apex-white);
  color: var(--apex-muted);
  font-size: calc(.78 * var(--apex-rem));
  cursor: pointer;
}
.apex .field input[type="file"].wpcf7-form-control:hover { border-color: var(--apex-blue-600); }
.apex .field input[type="file"]::file-selector-button {
  margin-right: calc(.75 * var(--apex-rem));
  padding: calc(.4 * var(--apex-rem)) calc(.9 * var(--apex-rem));
  border: 0;
  border-radius: calc(.5 * var(--apex-rem));
  background: var(--apex-navy-900, #0b2545);
  color: #fff;
  font-family: inherit;
  font-size: calc(.72 * var(--apex-rem));
  font-weight: 700;
  cursor: pointer;
}

/* bouton d'envoi -------------------------------------------------------- */
.apex .field input[type="submit"].wpcf7-submit {
  width: max-content;
  min-height: calc(3.4 * var(--apex-rem));
  padding: calc(.95 * var(--apex-rem)) calc(1.8 * var(--apex-rem));
  border: 0;
  border-radius: 999px;
  background: var(--apex-blue-600);
  color: var(--apex-white);
  box-shadow: 0 14px 32px rgba(var(--apex-blue-600-rgb), .26);
  font-family: inherit;
  font-size: calc(.82 * var(--apex-rem));
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.apex .field input[type="submit"].wpcf7-submit:hover {
  background: var(--apex-blue-500);
  box-shadow: 0 18px 40px rgba(var(--apex-blue-600-rgb), .34);
  transform: translateY(-2px);
}
.apex .field input[type="submit"].wpcf7-submit:disabled { opacity: .6; transform: none; cursor: wait; }
.apex .wpcf7-spinner { margin: 0 0 0 calc(.75 * var(--apex-rem)); vertical-align: middle; }

@media (max-width: 900px) {
  .apex .field input[type="submit"].wpcf7-submit { width: 100%; }
}

/* ==========================================================================
   RETOUCHES — 19 août 2026
   ========================================================================== */

/* 1. Barre du haut : icônes, menu appel/texto ---------------------------- */

.apex .topbar-links { gap: calc(1.1 * var(--apex-rem)); }

.apex .topbar-action {
  display: inline-flex;
  align-items: center;
  gap: calc(.42 * var(--apex-rem));
  padding: 0;
  color: inherit;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
.apex .topbar-action:hover { text-decoration: underline; }
.apex .topbar-icone {
  width: calc(.95 * var(--apex-rem));
  height: calc(.95 * var(--apex-rem));
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.apex .topbar-tel { position: relative; }
.apex .topbar-tel .topbar-fleche {
  width: calc(.6 * var(--apex-rem));
  height: calc(.6 * var(--apex-rem));
  margin-left: calc(.1 * var(--apex-rem));
  transition: transform .2s ease;
}
.apex .topbar-tel[data-ouvert] .topbar-fleche { transform: rotate(180deg); }

.apex .topbar-menu {
  position: absolute;
  z-index: 1200;
  top: calc(100% + calc(.45 * var(--apex-rem)));
  left: 50%;
  min-width: calc(11 * var(--apex-rem));
  display: grid;
  padding: calc(.35 * var(--apex-rem));
  border-radius: calc(.7 * var(--apex-rem));
  background: var(--apex-white);
  box-shadow: 0 18px 44px rgba(3, 17, 38, .28);
  transform: translateX(-50%);
}
.apex .topbar-menu[hidden] { display: none; }
.apex .topbar-menu a {
  display: flex;
  align-items: center;
  gap: calc(.55 * var(--apex-rem));
  min-height: 44px;
  padding: calc(.5 * var(--apex-rem)) calc(.8 * var(--apex-rem));
  border-radius: calc(.45 * var(--apex-rem));
  color: var(--apex-navy-900, #07172c);
  font-size: calc(.82 * var(--apex-rem));
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.apex .topbar-menu a:hover {
  background: var(--apex-ice);
  color: var(--apex-blue-700);
  text-decoration: none;
}
.apex .topbar-menu .topbar-icone {
  width: calc(1 * var(--apex-rem));
  height: calc(1 * var(--apex-rem));
  color: var(--apex-blue-600);
}

/* 2. Aperçu de division au survol du sélecteur --------------------------- */

.apex-header-root .topbar,
.apex-header-root .site-header,
.apex-header-root .brand-switcher,
.apex-header-root .brand-switcher a,
.apex-header-root .header-cta,
.apex-header-root .main-nav a {
  transition: background-color .3s ease, border-color .3s ease,
              box-shadow .3s ease, color .3s ease;
}

.apex-header-root:has(.brand-switcher a[data-nav="switch-auto"]:hover) {
  --apex-blue-700: #c04e00;
  --apex-blue-600: #ee6002;
  --apex-blue-500: #ff7a29;
  --apex-blue-300: #ffb27a;
  --apex-blue-600-rgb: 238, 96, 2;
  --apex-blue-500-rgb: 255, 122, 41;
  --apex-ice: #fff4ec;
}
.apex-header-root:has(.brand-switcher a[data-nav="switch-services"]:hover) {
  --apex-blue-700: #0062b4;
  --apex-blue-600: #007fe8;
  --apex-blue-500: #0d96ff;
  --apex-blue-300: #80caff;
  --apex-blue-600-rgb: 0, 127, 232;
  --apex-blue-500-rgb: 13, 150, 255;
  --apex-ice: #edf7ff;
}

/* 3. Grille des réalisations : trois vignettes identiques ---------------- */

.apex .project-grid { grid-template-columns: repeat(3, 1fr); }
.apex .project-card,
.apex .project-card:not(:first-child) { min-height: 0; }
.apex .project-card { aspect-ratio: 4 / 5; }
.apex .project-card img { position: absolute; inset: 0; display: block; }

@media (max-width: 1080px) {
  .apex .project-grid { grid-template-columns: repeat(2, 1fr); }
  .apex .project-card:first-child { grid-column: auto; }
}
@media (max-width: 640px) {
  .apex .project-grid { grid-template-columns: 1fr; }
  .apex .project-card { aspect-ratio: 5 / 4; }
}

/* 4. Bloc de soumission ajouté en bas de chaque page --------------------- */

.apex .bloc-soumission .quote-form {
  max-width: calc(46 * var(--apex-rem));
  width: 100%;
  margin: 0 auto;
  background: var(--apex-white);
}

/* 5. Barre du haut en mobile : on garde le téléphone, on masque le courriel */

.apex .topbar-court { display: none; }

@media (max-width: 760px) {
  .apex .topbar-links { gap: calc(.9 * var(--apex-rem)); }
  .apex .topbar-links .topbar-tel .topbar-menu a { display: flex; }
  .apex .topbar-menu { left: auto; right: 0; transform: none; }
  /* la règle d'origine masque tout lien qui n'est pas le premier : on rétablit */
  .apex .topbar-inner .topbar-links > a.topbar-courriel { display: inline-flex; }
  .apex .topbar-inner .topbar-courriel .topbar-long { display: none; }
  .apex .topbar-inner .topbar-courriel .topbar-court { display: inline; }
}
@media (max-width: 380px) {
  .apex .topbar-links { gap: calc(.7 * var(--apex-rem)); }
  .apex .topbar-tel .topbar-fleche { display: none; }
}

/* ==========================================================================
   RETOUCHES — 19 août 2026 (2e passe)
   ========================================================================== */

/* 6. Barre du haut : téléphone et courriel sur la même ligne de base ------ */

.apex .topbar-inner,
.apex .topbar-links { align-items: center; }
.apex .topbar-action,
.apex .topbar-links > * {
  line-height: 1;
  vertical-align: middle;
}
.apex .topbar-action > span { line-height: 1; }
.apex .topbar-contact-label { line-height: 1; }
.apex .topbar-menu a { line-height: 1.2; }

/* 7. Mot de la division : deux variantes permutables --------------------- */

.apex .brand-mot { display: inline; }
.apex .brand-mot .mot-auto { display: none; }
.apex .brand-mot .mot-services { display: inline; }
.apex.apex-theme-auto .brand-mot .mot-services { display: none; }
.apex.apex-theme-auto .brand-mot .mot-auto { display: inline; }

/* 8. Le survol du sélecteur change aussi le logo et le mot --------------- */

.apex-header-root:has(.brand-switcher a[data-nav="switch-auto"]:hover) .brand-mark-services { display: none; }
.apex-header-root:has(.brand-switcher a[data-nav="switch-auto"]:hover) .brand-mark-auto { display: block; }
.apex-header-root:has(.brand-switcher a[data-nav="switch-auto"]:hover) .brand-mot .mot-services { display: none; }
.apex-header-root:has(.brand-switcher a[data-nav="switch-auto"]:hover) .brand-mot .mot-auto { display: inline; }

.apex-header-root:has(.brand-switcher a[data-nav="switch-services"]:hover) .brand-mark-auto { display: none; }
.apex-header-root:has(.brand-switcher a[data-nav="switch-services"]:hover) .brand-mark-services { display: block; }
.apex-header-root:has(.brand-switcher a[data-nav="switch-services"]:hover) .brand-mot .mot-auto { display: none; }
.apex-header-root:has(.brand-switcher a[data-nav="switch-services"]:hover) .brand-mot .mot-services { display: inline; }

/* Les deux marques occupent la même case : aucun décalage à la permutation */
.apex .brand { align-items: center; }
.apex .brand-mark { transition: opacity .25s ease; }

/* 9. Héros : plus d'espace mort sous le bandeau de réassurance ----------- */

.apex .hero {
  align-items: center;
  min-height: min(calc(100svh - var(--apex-header-h)), calc(42 * var(--apex-rem)));
}
.apex .hero-content { padding: calc(4.2 * var(--apex-rem)) 0 calc(3 * var(--apex-rem)); }

@media (max-width: 1080px) {
  .apex .hero { min-height: min(calc(100svh - var(--apex-header-h)), calc(40 * var(--apex-rem))); }
  .apex .hero-content { padding: calc(3.4 * var(--apex-rem)) 0 calc(2.8 * var(--apex-rem)); }
}
@media (max-width: 760px) {
  .apex .hero { min-height: auto; }
  .apex .hero-content { padding: calc(2.4 * var(--apex-rem)) 0 calc(2.8 * var(--apex-rem)); }
}

/* 10. Repli quand aucune application de courriel n'est installée --------- */

.apex.repli-courriel {
  position: fixed;
  z-index: 4000;
  left: 50%;
  bottom: calc(1.4 * var(--apex-rem));
  max-width: min(calc(28 * var(--apex-rem)), calc(100vw - calc(2 * var(--apex-rem))));
  display: grid;
  gap: calc(.7 * var(--apex-rem));
  padding: calc(1.1 * var(--apex-rem)) calc(1.3 * var(--apex-rem));
  border-radius: calc(1 * var(--apex-rem));
  background: var(--apex-navy-900, #07172c);
  color: #fff;
  box-shadow: 0 20px 50px rgba(3, 17, 38, .4);
  transform: translateX(-50%);
  font-size: calc(.84 * var(--apex-rem));
  line-height: 1.45;
}
.apex.repli-courriel strong {
  display: block;
  font-size: calc(.92 * var(--apex-rem));
  letter-spacing: .01em;
}
.apex.repli-courriel .repli-adresse {
  padding: calc(.55 * var(--apex-rem)) calc(.75 * var(--apex-rem));
  border-radius: calc(.5 * var(--apex-rem));
  background: rgba(255, 255, 255, .09);
  font-weight: 700;
  word-break: break-all;
}
.apex.repli-courriel .repli-actions { display: flex; flex-wrap: wrap; gap: calc(.5 * var(--apex-rem)); }
.apex.repli-courriel button,
.apex.repli-courriel a {
  min-height: 40px;
  padding: calc(.45 * var(--apex-rem)) calc(1 * var(--apex-rem));
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: none;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.apex.repli-courriel button.principal {
  border-color: var(--apex-blue-600);
  background: var(--apex-blue-600);
}
.apex.repli-courriel button:hover,
.apex.repli-courriel a:hover { background: rgba(255, 255, 255, .14); }
.apex.repli-courriel button.principal:hover { background: var(--apex-blue-500); }