/**
 * Hummingbird Child — custom styles (maquette Ligarex)
 *
 * Les assets du thème parent Hummingbird sont chargés avant ce fichier.
 */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Mulish:wght@400;600;700;800&family=Sofia+Sans+Semi+Condensed:wght@700;800&display=swap');

:root {
  /* Palette maquette Figma */
  --lgx-red-light: #FF6166;
  --lgx-red: #e42227;
  --lgx-red-dark: #c81b20;
  --lgx-navy: #273e53;
  --lgx-navy-2: #2f4459;
  --lgx-bg-light: #f4f7f9;
  --lgx-bg-light-2: #eef1f4;
  --lgx-border: #e3e8ed;
  --lgx-text-muted: #5d6b7a;
  --lgx-text-faded: #98a2ae;

  /* Typo maquette (Figma Dev Mode) : titres Sofia Sans Semi Condensed 800, texte Mulish */
  --lgx-font-heading: "Sofia Sans Semi Condensed", "Mulish", system-ui, sans-serif;
  --lgx-font-body: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lgx-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "Courier New", monospace;

  /* Recouvre les variables Bootstrap/Hummingbird principales */
  --bs-primary: var(--lgx-red);
  --bs-link-color: var(--lgx-navy);
}

body {
  font-family: var(--lgx-font-body);
  color: var(--lgx-navy);
  /* Empêche le scroll horizontal dû aux blocs full-bleed en 100vw
     (100vw inclut la scrollbar verticale) */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3 {
  font-family: var(--lgx-font-heading);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--lgx-navy);
}

/* ============ Boutons ============ */

.lgx-btn-primary {
  background: var(--lgx-red);
  border: 1px solid var(--lgx-red);
  color: #fff;
  border-radius: 4px;
  font-weight: 600;
  padding: 0.625rem 1.25rem;
}

.lgx-btn-primary:hover,
.lgx-btn-primary:focus {
  background: var(--lgx-red-dark);
  border-color: var(--lgx-red-dark);
  color: #fff;
}

.lgx-btn-outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  border-radius: 4px;
  font-weight: 600;
  padding: 0.625rem 1.25rem;
}

.lgx-btn-outline:hover,
.lgx-btn-outline:focus {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* Mobile : les CTA passent en pleine largeur (maquettes « mode mobile »).
   Exceptions volontaires : le CTA du header (.lgx-header-cta) et celui du bloc
   « Une question ? », qui restent en largeur auto sur la maquette. */
@media (max-width: 767.98px) {
  .lgx-hero__actions .btn,
  .lgx-contact-submit .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.875rem 1.25rem;
  }
}

/* Libellé sur-titre rouge en "monospace" (NOS GAMMES, APPLICATIONS…) */
.lgx-overline {
  font-family: var(--lgx-font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--lgx-red-light);
}

/* ============ Bandeau haut ============ */

/* Maquette : bandeau navy DANS le conteneur (blanc de chaque côté), contenu en retrait de 64px */
.lgx-topbar {
  background: var(--lgx-navy);
  color: #fff;
  font-size: 0.8125rem;
}

@media (min-width: 1200px) {
  .lgx-topbar > .container-md {
    padding-left: 64px;
    padding-right: 64px;
  }

  .header-bottom__container {
    padding-left: 64px;
    padding-right: 64px;
  }
}

.lgx-topbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
}

/* Texte gauche : Mulish 400 12px/18px, #C4D0DC (cf. maquette) */
.lgx-topbar__left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #c4d0dc;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
}

.lgx-topbar__square {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--lgx-red);
}

.lgx-topbar__right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.lgx-topbar__phone {
  color: #c4d0dc;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
}

.lgx-topbar__phone:hover {
  color: #fff;
  text-decoration: underline;
}

/* Sélecteur de langue du bandeau : liens inline « FR EN ES » (cf. maquette) */
.lgx-langs {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.lgx-langs__item {
  color: #c4d0dc;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
  text-transform: uppercase;
}

.lgx-langs__item:hover {
  color: #fff;
}

.lgx-langs__item--active {
  color: #fff;
  font-weight: 700;
}

/* ============ Header principal ============ */

.header-bottom {
  background: #fff;
  border-bottom: 0; /* le parent met une bordure, la maquette n'en a pas */
}

/* Colonne menu : nav pleine largeur + centrage vertical et horizontal */
.header-bottom .ps-mainmenu--desktop {
  display: flex;
  align-items: center;
}

.header-bottom .ps-mainmenu__desktop {
  width: 100%;
}

.ps-mainmenu {
  order: 1;
}

/* Maquette : header 105px, logo 198×64 */
.header-bottom__row {
  min-height: 105px;
}

/* Maquette : logo 198.6×64 — le parent le bride à 3rem/8rem */
.header-bottom .navbar-brand,
.header-bottom .navbar-brand .logo {
  max-height: 64px;
  max-width: 199px;
  height: 64px;
  width: auto;
}

/* Menu principal — maquette : Mulish 600, 14.5px/22, gap 32px, centré, actif rouge */
.header-bottom .ps-mainmenu__tree {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 0;
}

.header-bottom .ps-mainmenu__tree-item-wrapper > a {
  color: var(--lgx-navy);
  font-family: var(--lgx-font-body);
  font-weight: 600;
  font-size: 0.90625rem;
  line-height: 22px;
  text-decoration: none;
}

.header-bottom .ps-mainmenu__tree-item-wrapper > a:hover,
.header-bottom .ps-mainmenu__tree-item-wrapper--active > a {
  color: var(--lgx-red);
}

/* Entrée « Nos gammes » en rouge (maquette), chevron compris */
.header-bottom .ps-mainmenu__tree > .ps-mainmenu__tree-item:first-child .ps-mainmenu__tree-item-wrapper > a {
  color: var(--lgx-red);
}

/* Dropdown « Nos gammes » : liste simple ancrée sous l'entrée (gammes du module) */
.ps-mainmenu--desktop .ps-mainmenu__tree-item {
  position: relative;
}

/* Méga-menu horizontal « Nos gammes » : panneau large ancré sous l'entrée.
   Le JS du thème (positionSubMenu) pose un style.top inline pensé pour le
   méga-menu natif (offsetParent = nav statique) ; notre item étant
   position:relative, on force la position ancrée sous l'entrée (inline <
   !important). */
.submenu--mega {
  position: absolute !important;
  top: 100% !important;
  left: 0;
  right: auto;
  margin-top: 0;
  width: 780px;
  max-width: 94vw;
  background: #fff;
  border: 1px solid var(--lgx-border);
  border-top: 2px solid var(--lgx-red);
  box-shadow: var(--bs-box-shadow-md);
}

/* Pont de survol invisible entre l'entrée et le panneau (le curseur ne perd
   pas le survol en descendant). */
.submenu--mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 1.25rem;
}

/* Ouvre au survol de TOUT l'item « Nos gammes » (texte + chevron). */
.ps-mainmenu--desktop .ps-mainmenu__tree-item:hover > .submenu--mega,
.ps-mainmenu--desktop .ps-mainmenu__tree-item:focus-within > .submenu--mega {
  display: block !important;
}
.ps-mainmenu--desktop .ps-mainmenu__tree-item-wrapper {
  display: flex;
  align-items: center;
  height: 100%;
}

/* ---- Méga-menu « Nos gammes » : une colonne par gamme + encart conseil ---- */
.lgx-mega {
  padding: 1.75rem 1.75rem 0;
}

.lgx-mega__inner {
  display: flex;
  gap: 2rem;
}

.lgx-mega__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.75rem;
}

.lgx-mega__col {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  height: 100%;
}

.lgx-mega__col + .lgx-mega__col {
  padding-left: 1.75rem;
  border-left: 1px solid var(--lgx-border);
}

/* En-tête de colonne : vignette + nom (+ accroche).
   Hauteur figée (vignette 48px, titre 2 lignes max, accroche 2 lignes max) pour
   que les listes de sous-gammes démarrent toutes sur la même ligne. */
.lgx-mega__head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  /* Réserve la hauteur du pire cas (titre 2 lignes + accroche 2 lignes) pour
     que les listes démarrent au même niveau, sans écarter titre et accroche. */
  min-height: 72px;
  margin-bottom: 1rem;
  text-decoration: none;
}

.lgx-mega__thumb {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lgx-border);
  border-radius: 4px;
  overflow: hidden;
}

.lgx-mega__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.lgx-mega__head-text {
  min-width: 0;
}

.lgx-mega__name {
  font-family: var(--lgx-font-body);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.25;
  color: var(--lgx-navy);
  /* 2 lignes réservées, quel que soit le libellé */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lgx-mega__head:hover .lgx-mega__name {
  color: var(--lgx-red);
}

.lgx-mega__desc {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--lgx-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Sous-gammes */
.lgx-mega__sublist {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  /* occupe l'espace restant : le lien de pied reste collé en bas */
  flex: 1;
}

.lgx-mega__sublist li + li {
  margin-top: 0.125rem;
}

.lgx-mega__sublink {
  display: block;
  padding: 0.25rem 0.5rem 0.25rem 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--lgx-text-muted);
  text-decoration: none;
  border-radius: 3px;
  transition: color 0.15s ease;
}

.lgx-mega__sublink:hover {
  color: var(--lgx-red);
}

.lgx-mega__col-all {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--lgx-border);
  font-family: var(--lgx-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lgx-red);
  text-decoration: none;
}

