@font-face { font-family: Speak; src: url("SpeakReg.ttf")}

.site {
  height: 100%;
  width: 100%;
  background: linear-gradient(135deg, rgba(0, 72, 153, 0.8), rgba(0, 72, 153, 0) 70%),
              linear-gradient(225deg, rgba(0, 72, 153, 0.6), rgba(0, 72, 153, 0) 70%),
              linear-gradient(45deg, rgba(255, 153, 204, 0.6), rgba(255, 153, 204, 0) 60%),
              linear-gradient(315deg, rgba(255, 153, 204, 0.4), rgba(255, 153, 204, 0) 50%),
              linear-gradient(90deg, rgba(0, 24, 72, 1), rgba(0, 24, 72, 0) 80%),
              linear-gradient(180deg, rgba(0, 48, 144, 1), rgba(0, 48, 144, 0) 80%);
  background-color: #003366; /* Couleur de fond pour la cohérence */ 
}

.responsive-map {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; /* Ratio de 16:9 */
}
.responsive-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

p {font-family: calisto MT; text-align: justify;}
h1,h2 {font-family: Speak !important;}

.header {background-image: none; background-color:transparent !important;}
.navbar-brand {vertical-align: middle; text-align:center; width:100%; white-space:normal;}
.brand-logo {font-family:Speak !important; font-size:1.8em; line-height: 1.2em; text-decoration:none; }
.site-description {color: #d538c0 !important; font-size:0.7em !important; font-weight:800 !important; }

.com-content-article, .card {background-color:rgb(255 255 255 / 50%)!important; border-radius:5px; border-width:0px;}
.item-page {padding:1em;}
.page-header {display:none;}

.mod-list li a {font-family: Speak !important; font-size:1.5em; text-decoration:none !important;}
.mod-list li a:hover, .mod-list li.active>a {font-weight: bold !important;}

.photos {justify-content: space-around; align-items: center;}
.photos img {max-width:45% !important; border-radius:5px !important; flex-grow: 1 !important;}
.photos p {font-weight: bold !important; font-size:150%;  text-align: left; flex-grow: 1 !important;}

@media screen and (min-width: 1024px){
p.sponsor1 a img {width:75% !important;margin-top:8px;}
p.sponsor2 a img, p.sponsor2 img {width:45% !important; margin:5px;}
  }

@media screen and (max-width: 1024px){
p.sponsor1 a img {width:45% !important;margin-top:5px;}
p.sponsor2 a img, p.sponsor2 img {width:45% !important; margin:5px;}
  }