/*
 * Titan Smart Energy - French locale overrides
 * Load this file AFTER /default/static/css/main.css.
 * This file is loaded by the French site only, after the shared stylesheet.
 */

html {
  overflow-x: hidden;
}

/* Use a French-friendly fallback stack: it has more even character widths
   than the CJK webfont used by the shared stylesheet. */
body,
.navWrap .navList > li > a,
.moreBtn,
.biao48,
.soluWrap .soluTit,
.soluWrap .soluTxt,
.projWrap .projName,
.projWrap .projTxt,
.newsWrap .newsName {
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

/* Desktop navigation: French labels stay on one clean line without forcing
   the logo, search and language controls outside of the header. */
@media (min-width: 1281px) {
  .navWrap .navList > li {
    margin-right: clamp(16px, 1.55vw, 30px);
  }

  .navWrap .navList > li > a {
    font-size: clamp(13px, 0.78vw, 15px);
    line-height: 28px;
    white-space: nowrap;
  }

  /* The underline is reserved for the current or hovered navigation item. */
  .navWrap .navList > li:not(.yiActive)::after {
    width: 0;
  }

  .navWrap .navList > li:hover::after,
  .navWrap .navList > li.yiActive::after {
    width: min(80px, 100%) !important;
  }
}

/* Mega-menu labels and product names may contain long French compounds. */
.erjiWrap a,
.pullName a,
.zzList a,
.sanmobileItem a,
.ermobileItem a {
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Mobile product navigation: a smaller, more compact line-height preserves
   the visual hierarchy without making the drawer unnecessarily tall. */
.navWrap .mobileBox .mobileYi {
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.45;
  word-break: normal;
  overflow-wrap: anywhere;
}

.navWrap .mobileBox .mobileYi > a {
  flex: 1 1 auto;
  min-width: 0;
}

.navWrap .mobileBox .mobileYi .yiZhan {
  flex: 0 0 auto;
  margin-top: 4px;
}

/* The quick-links column in the products mega-menu was sized for the much
   shorter English heading. Give it a genuine column and keep its title whole. */
.navWrap .erjiCenter {
  width: 53%;
}

.navWrap .erjiRight {
  width: 14%;
  min-width: 150px;
}

.navWrap .quickTit {
  font-size: 21px;
  line-height: 1.3;
  white-space: nowrap;
}

.navWrap .quicList a {
  font-size: 16px;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Home banner: keep the English composition, but give translated headlines
   a controlled two-line area instead of oversized or clipped text. */
.bannerSwiper .bannCont {
  width: min(90%, 1400px);
}

.bannerSwiper .bannTit {
  font-size: clamp(42px, 4.15vw, 64px);
  line-height: 1.16;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.bannerSwiper .cont2 {
  width: min(44vw, 600px);
}

.bannerSwiper .cont3 .bannTit {
  font-size: clamp(38px, 3.7vw, 56px);
  line-height: 1.18;
}

.bannerSwiper .bannTips,
.bannerSwiper .bannTxt2,
.bannerSwiper .bannTxt3 {
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Preserve card rhythm while allowing French solution and project titles to
   use two lines. The original one-line clamp truncates key meaning. */
.soluWrap .soluTit {
  font-size: 22px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.soluWrap .soluTxt,
.projWrap .projTxt,
.newsWrap .newsName {
  overflow-wrap: anywhere;
  hyphens: auto;
}

.projWrap .projName {
  -webkit-line-clamp: 2;
  min-height: 70px;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.prodWrap .prodName {
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Project detail tables: labels remain readable as a complete phrase rather
   than being clamped word-by-word. The value column keeps the available space. */
.lowWrap .caseTxt .tablen {
  overflow-x: visible;
}

.lowWrap .caseTxt table {
  table-layout: auto;
}

.lowWrap .caseTxt td {
  min-width: 0;
}

.lowWrap .caseTxt td:nth-child(1) {
  width: 40%;
  min-width: 205px;
  padding-right: 24px;
  white-space: nowrap;
}

.lowWrap .caseTxt td:nth-child(1) p {
  display: block;
  overflow: visible;
  white-space: nowrap;
}

/* R&D image overlay: the shared 202px block creates a needless scrollbar for
   French copy. Its wider fluid width fits the image and adapts with it. */
.rdWrap .rdBlock {
  width: min(46%, 330px);
  max-height: none;
  overflow: visible;
  padding-right: 24px;
}

.rdWrap .rdNum {
  font-size: 15px;
  line-height: 1.45;
  margin-bottom: 18px;
}

.rdWrap .rdNum p:nth-child(1) {
  font-size: 28px;
  line-height: 1.15;
}

/* Tablet: retain the shared breakpoints, with slightly smaller type where
   French copy is substantially longer than English. */
@media (max-width: 1280px) {
  .bannerSwiper .bannTit {
    font-size: 30px !important;
    line-height: 1.2 !important;
  }

  .bannerSwiper .cont3 .bannTit {
    font-size: 30px !important;
  }

  .soluWrap .soluTit {
    font-size: 20px;
    line-height: 1.35;
  }
}

@media (max-width: 1000px) {
  .bannerSwiper .cont2 {
    width: min(80vw, 600px);
  }

  .projWrap .projName {
    min-height: 60px;
  }

  .navWrap .erjiCenter {
    width: 55%;
  }

  .navWrap .erjiRight {
    width: 18%;
    min-width: 130px;
  }
}

/* The shared stylesheet already hides the desktop banner copy below 750px.
   Keep that behaviour; these rules only make all remaining French UI wrap
   safely and keep touch targets usable. */
@media (max-width: 750px) {
  .moreBtn {
    white-space: normal;
    line-height: 1.35;
  }

  .soluWrap .soluTit {
    font-size: 19px;
  }

  .projWrap .projName {
    min-height: 0;
    -webkit-line-clamp: 3;
  }

  .lowWrap .caseTxt .tablen {
    overflow-x: auto;
  }

  .lowWrap .caseTxt table {
    min-width: 520px;
  }

  .rdWrap .rdBlock {
    width: min(52%, 300px);
    padding-right: 15px;
  }
}