@charset "UTF-8";
/*
	LexicoSport
	Editeur : ANS
	Concepteur développeur : Be-Net
	version : 0.1
*/
:root {
  --noir:#036;
  --blanc:#f4f6f6;
  --trans:rgba(255,255,255,.65);
  --transb:rgba(255,255,255,.25);
  --primary:rgb(1, 100, 124); /* #01647C; */
  --primary-light:#9bcfd7;
  --secondary:#b6c5e2;
  --err:#cc0033;
  --errclair:#ff99cc;
  --ol-Bleu: #0081c8;
  --ol-Jaune: #fcb131;
  --ol-Noir: #000000;
  --ol-Vert: #00a651;
  --ol-Rouge: #ee334e;
}

body {
  background: var(--blanc) url(../images/bg-milano-cortina.avif) top center no-repeat;
  background-size: 100%;
  margin: 0;
  padding: 2rem;
  font-family: Calibri, sans-serif;
}
body.lx {
  background: var(--blanc) url(../images/fond-lexicosports.svg) top center repeat-x;
  background-size: 1920px 450px;
  background-position-y: -2.5rem;
}
body.lx .page {
  background-color: var(--transb);
}

a {
  color: var(--primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

#splash {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  padding: 10vh 10vw;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.5);
}
#splash div {
  width: 100%;
  height: 100%;
  background: transparent url(../images/splash.png) center center no-repeat;
  background-size: contain;
  z-index: 10;
}

.wait {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5) url(../images/wait.gif) center center no-repeat;
}

a.top {
  display: block;
  background-color: var(--trans);
  color: var(--primary);
  border: solid var(--primary) 2px;
  border-radius: 2rem;
  text-decoration: none;
  width: 3rem;
  height: 3rem;
  line-height: 3rem;
  font-size: 2rem;
  text-align: center;
  position: fixed;
  bottom: 3rem;
  right: 1rem;
}
a.top:hover, a.top:active {
  background-color: var(--primary);
  color: var(--blanc);
}

.meserr {
  display: none;
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
}

.meserr > div {
  max-width: 768px;
  box-sizing: border-box;
  padding: 1rem;
  margin: 2rem auto;
  border: solid 2px #c03;
  border-radius: 1rem;
  background-color: #fce;
  cursor: pointer;
}

.meserr > div:before {
  content: "Erreur";
  display: block;
  color: #c03;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.meserr > div:after {
  content: "X";
  display: block;
  color: #c03;
  font-size: 1.25rem;
  font-weight: 700;
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background-color: var(--blanc);
  border: solid #c03 1px;
  border-radius: 0.5rem;
}

.meserr > div:hover {
  background-color: var(--errclair);
}

.meserr > div:hover:after {
  color: var(--secondary);
  border-color: var(--err);
}

.page {
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  max-width: 768px;
  margin: 0 auto;
  background-color: var(--trans);
  padding: 2rem;
  border-radius: 1rem;
  border: solid 1px var(--primary);
}
.page h2 {
  text-align: center;
}

.entete {
  text-align: center;
  position: relative;
  min-height: 200px;
}
.entete h1 {
  margin: 0;
}
.entete #lexBaseline {
  display: none;
}

.entete .logo {
  max-width: 200px;
}

.entete .language {
  text-align: left;
  position: absolute;
  right: 1rem;
  background-color: var(--trans);
  border-radius: 0.5rem;
  padding: 0.25rem 0.5rem;
  list-style-type: none;
  font-size: 0.85rem;
  line-height: 1.25rem;
  -webkit-box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.5);
}