.lgx-mega__col-all:hover {
  text-decoration: underline;
}

/* Encart « Besoin d'un conseil ? » */
.lgx-mega__aside {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  background: var(--lgx-navy);
  color: #fff;
}

.lgx-mega__aside-title {
  font-family: var(--lgx-font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  color: #fff;
  margin: 0 0 0.5rem;
}

.lgx-mega__aside-text {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #c4d0dc;
  margin: 0 0 1rem;
}

.lgx-mega__aside-cta {
  width: 100%;
  margin-top: auto;
}

/* Pied : lien vers le listing complet */
.lgx-mega__foot {
  margin-top: 1.5rem;
  padding: 0.875rem 0;
  border-top: 1px solid var(--lgx-border);
}

.lgx-mega__all {
  font-family: var(--lgx-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lgx-red);
  text-decoration: none;
}

.lgx-mega__all:hover {
  text-decoration: underline;
}

@media (max-width: 1199.98px) {
  .lgx-mega__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  /* L'encart conseil passe sous les colonnes (et reste discret) */
  .lgx-mega__aside {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .submenu--mega {
    width: 100%;
  }
  .lgx-mega__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
  .lgx-mega__col + .lgx-mega__col {
    padding-left: 0;
    border-left: 0;
  }
}

/* Recherche réduite à une icône-loupe (s'étend au clic) */
#_desktop_ps_searchbar .ps-searchbar,
#_desktop_ps_searchbar .ps-searchbar__form {
  width: auto;
  min-width: 0;
  max-width: none;
}

#_desktop_ps_searchbar .ps-searchbar__form {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border: 0;
  background: transparent;
}

#_desktop_ps_searchbar .ps-searchbar__magnifier {
  color: var(--lgx-navy);
  cursor: pointer;
  position: static;
  transform: none;
}

#_desktop_ps_searchbar .ps-searchbar__input {
  width: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  box-shadow: none;
  transition: width 0.2s ease, opacity 0.2s ease, padding 0.2s ease;
}

#_desktop_ps_searchbar .ps-searchbar--open .ps-searchbar__input {
  width: 200px;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--lgx-border);
  border-radius: 4px;
  opacity: 1;
}

/* Panier & compte masqués partout (site vitrine B2B, cf. maquette) */
.header-bottom .header-block--cart,
.header-bottom .header-block--signin,
#_desktop_ps_shoppingcart,
#_desktop_ps_customersignin {
  display: none !important;
}

.lgx-header-cta .lgx-btn-primary {
  white-space: nowrap;
}

/* ============ Hero ============ */

.lgx-hero {
  padding: 0;
}

.lgx-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 55%) minmax(0, 45%);
  min-height: 580px;
}

.lgx-hero__panel {
  background: var(--lgx-navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 4.5rem 4rem 4rem;
}

.lgx-hero__title {
  color: #fff;
  /* Maquette : 58px / 60.32 / -1.5px */
  font-size: clamp(2.25rem, 4.5vw, 3.625rem);
  line-height: 1.04;
  letter-spacing: -1.5px;
  margin: 1rem 0 1.5rem;
  max-width: 36rem;
}

.lgx-hero__text {
  color: #c4d0dc;
  /* Maquette : Mulish 18px / 29.25 */
  font-size: 1.125rem;
  line-height: 1.625;
  max-width: 33rem;
  margin-bottom: 2rem;
}

.lgx-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.lgx-hero__media {
  position: relative;
  min-height: 320px;
}

.lgx-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 991.98px) {
  .lgx-hero__inner {
    grid-template-columns: 1fr;
    /* Sinon les 580px du desktop se répartissent sur les 2 lignes de la
       colonne unique et étirent la photo. */
    min-height: 0;
  }
  .lgx-hero__panel {
    padding: 2.5rem 1.5rem;
  }
}

/* Maquette « hero home mobile » (mode mobile/hero home mobile.txt) : panneau
   navy puis photo pleine largeur, les 2 CTA empilés et de largeur identique. */
@media (max-width: 767.98px) {
  .lgx-hero__panel {
    padding: 3rem 1.5rem;
  }
  .lgx-hero__title {
    font-size: 2.5rem;
    letter-spacing: -1px;
    margin: 0.75rem 0 1.25rem;
  }
  .lgx-hero__text {
    font-size: 1rem;
    margin-bottom: 1.75rem;
  }
  .lgx-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .lgx-hero__media {
    min-height: 260px;
  }
}

/* ============ Réassurance ============ */

/* Full-bleed : colle au hero, bordure basse sur toute la largeur de la page.
   margin-top négatif = annule le gap 2.5rem de la grille .page-content--home
   pour que les séparateurs touchent le hero (cf. maquette). */
.lgx-reassurance {
  padding: 0;
  margin: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: -2.5rem;
  border-bottom: 1px solid var(--lgx-border);
}

.lgx-reassurance__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
}

.lgx-reassurance__item {
  /* Specs SVG (hauteur 156, icône 36x36 à 32px du bord de colonne) */
  padding: 2rem 2rem 2.25rem;
  border-right: 1px solid var(--lgx-border);
  min-height: 156px;
}

.lgx-reassurance__item:last-child {
  border-right: 0;
}

.lgx-reassurance__icon {
  display: block;
  width: 36px;
  height: 36px;
  margin-bottom: 1.1875rem;
}

.lgx-reassurance__title {
  /* Accroche unique (plus de sous-texte) : Mulish 700 15px, navy */
  font-family: var(--lgx-font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--lgx-navy);
  max-width: 18rem;
  margin-bottom: 0;
}

@media (max-width: 991.98px) {
  .lgx-reassurance__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .lgx-reassurance__item:nth-child(2n) {
    border-right: 0;
  }
  .lgx-reassurance__item {
    border-bottom: 1px solid var(--lgx-border);
  }
}

/* ============ Nos gammes (bloc 11) ============ */

/* ============ Nos gammes (maquette MAJ 24/07 : fond blanc, cartes numérotées)
   Specs Figma : carte 368.664, zone image 192 de haut (ratio 1.92), gouttière
   22px, image #EEF1F4, bordure #E3E8ED, placeholder #9BAAB8. ============ */
.lgx-gammes {
  /* Pas de marge haute : le padding de __inner suffit (le cumul des deux
     creusait un trou après la barre de réassurance). */
  margin: 0 auto;
  padding: 0;
}

.lgx-gammes__inner {
  background: #fff;
  padding: 3.5rem 2rem 4rem;
}

.lgx-gammes__head {
  margin-bottom: 2.5rem;
}

.lgx-gammes__overline {
  color: var(--lgx-red);
  font-family: var(--lgx-font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.lgx-gammes__title {
  color: var(--lgx-navy);
  font-size: 2.5rem;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin-bottom: 1rem;
}

.lgx-gammes__intro {
  color: var(--lgx-text-muted);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 40rem;
  margin-bottom: 0;
}

.lgx-gammes__grid {
  display: grid;
  /* 3 gammes depuis le retour client du 16/07 */
  grid-template-columns: repeat(3, 1fr);
  gap: 1.375rem;
}

.lgx-gammes__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--lgx-border);
  border-radius: 2px;
  overflow: hidden;
}

.lgx-gammes__media {
  position: relative;
  /* Fond blanc dès qu'il y a une photo (visuels détourés sur blanc : le gris
     de la maquette créait des bandes autour de l'image). Le gris #EEF1F4 n'est
     conservé que pour le placeholder « Image à venir ». */
  background: #fff;
  aspect-ratio: 369 / 192;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Filet de séparation image / texte (le fond blanc ne délimite plus rien) */
  border-bottom: 1px solid var(--lgx-border);
}

.lgx-gammes__media img {
  width: 100%;
  height: 100%;
  /* contain + marge : les visuels produits sont détourés sur fond clair,
     un cover les rognerait (cf. retour 24/07). */
  object-fit: contain;
  padding: 0.375rem;
}

.lgx-gammes__media:not(:has(img)) {
  background: #eef1f4;
}

.lgx-gammes__media-ph {
  font-family: var(--lgx-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #9baab8;
}

.lgx-gammes__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* Specs SVG (369x199) : texte à 29px du bord, numéro à ~28px du haut. */
  padding: 1.75rem 1.8125rem 1.875rem;
}

/* Numéro d'ordre 01 / 02 / 03 — JetBrains Mono 11px, hauteur de chiffre 8.25px
   relevée sur le SVG. */
.lgx-gammes__num {
  font-family: var(--lgx-font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--lgx-red);
  margin-bottom: 0.875rem;
}

/* Titre : cap height 14.4px sur le SVG → Mulish 700 20px. */
.lgx-gammes__card-title {
  font-family: var(--lgx-font-body);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--lgx-navy);
  margin-bottom: 0.75rem;
}

/* Texte : cap height 9.87px → 14px ; interligne relevé à 22px. */
.lgx-gammes__card-text {
  font-size: 0.875rem;
  line-height: 1.57;
  color: var(--lgx-text-muted);
  margin-bottom: 1.375rem;
}

