@import 'normalize.css/normalize.css';

@import '../fonts/@fontsource/sacramento/index.css';
@import '../fonts/@fontsource-variable/oswald/index.css';
@import '../fonts/@fontsource-variable/sofia-sans-condensed/index.css';
@import '../fonts/bootstrap-icons/bootstrap-icons.css';

:root {
  --title-font: "Oswald Variable", sans-serif;
  --subtitle-font: "Sacramento", cursive;
  --menu-font: "Sofia Sans Condensed Variable", sans-serif;
  --main-font: var(--title-font);
  --content-font: Arial, sans-serif;
}

body {
  font-family: var(--main-font);
}

.row {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 0;
  margin-bottom: 3rem;
}

a {
  text-decoration: none;
}

html {
  font-family: var(--main-font);
  font-size: 16px;
  color: #474747;
}

a,
a:visited {
  text-decoration: none;
  color: #8A8A89;
  /* #2b70a0;/*7C7575;*/
}

.container-xl {
  max-width: 1200px;
  padding: 0 24px;
}

nav.navbar {
  padding: 0;
}

nav.navbar .container-fluid {
  padding: 0;
}

#homepage .layoutGrid {
  padding-left: 0;
}

.line {
  width: 100%;
  height: 2px;
  border-style: solid;
  border-width: 2px;
  margin: 0.5rem 0;
}


#divider {
  border: none;
  width: 100%;
  height: 1px;
  background: #888f96;
  content: "";
  position: absolute;
  left: 0;
  margin-top: 0.1rem;
  margin-bottom: 1rem;
  opacity: 1;
}

.submenu .header::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #424242;
}

.submenu.card h5 {
  text-align: left;
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 450;
}
.submenu.card h6 {
  font-family: var(--title-font);
  font-weight: 200;
  font-size: 1rem;
  text-align: left;
}

.card {
  box-shadow: none;
  text-align: justify;
  height: 100%;
  position: relative;
  border: none;
}

.card img {
  display: block;
  border-radius: 0;
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-background-position: center;
  background-position: center;
  width: 100%;
  object-fit: cover;
}

#page #main,
#page #left-sidebar {
  margin-top: 4rem;

}
#homepage main {
  margin: 3.5rem 1rem 0 1rem;
}

#page main>.container {
  padding: 0;
}

main>div {
  /* spacing={2} justifyContent="center" */
}

header#header {
  margin-top: 5%;
  margin-bottom: 1%;
}

header#header>.navbar>.container-fluid {
  display: flex;
  align-items: center;
  justify-content: start;
}

#menu {
  justify-content: space-around;
}

@media (min-width: 768px) {
  #menu {
    margin-top: 49px;
  }
}

#menu .container,
#menu .row,
#menu .col-md,
#menu .col-md-3 {
  margin: 0;
  padding: 0;
}

a.menu-entry {
  color: #040404;
  font-family: var(--menu-font);
  font-weight: bold;
  font-size: 1.5rem;
  text-transform: uppercase;
  position: relative;
  display: block;
}

a.menu-entry > span {
  text-align: center;
  line-height: 1.6rem;
  font-size: 1.3rem;
  font-weight: bold;
  display: block;
}


@media (max-width: 767px) {
  a.menu-entry {
    color: white;
    width: 100%;
    margin: 0.5rem 0;
    background-color: #bdd2d4;
    display: inline-block;
  }
}

@media (min-width: 768px) {
  a.menu-entry.current::before {
    content: "";
    position: absolute;
    bottom: -2.9rem;
    left: 0;
    width: 100%;
    height: 1rem;
    background-color: #bdd2d4;
    z-index: -1;
  }

  a.menu-entry::after {
    content: "";
    display: flex;
    transform: rotate(0.25turn);
    justify-content: center;
    font-weight: normal;
    text-transform: none;
  }
}


#actions {
  margin-top: 19px;
  margin-left: 7%;
  max-width: 7.15rem;
  display: flex;
  align-items: center;
  flex-direction: column;
}

#actions.actions-sm {
  position: absolute;
  margin: 1.1em 1.1em 0 0;
  text-align: right;
  top: 0;
  right: 0;
}

img,
a img {
  border: none;
}

@media (max-width: 767px) {
  img,
  a img {
    width: 58px;
    height: 77px;
  }
}

a:hover {
  text-decoration: none;
}

p {
  color: #607080;
  font-family: var(--content-font);
  font-stretch: extra-condensed;
  text-align: left;
  line-height: 1.5;
  letter-spacing: 0.00938em;
}

h3 {
  font-weight: normal;
}

#left-sidebar a,
#left-sidebar a:visited {
  color: #b5a5af;
  font-size: 1rem;
}

ul {
  list-style-type: none;
  margin: 0 0 0 10px;
  padding: 0;
}

