/* =========================================================
   BJL - Joomla 6 (Cassiopeia child) - user.css (CLEAN)
   ========================================================= */

/* ---------- Variables ---------- */
:root{
  --bjl-blue: #006db0;
  --bjl-maxw: 1024px;
  --bjl-font: Arial, sans-serif;

  /* Layout sizes */
  --bjl-loginw: 240px;        /* width of login box (and search) */
  --bjl-logo-h: 155px;        /* logo height */
  --bjl-banner-h: 258px;      /* banner/slider visible height */
  --bjl-gap-home: 30px;       /* space between home boxes */
}

/* ---------- Base ---------- */
body{
  background: #fff;
  font-family: var(--bjl-font);
}

/* Centered container like Joomla 3 */
.bjl-container{
  max-width: var(--bjl-maxw);
  margin: 0 auto;
  width: 100%;
}

/* =========================================================
   TOPBAR (custom module HTML wrapper: .bjl-topbar ...)
   ========================================================= */
.container-topbar{
  background:#fff !important;
}

/* Topbar layout (logo left, right column search+login) */
.bjl-topbar{
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 18px 0 10px;
}

/* Logo: clickable link wrapper */
.bjl-logo-link{
  display:inline-block;
  text-decoration:none;
}
.bjl-topbar-left{ padding-left: 20px; }
.bjl-logo{
  height: var(--bjl-logo-h);
  width: auto;
  display:block;
}

/* Right column */
.bjl-topbar-right{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  padding-right: 20px;
}

/* --- Search: same width as login, no label text --- */
.bjl-topbar-search{
  width: var(--bjl-loginw);
  width: 240px !important;     /* ajuste 320/360/400 si besoin */
}
.bjl-topbar-search form{ margin:0 !important; }
.bjl-topbar-search label{ display:none !important; }

.bjl-topbar-search input[type="search"],
.bjl-topbar-search .form-control{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  padding: 6px 8px;
  font-size: 13px;
}

/* ===== Make Awesomplete wrapper match the form width ===== */
.bjl-topbar-search form.mod-finder{
  width: 100% !important;
}

.bjl-topbar-search form.mod-finder .awesomplete{
  width: 100% !important;
  display: block !important;       /* force it to behave like a block */
}

.bjl-topbar-search form.mod-finder .awesomplete > input,
.bjl-topbar-search form.mod-finder input[type="search"],
.bjl-topbar-search form.mod-finder .form-control{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}


/* --- Login box --- */
.bjl-topbar-login{
  width: var(--bjl-loginw);
  border: 2px solid var(--bjl-blue);
  background: #fff;
  padding: 0;
}

/* Title bar (module title) */
.bjl-topbar-login h3,
.bjl-topbar-login .module-title{
  background: var(--bjl-blue);
  color: #fff;
  margin: 0;
  padding: 6px 8px;
  font-family: var(--bjl-font);
  font-weight: 700;
  font-size: 15px !important;
  line-height: 1.1 !important;
}

/* Reduce spacing inside the login module */
.bjl-topbar-login form{
  margin: 0 !important;
}
.bjl-topbar-login .control-group,
.bjl-topbar-login .form-group,
.bjl-topbar-login .mb-3{
  margin-bottom: 6px !important;
}

/* Inputs tighter */
.bjl-topbar-login input[type="text"],
.bjl-topbar-login input[type="password"],
.bjl-topbar-login .form-control{
  padding: 6px 8px !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
}

/* Keep labels readable (fix white-on-white) */
.bjl-topbar-login label,
.bjl-topbar-login .form-check-label,
.bjl-topbar-login .control-label,
.bjl-topbar-login legend,
.bjl-topbar-login small{
  color: #000 !important;
}

/* Login links readable */
.bjl-topbar-login a{
  color: var(--bjl-blue) !important;
}

/* Checkbox spacing */
.bjl-topbar-login .form-check{
  margin: 4px 0  6px !important;
}

