/*
   Robert Juliat responsive UX updates CSS document 2026 for RJ website, 
   designed by Mr Atif BUX

   Responsive UX Design for FULL website
*/

/*
  Canonical V2 masthead — loaded after legacy V2 styles.
*/

@media (min-width: 761px) {
  body.rj-page-v2 #filAriane {
    position: relative !important;
    z-index: 2;
    clear: both;
    float: none;
    display: block !important;
    width: 965px !important;
    max-width: 100%;
    min-height: 15px;
    height: 15px !important;
    margin: 0 auto 22px !important;
    padding: 0 !important;
    overflow: visible;
    box-sizing: content-box;
  }
}

@media (max-width: 950px) {
  body.rj-page-v2 #header {
    height: 160px !important;
    min-height: 160px !important;
  }

  body.rj-page-v2 #logoheader {
    position: absolute !important;
    top: 20px !important;
    left: 28px !important;
    width: 264px !important;
    height: 62px !important;
    margin: 0 !important;
  }

  body.rj-page-v2 #logoheader a {
    display: block;
    width: 264px !important;
    height: 62px !important;
    background: url("https://www.robertjuliat.com/rober-juliat-logo-noir.svg") left center / contain no-repeat;
  }

  body.rj-page-v2 #logoheader img,
  body.rj-page-v2 #logoheader a:hover img { visibility: hidden !important; }

  body.rj-page-v2 #header > ul {
    position: absolute !important;
    top: 30px !important;
    right: 26px !important;
    left: auto !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.rj-page-v2 #header > ul li,
  body.rj-page-v2 #header > ul #mapHeader,
  body.rj-page-v2 #header > ul #siteFR {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    width: auto;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.rj-page-v2 #header > ul #mapHeader { order: -1; width: 58px !important; }
  body.rj-page-v2 #header > ul #siteFR { width: 38px !important; }
  body.rj-page-v2 #header > ul #mapHeader img { width: 58px !important; height: auto !important; }
  body.rj-page-v2 #header > ul #siteFR img { width: 38px !important; height: auto !important; }

  body.rj-page-v2 #header > h1 {
    position: absolute !important;
    top: 113px !important;
    right: 20px !important;
    left: 20px !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #666;
    font-size: clamp(10px, 2.25vw, 14px) !important;
    line-height: 14px;
    letter-spacing: 1.45px;
    text-align: center !important;
    white-space: nowrap;
  }
}

@media (max-width: 760px) {
  body.rj-page-v2 #header > h1 {
    font-size: clamp(10px, 3.2vw, 14px) !important;
  }

  /* A visible breathing space separates Menu from the breadcrumb bar. */
  body.rj-page-v2 #filAriane { margin-top: 10px !important; }
}

@media (max-width: 480px) {
  body.rj-page-v2 #logoheader { left: 26px !important; width: 240px !important; }
  body.rj-page-v2 #logoheader a { width: 240px !important; }
  body.rj-page-v2 #header > ul { right: 20px !important; gap: 10px; }
  body.rj-page-v2 #header > ul #mapHeader { width: 54px !important; }
  body.rj-page-v2 #header > ul #siteFR { width: 36px !important; }
}

/* Archive-style breadcrumb, relocated immediately before the France mark. */
body.rj-page-v2 #footerRJ01 .rj-bottom-breadcrumb {
  width: 100%;
  margin: 0;
  padding: 17px 0;
  background: #f5f6f7;
  border-top: 1px solid #e4e6e7;
  border-bottom: 1px solid #e4e6e7;
  box-sizing: border-box;
}
body.rj-page-v2 #footerRJ01 .rj-bottom-breadcrumb-inner {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
body.rj-page-v2 #footerRJ01 .rj-bottom-breadcrumb-nav {
  display: block !important;
  width: auto !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
body.rj-page-v2 #footerRJ01 .rj-bottom-breadcrumb .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.rj-page-v2 #footerRJ01 .rj-bottom-breadcrumb .breadcrumb-item {
  float: none;
  margin: 0;
  color: #6c757d;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}
body.rj-page-v2 #footerRJ01 .rj-bottom-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  margin: 0 12px;
  color: #6c757d;
  content: ">";
}
body.rj-page-v2 #footerRJ01 .rj-bottom-breadcrumb a { color: #212529; text-decoration: none; }
body.rj-page-v2 #footerRJ01 .rj-bottom-breadcrumb a:hover { color: #212529; text-decoration: underline; }
body.rj-page-v2 #footerRJ01 .rj-bottom-breadcrumb .active { color: #6c757d; font-weight: 400; }
@media (max-width: 760px) {
  body.rj-page-v2 #footerRJ01 .rj-bottom-breadcrumb { padding: 14px 0; }
  body.rj-page-v2 #footerRJ01 .rj-bottom-breadcrumb-inner { padding: 0 20px; }
  body.rj-page-v2 #footerRJ01 .rj-bottom-breadcrumb .breadcrumb-item { font-size: 14px; line-height: 24px; }
  body.rj-page-v2 #footerRJ01 .rj-bottom-breadcrumb .breadcrumb-item + .breadcrumb-item::before { margin: 0 9px; }
}