@font-face {
    font-family: "tex";
    src: url("fonts/texgyreschola-math.otf");
  }

  @font-face {
    font-family: "garamont";
    src: url("fonts/garamont-Regular.otf");
  } 
  
  
  @font-face {
    font-family: "garamont-italic";
    src: url("fonts/garamont-Italic.otf");
  }

  :root {
    /* --clair: rgb(205, 183, 211); */
    --clair: rgb(255, 254, 213);
    --sombre: rgb(34, 12, 41);
    --accent: rgb(255, 79, 79);
    --vert: rgb(52, 64, 14);
}

body {
    margin: 0;
color: var(--clair);
    height: 100vh;
    overflow-y: hidden;
    /* background: rgb(52, 64, 14); */
margin-top: 2rem;
}

form {
  position: absolute;
  right: 0;
  margin: 1%;
  z-index: 10000;
}

#lang-switch {
  background: var(--vert);
  box-shadow: none !important;
  font-family: garamont-italic;
  font-size: 1.5rem;
  text-align: center;
  color: var(--clair);
  border: solid 2px var(--clair);
}

details summary::-webkit-details-marker,
details summary::marker {
 display: none; 
 content: "";
}

#right details h4 {
  transform: rotate(-1deg);
  text-align: center;
}

#right details h4::before {
content: "≻ "
}

#right details h4::after {
  content: " ≺ "
  }

 #right details summary {
  list-style: none;
  padding: 1%;
  padding-left: 1%;
  margin-block: 1%;
  transform: rotate(3deg);
  text-align: right;
  color: var(--clair);
  text-decoration: underline dashed 1px;
  font-size: 1.5rem;
  font-family: 'tex';
} 

#right details summary:hover {
  color: var(--vert);
  cursor: pointer;
}

#right  details summary a {
  color: var(--clair);
  text-decoration: none;
}

#right  details[open] > summary {
  /* border-bottom: dotted 1px; */
  /* margin-left: 5%; */

}


/* details {
  display: none;
} */

#right details[open] {
   color: var(--clair);
    background-image: linear-gradient(to bottom, var(--accent) 40%,var(--vert)  82%);
    border-radius: 1rem;
    padding-bottom: 1%;
    border: dotted 1px;
}

section {
  padding-bottom: 4rem;

}

#left details {
  display: none;
}

#right  details p:first-of-type{
  padding-top: 2%;
}

#right ul li p {
  font-family: 'garamont-italic' !important;
  margin-left: 5%;
  font-size: 2rem;
  line-height: 1.2;
  color: var(--clair);
  text-decoration: dotted underline 1px;
}

#right ul {
  list-style: none;
  padding-top: 1%;
}

#right  details p {
  font-size: 1.5rem;
  max-width: 85%;
    margin-left: auto;
    margin-right: auto;
    transform: rotate(-1deg);
}

main {
    /* display: flex;
    flex-direction: row; */
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    background-image: linear-gradient(to right, var(--vert) 48%,var(--accent)  52%);}

#left p {
    font-family: tex;
    font-size: 1.4em;
    line-height: 1.35em;
    padding-right: 2rem;
    break-inside: avoid-column;
}

#about {
    /* color: var(--accent); */
    font-size: 0.8rem;
    column-count: 2;
    margin-top: 4rem;
}

#about p:first-of-type {
    margin-top: 0;
}

#right p {
    font-family: tex;
    font-size: 1.4em;
    line-height: 1.35em;
    color: var(--clair);
    padding-right: 2rem;
}

header {
    position: fixed;
}

#left h1, #left h2 {
    margin: 0;
    padding-block: 0;

}

#titre {
    display: flex;
    align-items: start;
    justify-content: space-between;
    color: var(--clair);
    position: fixed;
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    margin-top: 1rem;
    width: 50%;
}

 #titre h1 {
    font-size: 2.6em;
    margin: 0;
    font-family: "garamont-italic";
    font-weight: normal;
        line-height: 1;
    padding-left: 2rem;

  }
  #titre h2 {
    font-variant: all-small-caps;
    font-weight: normal;
    margin: 0;
    font-family: "garamont-italic";
    width: 50%;
    padding-right: 1rem;
  
  }

#left {
    /* width: 50%; */
    padding-inline: 2rem;
    height: 100%;
    grid-column: 1 / 3;
    grid-row: 3 / 5;
    overflow-y: scroll;
}

/* #pic {
    display: flex;
    text-align: center;
    flex-wrap: wrap; 
} */

#right {
    /* width: 50%; */
    /* background-color: rgb(52, 64, 14); */
    overflow-y: scroll;
    padding-inline: 2rem;
    grid-column: 3/5;
    color: var(--vert);
    grid-row: 1 / 5;
}


