/* Import font from Google - Go to fonts.google.com, select a font and look for the import command */ 
@import ur1('https: //fonts.googleapis.com/css2?family=Georama:wght@100&display=swap');
/* Use the imported 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 */

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

// change les couleurs par défaut de cassiopeia
/*
:root {
  --cassiopeia-color-primary: hsl(120deg, 90%, 20%);
  --cassiopeia-color-link: hsl(120deg, 32%, 40%);
  --cassiopeia-color-hover: hsl(242deg, 30%, 36%);
}
*/

/* Permet de modifier en même temps plusieurs elements de cassiopeia
.colors1 {
--website-color-primary: 37, 143, 167;
--website-color-hover: 242, 48, 48;
--cassiopeia-color-primary:rgba(var(--website-color-primary),o.
--cassiopeia-color-hover:rgb(var(--website-color-hover));
--cassiopeia-color-link: rgb(var (--website-color-primary));
  }
*/


footer div.mod-footer { display: flex;
	flex: 1 1 0%; flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

@media (min-width: 992px) {
	footer div.mod-footer {
		flex-direction: row;
  }
  	footer div.mod-footer {
		flex-direction: row;
  }
}

.footer {
   margin: 0px 0px 0px 0px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
   height: 12vh;
}

.sidebar-left.card {
  flex-basis: content;
  max-width: 100;
  color: white;
  background: darkgreen;
}

/*
.card {
  flex-basis: 100;
  max-width: 100;
  color: red;
  background: green;
}

.sidebar-left {
  flex-basis: 100;
  max-width: 100;
  color: red;
  background: green;
}
*/

/*
.container-sidebar-left {
  background: darkgreen;
}
*/

// Liste des partenaires avec 20% seulement
.partenaires-left-20 {
  flex-basis: 10%;
  max-width: 10%;
//  color: red;
  background: blue;
}

.container-bottom-a {
  margin: 0;
  color: white;
  background: darkgreen; 
}


// permet la gestion des carrousels en php sans composant externe
.carousel {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  /* Empêche le défilement vertical */
  scroll-behavior: smooth;
  /* Rend le défilement plus fluide */
  -webkit-overflow-scrolling: touch;
  /* Active le défilement tactile sur iOS */
}

.carousel-item {
  flex: 0 0 33.33%;
  /* Donne une largeur de 33.33% à chaque élément */
  scroll-snap-align: center;
  /* Aligne chaque élément au centre de la vue */
}

.carousel-item img {
  max-width: 100%;
  /* Empêche les images de dépasser leur conteneur */
  height: auto;
  /* Garde le ratio hauteur/largeur */
}

/* Carte Google Responsive 
.carte-responsive {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; 
	height: 0; 
	overflow: hidden;
}
 
.carte-responsive iframe,
.carte-responsive object,
.carte-responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
*/

/*
.container-sidebar-left, .container-sidebar-right {
    -webkit-box-flex: 0;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    order: 1;
    width:calc(100% - 1em)
}

@media (min-width: 768px) {
    .container-sidebar-left, .container-sidebar-right {
        -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
        order: 0;
        width:calc(15% - 1em)
    }
}
*/

/*
.metismenu.mod-menu .metismenu-item {
font-size: 0.9rem !important;
// font-weight: bold; !important;
}
*/


/* Gestion des colones concernant sidebar-left, main-top, main-bottom, sidebar-right */
body.wrapper-fluid .site-grid {
    grid-gap: 0 2em;
    grid-template-columns:[full-start] minmax(0, 1fr) [main-start] minmax(0, 15%) minmax(0, 35%) minmax(0, 35%) minmax(0, 15%) [main-end] minmax(0, 1fr) [full-end]
}

/* Gestion des colones concernant sidebar-left, main-top, main-bottom, sidebar-right */
@supports (display: grid) {
    .site-grid {
        grid-gap: 0 1em;
        display: grid;
        grid-template-areas: ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". comp comp comp comp ." ". side-r side-r side-r side-r ." ". side-l side-l side-l side-l ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b .";
        grid-template-columns: [full-start] minmax(0, 1fr) [main-start] minmax(0, 14.875rem) minmax(0, 24.875rem) minmax(0, 24.875rem) minmax(0, 14.875rem) [main-end] minmax(0, 1fr) [full-end]
    }

    .site-grid > [class * =" container-"], .site-grid > [class^=container-] {
        -webkit-column-gap: 1em;
        -moz-column-gap: 1em;
        column-gap: 1em;
        max-width: none;
        width:100%
    }

    .site-grid > .full-width {
        grid-column:full-start/full-end
    }

    @media (min-width: 992px) {
        .site-grid {
            grid-template-areas: ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". side-l comp comp side-r ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b ."
        }
    }
}


/* Gestion du bouton détail et tarifs */
a.boutondetail {
// display: block;
display: inline-block;
margin: 0 auto;
text-align: center;
width: fit-content;
text-decoration: none;
padding: 10px 30px;
background-color: green; 
color: white;
border: 1px solid gray;
border-style:inset;
border-radius: 20px;
border: 2px solid #46a28d;
}
a.boutondetail:hover {
background-color: yellow;
color:red;
}

/* Utilisé pour les fields joomla */
#mes-fields {
  border: 1px solid #ccc;
  padding: 10px;
}

.table-container {
  margin: auto;
  width: 50%;
}

table {
  border-collapse: collapse;
  margin: auto;
  width: 100%;
}

th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #ddd;
  font-weight: bold;
  text-align: center;
}

td.align-left {
  text-align: left;
}

td.align-right {
  text-align: right;
}