:root {
    --cassiopeia-color-primary: #f0b442;
    --cassiopeia-color-hover: #f0b442;
    --cassiopeia-color-link: #0026FF;
    --go-color-menu-hamburger:red;
    --taille-menu-hamburger:960px;
    --body-bg:#345682 ;
    --body-color:#FFFFFF;

    }

    body{
        font-size: var(--body-font-size);
    }

    p{
        font-size: var(--body-font-size);
    }

    a  {
        color:var(--cassiopeia-color-hover); 
    }

    a:hover  {
        color:var(--cassiopeia-color-hover); 
    }

    h1,h2{
        font-family: "Dancing script"; /* Exemple de police */
    }



    /* -- pour afficher les erreurs bootstrap -- */ 
    .alert-message{
      background-color: var( --cassiopeia-color-primary);
      color: var(--body-bg);
    }

    .form-control-feedback{
      color:var(  --cassiopeia-color-primary);
    }


  
/* -- inclusion des polices --*/ 

    @font-face {
        font-family: 'Dancing Script';
        src: url('fonts/DancingScript-Regular.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
    }
    
    @font-face {
        font-family: 'Dancing Script';
        src: url('fonts/DancingScript-Bold.ttf') format('truetype');
        font-weight: 700;
        font-style: normal;
    }

    ._neyruz-titre-page {
        font-family: "Dancing script"; /* Exemple de police */
        font-size: 36pt; /* Exemple de taille de police */
    }

    ._neyruz-sous-titre-page {
        font-family: "Dancing script"; /* Exemple de police */
        font-size: 28pt; /* Exemple de taille de police */
        line-height: 1; 
    }

    ._neyruz-titre-texte{
        font-family: arial, helvetica, sans-serif;
         font-size: 18pt;
         font-weight: bold;

    }
    /* -- empecher les recouvrement dans les petites largeurs -- */ 
      @media (min-width: 8700px) {
        ._neyruz-titre-texte{
                   line-height: 0.5; 
        }
      }

    .nav-item{
        font-weight: bold;
        color: var( --body-bg);
    }

    
/** --------------------------------- OFF MENU --------------------------------------------------------*/

    .offcanvas.show {
        background-color: var(--cassiopeia-color-primary);
        background-image: linear-gradient(135deg,var(--cassiopeia-color-primary),var(--cassiopeia-color-hover));
      }


      @media (min-width: 8700px) {
        .offcanvas-start {
          width: 100%;
        }
      }
      @media (max-width: 8699.98px) {
        .offcanvas .metismenu.mod-menu .metismenu-item > ul {
          position: relative;
          width: 100%;
          margin-top: 1rem;
        }
        .offcanvas .metismenu.mod-menu .mm-collapse {
          background-color: transparent;
        }
        .offcanvas .metismenu.mod-menu .metismenu-item > a {
          color: var(--body-color);
        }

        .mod-menu{
            flex-direction:column!important
            }
      }

      .navbar-expand-xxxl {
        max-width: 2600px!important
    }
    
      .offcanvas-header > *:only-child {
        margin-left: auto;
      }
/** --------------------------------- AJOUT CLASSE XXXL --------------------------------------------------------*/
@media (width>=8700px) {
    .navbar-expand-xxxl {
      flex-wrap:nowrap;
      justify-content:flex-start
    }
    .navbar-expand-xxxl .navbar-nav {
      flex-direction:row
    }
    .navbar-expand-xxxl .navbar-nav .dropdown-menu {
      position:absolute
    }
    .navbar-expand-xxxl .navbar-nav .nav-link {
      padding-right:var(--navbar-nav-link-padding-x);
      padding-left:var(--navbar-nav-link-padding-x)
    }
    .navbar-expand-xxxl .navbar-nav-scroll {
      overflow:visible
    }
    .navbar-expand-xxxl .navbar-collapse {
      flex-basis:auto;
      display:flex!important
    }
    .navbar-expand-xxxl .navbar-toggler {
      display:none
    }
    .navbar-expand-xxxl .offcanvas {
      z-index:auto;
      flex-grow:1;
      transition:none;
      position:static;
      visibility:visible!important;
      background-color:#0000!important;
      border:0!important;
      width:auto!important;
      height:auto!important;
      transform:none!important
    }
    .navbar-expand-xxxl .offcanvas .offcanvas-header {
      display:none
    }
    .navbar-expand-xxxl .offcanvas .offcanvas-body {
      flex-grow:0;
      padding:0;
      display:flex;
      overflow-y:visible
    }
  }

/** --------------------------------- FIN OFF MENU --------------------------------------------------------*/

.top-img{
    position: fixed;
    top: 10px; /* Positionné à 50px du haut de la fenêtre */
    left: 20px; /* Positionné à 50px de la gauche de la fenêtre */
  
  }

  .container-header{
    margin-bottom:70px;
  }

  .container-header a{
      font-size: 18px;
  }

  .container-nav{
    width:100%;
    margin-left : auto;
    margin-right : 3px;
    display : flex; 
  }

@media (width <= 991.98px) {
    .container-header {
      position: sticky !important;
    }
  }

  @media (max-width: 900px) {
    .top-img{
        max-width: 250px; /* Limite la largeur de l'image à 300px sur les petits écrans */
        height: auto; /* Toujours important pour conserver les proportions */
        left:5px;
    }
    .container-header{
        margin-bottom:20px;
    }
  }


  @media (max-width: 300px) {
    .top-img img{
        display: none;
    }

  }

  .home-bienvenue{
    border:none;
  }

  
  .home-flash-info{

        border: red 2px solid !important;
       	background-color: var(--cassiopeia-color-primary);
        color: var(--body-bg);
        margin-top:30px !important;

  }
  
  .card{
    border:none; 
  }

  .card-header{
    border:none;
  }

  /* -- actualites -- */ 


.item-content{
    background-color: var(--cassiopeia-color-primary) ; 
}

.boxed .blog-item {
	background-color: var(--cassiopeia-color-primary);
    color: var( --body-bg); 
}

.item-image{
text-align: center;
}

.blog-item h2{
    font-size: 24px;

}


/* -- Footer -- */ 

#mod-custom116{
  width:100%;
  color: var( --body-bg); 
}