nav ul {
    display: flex;
    list-style: none;
    justify-content: right;
    position: fixed;
    background-color: var(--accent);
    z-index: 1000;
    width: max-content;
    margin: 0;
  }

  nav ul li {
    padding-inline: 5%;
  }

  nav ul li a {
    font-family: garamont-italic;
    font-size: 1.5rem;
    color: var(--vert);
    text-decoration: none;
  }

  nav ul li a:hover {
    text-decoration: underline solid 3px var(--vert);
  }



header nav ul {
  display: flex;
  list-style: none;
  /* position: fixed; */
  z-index: 1000;
  width:  100%;
  margin: 0;
  top: 0;
  /* bottom: 0; */
  position: fixed;
  justify-content: left;
  padding-left: 0;
  height: 2rem;
  background: var(--clair);
  align-items: center;
}

header nav ul li {
  /* border-right: solid 1px var(--vert); */
  width: auto;
  text-align: center;
  background-color: var(--clair);
  height: auto;
  margin: 0;
  padding: 0;
}

header nav ul li a {
  font-family: garamont-italic;
  font-size: 1.5rem;
  color: var(--vert);
  height: auto;

}

header nav ul li a::after{
  content: " > ";
  height: auto;
  font-size: 1.2rem;

}
header nav ul li a::before{
  content: " < ";
  height: auto;
  font-size: 1.2rem;
}


header nav ul li a:hover {
  color: var(--accent);
  text-decoration: none!important;
}

#right h1 {
    text-align: center;
    font-family: garamont;
    font-weight: normal;
    margin: 0;
      margin-right: 0px;
      margin-left: 0px;
    padding: 0.5rem;
    font-size: 3.5rem;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    color: var(--vert);
    line-height: 1.1;
    padding: 1rem;

}

#right h2 {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 0.5rem;
    font-weight: normal;
    font-family: 'tex';
    color: var(--vert);
    margin-block: 0;
    font-size: 1.5rem;
}

/* #right p:has(img) {
    display: flex;
    flex-direction: column;
    text-align: left;
    width: fit-content;
} */

#right p:has(img) {
    /* background: antiquewhite; */
    display: flex;
    flex-direction: column;
    width: fit-content !important;
    padding: 0;
    justify-content: center;
    align-items: center;
    mix-blend-mode: screen;
}

div#pic {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#right img + em {
    width: fit-content;
    background: antiquewhite;
    padding-inline: 2mm;
    line-height: 1.1;
    text-wrap: balance;
    color: var(--accent);
}

#right h3 {
    font-family: garamont-italic;
    font-variant: small-caps;
    font-size: 2rem;
    color: var(--vert);    
    padding-bottom: 2rem;

}

#right h4 {
    text-align: left;
    font-family: garamont;
    color: var(--vert);
    font-size: 1.2rem;
    max-width: 40%;
    margin-left: auto;
    text-wrap: balance;
      }



  #right h5 {
        font-family: 'garamont-italic';
        font-weight: normal;
        background: var(--clair);
        width: 60%;
        color: var(--vert);
        font-size: 1.5rem;
        margin-right: auto;
        margin-left: auto;
        text-align: center;
        padding: 1%;
    }

::-webkit-scrollbar-track {
    display: none;
}

::-webkit-scrollbar {
    width: 12px;
}



#right img {
filter:grayscale(1);
border: solid 5px var(--clair);
transform: rotate(-1deg);
margin: 1rem;
max-width: 30vh;
box-shadow: var(--vert) 4px 4px 0px;
}

#right img + em {
    font-family: garamont;
    max-width: 80%;
    text-align: center;
}

#right p:has(img):nth-of-type(2n) {
    transform: rotate(2deg);
}

#right p:has(img):nth-of-type(2n+1) {
    transform: rotate(-4deg);
}

#header {
    background: var(--clair);
    padding: 1%;
    margin-inline: 5%;
    padding-inline: 5%;
    border-radius: 0.5rem;
    /* border: solid 1px var(--vert); */
  transform: rotate(-3deg);
  margin-top: 8%;
    
}

#programme h2 {
    font-family: tex;
    /* color: var(--accent); */
    font-size: 2.5rem;
    margin: 0;
    width: 100%;
    text-align: center;
    border-radius: 4mm;
    margin-top: 10%;
    font-weight: normal;
    margin-bottom: 3%;
    display: flex;
  flex-direction: column;
}

#programme h2 em {
  font-family: garamont;
  font-style: normal;
 font-variant: small-caps;
}

#programme h2::before {
    /* background: var(--vert); */
    content: '⊷⊷⊷';
    /* padding-left: 20%; */
    /* margin-right: 2%; */
  }

#programme h2::after {
    /* background: var(--vert); */
    content: '⊶⊶⊶';
    /* padding-left: 20%; */
    margin-left: 2%;
}

