/*------------------------------variables------------------------------*/

@font-face {
  font-family: 'Luciole';
  src: url('/fonts/Luciole-Regular.ttf') format('truetype')
}

*{
--rose_tres_fonce : rgb(78,0,39); /*titre, liens internes... */
--rose_tres_clair : rgb(255, 235, 245); /*fond text*/
--rose_intermediaire :   #f7d7ff;  /*fond page*/
--lien-externe : fuchsia;
--lien : rgb(78,0,39);
}

/*______________________________________________________________________*/
/*-------------------------------Généralités----------------------------*/
/*______________________________________________________________________*/

html {
   font-family: 'Luciole', sans-serif;
   font-size: 100%; /* 16px par défaut */
   line-height: 1.5;
}

h1{
  font-size: 4rem;
  color: var(--rose_tres_fonce);
}

h2{
  font-size: 3rem;
  color: var(--rose_tres_fonce)
}

h3, h4{
  color: var(--rose_tres_fonce)
}

.image_adaptable{
  width: 100%;
  max-width: 400px;
}

.deuximages{
   display:flex;
   flex-direction: row;
   justify-content: center;
}



a {
  color: inherit;
  text-decoration: underline dotted;
  text-decoration-color: var(--lien);
  text-decoration-thickness: 2px;
}

a:hover {
  color: var(--lien);
  font-size:1.1rem;
}


a[href*="//"]:not([href*="silanoc.fr"]) {
  --lien:var(--lien-externe);
}


/*_______________________________________________________*/
/*----------------------------sections-------------------*/
/*_______________________________________________________*/

body{
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
  margin:0;
  background-color: var(--rose_tres_clair)
}

header{
  text-align:center;
  background-color: var(--rose_intermediaire)
}

nav {
  margin-top:0;
  border-top: dashed;
  border-bottom: dashed;
  border-color: var(--rose_tres_fonce);
  text-align:center;
  background: linear-gradient(180deg, var(--rose_intermediaire),  var(--rose_tres_clair));
}

nav li {
  display: inline;
  margin:15px;
}

main{
  max-width:750px;
  margin:auto;
  padding:3rem;
}

.contexte {
  font-style: italic;
  font-size: 0.9rem;
  color:#1a1a1a;
}

.licence {
  display:flex;
  align-items: center; /* Aligne verticalement au centre */
  gap: 1rem;
  background: linear-gradient(0deg, var(--rose_intermediaire),  var(--rose_tres_clair));
  max-width:100%;
  justify-content: space-around;
}

.txt_licence{
  margin-top:3rem;
  font-style: italic;
  font-size: 0.9rem;
  color:#1a1a1a;
}

footer {
    border-top: dashed;
    border-color: var(--rose_tres_fonce);
    background-color:  var(--rose_intermediaire);
    text-align:center;
}

.facebook:after{
  display: inline-block;
  content: '';
  background-image: url(facebook-logo-svgrepo-com.svg);
  background-size: 15px 15px;
  height: 15px;
  width: 15px;
  filter: blur(0.5px);
  margin-left:0.2rem;
}

.eventail:after{
  display: inline-block;
  content: '';
  background-image: url(eventail.svg);
  background-size: 25px 25px;
  height: 25px;
  width: 25px;
  filter: blur(0.5px);
  margin-left:0.2rem;
}

a[href*="grimoire-electronique-mogai.silanoc.fr"]:after {
  display: inline-block;
  content: '';
  background-image: url(Intersex-inclusive_pride_flag.svg);
  background-size: 1.5rem;
  height: 1.5rem;
  width: 1.5rem;
  margin-left:0.2rem;
  background-repeat: no-repeat;
}

a[href*="wiktionary.org"]:after {
  display: inline-block;
  content: '';
  background-image: url(wiktionary.svg);
  background-size: 1.5rem;
  height: 1.5rem;
  width: 1.5rem;
  margin-left:0.2rem;
}

a[href*="wikidata.org"]:after {
  display: inline-block;
  content: '';
  background-image: url(Wikidata_logo_Spanish_vertical_in_colour.svg);
  background-size: 1.5rem;
  height: 1.5rem;
  width: 1.5rem;
  margin-left:0.2rem;
   background-repeat: no-repeat;
}

a[href*="wikipedia.org"]:after {
  display: inline-block;
  content: '';
  background-image: url(Wikipedia-logo-v2-no-text.svg);
  background-size: 1.5rem;
  height: 1.5rem;
  width: 1.5rem;
  margin-left:0.2rem;
}

a[href*="commons.wikimedia.org"]:after {
  display: inline-block;
  content: '';
  background-image: url(Commons-logo.svg);
  background-size: 1.5rem;
  height: 1.5rem;
  width: 1.5rem;
  margin-left:0.2rem;
}

/*________________________________________________________________________*/
/*-----------------------------pour code, iframe------- */
/*________________________________________________________________________*/

.iframe_sparql{
  width: 95%;
  height: 50vh;
  border: none;"
}