.lgx-gammes__card-link {
  margin-top: auto;
  color: var(--lgx-red);
  font-family: var(--lgx-font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.5;
  /* 106px pour « VOIR LA GAMME → » sur le SVG → ~0.045em */
  letter-spacing: 0.045em;
  text-transform: uppercase;
  text-decoration: none;
}

.lgx-gammes__card-link:hover {
  color: var(--lgx-red-dark);
  text-decoration: underline;
}

@media (max-width: 991.98px) {
  .lgx-gammes__inner {
    padding: 2.5rem 1.5rem 3rem;
  }
  .lgx-gammes__title {
    font-size: 1.875rem;
  }
  .lgx-gammes__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 575.98px) {
  .lgx-gammes__grid {
    grid-template-columns: 1fr;
  }
}

/* ============ Applications (bloc "Conçu pour vos environnements") ============ */

.lgx-apps {
  padding: 0;
}

.lgx-apps__inner {
  background: var(--lgx-bg-light);
  padding: 3.5rem 4rem 4rem;
}

.lgx-apps__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 2.5rem;
}

.lgx-apps__overline {
  color: var(--lgx-red);
  font-family: var(--lgx-font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.lgx-apps__title {
  color: var(--lgx-navy);
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
}

.lgx-apps__text {
  color: #47586b;
  font-size: 0.9375rem;
  margin-bottom: 0;
}

.lgx-apps__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.lgx-apps__card {
  position: relative;
  display: block;
  aspect-ratio: 273 / 300;
  overflow: hidden;
  border-radius: 2px;
  text-decoration: none;
}

.lgx-apps__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dégradé de la maquette : transparent à 30 %, sombre en bas */
.lgx-apps__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem 1.25rem 1rem;
  background: linear-gradient(180deg, rgba(5, 12, 20, 0) 30%, rgba(5, 12, 20, 0.92) 100%);
}

.lgx-apps__card-title {
  color: #fff;
  font-family: var(--lgx-font-body);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.lgx-apps__card-text {
  color: #c4d0dc;
  font-size: 0.8125rem;
  margin-bottom: 0;
}

@media (max-width: 991.98px) {
  .lgx-apps__inner {
    padding: 2.5rem 1.5rem 3rem;
  }
  .lgx-apps__title {
    font-size: 1.875rem;
  }
  .lgx-apps__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 575.98px) {
  .lgx-apps__grid {
    grid-template-columns: 1fr;
  }
}

/* ============ Listing catégorie (maquette "Nos gammes") ============ */

/* Fil d'Ariane : bandeau clair pleine largeur, filet bas */
.breadcrumb__wrapper {
  background: var(--lgx-bg-light);
  border-bottom: 1px solid var(--lgx-border);
  margin-bottom: 2rem;
}

.breadcrumb__wrapper .breadcrumb {
  margin-bottom: 0;
  padding: 0.625rem 0;
  font-size: 0.75rem;
}

.breadcrumb__wrapper .breadcrumb a,
.breadcrumb__wrapper .breadcrumb-item.active {
  color: var(--lgx-text-muted);
}

/* Colonne gauche : bloc catégories */
.lgx-cattree__header {
  background: var(--lgx-navy);
  margin-bottom: 0;
}

.lgx-cattree__header-link {
  display: block;
  padding: 0.875rem 1.25rem;
  color: #fff;
  font-family: var(--lgx-font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

/* Lien « Retour à … » (remontée d'un niveau) */
.lgx-cattree__back {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--lgx-border);
  border-top: 0;
  background: var(--lgx-bg-light);
  color: var(--lgx-text-muted);
  font-family: var(--lgx-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

.lgx-cattree__back:hover {
  color: var(--lgx-red-dark);
}

.lgx-cattree__back-chevron {
  font-size: 1rem;
  line-height: 1;
}

.lgx-cattree__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--lgx-border);
  border-top: 0;
}

.lgx-cattree__item + .lgx-cattree__item {
  border-top: 1px solid var(--lgx-border);
}

/* Ligne = lien de la gamme + bouton d'accordéon (sous-gammes) */
.lgx-cattree__row {
  display: flex;
  align-items: stretch;
}

.lgx-cattree__row:hover {
  background: var(--lgx-bg-light);
}

.lgx-cattree__link {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 0.625rem 0.5rem 0.625rem 1.25rem;
  min-height: 40px;
  color: var(--lgx-navy);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.lgx-cattree__link:hover {
  color: var(--lgx-red-dark);
}

.lgx-cattree__chevron {
  color: var(--lgx-text-faded);
  line-height: 1;
}

.lgx-cattree__chevron--static {
  display: flex;
  align-items: center;
  padding-right: 1.25rem;
}

.lgx-cattree__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.lgx-cattree__toggle .lgx-cattree__chevron {
  display: block;
  font-size: 1.125rem;
  transition: transform 0.2s ease;
}

.lgx-cattree__toggle:hover .lgx-cattree__chevron {
  color: var(--lgx-red);
}

/* Ouvert : le chevron pointe vers le bas */
.lgx-cattree__toggle[aria-expanded='true'] .lgx-cattree__chevron {
  transform: rotate(90deg);
  color: var(--lgx-red);
}

/* Sous-gammes */
.lgx-cattree__sublist {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0.5rem;
  background: var(--lgx-bg-light);
  border-top: 1px solid var(--lgx-border);
}

.lgx-cattree__sublink {
  display: block;
  padding: 0.4375rem 1.25rem 0.4375rem 2rem;
  color: var(--lgx-text-muted);
  font-size: 0.8125rem;
  font-weight: 400;
  text-decoration: none;
}

.lgx-cattree__sublink:hover,
.lgx-cattree__subitem.is-current .lgx-cattree__sublink {
  color: var(--lgx-red-dark);
}

.lgx-cattree__subitem.is-current .lgx-cattree__sublink {
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .lgx-cattree__toggle .lgx-cattree__chevron {
    transition: none;
  }
}

/* Carte « Besoin d'un conseil ? » */
.lgx-advice {
  margin-top: 1.5rem;
  background: var(--lgx-navy);
  padding: 1.5rem 1.25rem;
}

.lgx-advice__title {
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.375rem;
}

.lgx-advice__text {
  color: #c4d0dc;
  font-size: 0.8125rem;
  margin-bottom: 1rem;
}

/* En-tête de catégorie : titre + description + bandeau, compact (sans quoi la
   grille produits est repoussée très bas sur les pages de gamme). */
.category__header {
  margin-bottom: 1.5rem;
}

.category__header .page-title-section,
.category__header .page-header {
  margin-bottom: 0.5rem;
}

.category__description {
  max-width: 68ch;
  margin-bottom: 1.25rem;
  color: var(--lgx-text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.category__cover {
  margin: 0 0 1.25rem;
  border: 1px solid var(--lgx-border);
  overflow: hidden;
}

/* Bandeau 1000×200 : on remplit la largeur, hauteur bornée. */
.category__cover-image {
  display: block;
  width: 100%;
  max-height: 190px;
  object-fit: cover;
}

/* Bandeau des sous-catégories (mini-cartes) */
.subcategory {
  margin-bottom: 0.5rem;
}

.subcategory__list--with-images {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.subcategory__link--with-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  width: 104px;
  padding: 0.75rem 0.5rem;
  border: 1px solid var(--lgx-border);
  border-radius: 2px;
  background: #fff;
  color: var(--lgx-navy);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}

.subcategory__link--with-image:hover {
  border-color: var(--lgx-red);
  color: var(--lgx-red);
}

.subcategory__link--with-image .subcategory__thumbnail {
  width: 64px;
  height: 56px;
  object-fit: contain;
}

.products__sort-dropdown .dropdown-item:nth-child(1),
.products__sort-dropdown .dropdown-item:nth-child(5),
.products__sort-dropdown .dropdown-item:nth-child(6) {
  display: none;
}

#search .products__sort-dropdown .dropdown-item:nth-child(4){
  display: none;
}


  /* Toolbar : compteur + tri */
.products__selection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 0;
  border-top: 1px solid var(--lgx-border);
  border-bottom: 1px solid var(--lgx-border);
  margin-bottom: 1.5rem;
}

.products__count {
  color: var(--lgx-navy);
  font-size: 0.875rem;
  font-weight: 700;
}

/* Cartes produit */
/* Maquette : carte 171×211, radius 5px, bordure #E8ECF0, image sur blanc, bas gris #F8F9FB */
.lgx-prod {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e8ecf0;
  border-radius: 5px;
  overflow: hidden;
}

.lgx-prod__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: #fff;
  text-decoration: none;
  overflow: hidden;
}

/* Image en absolu = remplit sa zone carrée sans faire grandir la carte,
   quelle que soit la taille/orientation du fichier (fit contain + padding) */
.lgx-prod__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lgx-prod__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  color: #c7d0db;
}

.lgx-prod__placeholder-label {
  font-family: var(--lgx-font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.lgx-prod__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: 0.875rem 1rem 1rem;
  background: #f8f9fb;
  border-top: 1px solid #e8ecf0;
}

/* Maquette : Mulish 600, 12.5px/16.25px, #273E53, centré */
.lgx-prod__title {
  display: block;
  color: var(--lgx-navy);
  font-size: 0.78125rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  margin-bottom: 0.25rem;
}

.lgx-prod__title:hover {
  color: var(--lgx-red);
}

/* Maquette : JetBrains Mono 600, 11px/16.5px, +0.3px, #E42227, centré */
.lgx-prod__ref {
  color: var(--lgx-red);
  font-family: var(--lgx-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.027em;
  margin-bottom: 0;
}

/* Grille produits : 5 colonnes en desktop (cf. maquette) */
@media (min-width: 1200px) {
  #products .products {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
  }
}

/* Nom et référence centrés dans la carte */
.lgx-prod__body {
  text-align: center;
}

/* Champ de recherche de la toolbar */
.lgx-listing-search {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 220px;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--lgx-border);
  border-radius: 4px;
  background: #fff;
}

.lgx-listing-search__input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 0.8125rem;
  color: var(--lgx-navy);
}

.lgx-listing-search__input::placeholder {
  color: var(--lgx-text-faded);
}

.lgx-listing-search__clear,
.lgx-listing-search__submit {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--lgx-text-faded);
  display: inline-flex;
  cursor: pointer;
}

