@charset "UTF-8";
/* ====== LE PRINCIPE
Chaque partie du template est gérée par un partiel chargé par les @import ci-dessous.

Au début de chaque partiel, des variables permettent de définir ses personnalisations.
Ces variables avec un nom explicite peuvent contenir :
- null : la propriété du template de base ne sera pas surchargée.
- valeur : argument affecté à la propriété
- none : argument affecté à la propriété pour annuler la valeur par défaut
- true/false : pour charger le CSS nécessaire

*/
/* mq-min($map)
   ----------------------------------------
   $map : map sous la forme $xxx:( "":(color:blue),"md":(color:red) );
   les clés pour la map $xxx sont les mêmes que $grid-breakpoints ou vide pour une règle générale
   Utilisation : 
	.foo {@include mq( ( "":(color:blue),"md":(color:red) );}
   Retour : 
	.foo { color: blue; }
	@media (min-width: 768px) { .foo{ color:red; } }
*/
:root {
  --template-link-color: #01457F;
  --primary: #01457F;
  --cassiopeia-color-primary: #01457F;
  --secondary: 8DBDFC;
  --cassiopeia-color-link: #01457F;
  --cassiopeia-color-hover: #001f3f;
}

/* ==================
   LARGEUR DU CONTENU
   ne tiens pas compte du mode static/fluide
   ================== */
.site-grid {
  background: rgba(239, 239, 239, 0.8);
}
@media (min-width: 992px) {
  .site-grid {
    max-width: 1200px;
    margin: 0 auto;
  }
}
/* =========================
   DISPOSITION DES POSITIONS
   -------------------------
   (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 ."
	)
   ========================= */
/* ======================================
   LE LOGO
   -------
   La position du logo est définie par l'attribut margin
   - au centre : margin: 0 auto
   - à droite  : margin: 0 0 0 auto
   Le logo peut-être caché avec display:none
   Le slogan est justifié avec text-align
   ====================================== */
.container-header .navbar-brand {
  margin: 0 0 0 auto;
  padding: 0;
}
@media (min-width: 576px) {
  .container-header .navbar-brand {
    margin: 0 auto;
  }
}
/* ======================================
   LE FOND DU HEADER 
   ====================================== */
.container-header {
  background-color: #01457F;
  background-image: none;
  box-shadow: rgba(50, 50, 50, 0.25) 0px 13px 27px -5px;
}
/* =================================
   LE FOND DE LA BARRE DE NAVIGATION 
   ================================= */
.container-header .container-nav {
  background-color: rgba(50, 50, 50, 0.25);
  padding: 0;
  max-width: none;
}
/* =================================
   LA BARRE DE NAVIGATION 
   ================================= */
.container-header .container-nav .navbar {
  margin: 0;
}
.container-topbar {
  max-height: 30px;
  overflow: hidden;
}

.container-sidebar-right {
  padding-left: 5px;
  padding-right: 5px;
  background: rgba(50, 50, 50, 0.3);
}

.main-bottom {
  margin-bottom: 1em;
}

.container-footer {
  margin-top: 0;
}

.footer {
  background-image: none;
}
.footer .grid-child {
  padding: 0;
  max-width: inherit;
}

.site-grid {
  flex: 1 0 auto;
  align-content: start;
  align-items: stretch;
}

.icons .float-end {
  float: none !important;
  text-align: right;
}

dl.article-info {
  padding: 10px;
  border-top: 1px dotted #01457F;
}
dl.article-info dd {
  line-height: 0;
  font-size: 75%;
  display: inline-block;
  margin-bottom: 0;
}
dl.article-info .article-info-term {
  display: none;
}

@media (breakpoint unknown: 0) {
  .blog-items[class*=" masonry-"],
  .blog-items[class*=" columns-"],
  .blog-items[class*=" rows-"] {
    column-count: 1;
  }
}
@media (min-width: 768px) {
  .blog-items[class*=" masonry-"],
  .blog-items[class*=" columns-"],
  .blog-items[class*=" rows-"] {
    column-count: 2;
  }
}
@media (min-width: 1200px) {
  .blog-items[class*=" masonry-"],
  .blog-items[class*=" columns-"],
  .blog-items[class*=" rows-"] {
    column-count: 3;
  }
}

