/* Importation la police pour EASY LAYOUT */

@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap');

/* header pour use-cases */
.view-article #sppb-addon-1768558168010 .sppb-addon-single-image-container img{
  content: url(/files/2026/04/24/logo-header-noir.svg);
}
.view-article header.position-sticky.is-stuck #section-id-1768558151746 .sppb-addon-single-image-container img{
  content: url(/files/2026/03/27/logo-header.svg);
}


/***** adapter header et footer *****/
.itemid-131 .dj-megamenu-modern,
.page-monespace-login .dj-megamenu-modern, .itemid-142 .dj-megamenu-modern, .view-article .dj-megamenu-modern{
  background-color: #000 !important;
}

.page-monespace-login .container-footer{
  margin-top: 0px !important;
}

/***** accordéons uniquement sur mobile *****/
.accordeon-mobile .sppb-panel-custom .sppb-panel-heading {
    border: solid 1px rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 15px !important;
    gap: 30px;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: space-between;
}

.accordeon-mobile .sppb-panel-custom .sppb-panel-heading p {
  margin-bottom: 0px !important; 
}

.accordeon-mobile .sppb-panel-body {
      padding: 15px 0 0 0;
}

/***** icones avec fond *****/
/* sur blanc */
.icone-fond-gris img {
  width: fit-content;
  padding: 12px;
  background-color: #00000010;
  border-radius: 8px !important;
}

/* sur noir */
.icone-fond-gris-noir img {
  width: fit-content;
  padding: 12px;
  background-color: #FFFFFF14;
  border-radius: 8px !important;
}

/***** boutons *****/
.btn-cta {
  padding: 16px !important;
  border-radius: 8px !important;
  background: var(--sppb-primaire) !important;
  color: #fff !important;
  transition: background-color 0.5s ease-out !important;
}

.btn-cta:hover {
  background: var(--sppb-primaire-hover) !important;
}

/* btn fond noir */

.btn-bas-page {
  padding: 16px !important;
  border-radius: 8px !important;
  background: var(--sppb-texte-standard) !important;
  color: #fff !important;
  transition: background-color 0.5s ease-out !important;
}

.btn-bas-page:hover {
  background: var(--sppb-primaire-hover) !important;
}

/* bouton avec liquid glass */
.icone-liquid-glass .sppb-accordion-image {
    height: 40px !important;
    width: 40px !important;
    border: solid 1px rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    backdrop-filter: blur(6px) brightness(0.9);
    gap: 50px;
    display: flex !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    z-index: 5 !important;
    position: relative !important;
}
.icone-liquid-glass button[aria-expanded="true"] .sppb-accordion-image {
    content: url("/files/2026/04/03/minus.svg");
}

