/* GENERAL */
* {
    margin:0;
    padding: 0;
    text-align: center;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100VH;
}
html {
  font-size: 16px;
}

@media (max-width: 800px) {
      html {
        font-size: 14px;
      }
  }
  
@media (max-width: 500px) {
    html {
    font-size: 12px;
    }
}

.wrapper {
  display: grid;
 /*  grid-gap: 10px;
 grid-template-rows: 180px flex 180px;*/
}

img, svg {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

h1,h2,h3,h4 {
    color: #444; /* #15b5b0;*/
}

h1 {
    font-size:3rem;
}

h2 {
    font-size:2.5rem; 
    font-weight: bold;
}

h3 {
    font-size:2rem;
    padding-top: 1rem;
}

h4 {
    font-size:1.5rem;
}
h5 {
    font-size:1rem;
    color:white;
}

p {
    line-height:1rem;
    color:#777;
}

a {
    text-decoration: none;
    color:#15b5b0;
}

@media (max-width: 640px) {
	* {
		box-sizing: border-box;
	}
	
	/* passer body (et tous les éléments de largeur fixe) en largeur automatique */

	body {
		width: auto;
		margin: 0;
		padding: 0;
	}
	
	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

	img,
  svg,
	table,
	td,
	blockquote,
	code,
	pre,
	textarea,
	input,
	iframe,
	object,
	embed,
	video {
		max-width: 100%;
	}
	
	/* conserver le ratio des images */

	img, svg {
		height: auto;
	}
	
	/* gestion des mots longs */

	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp, p {
		-webkit-hyphens: auto; /* césure propre */
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word; /* passage à la ligne forcé */
	}
	
	code,
	pre,
	samp {
		white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
	}
	
	/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

	.element1,
	.element2 {
		float: none;
		width: auto;
	}
	
	/* masquer/afficher les éléments  */

	.u-mobile {          display: block;          display: revert !important; /* affichage des éléments */        }        .u-no-mobile {          display: none !important; /* masquage des éléments */        }

}

@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
}


.wrapper0 {
    width: 90%;
    margin:0 auto;
    padding: 0 1VW;
    display: grid;
    grid-gap: 0;
    align-items: center;
    align-content: center;
}

.wrapper1 {
    width: 90%;
    margin:auto;
    padding: 0 1VW;
}

.penteBW{
  width:100%;
  height:5rem;
  /*position:absolute;
  left:0px;*/
  background: linear-gradient(to right bottom, #15b5b0 49%, #fff 50%);
}
.penteWB{
  width:100%;
  height:5rem;
  /*position:absolute;
  left:0px;*/
  background: linear-gradient(to left bottom, #fff 49%, #15b5b0 50%);
}

@font-face {
font-family: 'caveat';
src: url('../font/caveat-medium.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}

.logofan {
    color:#f9c141;
    font-family: 'caveat', serif;
    font-size: 1.3em;
}
.logodata {
    font-family: muli, serif;
}

.blanc {
    background-color: rgba(255,255,255,0.75);
    width:100%;
    padding-bottom: 2VH;
}

.gris {
    background-color: rgba(255,255,255,0.75);
}

.clear {
    clear:both;
}

/* HEADER */
#entete {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    position:fixed;
    z-index: 10;
    background: rgba(255,255,255,0.95);
    align-content: center;
    align-items: center;
}

#entete a {
    grid-column: 1;
    grid-row: 1/3;
}

#entete h1 {
    /*float: left;*/
    /*margin-top:1rem;*/
    color: #15b5b0;
}

#entete p {
  color:#f9c141;
  font-weight: bold;
  font-style:italic;
  grid-column: 2;
  grid-row:1;
}

#entete nav {
    /*float:right; */  
    /*margin-top:3.5rem;*/
    grid-column: 2;
    grid-row: 2;
}

nav ul {
    list-style: none;
}

nav ul li {
    display:inline-block;
  /*  float: left;*/
}

#entete nav ul li a {
    text-transform: uppercase;
    font-weight: bold;
    margin-right: 1rem;
}

#stylelink {
	overflow: hidden;
	position: relative;
	display: inline-block;
	
	&::before,
	&::after {
		content: "";
		position: absolute;
		width: 100%;
		left: 0;
	}

	&::before {
		background-color: #f9c141;
		height: 2px;
		bottom: 0;
		transform-origin: 100% 50%;
		transform: scaleX(0);
		transition: transform .5s cubic-bezier(0.76, 0, 0.24, 1); 
	}

	&:hover::before {
		transform-origin: 0% 50%;
		/*transform: scaleX(1);*/
	}

	&::after {
		content: attr(data-replace);
		height: 100%;
		top: 0;
		transform-origin: 100% 50%;
		transform: translate3d( 0,200%, 0);
		transition: transform .5s cubic-bezier(0.76, 0, 0.24, 1); 
		color: #f9c141;
	}

	&:hover::after {
		transform: translate3d(0, 0, 0);
	}

	span {
		display: inline-block;
		transition: transform .5s cubic-bezier(0.76, 0, 0.24, 1); 
	}

	&:hover span {
		transform: translate3d(0,-200%, 0);
	}
}

.entetecadre {
    margin:auto;
    padding: 1.5rem;
    text-align: center;
    background: url("../img/zebrures1920x1080.png") center no-repeat;    
}

