@charset "UTF-8";
@font-face {
  font-family: "Capriola";
  src: url("./static/sc/Capriola-Regular.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Playpen";
  src: url("./static/sc/playpen.woff2") format("woff2");
  font-display: swap;
}

:root {
  --text-color: #4b0a0f;
  --bg-color: #EECBBF;
  --theme-color: #ff8782;
  --hover: #b2483a;
  --a-color: #a0388f;
}

html{
  background-color: #720834;
  /* background-image: url(./static/images/bg.webp);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-attachment: fixed;
  background-size: 1328px 885px; */
}

.container {
  position: relative;
}

body{
  background-color: var(--bg-color);
  color: var(--text-color);
  font-size: 1rem;
  font-family: "Capriola";
  max-width: 1000px;
  margin: auto;
  margin-top: 40px;
  margin-bottom: 40px;
  border-radius: 15px;
  text-align: justify;
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

h1{
  font-size: 24pt;
  margin: auto;
  font-family: "Playpen";
  text-align: center;

}

h2{
  font-size: 19pt;
  margin: auto;
  padding-top: 15px;
  padding-bottom: 15px;
  font-family: "Playpen";
  text-align: center;
}

h3{
  font-size: 16pt;
  margin: auto;
  padding-top: 15px;
  padding-bottom: 15px;
  font-family: "Playpen";
  text-align: center;
}

hr{
  width: 45%;
  color: #720834;
  border: 1px solid #720834;
  
}

#logo{
  padding-top: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 17%;
}

#logo a{
  padding:0 !important;
}

nav{
  margin-top: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

nav svg{
  color: #720834;
}

nav button, .top button{
    padding-top: 24px;
    padding-bottom: 24px;
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
    padding: .5rem;
    background-color: rgba(255, 255, 255, 0);
    overflow: hidden;
    border: none;
    cursor: pointer;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
}

nav button:hover, .top button:hover{
    --tw-scale-x: 107.5%;
    --tw-scale-y: 107.5%;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.top {
  position: fixed;
  top: 50%; /* vertically center in viewport */
  right: calc((100% - 1000px)/2 - 75px); /* 800px = container width, 10px gap */
  z-index: 100;
  opacity: 0;
  transform: translateY(100px);
  transition: all .5s ease;
  background-color: #F2E2D4;
  border-radius: 9999px;
  border: none;
  align-items: center;
  width: 50px;
  height: 50px;
  font-size: larger;
  color: #4b0a0f;
}

.topshow {
  opacity: 1;
  transform: translateY(0);
}

.presta{
  margin: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.presta div{
  flex:1;
  background-color: #F2E2D4;
  text-align: center;
  margin: 18px;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 6px;
  border-radius: 15px;
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
  display: block;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
}

.presta div:hover{
    --tw-scale-x: 107.5%;
    --tw-scale-y: 107.5%;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}


.presta a{
    display: block;
    height: 100%;
    width: 100%;
  padding-top: 18px;
  padding-bottom: 18px;
  padding-left: 6px;
    text-decoration: none;
    color: var(--text-color);
}

.presta a:hover{
  text-decoration: none;
  background-color: none !important;
  border-radius: 0 !important;
  color: var(--text-color) !important;
}

.temoi{
  width: 94%;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 15px;
  padding-top: 18px;
  padding-bottom: 18px;
  background-color: #ab4e75;
}

.article, .rdv{
  padding-bottom: 3%;
  margin: auto;
}

.article p {
  padding-top: 1%;
  padding-bottom: 1%;
  line-height: 1.2;
  padding-left: 6%;
  padding-right: 6%;
}

.rdv p{
  padding-top: 1%;
  padding-bottom: 1%;
  line-height: 1.2;
  padding-left: 6%;
  padding-right: 6%;
  text-align: center;
}

.portrait{
  float: left;
  width: 16%;
  padding: 7px;
  background-color: #720834;
  margin-right: 20px;
  /* background-image: url(./images/back.png);
  background-size: 150px 150px; */
}

.article:last-child {
  padding-bottom: 4%;
}

.logoacc {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 27%;
}

.ill{
  max-inline-size: 100%;
  block-size: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 66%;
}

.ill2{
  max-inline-size: 100%;
  block-size: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 33%;
}

.breadcrumb{
  padding-left: 18px;
  padding-top: 18px;
}

ul{
  padding-top: 1%;
  padding-bottom: 1%;
  padding-left: 10%;
  padding-right: 5%;
}

ul li:before {
    font-family: 'FontAwesome';
    content: '\f105';
    margin:0 5px 0 -15px;
    color: #4b0a0f;
}

footer {
  margin-top: 1%;
}

footer p {
  text-align: center;
  padding-bottom: 1%;
  padding-top: 2%;
}

.breadcrumb a, footer a, .article a{
  color: var(--a-color);
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .15s;
  padding:5px;
}

.article a:hover, .breadcrumb a:hover, footer a:hover{
  text-decoration: none;
  background-color: #ff8782;
  border-radius: 11px;
  color: #720834;
}

@media screen and (max-width: 1000px) {
body {
  margin-top:0;
  margin-bottom: 0;
  border-radius: 0;
}
.portrait{
  width: 27%;
}
.top {
  position: fixed;
  top: 5%; /* vertically center in viewport */
  right: 5%; /* 800px = container width, 10px gap */
  z-index: 100;
  opacity: 0;
  transform: translateY(-100px);
  transition: all .5s ease;
  background-color: #F2E2D4;
  border-radius: 9999px;
  border: none;
  align-items: center;
  width: 50px;
  height: 50px;
  font-size: larger;
  color: #4b0a0f;
}
.topshow {
  opacity: 1;
  transform: translateY(0);
}

}