/***** card avec effet gliquid glass *****/
/* classique */
.liquid-glass-card {
    border: solid 1px rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 48px !important;
    backdrop-filter: blur(6px) brightness(0.9);
    gap: 50px;
    display: flex !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

@media (max-width: 991px) {
  .liquid-glass-card {
    padding: 15px !important;
  }
}

/* team sur la page about */

.liquid-glass-card-team {
    border: solid 1px rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 15px !important;
    backdrop-filter: blur(6px) brightness(0.9);
    gap: 50px;
    display: flex !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

/***** ajustements de la structure native du template cassiopeia : ne pas modifier les classes ci-dessous sauf si nécessaire *****/

body {
    overflow-x: hidden !important;
}

a {
  text-decoration: none !important;
}

.site-grid {
  margin-bottom: 0 !important;
}

.container-component>*+* {
  margin-top: 0em !important;
}

body.wrapper-fluid .site-grid {
  grid-gap: 0em !important;
}

#system-message-container joomla-alert {
  width: 50% !important;
  margin: 0 auto !important;
  margin-top: 7em !important;
}

.site.error_site .container-component>:first-child {
  margin-top: 0 !important;
}

/***** ajustements de structure pour les pages, composants et liens de menus qui ne sont PAS de type PAGE BUILDER *****/

main div#jmap_sitemap,
div.com-content-category-blog.blog,
div.com-content-article.item-page,
div.com-content-category.category-list,
div.item-page.page-blog-submit,
.page-blog-submit div.edit.item-page,
div.com-users-profile__edit {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 50px 15px 50px 15px;
}

@media (min-width: 1400px) {
  main div#jmap_sitemap,
  div.com-content-category-blog.blog,
  div.com-content-article.item-page,
  div.com-content-category.category-list,
  div.item-page.page-blog-submit,
  .page-blog-submit div.edit.item-page,
  div.com-users-profile__edit {
    max-width: 1320px;
  }
  
}

@media (max-width: 1200px) {
  main div#jmap_sitemap,
  div.com-content-category-blog.blog,
  div.com-content-article.item-page,
  div.com-content-category.category-list,
  div.item-page.page-blog-submit,
  .page-blog-submit div.edit.item-page,
  div.com-users-profile__edit {
    max-width: 1140px;
  }
}

@media (max-width: 992px) {
  main div#jmap_sitemap,
  div.com-content-category-blog.blog,
  div.com-content-article.item-page,
  div.com-content-category.category-list,
  div.item-page.page-blog-submit,
  .page-blog-submit div.edit.item-page,
  div.com-users-profile__edit {
    max-width: 960px;
  }
}

@media (max-width: 768px) {
  main div#jmap_sitemap,
  div.com-content-category-blog.blog,
  div.com-content-article.item-page,
  div.com-content-category.category-list,
  div.item-page.page-blog-submit,
  .page-blog-submit div.edit.item-page,
  div.com-users-profile__edit {
    max-width: 720px;
  }
}

@media (max-width: 576px) {
  main div#jmap_sitemap,
  div.com-content-category-blog.blog,
  div.com-content-article.item-page,
  div.com-content-category.category-list,
  div.item-page.page-blog-submit,
  .page-blog-submit div.edit.item-page,
  div.com-users-profile__edit {
    max-width: 540px;
  }
}

/***** mon espace : ne pas modifier les classes ci-dessous sauf si nécessaire *****/

div.com-users-login,
.page-monespace-login .mod-login,
.page-monespace-login-reset form,
.page-monespace-password-reset form {
  margin: 0 auto !important;
  padding: 50px 15px 50px 15px;
}

@media (max-width: 767px){
  div.com-users-login,
  .page-monespace-login .mod-login,
  .page-monespace-login-reset form,
  .page-monespace-password-reset form {
    width: 90%;
  }
}

@media (min-width: 768px){
  div.com-users-login,
  .page-monespace-login .mod-login,
  .page-monespace-login-reset form,
  .page-monespace-password-reset form {
    width: 60%;
  }
}

@media (min-width: 991px){
  div.com-users-login,
  .page-monespace-login .mod-login,
  .page-monespace-login-reset form,
  .page-monespace-password-reset form {
    width: 50%;
  }
}

@media (min-width: 1199px){
  div.com-users-login,
  .page-monespace-login .mod-login,
  .page-monespace-login-reset form,
  .page-monespace-password-reset form {
    width: 40%;
  }
}

.page-monespace-login .btn-primary {
  background-color: var(--btn-bg);
  color: var(--btncolor);
}

.page-monespace-login .btn-primary:hover {
  background-color: var(--btn-hover-bg);
  color: var(--btn-hover-color);
}

.page-monespace-login-reset legend,
.page-monespace-password-reset legend {
  margin-bottom: 1rem !important;
}

/***** bouton d'édition des pages du page builder : ne pas modifier les classes ci-dessous sauf si nécessaire *****/

#sp-page-builder .sp-pagebuilder-page-edit {
  left: 20px !important;
  right: auto !important;
  z-index: 10 !important;
  background-color: #760b0b !important;
  border: 1px solid #760b0b !important;
  color: #ffffff !important;
  padding: 10px 12px !important;
}

#sp-page-builder .sp-pagebuilder-page-edit:hover {
  background-color: #ffffff !important;
  border: 1px solid #760b0b !important;
  color: #760b0b !important;
}

/***** configuration du menu PC *****/

/* mise en forme des liens du niveau 0 */