h3#programme, h3#inscriptions, h3#contact {
    margin-top: 5%;
    padding-top: 5%;
  }

  h3#inscriptions, h3#contact, h3#contact + p, h3#registration {
padding-inline: 5%;
  }

 

  h3#inscriptions + p {
    padding-inline: 5%;
    font-size: 2rem;
    line-height: 1.1;
    text-wrap: balance;
    font-family: garamont-italic;
color: var(--clair);
margin: 0;
  }

  h3#inscriptions + p a, h3#registration + p a {
    background: var(--clair);
    border-radius: 0.5rem;
color: var(--vert);
text-decoration: dotted underline;
  }

  h3#inscriptions + p a:hover {
    cursor: pointer;
  }

  #programme h3 {
    width: fit-content;
    padding-inline: 0.5rem;
    color: var(--vert);
    margin-bottom: 0;
    
  }

  #programme h3 em {
    font-style: normal !important;
    font-family: garamont;
    font-weight: normal;
    font-variant: all-small-caps;
  }

  #programme h3 em::before {
    content:  " ( ";
    font-family: garamont;
  }

  #programme h3 em::after {
    content:  " ) ";
    font-family: garamont;
  }

  #programme h4 em {
    color: var(--clair);
    font-style: normal;
    font-family: garamont-italic;
    font-weight: normal;
  }
#programme h4 {
    font-family: garamont;
    line-height: 1.2;
    /* text-align: center; */
    max-width: 90%;
    font-size: 1.5rem;
    padding: 0;
    margin-block: 0;
    /* transform: rotate(3deg); */
    font-size: 2rem;
    margin-left: auto;
  margin-right: auto;
  color: var(--clair);
  padding-bottom: 2%;
  font-weight: normal;

}

#programme h4::before {
    content: "{ ";
}


#programme h4::after {
    content: " }";
}

#programme p em {
    /* text-align: center; */
    font-style: italic;
    font-family: garamont-italic;
}

#programme p:has(em) {
    width: 100%;
    text-align: left;
  }
  h4:has(em) {
    /* border-bottom: solid 2px var(--clair); */
    padding-bottom: 2% !important;
  }

  #programme ul {
 
    /* width: 100%; */
    justify-content: space-around;
    padding-left: 0;
    margin-left: 0;
    margin-bottom: 5%;
    font-family: tex;
    margin-top: -2%;
    /* flex-direction: row;
    flex-wrap: wrap;
    display: flex; */
  }

  #programme ul li {
    list-style: none;
    padding: 1%;
      padding-left: 1%;
    margin-block: 1%;
    transform: rotate(3deg);
    text-align: right;
    font-size: 1.4rem;
    color: var(--clair);
    text-decoration: underline dashed 1px;
    /* padding-left: 40%; */
  }

  #programme details summary::before {
    content: " ╰ ";
    font-family: 'tex';
  }

  #programme details summary::after {