.sidebar .menu.level-0 {
  margin: 0;
}


#menus h2 {
  text-transform: uppercase;
  color: #353535;
  letter-spacing: 0.9;
  font-weight: bold;
  font-size: 1.1rem;
  padding-bottom: 12px;
  text-align: center;
}

#menus h2::after {
  border-bottom: solid 3px #9e2d2d;
}

#menus h2 a {
  font-size: 1.1rem;
}

#menus .menu.level-0>li {
  padding-bottom: 12px;
  margin: 10px 0;
  border-bottom: solid 1px #ebeaea;
}

#menus .menu.level-0>li:last-child {
  border-bottom: none
}

#menus a,
#menus a:visited {
  color: #7b7979;
}

#menus h2 a #menus h2 a:visited {
  color: #866c7d;
}

#menus {
  background-color: #fff;
  margin-top: 4rem;
  font-family: var(--menu-font);
  text-align: left;
  padding-right: 5%;
}

#culture-link {
  margin: 15px 30px 0 48px;
  font-size: 13px;
  border: solid 1px #e5e3e3;
  background-color: #f7f7f7;
  color: #474747;
  display: block;
  width: 53px;
  text-align: center;
}

.box-link,
.button-link {
  margin: 15px 30px 0 48px;
  font-size: 13px;
  border: solid 1px #e5e3e3;
  background-color: #f7f7f7;
  color: #474747;
  display: block;
  width: 53px;
  text-align: center;
}

.button-link {
  display: inline-block;
  width: auto;
  padding: 10px 2px;
}


input,
textarea {
  border: solid 1px #b2b2b2;
  color: #474747;
  /*float: right;*/
  margin: 0;
  max-width: 170px;
}



input[type=button],
input[type=submit] {
  cursor: pointer;
  font-size: 12px;
}

#sondache {
  border: 1px solid #EAEAEA;
  padding: 0 10px 10px;
  margin-top: 10px;

}

#sondache li {
  margin-bottom: 10px;
}

#voter {
  margin-top: 5px;
  float: right;
}

#sondache .radio_list li {
  margin-bottom: 0;
}

#sondache p {
  margin: 5px 0;
  font-size: 11px;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
}

#sondache .percent {
  float: left;
  margin: 0 0 0 4px;
}

#sondache ol {
  padding-left: 10px;
  font-size: 12px;
}

#sondache h2 {
  color: #7B7B7B;
  font-size: 12px;
  text-transform: uppercase;
}

#sondache h3 {
  color: #2B70A0;
  /*font-size: 14px;*/
  font-weight: normal;
}



/* #signedin {
  background-color: #a1afd8;
  text-transform: uppercase;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: bold;
  width: 100%;
  height: 2.5rem;
  margin: 0 auto;
  text-align: center;
  line-height: 2.5rem;
  font-size: 1.2rem;
} */
#signedin {
  display: block;
  text-align: center;
  margin-bottom: 10px;
}

#signedin a {
  color: #515d68;
  font-size: 19px;
  background-color: #f6f5f5;
  padding: 0.1rem;
}

a:visited {}

body {
  margin: 0;
  padding: 0;
}



h1
{
  color: #acaeaf;
  font-size: 1.6rem;
  font-weight: normal;
  font-variant: small-caps;
  margin: 0 0 1rem 0;
  display: inline-block;
}

h1:first-letter {
  text-transform: uppercase;
}

h1::after {
  content: "";
  display: block;
  width: 500px;
  height: 0.3rem;
  background-color: #bdd2d4;
  border: solid 0.15rem #a5c1c5;
  margin: 2rem 0 0.4rem 0;
}


h2 {
  font-size: 15px;
  color: #8a8a89;
  font-weight: normal;
}

h1, h5 {
  font-family: var(--title-font);
  font-stretch: extra-condensed;
}

h6 {
  font-family: var(--subtitle-font);
}

.clear {
  clear: both;
}

.main-content {
  margin: 0 auto;
  width: 1073px;
}



.sidebar ul li {
  padding: 5px 0 1px 8px;
  font-size: 13px;
  color: #7c7575;
}

.sidebar .menu.level-0>li {
  padding-left: 0;
}

#right-sidebar {
  position: relative;
  left: 3%;
}

#left-sidebar .current-page,
#left-sidebar .current-page>a {
  color: #74a9ce;
  font-style: italic;
}

.sidebar h2 {
  border-bottom: solid 1px #766672;
  font-weight: normal;
  font-size: 14px;
  padding: 4px 0 4px 0;
  margin: 8px 0;
  color: #574d4d;
}




#content form {
  text-align: center;
}

.form-field {
  clear: both;
  margin-bottom: 10px;
}

.form-field.before-mdp-oublie {
  margin-bottom: 5px;
}