.dj-megamenu-modern.dj-megamenu-modern {
    border: solid 1px rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 12px 12px 12px 24px !important;
    backdrop-filter: blur(10px) brightness(0.9);
    gap: 50px;
    display: flex !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.dj-megamenu-modern li a.dj-up_a {
  font-size: 14px !important; /* ajuster ce paramètre en fonction de la taille de police souhaitée */
  font-family: Titillium Web !important; /* ajuster ce paramètre en fonction de la famille de police souhaitée */
  padding: 2px 8px !important; /* ajuster ce paramètre en fonction de l'espacement souhaité entre les liens du menu */
  height: auto !important;
  border-radius: 4px;
}

.dj-megamenu-modern li a.dj-up_a > span {
  height: auto !important;
}

.dj-megamenu-modern .bouton-header {
  padding: 12px;
  border-radius: 4px;
  border: solid 1px rgba(255, 255, 255, 0.6);
}

/* paramètres du menu sticky : ajuster ces paramètres en fonction des couleurs choisies */

/* header normal collé en haut de la page  */
/*header.position-sticky {
  background-color: #00000000 !important;
}*/

/* header sticky (lors du scroll vers le bas) */
header.position-sticky.is-stuck #section-id-1768558151746 {
  background-color: #000 !important; 
  transition: background-color 0.5s ease-in !important;
}

/***** configuration du menu mobile *****/

/** ajustements pour surcharger les paramètres par défaut du module qui gère le menu ***/
#dj-megamenu123offcanvas .dj-offcanvas-top {
  background: transparent !important;
  margin-bottom: -53px !important;
}

#dj-megamenu123mobile .dj-mobile-open-btn:hover,
#dj-megamenu123mobile .dj-mobile-open-btn:focus {
  background-color: rgba(0, 0, 0, 0) !important;
}

body.dj-offcanvas-open .dj-mobile-open-icon {
  background:url("/files/2026/04/03/close_small.svg") center / calc(100% - 20px) auto no-repeat !important;
  background-size: 16px 16px !important;
}

.dj-offcanvas-logo {
  padding: 20px !important;
}

.dj-offcanvas-logo img {
  max-width: 80% !important;
}

#dj-megamenu123offcanvas.dj-offcanvas-light {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(20px) brightness(0.85) !important;
  border: solid 1px rgba(255, 255, 255, 0.15) !important;
  border-radius: 16px !important;
  box-shadow: 4px 0 40px rgba(0, 0, 0, 0.3) !important;
  height: fit-content !important;
  margin: 0 !important;
  top: 105px !important;
  right: 35px !important;
  left: auto !important;
  transform: none !important;
  position: fixed !important;
  padding: 20px;
}

/*** bouton pour ouvrir le menu mobile ***/
/* désactivation de l'icone d'origine */
.dj-mobile-open-btn.dj-fa-0 .dj-mobile-open-icon:before {
  content: "" !important;
}
/* remplacement par l'image SVG + effet liquid glass */
.dj-mobile-open-icon {
  width: 60px !important;
  height: 40px !important;
  padding: 8px !important;
  background: url("/files/2026/04/03/bouton-ouverture-offcanvas.svg") center / calc(100% - 20px) auto no-repeat ;
  border: solid 1px rgba(255, 255, 255, 0.2) ;
  border-radius: 12px !important;
  backdrop-filter: blur(6px) brightness(0.9) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important;
  display: inline-flex !important;
  position: relative !important;
}
/* légère animation au hover */
.dj-mobile-open-btn:hover .dj-mobile-open-icon {
  backdrop-filter: blur(8px) brightness(0.85) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35) !important;
}

/*** bouton pour fermer le menu mobile ***/
/* désactivation de l'icone d'origine */
.dj-fa-0 .dj-offcanvas-close-btn .dj-offcanvas-close-icon:before {
  content: "" !important;
}
/* effet liquid glass sur le conteneur */
/* .dj-offcanvas-close-icon {
  width: 60px !important;
  height: 40px !important;
  position: relative !important;
  display: inline-flex !important;
  cursor: pointer !important;
  margin-right: 16px !important;
  border: solid 1px rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(6px) brightness(0.9) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important;
  top: -70px !important;
  right: -40px !important;
  background: rgba(255, 255, 255, 0.08) !important;
} */
/* mise en forme des 2 barres de la croix */
/* .dj-offcanvas-close-icon::before,
.dj-offcanvas-close-icon::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 18px !important;
  height: 1.5px !important;
  border-radius: 2px !important;
  background: #fff !important;
  transform-origin: center !important;
  transition: transform 0.3s ease !important;
}
.dj-offcanvas-close-icon::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}
.dj-offcanvas-close-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}
.dj-offcanvas-close-btn:hover .dj-offcanvas-close-icon::before,
.dj-offcanvas-close-btn:hover .dj-offcanvas-close-icon::after {
  transform: translate(-50%, -50%) rotate(135deg) !important;
} */

.dj-offcanvas-close-icon {
  display: none !important;
}

/*** mise en forme des liens ***/