.bjl-topbar-login .form-check-label{
  font-size: 13px !important;
  line-height: 1.1 !important;
}
/* Lost links a bit tighter */
.bjl-topbar-login a[href*="reset"],
.bjl-topbar-login a[href*="remind"]{
  display: inline-block !important;
  margin-top: 2px !important;
  line-height: 1.1 !important;
}


/* Button "Connexion" in BJL blue */
.bjl-topbar-login .btn,
.bjl-topbar-login button[type="submit"],
.bjl-topbar-login input[type="submit"]{
  padding: 6px 10px !important;
  font-size: 13px !important;
  background: var(--bjl-blue) !important;
  border-color: var(--bjl-blue) !important;
  color: #fff !important;
  line-height: 1.1 !important;
}
/* ===== Photo 1: add left margin for "Mot de passe perdu ? / Identifiant perdu ?" ===== */
.bjl-topbar-login .mod-login a,
.bjl-topbar-login .mod-login .list-unstyled a,
.bjl-topbar-login .mod-login ul a{
  margin-left: 10px !important;
  display: inline-block;
}

/* =========================================================
   HEADER / NAVBAR (menu)
   ========================================================= */
.container-header{
  background:#fff !important;
}

/* Blue menu bar full width */
.container-header .navbar{
  background: var(--bjl-blue) !important;
  width: 100%;
  min-height: 51px;
  padding: 0;
  display: flex;
  align-items: center;           /* centers content vertically */
}

/* Center menu content inside 1024 */
.container-header .navbar > .container,
.container-header .navbar > .container-fluid{
  max-width: var(--bjl-maxw);
  margin: 0 auto;
}

/* Add space on the left of first menu item */
.container-header .navbar .nav{
  padding-left: 18px !important;
  align-items: center;
}
.container-header .navbar .nav > .nav-item:first-child{
  margin-left: 140px !important;
}

/* Menu links */
.container-header .navbar .nav-link{
  color:#fff !important;
  font-family: var(--bjl-font);
  font-size: 14px;
  font-weight: 600;
  padding: 0 14px!important;
  line-height: 1;
  display: flex;
  align-items: center;           /* vertical centering of text */
  height: 51px;                  /* same as navbar min-height */
}

.container-header .navbar .nav-link:hover,
.container-header .navbar .nav-item.active .nav-link,
.container-header .navbar .nav-link[aria-current="page"]{
  background: rgba(255,255,255,0.12);
  color:#fff !important;
}

/* =========================================================
   BANNER / SLIDER (Flickity) — FINAL (FULL BLEED / COVER)
   ========================================================= */

:root{
  --bjl-banner-h: 258px; /* set the height you want */
}