.lgx-listing-search__clear {
  display: none;
  font-size: 1.25rem;
  line-height: 1;
}

.lgx-listing-search__input:not(:placeholder-shown) + .lgx-listing-search__clear {
  display: inline-flex;
}

.lgx-listing-search__clear:hover,
.lgx-listing-search__submit:hover {
  color: var(--lgx-red);
}

.lgx-listing-search.is-loading {
  opacity: 0.65;
}

.lgx-listing-search.is-loading .lgx-listing-search__clear,
.lgx-listing-search.is-loading .lgx-listing-search__submit {
  cursor: wait;
}

/* Toolbar : recherche à gauche, compteur au centre-gauche, tri à droite */
.products__selection {
  flex-wrap: wrap;
}

.products__selection .products__count {
  margin-right: auto;
}

/* Pagination du listing — maquette : boutons 32×32 radius 3, actif rouge, filet au-dessus */
.pagination__container {
  border-top: 1px solid var(--lgx-border);
  padding-top: 1.25rem;
  margin-top: 1.5rem;
}

.pagination__container .pagination__number {
  display: none; /* la maquette n'affiche pas « Affichage 1-22 de 22 » */
}

.pagination__container .pagination {
  justify-content: center;
  gap: 0.375rem;
  margin-bottom: 0;
}

/* Chiffres — maquette : Mulish 600, 13px/19.5px, #273E53, centrés */
.pagination__container .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--lgx-border);
  border-radius: 3px;
  background: #fff;
  color: var(--lgx-navy);
  font-family: var(--lgx-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  box-shadow: none;
}

.pagination__container .page-link:hover {
  border-color: var(--lgx-red);
  color: var(--lgx-red);
  background: #fff;
}

.pagination__container .page-item.active .page-link {
  background: var(--lgx-red);
  border-color: var(--lgx-red);
  color: #fff;
}

.pagination__container .page-link.disabled {
  color: var(--lgx-text-faded);
  border-color: var(--lgx-border);
  background: var(--lgx-bg-light);
}

.pagination__container .page-link .material-icons {
  font-size: 1.125rem;
}

/* Bouton wishlist injecté par le JS blockwishlist (classe .wishlist-button-add) :
   sans objet sur un site vitrine. Le module le force en !important → on passe outre. */
.lgx-prod .wishlist-button,
.lgx-prod .wishlist-button-add {
  display: none !important;
}

/* Pagination : chevrons seuls (la maquette n'affiche pas « Précédent / Suivant »),
   et bouton précédent/suivant masqué quand inactif (page 1 / dernière page) */
.pagination__container .page-link .d-none.d-xl-flex {
  display: none !important;
}

.pagination__container .page-item:has(> .page-link.disabled) {
  display: none;
}

/* Pagination : centrage du conteneur (flex space-between chez le parent)
   et masquage renforcé des libellés Précédent/Suivant (chevrons seuls) */
.pagination__container {
  display: flex;
  justify-content: center;
}

.pagination__container .page-link.previous span,
.pagination__container .page-link.next span {
  display: none !important;
}

.pagination__container .page-link {
  overflow: hidden;
}

/* Chevrons de pagination : navy #273E53 comme la maquette (Bootstrap les grise sinon) */
.pagination__container .page-link,
.pagination__container .page-link .material-icons {
  color: var(--lgx-navy);
}

.pagination__container .page-link:hover,
.pagination__container .page-link:hover .material-icons {
  color: var(--lgx-red);
}

.pagination__container .page-item.active .page-link {
  color: #fff;
}

/* ============ Page produit (maquette « page produit ») ============ */

.lgx-pdp {
  padding-top: 2.5rem;
  padding-bottom: 3rem;
}

/* --- Hero produit : galerie / infos --- */
.lgx-pdp__hero {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  gap: 3.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--lgx-border);
}

/* Galerie : reprend le partiel parent, restylé façon maquette
   (visuel carré sur fond clair + bouton zoom + vignettes carrées) */
.lgx-pdp__gallery .product__images {
  position: relative;
}

/* Badges Neuf / Rupture de stock masqués (absents de la maquette) */
.lgx-pdp__gallery .product-flags {
  display: none;
}

/* Produit sans image : placeholder « Visuel à venir » (comme le listing)
   plutôt que l'image "aucune image" du parent */
.lgx-pdp__gallery .product__no-image img {
  display: none;
}

.lgx-pdp__gallery .product__no-image::after {
  content: "Visuel à venir";
  font-family: var(--lgx-font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #c7d0db;
}

.lgx-pdp__gallery .product__carousel,
.lgx-pdp__gallery .product__no-image {
  position: relative;
  border: 1px solid var(--lgx-border);
  border-radius: 4px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 1.5rem;
}

.lgx-pdp__gallery .carousel-inner,
.lgx-pdp__gallery .carousel-item {
  height: 100%;
}

.lgx-pdp__gallery .carousel-item {
  display: none;
  align-items: center;
  justify-content: center;
}

.lgx-pdp__gallery .carousel-item.active {
  display: flex;
}

.lgx-pdp__gallery .carousel-item picture,
.lgx-pdp__gallery .product__no-image picture {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.lgx-pdp__gallery .carousel-item img,
.lgx-pdp__gallery .product__no-image img {
  width: auto !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Flèches du carousel masquées (maquette : navigation par vignettes) */
.lgx-pdp__gallery .carousel-control-prev,
.lgx-pdp__gallery .carousel-control-next {
  display: none;
}

/* Bouton zoom (coin bas-droit) */
.lgx-pdp__gallery .product__zoom {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--lgx-border);
  border-radius: 4px;
  color: var(--lgx-navy);
}

.lgx-pdp__gallery .product__zoom:hover {
  border-color: var(--lgx-red);
  color: var(--lgx-red);
}

/* Icône « plein écran » (coins) de la maquette au lieu de la loupe parent */
.lgx-pdp__gallery .product__zoom .material-icons {
  display: none;
}

.lgx-pdp__gallery .product__zoom::after {
  content: "";
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23273e53' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 9V5a1 1 0 0 1 1-1h4M20 9V5a1 1 0 0 0-1-1h-4M4 15v4a1 1 0 0 0 1 1h4M20 15v4a1 1 0 0 1-1 1h-4'/></svg>") no-repeat center / contain;
}

.lgx-pdp__gallery .product__zoom:hover::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e42227' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 9V5a1 1 0 0 1 1-1h4M20 9V5a1 1 0 0 0-1-1h-4M4 15v4a1 1 0 0 0 1 1h4M20 15v4a1 1 0 0 1-1 1h-4'/></svg>");
}

/* Vignettes : rangée de carrés, active bordée navy */
.lgx-pdp__gallery .product__thumbnails-list {
  display: flex;
  gap: 0.75rem;
  list-style: none;
  margin: 0.875rem 0 0;
  padding: 0;
}

.lgx-pdp__gallery .product__thumbnail {
  width: 84px;
  height: 84px;
  flex: none;
  padding: 0.5rem;
  border: 1px solid var(--lgx-border);
  border-radius: 4px;
  background: var(--lgx-bg-light);
  cursor: pointer;
}

.lgx-pdp__gallery .product__thumbnail.active {
  border-color: var(--lgx-navy);
  background: #fff;
}

/* Neutralise l'outline rouge (--bs-primary) du parent sur les vignettes :
   la maquette n'affiche que le bord navy de la vignette active */
.lgx-pdp__gallery .product__thumbnail-image.outline {
  outline: 0 !important;
}

.lgx-pdp__gallery .product__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- Colonne infos --- */
.lgx-pdp__overline {
  margin-bottom: 0.75rem;
}

.lgx-pdp__name {
  font-size: 2.5rem;
  line-height: 1.08;
  margin: 0 0 0.5rem;
}

.lgx-pdp__ref {
  font-family: var(--lgx-font-mono);
  font-size: 0.875rem;
  color: var(--lgx-text-faded);
  margin-bottom: 1.25rem;
}

.lgx-pdp__intro {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--lgx-text-muted);
  max-width: 34rem;
  margin-bottom: 1.75rem;
}

.lgx-pdp__cta {
  margin-bottom: 2rem;
}

.lgx-pdp__quote {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1rem;
  padding: 0.875rem 1.75rem;
  text-decoration: none;
}

.lgx-pdp__arrow {
  transition: transform 0.15s ease;
}

.lgx-pdp__quote:hover .lgx-pdp__arrow {
  transform: translateX(3px);
}

/* Cartes de réassurance produit (grille 2×2) */
.lgx-pdp__trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.lgx-pdp__trust-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  background: var(--lgx-bg-light);
  border: 1px solid var(--lgx-border);
  border-radius: 4px;
}

.lgx-pdp__trust-icon {
  flex: none;
  display: inline-flex;
  font-size: 1.25rem;
  line-height: 1;
  margin-top: 0.125rem;
}

.lgx-pdp__trust-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--lgx-navy);
  margin: 0 0 0.125rem;
}