ul li.dj-mobileitem>a {
  border-top: none !important;
  font-size: 20px !important; /* ajuster ce paramètre en fonction de la taille de police souhaitée */
  font-family: Titillium Web !important; /* ajuster ce paramètre en fonction de la famille de police souhaitée */
  padding: 20px 25px !important;
  border-bottom: solid 1px rgba(255, 255, 255, 0.12) !important;
}

/* icône pour les liens de menus qui ont des sous menus */
ul.dj-mobile-light li.dj-mobileitem.parent >a span.toggler {
  padding: 10px 25px !important;
}

.dj-fa-0 ul.dj-mobile-light li.dj-mobileitem.parent >a span.toggler:before {
  content: "\f054" !important;
  transition: transform 0.3s ease !important;
}

.dj-fa-0 ul.dj-mobile-light li.dj-mobileitem.parent.active > a span.toggler:before {
  transform: rotate(90deg) !important;
}

/***** menu client front-end : ne pas modifier les classes ci-dessous sauf si nécessaire *****/

/* structure globale */

.box-frontend-menu-client {
  z-index: 100000 !important;
  background-color: #760b0b !important;
}

.box-frontend-menu-client li.metismenu-item::before {
  content: "\f192";
  font-family: "Font Awesome 6 Free";
  font-weight: 500;
  display: inline-block;
  margin-right: 0.5rem;
}

.box-frontend-menu-client .metismenu.mod-menu .metismenu-item {
  font-size: 1rem !important;
  color: #fff !important;
}

.box-frontend-menu-client .metismenu.mod-menu .metismenu-item>a:focus,
.box-frontend-menu-client .metismenu.mod-menu .metismenu-item>button:focus {
  outline-offset: 0px !important;
  outline: 0px solid !important;
}

.box-frontend-menu-client nav {
  margin-top: 0em !important;
  margin-bottom: 0em !important;
}

/* structure mobile */

.box-frontend-menu-client .navbar-toggler::after {
  content: "ADMIN" !important;
  padding-left: 5px !important;
  color: #ffffff !important;
}

.box-frontend-menu-client .navbar-toggler:focus {
  box-shadow: 0 0 0 0 !important;
}

/* ajustements pour les sous menus de niveau 1 */

.box-frontend-menu-client .metismenu.mod-menu .mm-collapse {
  background-color: #760b0b !important;
}

.box-frontend-menu-client .metismenu>li.level-1>ul {
  min-width: 15rem !important;
  color: #ffffff !important;
}

/***** blog natif joomla *****/

/* page qui affiche la liste de tous les articles */

.com-content-category-blog__item.blog-item .item-content .icons .float-end {
  float: none !important;
  margin: 15px 0 15px 0 !important;
}

@media (max-width: 767px) {
  .com-content-category-blog__navigation .com-content-category-blog__counter {
    text-align: center !important;
  }
  .com-content-category-blog__navigation .pagination {
    display: flex !important;
    justify-content: center !important;
  }
}

/* EASY LAYOUT */