.entetecadre h1 {
    margin: 0 auto 1px auto;
}

.entetecadre h2 {
    font-weight: bold;
    margin: 0 auto 1px auto; 
    font-family: 'Cormorant Garamond',cursive;
    font-style: italic;
    color:#15b5b0;
}

.enteteblanc {
    background-color: rgb(255, 255, 255);
    width:100%;
    height:100%;
    padding:1rem;
    border-radius: 2rem;
}

/* Restons en contact */

#contact ul {
  display: grid;
  grid-template-columns: 0.25rem 1fr;
  grid-auto-columns: max-content;
  column-gap: 2rem;
  list-style: none;
  width: min(60rem, 90%);
  margin-inline: auto;
  padding-bottom: 1.5rem;
}
/*line*/
#contact ul::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 20;
  background: rgb(225, 225, 225);
  border-radius: 0.125rem;
}

/* row gaps */
#contact ul li:not(:last-child) {
  margin-bottom: 2rem;
}

/* card */
#contact ul li {
  grid-column: 2;
  margin-inline: 1.5rem;
  grid-row: span 2;
  display: grid;
  padding-top: 2rem;
  grid-template-rows: min-content min-content min-content;
}

/* date */
#contact ul li .date {
  height: 3rem;
  margin-inline: -1.5rem;

  text-align: center;
  background-color: var(--accent-color);

  color: white;
  font-size: 1.25rem;
  font-weight: 700;

  display: grid;
  place-content: center;
  position: relative;

  border-radius: 1.5rem 0 0 1.5rem;
}

/* date flap */
#contact ul li .date::before {
  content: "";
  width: 1.5rem;
  aspect-ratio: 1;
  background: var(--accent-color);
  background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent);
  position: absolute;
  top: 100%;

  clip-path: polygon(0 0, 100% 0, 0 100%);
  right: 0;
}

/* circle */
#contact ul li .date::after {
  content: "";
  position: absolute;
  width: 2rem;
  aspect-ratio: 1;
  background: rgba(245, 245, 245);
  border: 0.3rem solid var(--accent-color);
  border-radius: 50%;
  top: 50%;

  transform: translate(50%, -50%);
  right: calc(100% + 2rem + 0.25rem / 2);
}


@media (min-width: 40rem) {
  #contact ul {
    grid-template-columns: 1fr 0.25rem 1fr;
  }
  #contact ul::before {
    grid-column: 2;
  }
  #contact ul li:nth-child(odd) {
    grid-column: 1;
  }
  #contact ul li:nth-child(even) {
    grid-column: 3;
  }

  /* start second card */
  #contact ul li:nth-child(2) {
    grid-row: 2/4;
  }

  #contact ul li:nth-child(odd) .date::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    left: 0;
  }

  #contact ul li:nth-child(odd) .date::after {
    transform: translate(-50%, -50%);
    left: calc(100% + 2rem + 0.25rem / 2);
  }
  #contact ul li:nth-child(odd) .date {
    border-radius: 0 1.5rem 1.5rem 0;
  }
}


/* FOOTER */
footer {
    grid-column: 1;
    grid-row: 11;
    background-color: #15b5b0;
}

footer h1 {
    color: white;
    text-align: center;
    padding-top: 0.5rem;
}

footer a {
    text-align: center;
    font-weight: bold;
    padding-top: 2rem;
    color:#777;
}

footer img {
    width:25px;
    height:25px;
    BORDER:0;
    box-shadow:none;
    margin: 2px 2px 0 2px;
}

footer nav {   
    margin-top:1rem;
}

/* pagevalidrdv */
.rdvcadre {
    margin:auto;
    padding: 2rem;
    text-align: center;
    background: url("../img/zebrures1920x1080.png") center;
    background-size:cover;
    margin-bottom: 1rem;
}

.rdvcadre h1 {
    padding: 0 1rem 2rem 1rem;
    margin: 0 auto 1px auto;
    color:#15b5b0;
}

.rdvcadre h2 {
    font-weight: bold;
    padding: 100px 20px 40px 20px;
    margin: 0 auto 1px auto; 
    color:#15b5b0;
}

.rdvblanc {
    background-color: rgb(255, 255, 255);
    width:100%;
    height:100%;
    padding-top: 10%;
    padding-bottom: 10%;
    border-radius: 2rem;
    text-align:center;
}

.rdvblanccourt {
    background-color: rgb(255, 255, 255);
    width:100%;
    height:100%;
    padding: auto;
    border-radius: 2rem;
    text-align:center;
}


/* Page Mentions légales */
#mentions {
    grid-column: 1;
    grid-row: 2;
    padding-top:180px;
    text-align: left;
}

#mentions h2 {
    padding-top:1.5rem;
}
#mentions ul {
    list-style:circle;
    text-align: left;
    display: block;
    padding-top: 2rem;
    font-size:1.2rem;
    font-family: muli, serif;
}
#mentions ul li {
    color:#777;
    text-align: justify;
    padding-bottom: 1rem;
}

#mentions p {
    text-align:justify;
    padding-top: 2rem;
    font-size:1.2rem;
    font-family: muli, serif;
    line-height:1.5rem;
}