content: " ╮";
font-family: 'tex';
  }

  #programme ul li details {
    text-align: left!important;
    padding-top: 4%;
    text-decoration: none!important;
  }


 

  #programme h3 + h4 {
    margin-top: 3%;
  }



  #programme ul li::first-letter, 
  #programme details summary::first-letter {
    font-family: garamont;
  }

  #programme {
    margin-inline: 5%;
  }

  @media only screen and (min-width: 992px) and (max-width: 1200px) {

    #right h1 {
      font-size: 2.5rem;
    }

    #right h4 {
      font-size: 1rem;
      max-width: 100%;
    }

    #programme h2 {
      font-size: 2rem;
    }

    #programme h4 {
      font-size: 1.5rem;
    }

    #programme h2::before, #programme h2::after {
      display: none;
    }

    #header h4 {
      font-size: 1rem;
      margin-bottom: 0;
    }

    #programme ul li {
      font-size: 1.2rem;
    }

    #right img {
      max-width: 20vh;
    }

    #right img + em {
      font-size: 1rem;
    }

    #titre {
      flex-direction: column;
    }

    #titre h2 {
      width: 100%;
      padding-left: 2rem;
      padding-top: 2rem;
      font-size: 1.2rem;
      line-height: 1.3;
      text-wrap: balance;
    }
    

    #left p {
      font-size: 1.2rem;
    }

    #about {
      column-count: 1;
    }

    #about p {
      font-size: 1rem;
    }

    #programme h3 {
      font-size: 1.2rem;
    }

  } 

  @media only screen and (min-width: 768px) and (max-width: 992px) {

    #right h1 {
      font-size: 2.5rem;
    }

    #right h4 {
      font-size: 1rem;
      max-width: 100%;
    }

    #programme h2 {
      font-size: 2rem;
    }

    #programme h4 {
      font-size: 1.5rem;
    }

    #programme h2::before, #programme h2::after {
      display: none;
    }

    #header h4 {
      font-size: 1rem;
      margin-bottom: 0;
    }

    #programme ul li {
      font-size: 1.2rem;
    }

    #right img {
      max-width: 20vh;
    }

    #right img + em {
      font-size: 1rem;
    }

    #titre {
      flex-direction: column;
    }

    #titre h2 {
      width: 100%;
      padding-left: 2rem;
      padding-top: 2rem;
      font-size: 1.2rem;
      line-height: 1.3;
      text-wrap: balance;
    }

    #left p {
      font-size: 1.2rem;
    }

    #about {
      column-count: 1;
    }

    #about p {
      font-size: 1rem;
    }

    #programme h3 {
      font-size: 1.2rem;
    }

  }

  @media only screen and (min-width: 600px) and (max-width: 768px) {

    #right h1 {
      font-size: 2.5rem;
    }

    #right details p {
  font-size: 1.2rem;
}

    #right h4 {
      font-size: 1rem;
      max-width: 100%;
    }

    #programme h2 {
      font-size: 2rem;
    }

    #programme h4 {
      font-size: 1.5rem;
    }

    #programme h2::before, #programme h2::after {
      display: none;
    }

    #header h4 {
      font-size: 1rem;
      margin-bottom: 0;
    }

    #programme ul li {
      font-size: 1.2rem;
    }

    #right img {
      max-width: 20vh;
    }

    #right img + em {
      font-size: 1rem;
    }

    #titre {
      flex-direction: column;
    }

    #titre h2 {
      width: 100%;
      padding-left: 2rem;
      padding-top: 2rem;
      font-size: 1.2rem;
      line-height: 1.3;
      text-wrap: balance;
    }

    #left p {
      font-size: 1.2rem;
    }

    #about {
      column-count: 1;
    }

    #about p {
      font-size: 1rem;
    }

    #programme h3 {
      font-size: 1.2rem;
    }

    h3#contact + p {
      font-size: 1.2rem;
    }

    header nav ul {
      flex-direction: column;
      width: 100%;
    }

    header nav ul li {
      width: 100%;
      text-align: left;
      border-bottom: solid 1px var(--vert);
    }

  
    main {
      margin-top: 3rem;
    }


  }

  @media only screen and (max-width: 600px) {

    main {
      display: flex!important;
      background-image: linear-gradient(to bottom, var(--vert) 48%,var(--accent) 52%);
      flex-direction: column;
      height: 100vh;
      overflow-y: scroll;
      overflow-x: hidden;
      margin: 0;
      padding: 0;
      width: 100%;
      margin-top: 3.5rem;
    }

    header nav ul {
      flex-direction: column;
      width: 100%;
    }

    header nav ul li {
      width: 100%;
      text-align: left;
      border-bottom: solid 1px var(--vert);
    }

    header nav ul li a {
      font-size: 1.3rem!important;
    }

  

    #right details p {
  font-size: 1.2rem;
}

    div#titre {
      position: relative;
      top: 0;
      z-index: 1000;
      width: 100%;
  }

  #titre h1 {
    text-wrap: nowrap;
    font-size: 2rem;
    width: 100%;
    padding-left: 1rem;
}



  #right h1 {
    font-size: 2rem;
  }

  #right h4 {
    font-size: 1rem;
    max-width: 100%;
  }

  #programme h2 {
    font-size: 2rem;
    background: var(--clair);
}

  #programme h4 {
    font-size: 1.5rem;
    padding-top: 1rem;
  }

  #programme h2::before, #programme h2::after {
    display: none;
  }

  #header h4 {
    font-size: 1rem;
    margin-bottom: 0;
  }

  h3#contact + p {
    font-size: 1.2rem;
  }

  #programme ul li {
    font-size: 1.2rem;
  }

  #right img {
    max-width: 20vh;
  }

  #right img + em {
    font-size: 1rem;
  }

  #titre {
    flex-direction: column;
  }

  #titre h2 {
    width: fit-content;
    padding-left: 1rem;
    padding-top: 1rem;
    font-size: 1.1rem;
    line-height: 1.1;
    text-wrap: balance;
  }

  #left p {
    font-size: 1.1rem;
    padding-right: 0;
    padding-left: 1rem;
}

  #about {
    column-count: 1;
    margin-top: 0;
  }

  #about p {
    font-size: 1rem;
  }

  #programme h3 {
    font-size: 1.2rem;
  }

  #left, #right {
      display: contents;
      width: 100%;
  }

  #left {
    order: 1;
  }
  #right {
    order: 2;
  }

  #right h3 {
    color: var(--clair);
  }

details {
  display:block;
}

details #about {
  display: block;
}

#about {
  display:none;
}

}