/* Banner wrapper aligned with content */
.bjl-banner{
  max-width: var(--bjl-maxw) !important;
  width: 100% !important;
  margin: 0 auto 18px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Flickity root */
.bjl-banner .hot_joomla_carousel_slides{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Flickity viewport: fixed height, hard clipping */
.bjl-banner .hot_joomla_carousel_slides .flickity-viewport{
  width: 100% !important;
  max-width: 100% !important;
  height: var(--bjl-banner-h) !important;
  overflow: hidden !important;
}

/* Cells fill viewport height */
.bjl-banner .hot_joomla_carousel_slides .gallery-cell{
  width: 100% !important;
  height: var(--bjl-banner-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Image fills entire banner box */
.bjl-banner .hot_joomla_carousel_slides .gallery-cell img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;      /* <-- fills box (no empty bands) */
  object-position: center center !important;
  display: block !important;
}

/* Hide 1–4px neighbor strip without touching Flickity track */
.bjl-banner .hot_joomla_carousel_slides .flickity-viewport::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:4px;
  height:100%;
  background:#fff;
  z-index:10;
  pointer-events:none;
}
.bjl-banner .hot_joomla_carousel_slides .flickity-viewport::after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:4px;
  height:100%;
  background:#fff;
  z-index:10;
  pointer-events:none;
}
/* =========================================================
   HOME blocks (2 columns cards)
   ========================================================= */
.bjl-home-blocks{
  column-gap: var(--bjl-gap-home) !important;
}

/* Card style */
.bjl-home-blocks .bjl-card{
  border: 2px solid var(--bjl-blue);
  background: #fff;
  padding: 0;
  margin-top: 10px;
}

.bjl-home-blocks .bjl-card-title{
  background: var(--bjl-blue);
  color: #fff;
  font-family: var(--bjl-font);
  font-weight: 700;
  font-size: 16px;
  padding: 10px 12px;
}

.bjl-home-blocks .bjl-card-img{
  padding: 10px 10px 0 10px;
}

.bjl-home-blocks .bjl-links,
.bjl-home-blocks .bjl-bullets{
  padding: 12px 18px 14px 26px;
  margin: 0;
  font-family: var(--bjl-font);
  font-size: 14px;
}

.bjl-home-blocks .bjl-links li{ margin: 6px 0; }
.bjl-home-blocks .bjl-home-blocks a,
.bjl-home-blocks .bjl-links a{
  color: var(--bjl-blue);
  text-decoration: underline;
}

.bjl-home-blocks .bjl-subtitle{
  font-family: var(--bjl-font);
  font-weight: 700;
  font-size: 14px;
  padding: 0 12px;
  margin-top: 10px;
}

/* =========================================================
   ACCREDITATION block
   ========================================================= */
.bjl-accred{
  max-width: var(--bjl-maxw);
  margin: 30px auto 40px;
}

.bjl-accred-title{
  background: var(--bjl-blue);
  color: #fff;
  font-family: var(--bjl-font);
  font-weight: 700;
  text-align: center;
  padding: 10px 12px;
}

.bjl-accred-body{
  text-align: center;
  padding: 18px 10px 10px;
  font-family: var(--bjl-font);
}

.bjl-accred-line{ font-weight: 600; margin-bottom: 8px; }

.bjl-accred-logo img{
  max-width: 110px;
  height: auto;
  display: block;
  margin: 8px auto 10px;
}

.bjl-accred-text{ line-height: 1.35; }
.bjl-accred-text a{ color: var(--bjl-blue); text-decoration: underline; }

/* =========================================================
   FOOTER (blue + centered)
   Use your module class: bjl-footerbar
   ========================================================= */
footer,
.container-footer{
  background: var(--bjl-blue) !important;
}

.container-footer{
  padding: 0 !important;
  margin: 0 !important;
}

/* Footer text + links white */
footer a,
.container-footer a{
  color:#fff !important;
}

/* Center only the footer bar module content cleanly */
.container-footer .bjl-footerbar{
  display: block !important;
  text-align: center !important;
  padding: 18px 0 !important;
  background: var(--bjl-blue) !important;
}

.container-footer .bjl-footerbar .bjl-container{
  max-width: var(--bjl-maxw);
  margin: 0 auto !important;
}

/* ===== Center footer module content ===== */
.container-footer .moduletable,
.container-footer .mod-custom,
.container-footer .custom,
.container-footer .bjl-footerbar {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* =========================================================
   DOCUMENTS TELECHARGEABLES (match old Joomla 3 look)
   Add class="bjl-docs" to the table in the article
   ========================================================= */

table.bjl-docs{
  width: 1024px;
  max-width: 100%;
  margin: 18px auto;
  border-collapse: collapse !important;
  border: 1px solid #444 !important;
  table-layout: fixed;
  font-family: Arial, sans-serif;
  font-size: 10pt;
  color: #000;
  background: #fff;
}

/* Cell borders + padding */
table.bjl-docs td,
table.bjl-docs th{
  border: 1px solid #444 !important;
  padding: 10px 12px;
  vertical-align: top;
}

/* Title row */
table.bjl-docs .bjl-docs-title{
  text-align: center;
  font-weight: 700;
  font-size: 14pt;
  padding: 8px 12px;
}

/* Header row (Prestations / Fichiers) */
table.bjl-docs .bjl-docs-head{
  text-align: center;
  font-weight: 700;
  font-size: 12pt;
  padding: 8px 12px;
}

/* Column widths like old layout */
table.bjl-docs tr td:first-child{ width: 70%; }
table.bjl-docs tr td:last-child{
  width: 30%;
  vertical-align: middle;
}

/* Avoid Bootstrap paragraph margins inside table cells */
table.bjl-docs p{
  margin: 0 0 6px 0 !important;
}

/* Links + icons alignment */
table.bjl-docs a{
  color: #00f;
  text-decoration: underline;
}
table.bjl-docs img{
  vertical-align: middle;
  margin-right: 8px;
}

.bjl-contact-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

.bjl-contact-table th,
.bjl-contact-table td{
  border:2px solid #444;
  padding:6px 8px;
  vertical-align:top;
}

.bjl-contact-table th{
  text-align:center;
  font-weight:700;
}

.bjl-tel{
  text-align:center;
  white-space:nowrap;
}

.bjl-contact-title{
  margin-top:18px;
  text-decoration:underline;
}

.bjl-faq-item{
  border-top:3px solid #222;
  padding:10px 0 14px;
}

.bjl-faq-item h3{
  margin:0 0 6px;
  font-weight:700;
}

.bjl-faq-item p{
  margin:0;
}

.bjl-faq-item ul{
  margin:6px 0 0 18px;
}

.bjl-h1-local {
  color: #0b5fa5;
  font-weight: 800;
  margin: 0 0 8px;
  text-align: center;
}

/* Visually hidden but still in DOM (screen-reader safe pattern) */
.bjl-seo-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* =========================================================
   MOBILE FIXES (menu + topbar + home layout)
   ========================================================= */

/* 1) Fix mobile menu alignment (your desktop offsets leak into mobile) */
@media (max-width: 991.98px){
  .container-header .navbar .nav{
    padding-left: 0 !important;
    align-items: stretch;
  }
  .container-header .navbar .nav > .nav-item:first-child{
    margin-left: 0 !important;
  }

  /* Make collapsed menu full width and centered like your screenshot */
  .container-header .navbar .navbar-collapse{
    padding: 10px 12px;
  }
  .container-header .navbar .nav-link{
    height: auto !important;
    padding: 10px 12px !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* 2) Stack topbar blocks on mobile */
@media (max-width: 768px){
  .bjl-topbar{
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 10px;
  }
  .bjl-topbar-left{ padding-left: 0; }
  .bjl-topbar-right{
    width: 100%;
    align-items: center;
    padding-right: 0;
  }

  .bjl-topbar-search,
  .bjl-topbar-login{
    width: 100% !important;
    max-width: 360px;
  }

  /* If your home blocks are meant to be 2 columns, force 1 column on mobile */
  .bjl-home-blocks{
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 14px !important;
  }

  /* Prevent wide tables from breaking viewport */
  table{
    max-width: 100%;
  }
}

/* =========================================================
   COOKIE INFO BAR (bottom)
   Works with the plugin HTML ids/classes above
   ========================================================= */
.bjl-cookiebar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #7ea6ff;
  color: #fff;
  padding: 10px 12px;
  z-index: 99999;
  border-top: 1px solid rgba(0,0,0,.15);
}

.bjl-cookiebar-inner{
  max-width: 1024px;
  margin: 0 auto;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.bjl-cookiebar-text{
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  flex: 1;
}

.bjl-cookiebar-btn{
  background: #4f78d3;
  border: 1px solid rgba(0,0,0,0.15);
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}

/* Prevent bar from covering content */
html.has-bjl-cookiebar{
  padding-bottom: 64px;
}

@media (max-width: 768px){
  .bjl-cookiebar-inner{
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .bjl-cookiebar-btn{
    width: 100%;
  }
  html.has-bjl-cookiebar{
    padding-bottom: 100px;
  }
}