.blog-item {
  background: rgba(255, 255, 255, 0.8);
}

.blog-item .readmore {
  text-align: center;
  margin: 10px;
}

.blog-items[class*=" masonry-"] .blog-item, .blog-items[class^=masonry-] .blog-item {
  min-width: 100%;
}

/*
The options can be configured globally (Content -> Options) or in the menu item.

What you maybe know from Joomla 3

    Number of Leading Articles
    Number of Intro Articles
    Number of Columns
    Multi Column Direction -> Down creates a mansory layout, Across a column layout
    Number of Links

What is new in Joomla 4

    Leading Article Class
    Article Class
    Linked Intro Image

Cassiopeia has already some useful modifier classes for category blog:

    boxed
    image-right
    image-left
    image-alternate (in combination with image-right or image-left)
    image-bottom

On Styles / Black and white you will see a category blog with following configuration and some custom css
*/
/* Bouton pour retour haut de page
   il faut activer le paramètre backtop du template
*/
.back-to-top-link {
  background-color: #01457F;
  color: #888;
  border: 1px solid #888;
  border-radius: 5px;
  padding: 5px 10px;
}

.back-to-top-link:hover {
  background-color: #012a4c;
}

.back-to-top-link > span {
  width: auto;
}

.back-to-top-link > span:before {
  content: "\f077";
}

.back-to-top-link > span:hover:before {
  content: "\f077";
}

nav.pagination__wrapper {
  text-align: center;
}
nav.pagination__wrapper ul {
  display: inline-flex;
}

.container-header .mod-menu {
  justify-content: right;
}

.container-header .mod-menu .active {
  background-color: white;
  color: #01457F;
}

.search input.button {
  vertical-align: text-top;
}

.form-check-label,
.mod-login-logout,
.mod-login__options.list-unstyled {
  color: #333;
}

.mod-login__submit.form-group {
  text-align: center;
}

.token.tag {
  padding: 0;
}

a {
  text-decoration: none;
}

.com-content-article__body, .item-content-inner {
  padding: 0 20px;
  background: white;
}

.item-page h1,
h2.item-title {
  padding: 10px;
  margin: 0 0 1.4rem 0;
  background-color: #01457F;
  color: white;
  font-size: 1.6rem;
}
.item-page h1 a,
h2.item-title a {
  color: white;
  text-decoration: none;
}
.item-page h1 a:hover,
h2.item-title a:hover {
  color: yellow;
}
.item-page h1.item-new,
h2.item-title.item-new {
  background: #01457F url("../images/nouveau2.png") no-repeat scroll right top;
}

.item-page h2 {
  color: #01457F;
  font-size: 1.6rem;
  padding: 5px;
  margin: 1rem 0;
  border: solid 2px #01457F;
  background-color: #ffffe0;
}
.item-page h3 {
  color: #01457F;
  font-size: 1.6rem;
  margin: 0.7rem 0;
  border-bottom: solid 2px #01457F;
}
.item-page h4 {
  font-size: 1.6rem;
  margin: 0.7rem 0;
}
.item-page h5 {
  font-size: 1.4rem;
  margin: 0.7rem 0;
}
.item-page h6 {
  font-size: 1.2rem;
  margin: 0.7rem 0;
}

.blog-item h2 {
  color: #FFF;
  background: #01457F;
  line-height: 1;
  padding: 10px 5px !important;
  font-size: 1.6rem;
}
.blog-item h2 a {
  color: #FFF;
  text-decoration: none;
}

.com-content-category-blog__item.blog-item {
  border: 2px solid #01457F;
}
.com-content-category-blog__item.blog-item figure {
  text-align: center;
}
.com-content-category-blog__item.blog-item .item-content {
  padding: 10px;
}
.com-content-category-blog__item.blog-item .page-header {
  margin: -10px;
  margin-bottom: 10px;
}

.btn-primary:focus {
  color: #fff;
}

.offline-card .header {
  background-color: #FFFA99;
  background-image: none;
  color: #111;
}
.offline-card h1 {
  display: none;
}

._access-icon {
    top: 3rem !important;
}
/*# sourceMappingURL=\media\templates\site\cassiopeia\css\user.css.map */