.lgx-pdp__trust-text {
  font-size: 0.8125rem;
  color: var(--lgx-text-muted);
  margin: 0;
}

/* --- Onglets --- */
.lgx-pdp__tabs {
  margin-top: 2.5rem;
}

.lgx-pdp__tablist {
  display: flex;
  gap: 2.25rem;
  border-bottom: 1px solid var(--lgx-border);
}

.lgx-pdp__tab {
  position: relative;
  padding: 0.875rem 0;
  border: 0;
  background: transparent;
  color: var(--lgx-text-muted);
  font-family: var(--lgx-font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.lgx-pdp__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--lgx-red);
  transform: scaleX(0);
  transition: transform 0.15s ease;
}

.lgx-pdp__tab:hover {
  color: var(--lgx-navy);
}

.lgx-pdp__tab.is-active {
  color: var(--lgx-red);
}

.lgx-pdp__tab.is-active::after {
  transform: scaleX(1);
}

.lgx-pdp__panels {
  padding-top: 2.5rem;
}

.lgx-pdp__panel[hidden] {
  display: none;
}

/* Détails : texte à gauche, visuel « en situation » à droite */
.lgx-pdp__detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 3rem;
  align-items: start;
}

.lgx-pdp__block-title {
  font-size: 1.375rem;
  margin: 0 0 1rem;
}

.lgx-pdp__block-title + .lgx-pdp__block-title,
.lgx-pdp__rich .lgx-pdp__block-title {
  margin-top: 2rem;
}

.lgx-pdp__rich {
  color: var(--lgx-text-muted);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.lgx-pdp__rich p {
  margin-bottom: 1rem;
}

.lgx-pdp__rich h2,
.lgx-pdp__rich h3,
.lgx-pdp__rich h4 {
  font-size: 1.375rem;
  color: var(--lgx-navy);
  margin: 2rem 0 1rem;
}

/* Listes du rich-text stylées « puce tiret rouge » (maquette) */
.lgx-pdp__rich ul {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.lgx-pdp__rich ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.625rem;
  color: var(--lgx-navy);
}

.lgx-pdp__rich ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 12px;
  height: 2px;
  background: var(--lgx-red);
}

.lgx-pdp__detail-media {
  position: sticky;
  top: 1.5rem;
}

.lgx-pdp__situation-img {
  width: 100%;
  height: auto;
  border: 1px solid var(--lgx-border);
  border-radius: 4px;
}

.lgx-pdp__photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--lgx-bg-light);
  border: 1px dashed var(--lgx-border);
  border-radius: 4px;
  color: var(--lgx-text-faded);
  font-family: var(--lgx-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
}

/* Spécifications : liste clé / valeur */
.lgx-pdp__specs {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 640px;
}

.lgx-pdp__spec-row {
  display: flex;
  gap: 1.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--lgx-border);
}

.lgx-pdp__spec-key {
  flex: 0 0 40%;
  color: var(--lgx-text-muted);
  font-size: 0.875rem;
  font-weight: 600;
}

.lgx-pdp__spec-val {
  color: var(--lgx-navy);
  font-size: 0.875rem;
}

/* Documentation : cartes de téléchargement */
.lgx-pdp__docs {
  display: grid;
  gap: 0.75rem;
  max-width: 640px;
}

.lgx-pdp__doc {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--lgx-border);
  border-radius: 4px;
  text-decoration: none;
  color: var(--lgx-navy);
}

.lgx-pdp__doc:hover {
  border-color: var(--lgx-red);
}

.lgx-pdp__doc-icon {
  flex: none;
  color: var(--lgx-red);
  margin-top: 0.125rem;
}

.lgx-pdp__doc-body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.lgx-pdp__doc-name {
  font-weight: 700;
  font-size: 0.9375rem;
}

.lgx-pdp__doc-desc {
  font-size: 0.8125rem;
  color: var(--lgx-text-muted);
}

.lgx-pdp__doc-size {
  font-family: var(--lgx-font-mono);
  font-size: 0.75rem;
  color: var(--lgx-text-faded);
}

.lgx-pdp__muted {
  color: var(--lgx-text-muted);
  font-size: 0.9375rem;
}

/* --- Produits de la même gamme (bandeau clair full-bleed) --- */
.lgx-pdp__related {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--lgx-bg-light);
  border-top: 1px solid var(--lgx-border);
  padding: 3.5rem 0;
}

.lgx-pdp__related-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.lgx-pdp__related-title {
  position: relative;
  font-size: 1.625rem;
  margin: 0 0 2rem;
  padding-left: 1rem;
}

.lgx-pdp__related-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 4px;
  background: var(--lgx-red);
}

.lgx-pdp__related-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

/* --- Responsive page produit --- */
@media (max-width: 991.98px) {
  .lgx-pdp__hero {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .lgx-pdp__name {
    font-size: 2rem;
  }
  .lgx-pdp__detail-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .lgx-pdp__detail-media {
    position: static;
  }
  .lgx-pdp__related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .lgx-pdp__trust {
    grid-template-columns: 1fr;
  }
  .lgx-pdp__tablist {
    gap: 1.25rem;
    overflow-x: auto;
  }
  .lgx-pdp__tab {
    white-space: nowrap;
  }
  .lgx-pdp__related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============ Footer (maquette « footer ») ============ */
/* Navy contenu (blanc sur les côtés, aligné sur les autres sections) */

.lgx-footer {
  color: #c4d0dc;
  padding: 0 0 2rem;
  background: #1e3149;
}

.lgx-footer > .container-md {
  padding-top: 3.5rem;
  padding-bottom: 1.75rem;
}

@media (min-width: 1200px) {
  .lgx-footer > .container-md {
    padding-left: 64px;
    padding-right: 64px;
  }
}

.lgx-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}

.lgx-footer__logo {
  display: inline-block;
  text-decoration: none;
}

.lgx-footer__logo-img {
  display: block;
  width: 190px;
  height: auto;
}

.lgx-footer__since {
  margin: 0.75rem 0 1rem;
  font-family: var(--lgx-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #6b7c90;
}

.lgx-footer__about {
  max-width: 20rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #c4d0dc;
  margin: 0;
}

.lgx-footer__title {
  margin: 0 0 1.25rem;
  font-family: var(--lgx-font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
}

.lgx-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.lgx-footer__link {
  color: #c4d0dc;
  font-size: 0.9375rem;
  text-decoration: none;
}

.lgx-footer__link:hover {
  color: #fff;
}

.lgx-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-style: normal;
  font-size: 0.9375rem;
  color: #c4d0dc;
}

.lgx-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.lgx-footer__copy {
  margin: 0;
  font-size: 0.8125rem;
  color: #6b7c90;
}

.lgx-footer__legal {
  display: flex;
  gap: 1.75rem;
}

.lgx-footer__legal .lgx-footer__link {
  font-size: 0.8125rem;
  color: #6b7c90;
}

.lgx-footer__legal .lgx-footer__link:hover {
  color: #fff;
}

@media (max-width: 991.98px) {
  .lgx-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

@media (max-width: 575.98px) {
  .lgx-footer__grid {
    grid-template-columns: 1fr;
  }
  .lgx-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============ Notre savoir-faire (module ns_notresavoirfaire) ============ */
.lgx-sf {
  padding: 0;
  margin-top: 0;
}

.lgx-sf__grid {
  display: grid;
  grid-template-columns: minmax(0, 50%) minmax(0, 50%);
  align-items: stretch;
}

.lgx-sf__media {
  position: relative;
  background: #d7dfe8;
  min-height: 460px;
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
}

/* Carrousel photos (1 à 3) : même emprise que la photo unique d'origine. */
.lgx-sf__carousel {
  position: absolute;
  inset: 0;
}

.lgx-sf__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.lgx-sf__img.is-active {
  opacity: 1;
}

.lgx-sf__dots {
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  display: flex;
  gap: 0.5rem;
  z-index: 2;
}

.lgx-sf__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background 0.2s ease;
}

.lgx-sf__dot.is-active,
.lgx-sf__dot:hover {
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .lgx-sf__img {
    transition: none;
  }
}

.lgx-sf__media-ph {
  position: relative;
  font-family: var(--lgx-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #8a99a8;
  background: rgba(255, 255, 255, 0.6);
  padding: 0.5rem 0.875rem;
}

.lgx-sf__content {
  padding: 3.5rem 0 3.5rem 4.5rem;
}

.lgx-sf__overline {
  margin-bottom: 1rem;
}

.lgx-sf__title {
  font-size: 2.75rem;
  line-height: 1.05;
  margin: 0 0 1.5rem;
}

.lgx-sf__text {
  color: var(--lgx-text-muted);
  font-size: 1.0625rem;
  line-height: 1.65;
  margin-bottom: 1.75rem;
  max-width: 34rem;
}

.lgx-sf__list {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}

.lgx-sf__list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.875rem;
  color: var(--lgx-navy);
  font-size: 1rem;
}

.lgx-sf__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 14px;
  height: 2px;
  background: var(--lgx-red);
}

.lgx-sf__cta {
  display: inline-block;
  color: var(--lgx-navy);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  padding-bottom: 0.375rem;
  border-bottom: 2px solid var(--lgx-red);
}

.lgx-sf__cta:hover {
  color: var(--lgx-red);
}

/* Barre de statistiques navy */
.lgx-sf__stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--lgx-navy);
  padding: 3.5rem 4rem;
  gap: 2rem;
}