.form-input,
.form-label {
  float: left;
}

.form-label {
  color: #8A8A89;
  width: 150px;
  text-align: left;
  margin-left: 30px;
  margin-top: 6px;
}

#content .error_list {
  list-style-image: none;
  color: #fa340d;
  font-size: 10px;
}

#header .main-content {
  display: flex;
  justify-content: space-between;
}

#logo {
  margin: 1.1em 7% 1.1em 0;
}

#slogan {
  text-align: center;
  font-size: 16px;
  color: #b4b3b3;
  font-family: Inder, Arial, sans-serif;
  margin: 43px;
}



#headline {
  min-height: 105px;
}

#headline .main-content {
  padding: 22px 22px 10px 22px;
}

#headline .inner-content {
  margin: -10px 0 0 305px;
}

#headline .main-content h1 {
  border: none;
  margin-top: 9px;
  padding: 0;
  color: #7b7979;
}

#headline .main-content p {
  color: #a1a1a1;
}

#headline #main-title {
  border: none;
  color: #7B7979;
  font-size: 20px;
  margin: 27px 0 0 34px;
  text-align: center;
}

#headline #main-title.with-subtitle {
  margin-top: 20px;
}

#headline #subtitle {
  border: none;
  color: #7B7979;
  font-size: 16px;
  margin: 0 0 10px 34px;
  max-width: 350px;
  text-align: center;
}

#content {
  margin: 0 5% 0 10%;
}

#content ul,
ul.list ul.content-list {
  padding: 0 0 0 10px;
  font-family: Osvaldo, Arial, sans-serif;
  font-size: 14px;
  color: #5568b9;
}

ul.content-list li {
  list-style-image: none;
  background: transparent url(/images/puce-content.png) no-repeat left 7px;
  padding-left: 18px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #607080;
  line-height: 16px;
  text-align: justify;
}

ul.content-list li p {
  font-size: 14px;
}


#content ul li {
  margin: 8px 0;
  font-size: 1.1rem;
  line-height: 1.3rem;
  color: #688398;
  font-family: 'Times New Roman', Times, serif;
}

#member input {
  width: 87px;
  float: left;
  padding: 0;
  margin: 0 0 4px 10px;
}

#member #submit-member {
  font-size: 9px;
  float: left;
  width: 19px;
  margin-left: 4px;
  height: 18px;
  background-color: #7ea7c5;
  border: none;
  color: #FFFFFF;
}

#espace {
  font-size: 11px;
  color: #7C7575;
  margin: 5px 0 6px 10px;
}

#mdp-oublie {
  font-style: italic;
  font-size: 9px;
  color: #7C7575;
  margin: 0 0 12px -50px;
  clear: both;
}

#search {
  display: flex;
  color: #d0dae0;
  width: 12ch;
}

#search input[type="text"] {
  font-size: 1rem;
  font-family: var(--title-font);
  transition: width 0.5s ease-in-out;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: solid 1px #888f96;
  border-radius: 0;
  width: 12ch;
  padding: 4px 0 5px;
  margin-right: 0 !important
}

#search input[type="text"]:focus {
  width: 16ch;
  box-shadow: none;
}

#search input[type="text"]::placeholder {
  color: currentColor;
  opacity: 0.42;
  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.search-form {
  width: 16ch;
}

.search-form button[type="submit"] {
  background: transparent url(/images/loupe.png) no-repeat center center;
  border: none;
  width: 28px;
  height: 28px;

}

.submenu-unfold {
  display: inline-block;
  width: 5px;
  height: 10px;
  background: transparent url(/images/unfold.png) no-repeat;
  float: right;
  margin-top: 5px;
}

.submenu-unfold.unfolded {
  width: 10px;
  height: 5px;
  background: transparent url(/images/fold.png) no-repeat;
}

#pub {
  /*background: transparent url(/images/ligne1.png) no-repeat left 27px;*/
  padding-left: 0;
  text-align: center;
  margin-top: 13px;
}

#file h2,
#file h2 a,
#file h2 a:visited {
  color: #2B70A0;
  border-bottom: none;
  margin-bottom: 0;
}

#file p {
  margin-top: 2px;
}

#file img {
  float: left;
  margin: 0 10px 4px 0;
}

#footer {
  margin: 20px auto;
}

#footer-menu {
  font-size: 17px;
  color: #8A8A89;
  margin: 0 auto;
  position: relative;
  font-weight: 300;
}

@media (min-width: 768px) {
  #footer-menu {
    width: 361px;
  }
}

.line
{
    background: #bdd2d4;
    border: solid 1px #bdd2d4;
    height: 7px;
    width: 5rem;
    position: relative;
    left: calc(50% - 5rem/2);
    margin: 0;
}

.line.haut
{
    margin-bottom: 2rem;
}

