/* Loedens clean/responsive layer — 2026 refresh */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 0; font-family: Lato, Arial, sans-serif; line-height: 1.5; }
img { max-width: 100%; height: auto; }

.se-pre-con { transition: opacity .35s ease, visibility .35s ease; }
.se-pre-con.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.center_rows { opacity: 1; }
.js-ready .center_rows { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.js-ready .center_rows.is-visible { opacity: 1; transform: translateY(0); }

.gallery-container { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.gallery-item { scroll-snap-align: start; }
.gallery-item img { width: auto; object-fit: cover; }
.nav-button { touch-action: manipulation; }

.parallax-container { min-height: 100vh; background-position: center; background-size: cover; }
.global_container,
.global_container-end,
.container-center,
.container-center-2,
.container-center-3,
.container-center-4,
.container-center-5 { min-height: 100vh; }

.menu { display: flex; justify-content: center; align-items: center; gap: clamp(12px, 3vw, 40px); flex-wrap: wrap; }
.menu li { padding-left: 0; }
.header_wrapper, .clearHeader, .darkHeader { z-index: 1000; }

.clients-contact, .row_1, .row_2 { max-width: 100%; }
.table_01 img, .table_02 img { max-width: 150px; width: 100%; height: auto; }

@media (max-width: 900px) {
  .header_wrapper { display: none; }
  .parallax-container { min-height: 720px; height: auto !important; }
  .row_container { height: auto; min-height: 0; padding: 64px 20px; max-width: 760px; }
  .center_rows, .js-ready .center_rows, .js-ready .center_rows.is-visible { padding-top: 0; transform: none; opacity: 1; }
  .row_1, .row_2 { display: block; width: 100%; }
  .col_1, .col_2, .row_2_col_2 { width: 100%; padding-left: 0; }
  .col_1_bottom_row { padding-right: 0; font-size: 16px; }
  .right_news { font-size: 16px; }
  .gallery-item img { height: clamp(220px, 55vw, 420px); }

  .content-vertical-center,
  .content-vertical-center-right,
  .content-vertical-center-last { padding: 80px 22px; transform: none; color: #fff; }
  .title, .title-right { font-size: clamp(36px, 11vw, 64px); padding: 0; line-height: .95; }
  .text, .text-right { width: 100%; padding: 0; transform: none; font-size: 16px; }
  .cartouche, .cartouche-right { width: auto; max-width: 100%; margin-left: 0; transform: none; }

  .global_container, .global_container-end, .fixed-global_container { transform: none; min-height: 0; height: auto; }
  .container-padding { padding: 0 16px; }
  .vertical-center-col, .vertical-center-col-first { padding-top: 0; transform: none; width: 100%; }
  .col-left, .col-left-clients { float: none; width: 100%; margin: 0; padding: 0; }
  .services-square { width: 100%; }
  .service-row-1, .service-row-2, .service-row-3, .service-row-4 { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 0; }
  [class*="service-row-"][class*="-left"],
  [class*="service-row-"][class*="-right"] { width: auto !important; min-height: 190px; height: auto !important; margin: 0 !important; padding: 18px; }
  .service-photo, .service-photo-1, .service-photo-2, .service-photo-3 { display: none; }
  .services-title { height: auto; padding: 48px 0 20px; }
  .title-bottom { position: static; margin: 0; }
  .clients-row-2 { margin-top: 48px; }
  .clients-contact { display: block; }
  .clients-col-left, .clients-col-right { width: 100%; }
}

@media (max-width: 520px) {
  body { font-size: 62.5%; }
  .lang_position { top: 18px; right: 18px; }
  .text-intro { font-size: 13px; letter-spacing: 3px; text-align: center; }
  .center { padding-top: 54vh; }
  .row_container { padding: 48px 16px; }
  .service-row-1, .service-row-2, .service-row-3, .service-row-4 { grid-template-columns: 1fr; }
  [class*="service-row-"][class*="-left"],
  [class*="service-row-"][class*="-right"] { min-height: 150px; }
  .table_01 { display: none; }
  .table_02 { display: table; width: 100%; }
  .table_02 th { padding: 12px; }
  .clients-col-right h1 { font-size: 15px; line-height: 1.6; }
}


@media (max-width: 900px) {
  #fixed-content {
    display: none !important;
  }
}

/* v4 — À propos / panel two vertical alignment
   The original layout used fixed 50vh padding + pixel translate values, which drifted
   depending on viewport height and browser font rendering. This keeps the same visual
   block, but centers it with flexbox so the text + carousel stay balanced everywhere. */
#apropos_go + #apropos + .row_container {
  min-height: 100vh;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(72px, 9vh, 120px) 20px;
}

#apropos_go + #apropos + .row_container .center_rows,
.js-ready #apropos_go + #apropos + .row_container .center_rows,
.js-ready #apropos_go + #apropos + .row_container .center_rows.is-visible {
  width: 100%;
  padding-top: 0;
  transform: none;
  -webkit-transform: none;
}

#apropos_go + #apropos + .row_container .row_1,
#apropos_go + #apropos + .row_container .row_2 {
  max-width: 700px;
}

#apropos_go + #apropos + .row_container .gallery-wrapper {
  width: 100%;
}

#apropos_go + #apropos + .row_container .gallery-container {
  height: clamp(210px, 28vh, 320px);
}

#apropos_go + #apropos + .row_container .gallery-item img {
  height: 100%;
  width: auto;
  max-width: none;
}

@media (max-width: 900px) {
  #apropos_go + #apropos + .row_container {
    min-height: 100vh;
    padding: clamp(56px, 8vh, 88px) 20px;
  }
  #apropos_go + #apropos + .row_container .row_1,
  #apropos_go + #apropos + .row_container .row_2 {
    max-width: 100%;
  }
  #apropos_go + #apropos + .row_container .row_2 {
    margin-top: 28px;
  }
  #apropos_go + #apropos + .row_container .gallery-container {
    height: clamp(220px, 50vw, 380px);
  }
}

@media (max-width: 520px) {
  #apropos_go + #apropos + .row_container {
    min-height: auto;
    padding: 48px 16px;
  }
  #apropos_go + #apropos + .row_container .gallery-container {
    height: clamp(210px, 68vw, 330px);
  }
}

/* v5 — Carousel original behaviour: automatic horizontal movement, no visible scrollbar */
#apropos_go + #apropos + .row_container .gallery-wrapper {
  overflow: hidden;
}

#apropos_go + #apropos + .row_container .gallery-container {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: none;
}

#apropos_go + #apropos + .row_container .gallery-container::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}