/* =========================================================
   Joomla 6 / Cassiopeia_extended - user.css
   Fond photo + cartes + sidebars fixes 200px/200px
   ========================================================= */

/* ================================
   1) FOND PHOTO PLEIN ÉCRAN
   ================================ */
html {
  min-height: 100%;
  background-image: url('/images/Calais_hotel_de_ville_face.jpg') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  background-size: cover !important;
}

/* voile blanc léger */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.40);
  z-index: 0;
}

body {
  background: transparent !important;
  margin: 0;
  padding: 16px;
  font-family: Arial, sans-serif;
  position: relative;
  z-index: 1;
}

/* Rendre transparents les wrappers du template */
.site,
#site,
#wrapper,
.container,
.container-fluid,
.grid-child,
.page,
.main,
.main-container,
.body,
.body-inner,
.site-grid {
  background-color: transparent !important;
  background-image: none !important;
}


/* ================================
   2) CARTES BLANCHES / LISIBILITÉ
   ================================ */
.blog-item,
.com-content-category__items > div {
  background: #ffffff;
  border-radius: 16px;
  padding: 30px;
  margin-bottom: 24px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  border: 2px solid #e0e0e0;
}

.item-page,
.item-page .com-content-article,
.item-page .com-content-article__body,
.item-page .com-content-article__content {
  background: #ffffff !important;
  border: 2px solid #e0e0e0 !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06) !important;
}

.item-page .com-content-article,
.item-page .com-content-article__body,
.item-page .com-content-article__content,
.item-page .item-content,
.item-page .entry-content {
  padding: 32px !important;
}

.item-page p,
.item-page li {
  line-height: 1.7;
}

.item-page img,
.item-page iframe,
.item-page table {
  max-width: 100% !important;
  height: auto;
}

@media (max-width: 1200px) {
  .item-page .com-content-article,
  .item-page .com-content-article__body,
  .item-page .com-content-article__content {
    padding: 20px !important;
  }
}

.blog-item .item-content {
  padding-left: 25px !important;
  padding-right: 25px !important;
  padding-bottom: 20px !important;
}
.blog-item .item-content p { margin-top: 10px; }


/* ================================
   3) LARGEUR GLOBALE (option)
   ================================ */
@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1600px !important; /* change si tu veux */
  }
}


/* =========================================================
   4) SIDEbars FIXES 200px — LA BONNE SURCHARGE CASSIOPEIA
   =========================================================
   Cassiopeia utilise .site-grid avec des lignes nommées.
   On surcharge la grille principale UNIQUEMENT en desktop,
   en tenant compte des classes body.has-sidebar-left/right.
   (évite les grilles imbriquées => évite les "6 colonnes")
   ========================================================= */
@supports (display: grid) {
 @media (min-width: 1350px) {
  .container,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1600px !important;
  }
}

    /* Uniquement sidebar gauche : 300 / 700 / (reste) */
    body.has-sidebar-left:not(.has-sidebar-right) .site-grid {
      grid-template-columns:
        [full-start] minmax(0, 1fr)
        [main-start]
          300px
          350px
          350px
          minmax(0, 1fr)
        [main-end]
        minmax(0, 1fr) [full-end] !important;

      column-gap: 24px;
    }

    /* Uniquement sidebar droite : (reste) / 700 / 300 */
    body.has-sidebar-right:not(.has-sidebar-left) .site-grid {
      grid-template-columns:
        [full-start] minmax(0, 1fr)
        [main-start]
          minmax(0, 1fr)
          350px
          350px
          300px
        [main-end]
        minmax(0, 1fr) [full-end] !important;

      column-gap: 24px;
    }

    .site-grid * { min-width: 0; }
  }
}