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

/*
:root {

    --cassiopeia-color-primary: #00ff00;
    --cassiopeia-color-link: #0000ff;
    --cassiopeia-color-hover: #ff0000;

    --cassiopeia-font-family-body: "Roboto", sans-serif;
    --cassiopeia-font-family-headings: "Roboto", sans-serif;
    --cassiopeia-font-weight-headings: 700;
    --cassiopeia-font-weight-normal: 400;

    --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: 2rem;
    --body-font-weight: 400;
    --body-line-height: 1.5;
    --body-color: #383838;
    --body-bg: #efefef;
    
}
*/


/* Use font on the page: On Google you can also find the CSS instruction for using the font. If you put this in the body element then the font will be used on the whole website. */

/*
body {
    font-family: 'Georama', sans-serif;
}
*/
/* The page header of Cassiopeia has the class "header" so you control it with .header */
/*
.header {
    background: rgb(2, 0, 36);
    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;
}


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

.metismenu.mod-menu .mm-collapse {
    background: #475BAF;
}

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

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

/* 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: 4px 2px 4px 0px rgba(87, 87, 87, 0.15);
    -webkit-box-shadow: 4px 2px 4px 0px rgba(87, 87, 87, 0.15);
    -moz-box-shadow: 4px 2px 4px 0px rgba(87, 87, 87, 0.15);
}

/* 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;
}


/* Headings are html elements, the main heading is an h1, then comes h2, h3, h4 and so on. You control an html element by simply writing the name in front of it */

h1 {
    text-shadow: 2px 2px 8px rgba(150, 150, 150, 1);
    color: rgb(7, 9, 109);
}


  
h2, .h2 {
  font-size: calc(0.45rem + 0.7vw);
  /*text-shadow: 2px 2px 4px rgb(148, 155, 194);*/
  color: rgb(7, 9, 109);
}
h4, {
  
  /*text-shadow: 2px 2px 4px rgb(148, 155, 194);*/
  color: rgb(7, 9, 109);
}
/* In Joomla most buttons have the class btn-primary - in the element inspector you can check if the button you want to color really has this color.
*/

.btn-primary {
    background: rgb(83, 61, 134);
}

/* If you want to color something, only if you move the mouse over it then write :hover after it
*/

.btn-primary:hover {
    background: rgb(83, 61, 134);
}

/* In Joomla all article images have the class item-image, if you want to control only a specific image, then you have to give the image inside the article its own CSS class.
.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(2, 0, 36);
    background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(119, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
*/




/*menu horizontal en footer*/



/* Force l'UL à se comporter en ligne */
.container-footer .mod-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex !important;      /* force l'affichage horizontal */
  flex-direction: row !important;/* garantit l'orientation en ligne */
  justify-content: center !important;       /* centre les boutons */
  gap: 15px;                     /* espace entre les boutons */
  margin-left: auto !important;
  margin-right: auto !important;
  /* Encadrer le menu du footer avec un liseret blanc arrondi */
  
  border: 1px solid #a875eb;       /* liseret blanc tout autour */
  border-radius: 50px;          /* arrondi fort à gauche et à droite */
  padding: 0.5rem 1rem;         /* espace intérieur pour respirer */
  display: inline-block;        /* le menu prend la largeur de son contenu */
  
  }


/* Style des liens en boutons */
.container-footer .mod-menu li a {
  display: inline-block;
  padding: 0.2rem 0.6rem;   /* moins de padding = boutons plus petits */
  background-color: #0073e6;
  color: #fff;
  font-size: 0.8rem;       /* par défaut ~14px, tu peux descendre à 0.8rem (~13px) */
  font-weight: 300;
  /*padding: 0.6rem 1.2rem;*/
  border-radius: 50px;           /* bouton arrondi */
  background: linear-gradient(90deg, #0d6efd, #0b5ed7);
  border: none;


  text-decoration: none;
 /* border-radius: 8px;*/
  /*font-weight: bold;*/
  /*transition: background 0.3s;*/
}

.container-footer .mod-menu li a:hover {
  /*background-color: #005bb5;*/
  background: linear-gradient(90deg, #0b5ed7, #0a58ca);
}


  
/* fin dumenu footer en horizontal*/

/*reglage bannier accueil*/
/* ============================
   Gestion responsive de la bannière d'accueil (21/9)
   ============================ */

/* 1. Mobiles (<768px) : bannière masquée */
@media (max-width: 767px) {
  .container-banner {
    display: none !important;
  }
}

/* 2. Tablettes (768px à 1679px) */
@media (min-width: 768px) and (max-width: 1679px) {
  .container-banner .banner-overlay {
    /* Hauteur adaptée au ratio 21/9 /
    width: 100%;
    padding-top: 42.85%; /* 9/21 ≈ 0.4285 → hauteur proportionnelle */

    /* --- Option immersive (rognage) ---*/
    background-size: cover !important;
    background-position: left center !important; /* sujet centré */
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
   
                                    /* Autres options possibles :
                                                                     
                                      background-position: left center important;   // garder la gauche visible
                                      background-position: right center important;  // garder la droite visible
                                      background-position: bottom center important;  // garder le bas visible
                                      background-position: top center important;  // garder le haut visible*/
    
    /* --- Option non immersive (image entière) --- 
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    */

    position: relative; /* nécessaire pour centrer le texte */
  }

  .container-banner .banner-overlay .overlay {
    position: absolute;   /* centrage vertical et horizontal */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: transparent !important;
    padding: 1em;
  }
}

/* 3. Desktop large (≥1680px) */
@media (min-width: 1680px) {
  .container-banner .banner-overlay {
    /* Hauteur adaptée au ratio 21/9 
    width: 100%;
    padding-top: 42.85%; /* 9/21 ≈ 0.4285 → hauteur proportionnelle */

    /* --- Option immersive (rognage) ---*/
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
   

    /* --- Option non immersive (image entière) --- 
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;*/

    position: relative;
  }

  .container-banner .banner-overlay .overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: transparent !important;
    padding: 1em;
  }
}

/* ============================
   Notes pratiques sur les ratios
   ============================
   - 16/9 → padding-top: 56.25%
   - 21/9 → padding-top: 42.85%
   - 4/3 → padding-top: 75%
   - cover → pas de bandes mais rognage
   - contain + padding-top → image entière, pas de bandes, hauteur fixe au ratio
*/




/* fin de gestion banniere d'accueuil*/


/* initial


.card-header {
  background-color: #e9f4fc;
  color: #28057a;
  font-weight: light;
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  font-size:larger ;
  font-style:normal;
 }
 */
 .card-header {
    font-weight: light;
    background-color: #eaf6ff;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-size:larger ;
    font-style:normal;
 }


 .blog .boxed {
    border: 1px solid #0077cc; /* couleur et épaisseur à ton goût */
    padding: 10px 10px 10px 10px;             /* optionnel, pour espacer */
    border-radius: 3px;            /* optionnel */
    margin-block: 20px;
}


/* diminution du trait en haut d'article blog de categorie*/

.boxed .blog-item {
  box-shadow: 0 0 2px #3339421a, 0 2px 5px #33394214, 0 5px 15px #33394214, inset 0 1px 0 var(--cassiopeia-color-primary);
  background-color: #fff;
}


/* decalage des images d'intro d'articles (CD, Interviews....) dans les blog de catégorie d'article*/
.boxed .blog-item .item-image {
  margin-top: 20px;
  margin-left: 20px;
  }

.blog .items-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem; /* espace entre colonnes */
}

.blog .item-column {
    flex: 1 1 calc(50% - 1rem); /* 2 colonnes égales */
    box-sizing: border-box;
}