/* Fichier css développé sur la base de: https://coolcat-creations.com/en/blog/customize-your-cassiopeia-template */

/* Import font from Google - Go to fonts.google.com, select a font and look for the import command */

 @import url('https://fonts.googleapis.com/css2?family=Geologica:wght@100&display=swap'); 


:root {

    --cassiopeia-color-primary: #ffffff;
    --cassiopeia-color-link: #1a91bc;
    --cassiopeia-color-hover: #ff0000;

    --cassiopeia-font-family-body: "Geologica", sans-serif;
    --cassiopeia-font-family-headings: "Geologica", sans-serif; 
    --cassiopeia-font-weight-headings: 700;
    --cassiopeia-font-weight-normal: 400;
        
    --cod-bleu: #1B91BD; 
    --cod-orange: #EB8E39;
    --cod-vert: #64B444;
  
    --blue: #0d6efd;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #d63384;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #198754;
    --teal: #20c997;
    --cyan: #0dcaf0;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --primary: #0d6efd;
    --secondary: #6c757d;
    --success: #198754;
    --info: #0dcaf0;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #212529;
    --primary-rgb: 13, 110, 253;
    --secondary-rgb: 108, 117, 125;
    --success-rgb: 25, 135, 84;
    --info-rgb: 13, 202, 240;
    --warning-rgb: 255, 193, 7;
    --danger-rgb: 220, 53, 69;
    --light-rgb: 248, 249, 250;
    --dark-rgb: 33, 37, 41;
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;
    --body-color-rgb: 33, 37, 41;
    --body-bg-rgb: 255, 255, 255;
    --font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --body-font-family: var(--cassiopeia-font-family-body);
    --body-font-size: 1.2rem;
    --body-font-weight: 400;
    --body-line-height: 1.5;
    --body-color: #383838;
    --body-bg: #efefef;

}

/* Utiliser la police sur la page : Sur Google, vous pouvez également trouver les instructions CSS pour utiliser la police. Si vous le mettez dans l’élément body, la police sera utilisée sur l’ensemble du site Web. */

.body {
    font-family: 'Geologica', sans-serif;
}

/* The page header of Cassiopeia has the class "header" so you control it with .header */

.header {
    background: rgb(255, 255, 255);
    //background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(119, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
}


/* Smaller banner */
.container-banner .banner-overlay {
    height: 40vh;
}

/* DB topbar */
.container-topbar {
  background: rgb(100, 100, 100);
  font-size: 1.0rem ;
  font-weight: 400;
  height: 4vh px;
}

/* Color the dropdown menu in the menu with the class .metismenu.mod-menu .mm-collapse */

.metismenu.mod-menu .mm-collapse {
    background: rgb(235, 143, 56);
}

/* DB Gestion de l'affichage du texte du menu */
.container-header .mod-menu {
  color: var(--cod-orange);
  font-size: 1.4rem ;
  flex: 1 0 100%;
  margin: 0;
  padding: 0;
  list-style:none
}

.metismenu.mod-menu .metismenu-item {
    flex-wrap: wrap;
    align-items: center;
    padding: 0.5em 0.5em;
    font-size: 1.4rem;
    //font-weight: 800;
    line-height: 1.5em;
    display: flex;
}

/* The links in the dropdown menu you have to adress them individually */

.metismenu.mod-menu .mm-collapse .metismenu-item a {
    color: #ffffff;
}

/* DB Gestion de l'affichage des article */

.com-content-article {
  background-color: #ffffff ;
  padding: 25px 25px 75px 25px;
  border-radius: 10px 10px 10px 10px;
}


.com-content-article__body {
  background-color: #ffffff ;
  //padding: 25px 25px 75px 25px;
  //border-radius: 0px 0px 10px 10px;
}

/* Modules have the class card, so you control them with .card - if you want to control only a specific module, you can give the module its own CSS class in the settings and then control it with that */

.card {
    box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
}

/* Modules are on different module positions in the Cassiopeia template then the modules get in addition to card also the position as class name, for example main-top - so if you want to change all modules to main top you take .main-top.card */

.main-top.card {
    background: #e1e9f5;
}


/* Les titres sont des éléments HTML, le titre principal est un h1, puis viennent h2, h3, h4 et ainsi de suite. Vous contrôlez un élément HTML en écrivant simplement le nom devant celui-ci */