.entete .language a {
  color: var(--primary);
  display: block;
  padding: 0.15rem 0.35rem;
  margin-bottom: 0.1rem;
  border-radius: 0.5rem;
  text-decoration: none;
  position: relative;
}
.entete .language a:before {
  content: "ο ";
  font-size: 1.25rem;
  position: relative;
  display: inline-block;
  top: 0;
  padding-right: 0.5rem;
  font-weight: 700;
  color: var(--primary);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.entete .language a[href="#fr"]:before {
  color: var(--ol-Bleu);
}
.entete .language a[href="#en"]:before {
  color: var(--ol-Jaune);
}
.entete .language a[href="#it"]:before {
  color: var(--ol-Vert);
}
.entete .language a[href="#de"]:before {
  color: var(--ol-Rouge);
}

.entete .language a:hover, .entete .language a.active {
  background-color: var(--primary-light);
}

#disciplines {
  margin: 1rem 0;
  padding: 0;
  width: 100%;
  height: 2rem;
  overflow: hidden;
  line-height: 2rem;
  font-size: 1.5rem;
  list-style-type: none;
  text-align: center;
  border: solid 2px var(--primary);
  border-radius: 1rem;
}
#disciplines.active {
  overflow: visible;
  height: auto !important;
}
#disciplines li {
  display: block;
}
#disciplines .d {
  display: block;
  text-decoration: none;
  font-weight: 700;
  color: var(--primary);
  border-radius: 0.9rem;
  position: relative;
}
#disciplines .d:hover {
  background-color: var(--primary);
  color: var(--blanc);
}
#disciplines .d:after {
  content: " ";
  display: block;
  width: 50%;
  height: 1px;
  overflow: hidden;
  margin: 0 auto;
  border-bottom: dotted var(--primary) 1px;
}
#disciplines .p {
  float: right;
  padding-left: 1rem;
  padding-right: 1rem;
}

#categories {
  margin: 1rem 0;
  padding: 0;
  width: 100%;
  list-style-type: none;
  text-align: center;
}
#categories li {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border: solid 2px var(--primary);
  border-radius: 1rem;
  margin-bottom: 0.15rem;
}
#categories li:hover, #categories li.active {
  background-color: var(--primary);
  color: var(--blanc);
}
#categories li:hover a, #categories li.active a {
  color: var(--blanc);
}
#categories li:hover a em, #categories li.active a em {
  color: var(--blanc);
}
#categories a {
  text-decoration: none;
  font-weight: 700;
  color: var(--primary);
}
#categories a em {
  text-decoration: none;
  font-weight: 400;
  color: var(--noir);
  font-size: 85%;
}

#termes {
  margin: 1rem 0;
  padding: 0;
  width: 100%;
  list-style-type: none;
}
#termes li {
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: dotted 1px var(--primary);
}
#termes li .dis {
  display: inline-block;
  margin-right: 0.5rem;
}
#termes li .cat {
  color: var(--primary);
}
#termes li .term {
  font-weight: 700;
  font-size: 1.15rem;
}
#termes li .term .altL {
  display: inline-block;
  margin-left: 0.5rem;
  font-weight: 400;
  font-size: 1rem;
  width: 1.25rem;
  overflow: hidden;
  vertical-align: middle;
  height: 1.25rem;
  text-align: center;
  /*border:solid var(--primary) 1px;*/
  border-radius: 1rem;
  cursor: pointer;
  background: var(--trans) url(../images/altL.svg) center center no-repeat;
  background-size: 2.25rem 2.25rem;
}
#termes li .term .altL:hover {
  background-color: var(--primary);
  color: var(--blanc);
}
#termes li .term .altL div {
  display: none;
}

#altLanguage {
  display: none;
  position: fixed;
  z-index: 1;
  box-sizing: border-box;
  width: 650px;
  height: 20vh;
  left: calc(50vw - 325px);
  top: 25vh;
  padding: 2.5rem 1rem 1rem 1rem;
  margin: 2rem auto;
  background-color: var(--trans);
  border: solid var(--primary) 2px;
  border-radius: 1rem;
}
#altLanguage .content {
  box-sizing: border-box;
  padding: 1rem;
  background-color: var(--blanc);
  border: solid var(--secondary) 2px;
  border-radius: 1rem;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
#altLanguage .content div {
  border-bottom: dotted var(--secondary) 1px;
}
#altLanguage .content div span {
  display: inline-block;
  width: 5rem;
  text-align: right;
  padding-right: 0.5rem;
  font-weight: 700;
}
#altLanguage .btn {
  display: block;
  position: absolute;
  width: 1.75rem;
  height: 1.75rem;
  top: 0.25rem;
  border: solid transparent 2px;
  border-radius: 1rem;
  cursor: pointer;
}
#altLanguage .btn.pin {
  background: transparent url(../images/pin.svg) center center no-repeat;
  background-size: 1.5rem 1.5rem;
  right: 3rem;
}
#altLanguage .btn.pin:hover, #altLanguage .btn.pin.active {
  border-color: var(--primary);
  background-image: url(../images/pin-top.svg);
}
#altLanguage .btn.close {
  background: transparent url(../images/close.svg) center center no-repeat;
  background-size: 1.5rem 1.5rem;
  right: 1rem;
}
#altLanguage .btn.close:hover, #altLanguage .btn.close.active {
  border-color: var(--primary);
}