.lgx-sf__stat {
  padding-left: 1.25rem;
  border-left: 3px solid var(--lgx-red);
}

.lgx-sf__stat-num {
  color: #fff;
  font-family: var(--lgx-font-heading);
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1;
  margin: 0 0 0.5rem;
}

.lgx-sf__stat-suffix {
  font-size: 1.25rem;
  font-weight: 700;
  margin-left: 0.125rem;
}

.lgx-sf__stat-label {
  color: #93a3b4;
  font-size: 0.9375rem;
  margin: 0;
}

@media (max-width: 991.98px) {
  .lgx-sf__grid {
    grid-template-columns: 1fr;
  }
  /* Ordre mobile (cf. maquette) : texte, puis photo, puis stats */
  .lgx-sf__content {
    order: 1;
    padding: 2.5rem 1.5rem;
  }
  .lgx-sf__media {
    order: 2;
    min-height: 200px;
  }
  /* Placeholder « photo à venir » compact (bande) tant qu'aucune image */
  .lgx-sf__media:not(:has(.lgx-sf__img)) {
    min-height: 0;
    padding: 1.25rem 1.5rem;
    justify-content: flex-start;
  }
  .lgx-sf__title {
    font-size: 2rem;
  }
  .lgx-sf__stats {
    grid-template-columns: repeat(2, 1fr);
    padding: 2rem 1.5rem;
    gap: 1.5rem 1rem;
  }
}

/* ============ Ils nous font confiance (ns_ilsnousfontconfiance) ============ */
.lgx-trust {
  padding: 4rem 3rem;
  border-bottom: 1px solid var(--lgx-border);
}

.lgx-trust__grid {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  gap: 3.5rem;
  /* Le bloc éditorial démarre en haut, aligné sur la 1re ligne de logos
     (centré verticalement, il « flottait » au milieu de la grille). */
  align-items: start;
}

.lgx-trust__overline {
  margin-bottom: 1.25rem;
}

.lgx-trust__quote {
  font-family: var(--lgx-font-body);
  font-size: 1.75rem;
  line-height: 1.3;
  font-weight: 400;
  color: var(--lgx-navy);
  margin: 0 0 1.25rem;
}

.lgx-trust__caption {
  font-size: 0.9375rem;
  color: var(--lgx-text-muted);
  margin: 0;
}

.lgx-trust__logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Gouttière relevée sur le SVG (608 : 3 cases de 194.664 + 2 gaps de 12) */
  gap: 0.75rem;
}

.lgx-trust__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Case 194.664 x 74 sur le SVG, radius 3 */
  min-height: 74px;
  padding: 0.75rem 1rem;
  background: #fff;
  border: 1px solid var(--lgx-border);
  border-radius: 3px;
  text-decoration: none;
}

.lgx-trust__logo-img {
  max-width: 100%;
  /* Logos calés à 40px de haut sur le SVG */
  max-height: 40px;
  object-fit: contain;
  filter: grayscale(100%);
  transition: filter 0.4s ease;
  opacity: 0.45;
}

.lgx-trust__logo-img:hover {
  filter: grayscale(0%);
  opacity: 1;
}


/* Emplacement sans visuel : cadre discret « LOGO » (maquette) */
.lgx-trust__logo-name--empty {
  font-family: var(--lgx-font-mono);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  /* Gris du placeholder relevé sur le SVG */
  color: #c4cdd6;
  text-transform: uppercase;
}

.lgx-trust__logo-name {
  font-family: var(--lgx-font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--lgx-text-faded);
  letter-spacing: 0.02em;
}

/* Variante slider : défilement continu (marquee CSS, liste dupliquée) */
.lgx-trust__logos--slider {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.lgx-trust__track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  animation: lgx-trust-marquee 28s linear infinite;
}

.lgx-trust__logos--slider:hover .lgx-trust__track {
  animation-play-state: paused;
}

.lgx-trust__track .lgx-trust__logo {
  flex: 0 0 auto;
  width: 200px;
}

@keyframes lgx-trust-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .lgx-trust__track {
    animation: none;
  }
  .lgx-trust__logos--slider {
    overflow-x: auto;
  }
}

@media (max-width: 991.98px) {
  .lgx-trust__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .lgx-trust__quote {
    font-size: 1.375rem;
  }
}

@media (max-width: 575.98px) {
  .lgx-trust__logos {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============ Documentation (ns_documentation) ============ */
.lgx-doc {
  padding: 0 2rem;
  margin: 3.5rem auto;
}

.lgx-doc__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
  background: var(--lgx-bg-light);
  border: 1px solid var(--lgx-border);
  padding: 2.75rem 3rem;
}

.lgx-doc__overline {
  margin-bottom: 0.75rem;
}

.lgx-doc__title {
  font-size: 1.875rem;
  margin: 0 0 0.625rem;
}

.lgx-doc__intro {
  color: var(--lgx-text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
  max-width: 34rem;
}

.lgx-doc__actions {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  flex: none;
}

.lgx-doc__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-width: 260px;
  padding: 0.875rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}

.lgx-doc__btn--primary {
  background: var(--lgx-red);
  border: 1px solid var(--lgx-red);
  color: #fff;
}

.lgx-doc__btn--primary:hover {
  background: var(--lgx-red-dark);
  border-color: var(--lgx-red-dark);
  color: #fff;
}

.lgx-doc__btn--ghost {
  background: #fff;
  border: 1px solid var(--lgx-border);
  color: var(--lgx-navy);
}

.lgx-doc__btn--ghost:hover {
  border-color: var(--lgx-navy);
  color: var(--lgx-navy);
}

@media (max-width: 767.98px) {
  .lgx-doc__inner {
    padding: 2rem 1.5rem;
  }
  .lgx-doc__actions {
    width: 100%;
  }
  .lgx-doc__btn {
    width: 100%;
  }
}

/* ============ Une question ? (ns_unequestion) ============ */
/* Panneau navy contenu (blanc sur les côtés) — collé au footer (pas de gap bas) */
.lgx-question {
  padding: 3.5rem 0 0;
  margin-bottom: 60px;
}

.lgx-question__panel {
  background: var(--lgx-navy);
  padding: 4rem;
}

/* Contenu gauche aligné en haut : « Une question ? » au niveau du bord haut de la carte */
.lgx-question__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 3.5rem;
  align-items: start;
}

/* Footer collé sous la question (coins hauts droits, pas de gap) */
.lgx-question + .lgx-footer {
  padding-top: 0;
}


.lgx-question__overline {
  margin-bottom: 1rem;
}

.lgx-question__title {
  color: #fff;
  font-size: 2.75rem;
  line-height: 1.05;
  margin: 0 0 1.25rem;
}

.lgx-question__text {
  color: #93a3b4;
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0;
  max-width: 30rem;
}

.lgx-question__card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 2rem 2.25rem;
}

.lgx-question__label {
  font-family: var(--lgx-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6b7c90;
  margin: 0 0 0.625rem;
}

.lgx-question__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: #fff;
  font-size: 1.375rem;
  font-weight: 700;
  text-decoration: none;
}

.lgx-question__phone svg {
  color: #fff;
}

.lgx-question__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 1.5rem 0;
}

.lgx-question__address {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  color: #c4d0dc;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

.lgx-question__address svg {
  flex: none;
  color: #c4d0dc;
  margin-top: 0.2rem;
}

.lgx-question__cta {
  display: inline-flex;
  align-items: center;
  margin-top: 1.75rem;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
}

@media (max-width: 991.98px) {
  .lgx-question__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2.5rem 0;
  }
  .lgx-question__title {
    font-size: 2rem;
  }
}

/* Mobile : le `padding: 4rem` du panneau ne laissait que ~190px utiles dans la
   carte, d'où le numéro de téléphone qui passait à la ligne. La maquette cale
   la carte à ~16px du bord de l'écran. */
@media (max-width: 767.98px) {
  .lgx-question__panel {
    padding: 2.5rem 1rem;
  }
  .lgx-question__card {
    padding: 1.75rem 1.5rem;
  }
  .lgx-question__phone {
    font-size: 1.375rem;
    white-space: nowrap;
  }
}

/* ==========================================================================
   Page CMS « Qui sommes-nous » (contenu collé dans le BO, classes .lgx-about*)
   Le contenu CMS est rendu dans .page-content--cms (conteneur centré). Le hero
   et les sections en pleine largeur cassent le conteneur via 100vw.
   Bas de page (partenaires, « Parlons de votre projet ») = modules accrochés.
   ========================================================================== */

/* Neutralise la typo rich-text du thème sur nos blocs maquette */
.page-content--cms .lgx-about * {
  margin: 0;
}
/* Masque un éventuel titre CMS par défaut (le hero porte le titre) */
.page-content--cms > h1:first-child {
  display: none;
}

/* Page « Qui sommes-nous » : hero collé au header. On masque le fil d'Ariane
   et le titre CMS par défaut, et on annule les paddings hauts du contenu.
   Ciblé via :has(.lgx-about-hero) → n'affecte que cette page (portable). */