.h1 {
   color: var(--cod-bleu);
   background-color: #ffffff;
   margin-bottom: 0rem;
   padding: 250px 25px 50px 25px;
   border-radius: 10px 10px 0px 0px;
} 



/* Dans Joomla, la plupart des boutons ont la classe btn-primary - dans l'inspecteur d'éléments, vous pouvez vérifier si le bouton que vous voulez colorier a vraiment cette couleur */

/* DB Gestion des boutons */
.btn-primary {
    background: rgba(101, 180, 68, 1);
}

/* Si vous voulez colorer quelque chose, seulement si vous déplacez la souris dessus, alors écrivez : survolez après */

.btn-primary:hover {
    background: rgba(235, 143, 56, 1);
}

/* Dans Joomla, toutes les images d'articles ont la classe item-image, si vous souhaitez contrôler uniquement une image spécifique, vous devez alors donner à l'image à l'intérieur de l'article sa propre classe CSS.
*/

/*
.item-image {
    border: 2px solid #ff0000;
}*/


/*If you run into icons on the website, you can color them individually*/
.icon-user {
    color: #403678;
}

/* or you color all icons with this special statement*/

.fa, .fas, [class*=" icon-"], [class^="icon-"] {
    color: #403678;
}

/* The page footer of Cassiopeia has the class "footer" so you control it with .footer */

.footer {
    background: rgb(28, 145, 189);
}

/* DB Gestion de l'affichage des articles en blog*/
.boxed .blog-item {
    box-shadow: 0 0 2px #3339421a,0 0px 5px #33394214,0 5px 15px #33394214,inset 0 3px 0 var(--cassiopeia-color-primary);
    background-color: #ffffff ;
    border-radius: 10px 10px 10px 10px;
}

/* DB Gestion de l'affichage des liens dans les blogs */
a.blog-lien:link, a.blog-lien:visited, a.mod-articles-category-title:link, a.mod-articles-category-title:visited  {
  color: var(--cod-bleu);
  text-decoration: none;
}

/*souri sur le lien */
a.blog-lien:hover, a.mod-articles-category-title:hover {
  color: var(--cod-orange);
  text-decoration: none;
}

/* DB Gestion de l'affichage des liens dans les pages */
a.page-lien:link, a.page-lien:visited {
  color: var(--cod-bleu);
  text-decoration: none;
}

/*souri sur le lien */
a.page-lien:hover {
  color: var(--cod-orange);
}

.left .image-pochette {
    margin-top: 0px;
    max-width: 200px;
    height: 200px;
    object-fit: fit;

}

/* DB Gestion de l'image dans un article */
.image-article {
  float: right;
  padding: 25px;
  margin-left: 20px;
}

/*  DB  */
.field-label {
  color: var(--cod-bleu) ;
}

.materiel-champ {
 color: var(--cod-bleu) ;
} 


.left .item-image {
  float: right;
   width: 100%;
  
}


/* DB Gestion de l'affichage en blog */
/* Gestion de l'affichage du titre dans les articles */

.page-header {
   background-color: #ffffff;
   margin-bottom: 0rem;
   padding: 25px 25px 50px 0px;
   border-radius: 10px 10px 0px 0px;
}

/* DB Gestion des pages utilisants le module Weblinks */

.com-weblinks-categories {
  background-color: rgb(255, 255, 255);
  padding: 25px 25px 50px 25px;
  border-radius: 10px 10px 10px 10px;
}
.com-content-categories__item {
  border: 0px;
  text-decoration: none;
}

.weblink-category {
  background-color:  rgb(255, 255, 255);
  padding: 25px 25px 50px 25px;
  border-radius: 10px 10px 10px 10px;
}

.category-desc {
  padding: 25px 0px 50px 0px;
  
}

.w-100 {
  text-decoration: none;
  background-color: var(--body-bg) ;
  padding: 5px 5px 0px 5px;
}


.com-weklinks-titre {
    padding: 250px 250px 50px 25px;
}

.com-weklinks-a {
    text-decoration: none;
}

.list-group-item {
  background-color: rgb(255, 255, 255);
  
}

/* DB Gestion de la page de contact */
.com-contact {
  background-color: rgb(255, 255, 255);
  padding: 25px 25px 75px 25px;
  border-radius: 10px 10px 10px 10px;
}