.view-category.page-blog-submit{
  background:
    linear-gradient(to top, rgba(0,0,0,0.3), rgba(0,0,0,0.3)),
    url('/files/2026/04/23/fond-use-cases_compr.webp');
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.com-content-category-blog.blog{
  margin-bottom : 200px !important;  
}

.com-content-category-blog__items.blog-items {
  margin-bottom : 150px !important;  
}

.com-content-category-blog.blog .btn-primary {
  background: rgba(255, 255, 255, 0.05) ;
  color: white !important;
  border: solid 1px rgba(255, 255, 255, 0.2) !important;
}

.com-content-category-blog.blog .btn-primary:hover, .com-content-category-blog__item.blog-item h2 a:hover{
  color: rgba(233, 84, 54, 1);
}

.com-content-category-blog__children.cat-children{
      display: none !important;
}


.com-content-category-blog h1{
    color : white;
    margin-top: 150px;
    margin-bottom: 50px;
    font-family: 'Titillium Web' ;
    font-weight: 400;
    line-height: 105%;
    letter-spacing: 3%;
    font-size: 39px;
    width : 50%;
}



@media (max-width: 991.98px) {
  .com-content-category-blog h1{
    width : 100%;
    }
}


.com-content-category-blog h2{
    margin-bottom: 0px;
   font-family: 'Titillium Web' ;
    font-weight: 600;
    line-height: 107%;
    letter-spacing: 2%;
    font-size: 23px;
}


.com-content-category-blog__item .parent-category-name, .view-article .article-lie-bg .mod-articles-category span{
    font-family: 'Anek Devanagari';
    font-weight: 300;
    line-height: 108%;
    letter-spacing: 0;
    font-size: 12px;
    padding: 8px 16px 5px 16px;
    background: rgba(233, 84, 54, 1);
    width: fit-content;
    border-radius: 50px;
}

 .com-content-category-blog__item .pre-categorie{
    font-family: 'Anek Devanagari';
    font-weight: 300;
    line-height: 108%;
    letter-spacing: 0;
    font-size: 12px;
}


.com-content-category-blog__item p{
    font-family: 'Titillium Web';
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 3%;
    font-size: 16px;
}



.com-content-category-blog__item.blog-item{
    background: rgba(255, 255, 255, 0.05);
    border: solid 1px rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    backdrop-filter: blur(10px) brightness(0.9);
    color : white !important;
}

.com-content-category-blog__item.blog-item h2 a {
    color: white;
    font-family: 'Titillium Web' ;
    font-size: 23px;
    font-weight: 600;
    line-height: 105%;
    letter-spacing: 2%;
}

.aligner-verticalement{
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.aligner-end{
    display: flex !important;
    justify-content: end !important;
    flex-direction: column;
    padding : 0px 15px;
}

.padding-bot{
  padding-bottom : 20px !important;
}

.com-content-category-blog__item .readmore a{
    background: rgba(255, 255, 255, 0.05);
    color: white;
    display: flex;
    justify-self: center;
}

.com-content-category-blog__item .readmore{
  margin-bottom : 0px !important;
}

.com-content-category-blog__item .readmore a .icon-chevron-right{
  display: none !important;
}

.com-content-category-blog__item .item-image {
    margin: 0;
  }

@media (max-width: 767.98px) {
  .com-content-category-blog__item .padding-colonne-1 {
    padding: 30px;
  }

  .com-content-category-blog__item .padding-colonne-2 {
    padding: 0px 30px;
  }

  .com-content-category-blog__item .pre-categorie{
    width : 25%;
  }

  .com-content-category-blog__item .categorie{
    width : 75%;
  }
}


/* Navigation */
.com-content-category-blog__counter.counter{
   color: white;
    font-family: 'Anek Devanagari';
    font-size: 18px;
}

.page-link.disabled, .page-link{
    background: rgba(255, 255, 255, 0.05);
    border: solid 1px rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px) brightness(0.9);
}

.page-link{
    color: white;
}

.page-link.disabled{
    color: gray !important;
}

.active>.page-link, .page-link:hover {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border: solid 1px rgba(255, 255, 255, 0.2);
    color : white !important;
}


/* Page ajouter un acticle */
.edit.item-page{
    margin-top: 100px !important;
    margin-bottom: 200px !important;
}

.edit.item-page .btn-primary{
  color: white;
  background : black;
}

.edit.item-page .btn-primary:hover{
  color: black;
  background : white;
  border: solid 1px black;
}


/* Page détaillée d'un article */

.item-page h1{
    font-family: 'Titillium Web';
    font-weight: 400;
    line-height: 105%;
    letter-spacing: 3%;
    font-size: 39px;
}



.item-page .info-use-case{
   margin-bottom: 50px;
}

.com-content-article.item-page .icons .float-end {
  float: none !important;
  margin: 15px 0 15px 0 !important;
}

.item-page.use-cases-single{
    margin-top: 150px;
  /*  margin-bottom: 150px;*/
    background-image: none !important;
}

.view-article .item-page.page-blog-submit{
    padding : 0px !important;
}

.full-width{
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

/*
.gap-colonne{
    margin-bottom: 50px;
    transform: translateY(-100%);
    gap: 10px;
    flex-wrap: nowrap;
    position: relative;
}

*/

.item-page .fst-column{
  background: rgba(236, 230, 218, 1);
  padding: 48px 60px;
}

.item-page .sec-column{
  background: rgba(233, 84, 54, 1);
  padding: 48px 60px;
  color: white;
}

.item-page .thirst-column{
  background: rgba(125, 49, 51, 1);
  padding: 48px 60px;
  color: white;
}


.item-page .num-style .field-entry .field-value {
   font-family: 'Titillium Web' ;
    font-weight: 400;
    line-height: 105%;
    letter-spacing: -4%;
    font-size: 80px;
}



.item-page .titre-style .field-entry .field-value {
   font-family: 'Titillium Web' !important;
    font-weight: 400;
    line-height: 105%;
    letter-spacing: 3%;
    font-size: 39px;
}


.item-page .titre-style .field-entry {
  margin-top: 50px;
  margin-bottom: 50px;
}

/* point pour la list dans la 3eme colonne */
.item-page .thirst-column .fields-container{
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.item-page .thirst-column .fields-container li{
  position: relative;
  padding-left: 25px;
  
}

.item-page .thirst-column .fields-container li:not(:last-child){
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid black;
}

.item-page .thirst-column .fields-container li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  background-image: url(/files/2026/04/23/list-use-cases.svg);
  background-size: contain;
  background-repeat: no-repeat;
}


.layout-blog p, .view-article.layout-blog .thirst-column li span {
  font-family: 'Titillium Web';
  font-size: 18px ;
  font-weight : 400;
}


.item-page .item-image, .item-page .item-image img {
  width : 100% !important;
  height: 250px;
  object-fit: cover;
  margin-bottom : 0px;
}

.item-page .boder-orange {
   color: rgba(233, 84, 54, 1);
    padding: 5px 16px 5px 16px;
    border: 1px solid rgba(233, 84, 54, 1);
    border-radius: 50px;
    width: fit-content;
}

.item-page .parent-category-name{
  margin-bottom : 0px;
}


.item-page .icon-edit-style{
  display: flex;
  justify-content: flex-end; 
  align-items: center; 
}

.item-page .icon-edit-style a{
  color: black;
  font-family: 'Anek Devanagari';
  font-size: 18px ;
}


@media (width >= 768px) and (width <= 1200px){
  .item-page .pre-categorie{
    width : 45%;
  }

  .item-page h1{
    padding-top: 20px;
  }
}

@media (max-width: 767px) {
  .item-page .pre-categorie{
    width : 30%;
  }

  .item-page h1{
    padding-top: 20px;
  }

}


.pagination {
      margin-top: 50px !important;
}

.pagination .previous, .pagination .next{
    background: rgba(0, 0, 0, 0.01);
    border: solid 1px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px) brightness(0.9);
    color: black;
    font-family: 'Anek Devanagari';
    font-size: 18px;
    line-height: 15px;
    padding: 8px 16px;
}

.pagination .previous:hover, .pagination .next:hover{
  background-color: rgba(0, 0, 0, 0.3) !important;
}


/* Article lié an bas chaque article*/

/* Réorganiser des éléments */
.view-article .article-lie-bg .mod-articles-item-content {
  display: flex;
  flex-direction: column;
}

.view-article .article-lie-bg .mod-articles-image { order: 1; }
dl { order: 2; }
.view-article .article-lie-bg .mod-articles-title { order: 3; }
.view-article .article-lie-bg .mod-articles-item-content > p { order: 4; }

.view-article .article-lie-bg .mod-articles-item-content, .view-article .article-lie-bg .mod-articles-item{
  height: 100%;
}


.view-article .article-lie-bg .mod-articles-item-content{
    background: rgba(255, 255, 255, 0.05);
    border: solid 1px rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    backdrop-filter: blur(10px) brightness(0.9);
    color: white !important;
}

.view-article .article-lie-bg .mod-articles-image.item-image img, .view-article .article-lie-bg .mod-articles-image.item-image{
   height : 130px !important;
  border-radius: 12px 12px 0px 0px;
}

.view-article .article-lie-bg .mod-articles-item-content .list-unstyled{
    padding: 24px 48px 0px 48px;
    margin-bottom: unset;
}

.view-article .article-lie-bg .mod-articles-item-content .mod-articles-title{
    padding: 12px 48px 12px 48px;
}

.view-article .article-lie-bg .mod-articles-item-content p{
  padding: 12px 48px 24px 48px;
}

.view-article .article-lie-bg {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(/files/2026/04/27/fond-article-lie1.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 120px 0 300px 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}


.view-article .article-lie-bg div{
   max-width: 1200px;
    margin: 0 auto;
}

.view-article .article-lie-bg h2{
    font-family: Titillium Web;
    font-weight: 300;
    font-size: 30px;
    line-height: 32.3px;
    letter-spacing: 2%;
    color: white;
    padding-bottom: 50px;
}

.view-article .article-lie-bg .mod-list li a{
    font-family: Titillium Web;
    font-weight: 600;
    font-size: 23px;
    line-height: 107%;
    letter-spacing: 2%;
    color: white;
}

.view-article .article-lie-bg .icon-folder-open::before{
  content: "Powered by";
  font-family: Anek Devanagari;
  font-weight: 300;
  font-size: 12px;
  line-height: 108%;
  letter-spacing: 0%;
  color:white;
  margin-right : 5px;
}


.view-article .article-lie-bg .mod-articles-category{
  color: white;
}

.view-article .article-lie-bg .icon-fw{
  width :unset !important;
}

.view-article .article-lie-bg .pagination .previous, .view-article .article-lie-bg .pagination .next {
    background: rgba(0, 0, 0, 0.01);
    border: solid 1px rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    backdrop-filter: blur(10px) brightness(0.9);
    color: white;
    font-family: 'Anek Devanagari';
    font-size: 18px;
    line-height: 15px;
    padding: 8px 16px;
}


/* formulaire qui permet d'ajouter un article depuis le front-end : ne pas modifier les classes ci-dessous sauf si nécessaire */

.page-blog-submit div.control-group label#jform_images_image_intro_caption-lbl,
.page-blog-submit input#jform_images_image_intro_caption,
.page-blog-submit div.control-group label#jform_images_image_fulltext_caption-lbl,
.page-blog-submit input#jform_images_image_fulltext_caption,
.page-blog-submit label#jform_images_float_intro-lbl,
.page-blog-submit input#jform_images_float_intro,
.page-blog-submit label#jform_images_float_fulltext-lbl,
.page-blog-submit input#jform_images_float_fulltext,
.page-blog-submit div.control-label label#jform_images_image_intro_alt_empty-lbl,
.page-blog-submit div.control-label label#jform_images_image_fulltext_alt_empty-lbl,
.page-blog-submit div.form-check.form-check-inline input#jform_images_image_intro_alt_empty,
.page-blog-submit div.form-check.form-check-inline input#jform_images_image_fulltext_alt_empty,
.page-blog-submit div.control-group #jform_images_image_intro_alt_empty-desc,
.page-blog-submit div.control-group #jform_images_image_fulltext_alt_empty-desc,
.page-blog-submit label#jform_urls_urla-lbl,
.page-blog-submit input#jform_urls_urla,
.page-blog-submit label#jform_urls_urlb-lbl,
.page-blog-submit input#jform_urls_urlb,
.page-blog-submit label#jform_urls_urlc-lbl,
.page-blog-submit input#jform_urls_urlc,
.page-blog-submit label#jform_urls_urlatext-lbl,
.page-blog-submit input#jform_urls_urlatext,
.page-blog-submit label#jform_urls_urlbtext-lbl,
.page-blog-submit input#jform_urls_urlbtext,
.page-blog-submit label#jform_urls_urlctext-lbl,
.page-blog-submit input#jform_urls_urlctext,
.page-blog-submit label#jform_featured-lbl,
.page-blog-submit select#jform_featured,
.page-blog-submit label#jform_created_by_alias-lbl,
.page-blog-submit input#jform_created_by_alias,
.page-blog-submit label#jform_access-lbl,
.page-blog-submit select#jform_access,
.page-blog-submit label#jform_note-lbl,
.page-blog-submit input#jform_note,
.page-blog-submit label#jform_version_note-lbl,
.page-blog-submit input#jform_version_note {
    display: none !important;
}

/***** pied de page *****/

.tous-les-articles .container-footer {
    background-color: transparent !important;
}

.container-footer .grid-child {
  max-width: 100% !important;
  display: block !important;
  padding: 0 !important;
}

.container-footer {
  margin-top: -198px;
}

.back-to-top-link {
  border-radius: 100px !important;
  color: #000000 !important; /* ajuster ce paramètre en fonction des couleurs choisies */
  background-color: #ffffff !important; /* ajuster ce paramètre en fonction des couleurs choisies */
  border: 1px solid #000000  !important; /* ajuster ce paramètre en fonction des couleurs choisies */
  padding: .5em !important; /* ajuster ce paramètre si nécessaire*/
}

.back-to-top-link:hover,
.back-to-top-link:focus {
  color: #ffffff !important; /* ajuster ce paramètre en fonction des couleurs choisies */
  background-color: #000000 !important; /* ajuster ce paramètre en fonction des couleurs choisies */
  border: 1px solid #f10000  !important; /* ajuster ce paramètre en fonction des couleurs choisies */
}