/* Réinitialisation */
*,
*:before,
*:after {
  box-sizing: inherit;
}

* {
	margin:0;
	padding:0;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	-moz-font-smoothing:antialiased;
	-o-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

/* LAYOUT PRINCIPAL */

html {
  height: 100%;
  box-sizing: border-box;
}

body {
  text-align: center;
  margin: 0;
  padding: 0;
  position: relative;
  min-height: 100%;
  font-family: geologica;
  background-color: #f4edd5;
}
footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0.2rem;
  background-color: #f4edd5;
  text-align: center;
}


a {
    text-decoration: none;
    color: #e10a3a;
  }

/* TYPOGRAPHIE BODY,TEXTE */
@font-face {
  font-family: 'newsreader';
  font-display: swap;
  font-weight: normal;
  font-style: normal;
  src: url('font/Newsreader.ttf');
}
@font-face {
  font-family: 'geologica';
  font-display: swap;
  font-weight: normal;
  font-style: normal;
  src: url('font/Geologica.ttf');
}

/* TYPOGRAPHIE */
@font-face {
  font-family: 'grenze';
  font-display: swap;
  font-weight: normal;
  font-style: normal;
  src: url('font/Grenze-Regular.ttf');
}
@font-face {
  font-family: 'amarante';
  font-display: swap;
  font-weight: normal;
  font-style: normal;
  src: url('font/Amarante-Regular.ttf');
}
@font-face {
  font-family: 'italianno';
  font-display: swap;
  font-weight: normal;
  font-style: normal;
  src: url('font/italianno-regular-webfont.ttf');
}
@font-face {
  font-family: 'textmeone';
  font-display: swap;
  font-weight: normal;
  font-style: normal;
  src: url('font/TextMeOne-Regular.ttf');
}
@font-face {
  font-family: 'ranga';
  font-display: swap;
  font-weight: normal;
  font-style: normal;
  src: url('font/Ranga-Regular.ttf');
}
@font-face {
  font-family: 'twinklestar';
  font-display: swap;
  font-weight: normal;
  font-style: normal;
  src: url('font/TwinkleStar-Regular.ttf');
}
@font-face {
  font-family: 'pirataone';
  font-display: swap;
  font-weight: normal;
  font-style: normal;
  src: url('font/PirataOne.ttf');
}

/* STYLES FRANPONAIS */
.divA {
  font-family: "twinklestar";
}

.divB {
  font-family: "ranga";
}

.divC {
  font-family: "pirataone";
}

.divD {
  font-family: "textmeone";
}

.divE {
  font-family: "amarante";
}

.divF {
  font-family: "grenze";
}

.center-text {
  text-align: justify;
  margin: 0 auto;
  font-family: newsreader;
  padding: 60px 20px;
  width: 80%; /* Adjust the width as needed */
}

.center-text p {
  line-height: 30px;
}

.center-text h3 {
  font-family: geologica;
}
.center-text h1 {
  font-family: geologica;
}

.center-text a {
  text-decoration: underline;
  color: #e10a3a
}

#franpostore {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  align-items: center;
  text-align: center;
  display: flex;
  margin: 0 auto;
  padding: 0;
  width: 768px;
  max-width: 90%;
}

#franpotexte {
  position: absolute;
  margin: 0 auto;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  top: 35%;
}

#menus {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0.3rem;
  background-color: #e10a3a;
  text-align: center;
  list-style: none;
  display: block;
}

#loadingIndicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

#loadingIndicator img {
  width: 200px;
  height: 200px;
}


/* header */

.header {
  background-color: #f4edd5;
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.5);
  position: fixed;
  display: block;
  float: left;
  text-decoration: none;
  width: 100%;
  z-index: 3;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #f4edd5;
}

.header li a {
  display: block;
  padding: 20px 20px;
  border-top: none;
  border-bottom: none;
  border-left: none;
  border-right: 2px solid #e10a3a;
  text-decoration: none;
}

.header li a:hover,
.header .menu-btn:hover {
  color : #20150f;
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 240px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}



/* 48em = 768px */

@media (min-width: 48em) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 20px 30px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
 
  * {
		box-sizing: border-box;
	}

	/* passer body (et tous les éléments de largeur fixe) en largeur automatique */
	body {
		width: auto;
		margin: 0;
		padding: 0;
	}
	#randomImage {
  width: 100%;
  height: auto;
  }
  
#franpostore {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  align-items: center;
  text-align: center;
  display: flex;
  margin: 0 auto;
  padding: 0;
  width: 50%;
  max-width: 650px;
  aspect-ratio: 1 / 1; /* Makes the div square */
}

}

/*** Buttons :) ***/
.btn {
  border:none;
  background:none;
  box-shadow:1px 1px 2px rgba(21, 21, 21, 0.1);
  cursor:pointer;
  font-size:1rem;
  font-family: newsreader;
  margin:0 1rem;
  padding:.25rem 2rem;
  transition:all .25s ease-in-out;
}
.btn:focus, .btn:hover {
  box-shadow:1px 1px 2px rgba(21, 21, 21, 0.2);
}

/*** Info button ***/
.btn-info {
  background: hsl(212,48%,94%);
  color:hsl(214,100%,44%);
}
.btn-info:hover {
  background: hsl(212,49%,88%);
}

/*** Submit button ***/
.btn-submit {
  background: hsl(110,21%,93%);
  color:hsl(141,100%,22%);
}
.btn-submit:hover {
  background: hsl(111,21%,86%);
}

/* CSS */
.button-50 {
  appearance: button;
  background-color: #e10a3a;
  background-image: none;
  border: 1px solid #20150f;
  border-radius: 50px;
  box-shadow: #fff 4px 4px 0 0,#20150f 4px 4px 0 1px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: newsreader, italic;
  font-size: 14px;
  font-weight: 400;
  line-height: 15px;
  margin: 0 5px 0 0;
  padding: 12px 50px;
  overflow: visible;
  padding: 12px;
  text-align: center;
  text-transform: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}

.button-50:focus {
  text-decoration: none;
}

.button-50:hover {
  text-decoration: none;
}

.button-50:active {
  box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
  outline: 0;
}

.button-50:not([disabled]):active {
  box-shadow: #20150f 2px 2px 0 0, #20150f 2px 2px 0 1px;
  transform: translate(2px, 2px);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* Optional: space between buttons */
  justify-content: center; /* Center buttons horizontally */
  align-items: center;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .button-50 {
    padding: 12px 50px;
  }
}