label {
  margin-left: 0;
  font-size: 1.25rem;
}

input[type=text] {
  box-sizing: border-box;
  font-size: 1.25rem;
  margin-right: 0.5rem;
  border-radius: 1rem;
  padding: 0.25rem 1rem;
  height: 2rem;
  width: 7rem;
}

button {
  padding: 0.25rem 1rem;
  height: 2rem;
  font-size: 1rem;
  border: solid var(--primary) 2px;
  color: var(--primary);
  font-weight: 700;
  border-radius: 1rem;
  cursor: pointer;
  vertical-align: bottom;
}

button:hover {
  background-color: var(--primary);
  color: var(--blanc);
}

.copyrights {
  box-sizing: border-box;
  width: 100%;
  max-width: 768px;
  margin: 1rem auto 3rem auto;
  text-align: left;
  /*color:var(--primary);*/
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.copyrights img {
  height: 5rem;
  vertical-align: middle;
}
.copyrights .liens {
  text-align: right;
}
.copyrights .liens a {
  display: block;
  padding: 0.25rem 0;
}
.copyrights .credits {
  text-align: right;
  height: 5rem;
  line-height: 5rem;
  color: var(--secondary);
}
.copyrights .credits a {
  display: block;
  color: var(--secondary);
}
.copyrights .credits a:hover, .copyrights .credits a:active {
  color: var(--primary);
}
.copyrights .credits a img {
  height: 3.5rem;
  vertical-align: middle;
}

.popContent {
  display: none;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  background-color: var(--trans);
  padding: 0;
  z-index: 100;
}
.popContent .close {
  display: block;
  position: fixed;
  width: 1.75rem;
  height: 1.75rem;
  top: 1.25rem;
  border: solid transparent 2px;
  border-radius: 1rem;
  cursor: pointer;
  background: transparent url(../images/close.svg) center center no-repeat;
  background-size: 1.5rem 1.5rem;
  right: 1rem;
}
.popContent .close:hover, .popContent .close.active {
  border-color: var(--primary);
}
.popContent .menu {
  box-sizing: border-box;
  background-color: white;
  border-radius: 1rem;
  text-align: center;
  position: absolute;
  width: 400px;
  top: 2rem;
  left: calc(50% - 200px);
}
.popContent .menu a {
  color: var(--primary);
  text-decoration: none;
}
.popContent .wrapper {
  box-sizing: border-box;
  position: fixed;
  width: 100%;
  top: 0.5rem;
  left: 0.5rem;
  height: calc(100vh - 0.5rem);
  overflow-y: scroll;
}
.popContent .wrapper .close {
  position: fixed;
  right: calc((100% - 768px + 1rem) / 2);
}
.popContent .wrapper .Content {
  box-sizing: border-box;
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  background-color: var(--trans);
  padding: 2rem;
  border-radius: 1rem;
  border: solid 1px var(--primary);
  margin-bottom: 2rem;
}
.popContent .wrapper .Content h2 {
  text-align: center;
}
.popContent .wrapper .Content h3 {
  font-size: 1.25rem;
  color: var(--primary);
}
.popContent .wrapper .Content .credits img {
  max-height: 6rem;
  margin: 0 1rem;
}

@media screen and (max-width: 800px) {
  body {
    padding: 0.25rem;
  }
  body.lx {
    background-position-y: -4rem;
  }
  body.lx .entete .language {
    top: -2rem;
  }
  .entete .language {
    right: -1.5rem;
    top: 1.25rem;
    padding: 0.25rem;
  }
  .entete .language a:before {
    line-height: 1rem;
  }
  #altLanguage {
    width: 80vw;
    height: 30vh;
    left: 10vw;
    top: 15vh;
  }
  #altLanguage .content > div > span {
    width: auto;
  }
  .popContent .menu {
    width: 300px;
    left: calc(50% - 150px);
  }
  .popContent .wrapper {
    width: 100%;
    top: 0.5rem;
    left: 0;
    height: calc(100vh - 0.5rem);
    padding: 1rem;
  }
  .popContent .wrapper .close {
    right: 1rem;
    top: 1.75rem;
  }
  .copyrights {
    font-size: 0.85rem;
    padding: 0 0.5rem 3rem 0.5rem;
  }
  .copyrights .credits a {
    display: block;
  }
  .copyrights .credits img {
    height: 3rem;
  }
}

/*# sourceMappingURL=styles.css.map */