body:has(.lgx-about-hero) .breadcrumb__wrapper,
body:has(.lgx-about-hero) .page-header,
body:has(.lgx-doc-hero) .breadcrumb__wrapper,
body:has(.lgx-doc-hero) .page-header {
  display: none;
}
body:has(.lgx-about-hero) .wrapper,
body:has(.lgx-about-hero) .columns-container,
body:has(.lgx-about-hero) #center-column,
body:has(.lgx-about-hero) .page-content--cms,
body:has(.lgx-doc-hero) .wrapper,
body:has(.lgx-doc-hero) .columns-container,
body:has(.lgx-doc-hero) #center-column,
body:has(.lgx-doc-hero) .page-content--cms {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* Le conteneur racine (.lgx-about / .lgx-doc), enfant direct de
   .page-content--cms.rich-text, reçoit une marge haute du thème → l'annuler,
   sinon un gap blanc subsiste entre le header et le hero. */
.page-content--cms .lgx-about,
.page-content--cms .lgx-doc {
  margin: 0 !important;
}

.lgx-about {
  color: var(--lgx-navy);
}

/* Overline mono rouge (À PROPOS / NOTRE SAVOIR-FAIRE …) */
.lgx-about__eyebrow {
  display: block;
  font-family: var(--lgx-font-mono);
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lgx-red);
  margin-bottom: 1rem !important;
}

.lgx-about__title {
  font-family: var(--lgx-font-heading);
  font-weight: 800;
  color: var(--lgx-navy);
  font-size: 2.5rem;
  line-height: 1.2;
}

.lgx-about__text p {
  font-family: var(--lgx-font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--lgx-text-muted);
  margin-bottom: 1rem !important;
}
.lgx-about__text p:last-child {
  margin-bottom: 0 !important;
}

/* --- Hero pleine largeur avec image usine + dégradé --- */
.lgx-about-hero {
  position: relative;
  width: 100%;
  /* Bande large comme la maquette Figma (≈ 3:1), pas l'image pleine hauteur */
  aspect-ratio: 1120 / 430;
  max-height: 460px;
  display: flex;
  align-items: flex-end;
  padding: 0;
  overflow: hidden;
}
/* L'image remplit la bande, recadrée sur le bâtiment (sans déformer) */
.lgx-about-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
/* Dégradé sombre en bas pour la lisibilité du titre */
.lgx-about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 26, 40, 0) 45%, rgba(15, 26, 40, 0.6) 100%);
  pointer-events: none;
}
.lgx-about-hero__inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 2rem 3.25rem;
}
.lgx-about-hero .lgx-about__eyebrow {
  color: var(--lgx-red-light);
  margin-bottom: 0.75rem !important;
}
.lgx-about-hero__title {
  font-family: var(--lgx-font-heading);
  font-weight: 800;
  color: #fff;
  font-size: 3.7rem;
  line-height: 1.05;
}

.lgx-about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(39, 62, 83, 0.55);
  z-index: 1;
  pointer-events: none;
}


/* --- Bandeau conteneur des sections texte --- */
.lgx-about__wrap {
  max-width: 1380px;
  margin: 0 auto;
}

/* Section intro : une colonne */
.lgx-about-intro {
  padding: 4rem 2rem 1rem;
  max-width: 740px;
}
.lgx-about-intro .lgx-about__title {
  margin-bottom: 1.75rem !important;
}

/* Sections 2 colonnes (titre à gauche, corps à droite) */
.lgx-about-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
  gap: 3rem;
  padding: 3.5rem 2rem;
  border-top: 1px solid var(--lgx-border);
}
.lgx-about-split__head .lgx-about__title {
  font-size: 2.1rem;
}

/* Liste à puces tiret rouge */
.lgx-about-list {
  list-style: none;
  padding: 0 !important;
  margin-top: 1.5rem !important;
}
.lgx-about-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.75rem !important;
  font-family: var(--lgx-font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--lgx-navy);
}
.lgx-about-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 12px;
  height: 2px;
  background: var(--lgx-red);
}

/* Citation en exergue (filet rouge à gauche) */
.lgx-about-quote {
  border-left: 3px solid var(--lgx-red);
  padding-left: 1.25rem !important;
  margin: 1.75rem 0 !important;
}
.lgx-about-quote p {
  font-weight: 700;
  color: var(--lgx-navy) !important;
  font-size: 1rem;
  line-height: 1.55;
}

/* Barre de chiffres clés (même visuel que ns_notresavoirfaire) */
.lgx-about-stats {
  background: var(--lgx-navy);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 3.5rem 3rem;
  margin: 3rem 0 !important;
}
.lgx-about-stats__item {
  padding-left: 1.25rem;
  border-left: 3px solid var(--lgx-red);
}
.lgx-about-stats__num {
  display: block;
  font-family: var(--lgx-font-heading);
  font-weight: 800;
  color: #fff;
  font-size: 2.8rem;
  line-height: 1.1;
}
.lgx-about-stats__num sup {
  font-size: 1.5rem;
  font-weight: 900;
  margin-left: 2px !important;
  top: -0.1em;
}
.lgx-about-stats__label {
  display: block;
  margin-top: 0.4rem !important;
  font-family: var(--lgx-font-body);
  font-size: 0.8125rem;
  color: #c4d0dc;
}

@media (max-width: 767.98px) {
  .lgx-about-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 1.25rem;
    padding: 2rem 1.5rem;
  }
}

@media (max-width: 991.98px) {
  .lgx-about-hero {
    min-height: 300px;
  }
  .lgx-about-hero__title {
    font-size: 2.25rem;
  }
  .lgx-about-split {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 2.5rem 0;
  }
  .lgx-about-intro {
    padding: 2.5rem 0 0.5rem;
  }
}

/* ==========================================================================
   Page CMS « Documentation » (classes .lgx-doc*)
   Hero navy + grille de cartes de documents + bande certification.
   Bas de page (« Parlons de votre projet ») = module ns_unequestion.
   ========================================================================== */
.page-content--cms .lgx-doc * {
  margin: 0;
}
.lgx-doc {
  color: var(--lgx-navy);
}
.lgx-doc__wrap {
  max-width: 1180px;
  margin: 0 auto;
}

/* --- Hero navy (collé au header via :has, cf. plus haut) --- */
.lgx-doc-hero {
  background: var(--lgx-navy);
  padding: 3.5rem 2.75rem 3.75rem;
}
.lgx-doc-hero .lgx-about__eyebrow {
  color: var(--lgx-red);
  margin-bottom: 0.85rem !important;
}
.lgx-doc-hero__title {
  font-family: var(--lgx-font-heading);
  font-weight: 800;
  color: #fff;
  font-size: 3rem;
  line-height: 1.08;
  margin-bottom: 1rem !important;
}
.lgx-doc-hero__sub {
  color: #c4d0dc;
  font-family: var(--lgx-font-body);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 520px;
}

/* --- En-tête de section --- */
.lgx-doc-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 3.5rem 0 1.25rem;
  margin-bottom: 2rem !important;
  border-bottom: 1px solid var(--lgx-border);
}
.lgx-doc-head__title {
  font-family: var(--lgx-font-heading);
  font-weight: 800;
  color: var(--lgx-navy);
  font-size: 1.9rem;
  line-height: 1.2;
}
.lgx-doc-head__count {
  color: var(--lgx-text-muted);
  font-family: var(--lgx-font-body);
  font-size: 0.875rem;
  white-space: nowrap;
}

/* --- Grille de cartes --- */
.lgx-doc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.lgx-doc-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--lgx-border);
  border-radius: 5px;
  overflow: hidden;
}
.lgx-doc-card__media {
  height: 160px;
  background: var(--lgx-bg-light);
  border-bottom: 1px solid var(--lgx-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lgx-doc-card__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Placeholder document (PDF / à venir) */
.lgx-doc-card__ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: var(--lgx-text-faded);
}
.lgx-doc-card__ph::before {
  content: "";
  width: 34px;
  height: 40px;
  background: no-repeat center / contain;
  background-image: url("../img/Icon_pdf.svg");
}
.lgx-doc-card__ph-label {
  font-family: var(--lgx-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lgx-red);
}
.lgx-doc-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.1rem 1.15rem 1.25rem;
}
.lgx-doc-card__cat {
  font-family: var(--lgx-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--lgx-red);
  margin-bottom: 0.5rem !important;
}
.lgx-doc-card__title {
  font-family: var(--lgx-font-body);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--lgx-navy);
  margin-bottom: 0.6rem !important;
}
.lgx-doc-card__text {
  font-family: var(--lgx-font-body);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--lgx-text-muted);
  flex: 1;
  margin-bottom: 1.1rem !important;
}
.lgx-doc-card__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  background: var(--lgx-red);
  color: #fff;
  border-radius: 3px;
  font-family: var(--lgx-font-body);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
}
.lgx-doc-card__btn::after {
  content: "";
  width: 16px;
  height: 16px;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v12'/><path d='M7 10l5 5 5-5'/><path d='M4 21h16'/></svg>");
}
.lgx-doc-card__btn:hover {
  background: var(--lgx-red-dark);
}

/* Carte « à venir » grisée */
.lgx-doc-card--soon {
  opacity: 0.85;
}
.lgx-doc-card--soon .lgx-doc-card__ph-label {
  color: var(--lgx-text-faded);
}
.lgx-doc-card--soon .lgx-doc-card__cat {
  color: var(--lgx-text-faded);
}
.lgx-doc-soon {
  font-family: var(--lgx-font-body);
  font-size: 0.8125rem;
  color: var(--lgx-text-faded);
  font-style: italic;
}