.footer-container {
  display: flex;
}

/* Style pour les écrans de smartphone (largeur maximale de 768px par exemple) */
@media (max-width: 768px) {
  .footer-container  {
      flex-direction: column-reverse; /* on affiche les boutons en haut sur smartphone*/
  }
  .footer-container>div{
    padding-bottom: 40px;;
  }
}


.mon-bouton {
  display: inline-flex; /* Permet d'aligner l'icône et le texte */
  align-items: center; /* Centre verticalement l'icône et le texte */
  justify-content: center; /* Centre horizontalement l'icône et le texte */
  padding: 10px 20px; /* Marge intérieure (haut/bas, gauche/droite) */
  font-size: 16px;
  font-weight: bold;
  color: white!important; /* Couleur du texte */
  background-color: var(--body-bg);
  border: none; /* Supprime la bordure par défaut */
  border-radius: 5px; /* Bords arrondis */
  cursor: pointer; /* Change le curseur au survol */
  text-decoration: none; /* Supprime le soulignement des liens */
  transition: background-color 0.3s ease; /* Animation de la couleur de fond */
  width:250px;
  margin-bottom: 10px;
}

.mon-bouton i {
  margin-right: 8px; /* Espacement entre l'icône et le texte */
  font-size: 1.2em; /* Taille de l'icône */
}

.mon-bouton a{
  color: white; /* Couleur du texte */
}

.mon-bouton:hover {
  background-color: #0056b3; /* Couleur de fond au survol */
}

.mon-bouton:focus {
  outline: none; /* Supprime la bordure de focus par défaut */
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); /* Ajoute une ombre de focus stylisée */
}

.btn-clair {
  background-color: var( --cassiopeia-color-primary);
}

/* -- nouveautes -- */ 
.carousel-new-module{
  border: none;
}

/* -- contact -- */ 

  .com-contact__container {
    /* -- supprimer lea marge sur lesinfos de contatc --- */ 
    grid-gap: 0;
  }

.page-header h1:has(.contact-name) {
    /* -- marge uniquement sur le h1 parent de contact-name --- */ 
  margin-bottom: -4px;
}

.contact-webpage a{
  color: var(--cassiopeia-color-primary);
}

.form-control{
    color:var(--body-bg);
}

.contact-name{
    all:unset;
    font-family : initial; /* police de base */
    font-size: 18px;  /* mettre en evidence quand meme */
    font-weight: normal; /* ne pas hériter du h1 */
}

.btn-ludo{
    width:170px;
}

.icagenda-ludo .card-header{
    font-family: "Dancing script"; /* Exemple de police */
    font-size: 28pt; /* Exemple de taille de police */
}

.ludo-pv div, .ludo-pv a{
    padding:5px;
    margin-bottom: 2px;
    margin-right: 60px;
    background-color:var(--cassiopeia-color-primary);
    color:var(--body-bg);
    font-size: 18px;
    
}

/* -- agenda ludothecaires -- */ 
.default_eventlist{
    padding :5px;
    border : 1px solid var(--cassiopeia-color-primary);
}