.line.bas
{
    margin: 2rem 0;
}

.block-line h1
{
    font-size: 2rem;
    color: #acaeaf;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0.8rem;

}

.block-line h1::after {
  display: none;
}

.block-line h1::first-letter
{
 text-transform: none;
}

.block-line h2
{
  font-family: var(--subtitle-font);
  font-size: 1.7rem;
  margin-bottom: 1.2rem;
  text-transform: none;
  text-align: center;
  color: black
}


.block-line p {
  text-align: center;
  font-family: var(--title-font);
  font-size: 1rem;
  font-weight: 200;
  margin: 1rem 0;
}



#footer-menu #lion {
  margin: 0 10px 0 0;
  padding: 0
}

#footer-menu li a,
#footer-menu li a:visited {
  color: #8A8A89;
}

#footer-menu li {
  float: left;
  margin: 60px 10px 0 0;
  border-right: 1px #607080 solid;
  padding-right: 10px;
  font-family: var(--menu-font);
  font-weight: bold;
  font-size: 1rem;
  text-transform: uppercase;
}

.nom {
  font-size: 0.8rem;
  color: #7b7979;
  font-family: 'Times New Roman', Times, serif;
  text-align: center;
  margin-top: 1.3rem;
}

#footer-menu li:last-child {
  border-right: none;
  padding-right: 0;
}

#signed-in-username {
  padding: 10px;
}

#connexion-link {
  display: block;
  position: absolute;
  bottom: 0px;
  right: 0;
  margin: 10px;
}

#last-update {
  font-size: 10px;
  float: right;
  color: #ACBAC3;
}

#last-update .square {
  float: left;
  background-color: #ACBAC3;
  width: 7px;
  height: 7px;
  margin: 3px 5px 0 0;
}

.fb-like {
  margin: 0 0 13px 0;
  width: 100px;
  overflow: hidden;
  text-align: left;
}

.plus {
  background: #7b7979 url(/images/plus.png) no-repeat center center;
  height: 11px;
  width: 13px;
  display: block;
}

.plus span {
  display: none;
}

#lessons {
  clear: both;
}

#lessons h2 {
  background-color: #f6f5f5;
  padding: 6px 10px;
  margin-top: 0;
  font-size: 12px;
}

#lessons h2 a {
  color: #3b6a8b;
  text-transform: uppercase;
  display: block;
}

#lessons .new-line {
  clear: both;
}

#lessons .menu-wrapper,
#lessons .lesson {
  float: left;
  width: 47%;
  margin: 0 1.5% 16px 1.5%;
}

#feed {
  margin-top: 103px;
  width: 80%;
  margin-left: 42px;
}

#feed-title {
  margin-bottom: 12px;
}

#feed-title a {
  color: #8a8a89;
  font-size: 11px;
}

.feed-entry {
  margin-bottom: 16px;
  opacity: 0.8;
}

.feed-entry-enclosure {
  float: right;
  margin-left: 5px;
}

.feed-entry-title {
  margin-bottom: 5px;
}

#left-sidebar .feed-entry-title a {
  color: #866c7d;
  font-size: 12px;
  font-family: Cuprum, Arial, sans-serif;
}

.feed-entry-summary {
  font-family: Arial;
  color: #7b7b7b;
}

.feed-entry:hover {
  opacity: 1;
}

#left-sidebar #pub-site,
#sheet-sidebar #pub-site {
  width: 137px;
  margin: 0 auto;
}

#pub-site {
  display: block;
  padding: 7px;
  color: #866c7d;
  text-transform: uppercase;
  width: 107px;
}

#pub-site span {
  display: block;
}

#pub-site .text {
  margin-left: 10px;
}

#pub-site .petit {
  font-size: 10px;
  line-height: 1.1em;
}

#pub-site .xpetit {
  font-size: 8px;
  line-height: 1em;
}

#pub-site .moyen {
  font-size: 12px;
  line-height: 1.1em;
}

#pub-site .grand {
  font-size: 15px;
  line-height: 1.1em;
}

#left-sidebar #pub-site .petit,
#sheet-sidebar #pub-site .petit {
  font-size: 13px;
  line-height: 1.1em;
}

#left-sidebar #pub-site .xpetit,
#sheet-sidebar #pub-site .xpetit {
  font-size: 11px;
  line-height: 1em;
}

#left-sidebar #pub-site .moyen,
#sheet-sidebar #pub-site .xpetit {
  font-size: 15px;
  line-height: 1.1em;
}

#left-sidebar #pub-site .grand,
#sheet-sidebar #pub-site .xpetit {
  font-size: 18px;
  line-height: 1.1em;
}

#pub-site .bande {
  width: 100%;
  height: 10px;
  background-color: #866c7d;
  margin: 10px 0;
}