/* --- Bande certification ISO 9001 / SGS --- */
.lgx-doc-cert {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2rem;
  background: var(--lgx-bg-light);
  border-radius: 6px;
  padding: 2.25rem 2.5rem;
  margin: 3rem 0 !important;
}
.lgx-doc-cert__logo {
  width: 120px;
  background: #fff;
  border: 1px solid var(--lgx-border);
  border-radius: 6px;
  padding: 0.9rem;
}
.lgx-doc-cert__logo img {
  display: block;
  width: 100%;
  height: auto;
}
.lgx-doc-cert .lgx-about__eyebrow {
  margin-bottom: 0.5rem !important;
}
.lgx-doc-cert__title {
  font-family: var(--lgx-font-heading);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--lgx-navy);
  margin-bottom: 0.6rem !important;
}
.lgx-doc-cert__text {
  font-family: var(--lgx-font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--lgx-text-muted);
}

@media (max-width: 991.98px) {
  .lgx-doc-hero__title {
    font-size: 2.25rem;
  }
  .lgx-doc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Maquette « mobile maj » : gouttière de 1.5rem, en-tête de section empilé,
   bande certification alignée à gauche (et non centrée). */
@media (max-width: 767.98px) {
  /* Pas de padding sur .lgx-doc__wrap : le contenu CMS est déjà dans
     .columns-container.container, qui fournit la gouttière. Le hero ajoute
     seulement le léger retrait supplémentaire de la maquette. */
  .lgx-doc-hero {
    padding: 3rem 0.5rem 3.25rem;
  }
  .lgx-doc-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding-top: 2.75rem;
  }
  .lgx-doc-head__title {
    font-size: 1.625rem;
  }
}
@media (max-width: 575.98px) {
  .lgx-doc-grid {
    grid-template-columns: 1fr;
  }
  .lgx-doc-card__media {
    height: 200px;
  }
  .lgx-doc-cert {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem 1.75rem;
  }
}

/* ==========================================================================
   Page « Nous contacter » (classes .lgx-contact*)
   Hero navy + 2 colonnes (coordonnées / formulaire contactform surchargé).
   ========================================================================== */
body:has(.lgx-contact-hero) .breadcrumb__wrapper,
body:has(.lgx-contact-hero) .page-header {
  display: none;
}
/* Le layout du thème réserve une colonne gauche : sur cette page on la retire
   et la colonne centrale reprend toute la largeur. */
body:has(.lgx-contact-hero) #left-column,
body:has(.lgx-contact-hero) #right-column {
  display: none;
}
body:has(.lgx-contact-hero) .columns-container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
body:has(.lgx-contact-hero) #center-column {
  padding-left: 0;
  padding-right: 0;
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}
body:has(.lgx-contact-hero) .wrapper,
body:has(.lgx-contact-hero) .columns-container,
body:has(.lgx-contact-hero) #center-column,
body:has(.lgx-contact-hero) .page-content--contact {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.lgx-contact {
  color: var(--lgx-navy);
  font-family: var(--lgx-font-body);
}
/* Hero et grille portent la classe .container-md du thème (même emprise que le
   header et le footer) ; on ne fixe donc ici que les gouttières internes.
   Maquette : texte du hero à 64px du bord (bande 1280 × 322). */
.lgx-contact-hero,
.lgx-contact__grid {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 768px) {
  .lgx-contact-hero,
  .lgx-contact__grid {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
@media (min-width: 1200px) {
  .lgx-contact-hero,
  .lgx-contact__grid {
    padding-left: 64px;
    padding-right: 64px;
  }
}

/* --- Hero navy (aligné sur le header via .container-md) --- */
.lgx-contact-hero {
  background: var(--lgx-navy);
  padding-top: 3.5rem;
  padding-bottom: 3.75rem;
}
.lgx-contact-hero .lgx-about__eyebrow {
  margin-bottom: 0.85rem !important;
}
.lgx-contact-hero__title {
  font-family: var(--lgx-font-heading);
  font-weight: 800;
  color: #fff;
  font-size: 3rem;
  line-height: 1.08;
  margin: 0 0 1rem;
}
.lgx-contact-hero__sub {
  color: #c4d0dc;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 520px;
  margin: 0;
}

/* --- Grille : coordonnées / formulaire --- */
.lgx-contact__grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 4rem;
  padding-top: 4rem;
  padding-bottom: 4.5rem;
}

/* Colonne gauche */
.lgx-contact-infos {
  background: var(--lgx-bg-light);
  border-radius: 4px;
  padding: 2rem 2rem 2.25rem;
}
.lgx-contact-infos__item + .lgx-contact-infos__item {
  border-top: 1px solid var(--lgx-border);
  margin-top: 1.4rem;
  padding-top: 1.4rem;
}
.lgx-contact-infos__label {
  font-family: var(--lgx-font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--lgx-navy);
  margin: 0 0 0.45rem;
}
.lgx-contact-infos__text {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--lgx-text-muted);
  margin: 0;
}
.lgx-contact-infos__text a {
  color: inherit;
  text-decoration: none;
}
.lgx-contact-infos__text a:hover {
  color: var(--lgx-red);
}

.lgx-contact-card {
  background: var(--lgx-navy);
  border-radius: 4px;
  padding: 1.75rem 1.9rem 2rem;
  margin-top: 1.5rem;
}
.lgx-contact-card__title {
  font-family: var(--lgx-font-body);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.3;
  color: #fff;
  margin: 0 0 0.75rem;
}
.lgx-contact-card__text {
  font-size: 0.875rem;
  line-height: 1.65;
  color: #c4d0dc;
  margin: 0;
}

/* --- Formulaire --- */
.lgx-contact-note {
  background: var(--lgx-bg-light);
  border-left: 2px solid var(--lgx-red);
  border-radius: 0 4px 4px 0;
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
  color: var(--lgx-text-muted);
  margin: 0 0 2rem;
}
.lgx-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1.5rem;
}
.lgx-field--full {
  grid-column: 1 / -1;
}
/* Libellé : Mulish 600 13.5/20.25 navy, astérisque rouge au même style (Figma) */
.lgx-label {
  display: block;
  font-weight: 600;
  font-size: 0.84375rem;
  line-height: 20.25px;
  letter-spacing: 0;
  color: var(--lgx-navy);
  margin-bottom: 0.5rem;
}
.lgx-label__hint {
  color: #8c97a4;
  font-weight: 400;
  font-size: 0.8125rem;
}
.lgx-req {
  color: var(--lgx-red);
  font-weight: 600;
  font-size: inherit;
}
.lgx-input {
  width: 100%;
  background: #fff;
  border: 1px solid var(--lgx-border);
  border-radius: 4px;
  /* Champ 48 px de haut (maquette) */
  padding: 0.75rem 1rem;
  min-height: 48px;
  font-family: var(--lgx-font-body);
  font-size: 0.9375rem;
  color: var(--lgx-navy);
  line-height: 1.5;
}
/* Placeholder : Mulish 400 15/100% #B0BAC5 (Figma) */
.lgx-input::placeholder {
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1;
  color: #b0bac5;
  opacity: 1;
}
.lgx-input:focus {
  outline: none;
  border-color: var(--lgx-navy);
  box-shadow: 0 0 0 3px rgba(39, 62, 83, 0.08);
}
.lgx-textarea {
  min-height: 190px;
  resize: vertical;
}
select.lgx-input {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6b7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 16px;
  padding-right: 2.5rem;
}

/* Zone de dépôt du fichier (maquette : 768 × 154, filet tireté #C7D0DB) */
.lgx-dropzone {
  position: relative;
  min-height: 154px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed #c7d0db;
  border-radius: 3px;
  background: var(--lgx-bg-light);
  padding: 1.75rem 1rem;
  text-align: center;
}
.lgx-dropzone.is-dragover {
  border-color: var(--lgx-red);
  background: #fff5f5;
}
.lgx-dropzone__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
/* Picto « téléverser » de la maquette : flèche montante + socle */
.lgx-dropzone::before {
  content: "";
  display: block;
  width: 22px;
  height: 16px;
  margin-bottom: 1.5rem;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16' fill='none' stroke='%23b0bac5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 13V1'/><path d='M16 6l-5-5-5 5'/><path d='M1 15h20' stroke-linejoin='miter'/></svg>");
}
.lgx-dropzone__text {
  font-size: 0.9375rem;
  color: var(--lgx-text-muted);
  margin: 0 0 0.75rem;
}
.lgx-dropzone__browse {
  position: relative;
  z-index: 1;
  border: 0;
  background: none;
  padding: 0;
  color: var(--lgx-red);
  font: inherit;
  cursor: pointer;
}
.lgx-dropzone__browse:hover {
  text-decoration: underline;
}
.lgx-dropzone__formats {
  font-family: var(--lgx-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: #b0bac5;
  margin: 0;
}
.lgx-dropzone__file {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lgx-navy);
}
.lgx-dropzone__error {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--lgx-red);
}

.lgx-honeypot {
  display: none !important;
}
.lgx-contact-submit {
  margin-top: 2rem;
}
@media (max-width: 991.98px) {
  .lgx-contact-hero {
    padding-top: 2.5rem;
    padding-bottom: 2.75rem;
  }
  .lgx-contact-hero__title {
    font-size: 2.25rem;
  }
  .lgx-contact__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-top: 2.5rem;
    padding-bottom: 3rem;
  }
    .lgx-pdp__gallery .carousel-item picture, .lgx-pdp__gallery .product__no-image picture {
        align-items: revert;
    }
}


@media (max-width: 575.98px) {
  .lgx-form-grid {
    grid-template-columns: 1fr;
  }
}