@font-face {
  font-family: Basteleur-Bold;
  src: url("./fonts/Basteleur-Bold.otf");
}
@font-face {
  font-family: Basteleur;
  src: url("./fonts/Basteleur-Moonlight.otf");
}
@font-face {
  font-family: NeuMontreal;
  src: url("./fonts/NeueMontreal-Regular.otf");
}
@font-face {
  font-family: OldLondon;
  src: url("./fonts/OldLondon.ttf");
}
@font-face {
  font-family: Carolingia;
  src: url("./fonts/carolingia.ttf");
}
@font-face {
  font-family: Onciale;
  src: url("./fonts/Onciale.ttf");
}
@font-face {
  font-family: Pally;
  src: url("./fonts/Pally-Regular.otf");
}
a{
  text-decoration: none;
}
.basteleur{
  font-family:Basteleur-Bold;
}

.onciale-font{
  font-size: 250px;
  font-family: Onciale;
}
.basteleur-font{
  font-size: 250px;
}
.OldLondon-font{
  font-size: 250px;
  font-family: OldLondon;
}
.Carolingia-font{
  font-size: 350px;
  font-family: Carolingia;
}

/* Réinitialisation des styles de base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Évite que le padding augmente la taille des éléments */
}
button {
    all: unset;  /* Réinitialise tous les styles hérités et par défaut */
    background: none; /* Optionnel: supprime le fond par défaut */
    font: inherit; /* Optionnel: hérite de la police du parent */
    border: none; /* Optionnel: supprime les bordures par défaut */
    padding: 0; /* Optionnel: supprime les marges internes par défaut */
    outline: none; /* Supprime l'outline de focus par défaut */
    cursor: pointer; /* Ajoute un curseur de type pointer pour indiquer qu'il s'agit d'un bouton */
}
/* Suppression des styles par défaut sur les titres, paragraphes et listes */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
  font-weight: 100;
}

body {
  background-color: #9C0204;
  color: white;
  padding: 0;
  margin: 0;
  font-family: Pally;
}

p {
  padding: 0;
  margin: 0;
}

body p::selection {
  background-color: #ffffff; /* Couleur de fond */
  color: #07002b; /* Couleur du texte */
}


.text-defilement {
  font-family: "Basteleur";
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  display: none;
}

/* Conteneur des deux blocs de texte */
.defilement-conteneur {
  display: flex;
  animation: defilement 80s linear infinite;
}

/* Chaque bloc de texte */
.text-defilement p {
  font-size: 20vw;
  display: inline-block;
  padding-right: 2rem; /* Espacement léger entre les duplications */
}

/* Animation pour déplacer le texte */
@keyframes defilement {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-50%);
  }
}

.rond {
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 99999px;
}
.sous-titre {
  display: flex;
  justify-items: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.info {
  position: relative;
  z-index: 10;
  background: #00569d;
  padding: 48px 24px;
  padding-bottom: 100px;
}

.info-div {
  max-height: 32px; /* Valeur initiale, petit espace pour le titre */
  overflow: hidden;
  transition: max-height 0.3s ease-in-out; /* Transition de max-height */
}

.info-div.open {
  max-height: 3000px; /* Grande valeur pour couvrir tout le contenu */
  transition: max-height 0.3s ease-in-out; /* Transition de max-height */
}
.info-paragraphe{
  font-size: 20px;
}
.info-title {
  color: #ffffff56;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.info-texte {
  margin-right: 24px;
  font-size: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 50%;
  margin-left: auto; /* Pousser le bloc vers la droite */
}

.info-big-letter {
  font-size: 70px;
  position: relative;
  top: -12px;
}


.info-trait {
  width: 100%;
}

.size-option {
  position: relative;
  width: 100%;
  height: 2px;
  background-color: white;
}

.size-rounded {
  top: -200%;
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 99999px;
  background-color: white;
}

.style {
  background-color: #edc000;
  padding: 48px 24px;
}
.style-flex {
  margin-top: 50px;
  display: flex;
  gap: 40px 100px; /* 20px en vertical (top), 100px en horizontal (x) */
  flex-wrap: wrap;
}

.style h4 {
  font-weight: normal;
  font-size: 16px;
}

.size {
  width: 200px;
}
.size-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.size-px {
  display: flex;
  gap: 2px;
}
.zone-text-interactif {
  margin-top: 50px;
  border: 1px white dashed;
  font-family: Basteleur-Bold;
  font-size: 100px;
}




.rast-title {
  font-size: 18px;
}

.rast-taille {
  width: 70%;
}

.rast-explication {
  margin-top: 40px;
  margin-left: auto; /* Pousser le bloc vers la droite */
  width: 50%;
  display: flex;
  gap: 12px;
  flex-direction: column;
  justify-content: end;
}

.character {
  background-color: #EDC000;
  
  padding: 48px 24px;
  
}
.character-flex{
  display: flex;
  justify-content: space-between;
  position: relative;
}
.asciiGrid {
  margin-top: 48px;
  height: fit-content;
  display: grid;
  grid-template-columns: repeat(7, 0fr);
  margin-bottom: 80px;
  font-family: Basteleur-Bold;

}
@media (min-width: 1280px) {
  .asciiGrid {
    grid-template-columns: repeat(9, 1fr); /* 3 colonnes */
  }
}

/* 💻 Écran moyen (Tablettes et petits laptops) */
@media (max-width: 1024px) {
  .asciiGrid {
    grid-template-columns: repeat(5, 1fr); /* 3 colonnes */
  }
}

/* 📱 Tablette en mode portrait */
@media (max-width: 768px) {
  .asciiGrid {
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
  }
}

/* 📲 Mobile */
@media (max-width: 600px) {
  .asciiGrid {
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
  }
}

/* 📱 Petit mobile */
@media (max-width: 400px) {
  .asciiGrid {
    grid-template-columns: repeat(1, 1fr); /* 1 colonne */
  }
}

.ascii-grid-item {
  /* background-color: blue; */
  width: 90px;
  height: 90px;
  font-size: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 50%;
}
.ascii-grid-item:hover {
  border: solid #fff 2px;
  transition: 0.1s ease-out;
}
.ascii-grid-item.selected {
  background-color: rgba(255, 255, 255, 0);
  color: #eceae1;
}

.ascii-grid-item span {
  position: relative;
  top: 8px;
}

.big-letter {
  font-family: Basteleur-Bold;
  width: 30vw;
  height: 30vw;
  font-size: 24vw;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: #ffffff;
  border-radius: 50%;
  color: #EDC000;

  transform: rotate(0deg); /* Aucune rotation par défaut */
  transition: transform 0.3s ease; /* Transition fluide */
}
.big-letter p {

  position: relative;
  top: -20%;
}

.letter-precision p {
  margin-top: 24px;
}
.letter p {
  margin-top: 24px;
  width: 60%;
}

.letter-precision {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  justify-items: center;
  position: sticky;
  top: 0;
  align-self: start; /* Permet d'assurer que l'élément respecte le sticky */
}
.letter-precision-p {
 width: 70%;
}

.letter-title {
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
  color: #ffffff50;
}

.slider {
  -webkit-appearance: none; /* Supprime le style par défaut */
  appearance: none;
  width: 100%;
  height: 2px;
  background: #ffffff59;
  outline: none;
  border-radius: 999px;
  transition: transform 0.2s ease;
}

/* Style du curseur (cercle blanc) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; /* Taille du cercle */
  height: 16px;
  background: #fff; /* Couleur blanche */
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.letter-marge {
  display: flex;
  gap: 24px;
}
/* Effet au survol */
.slider::-webkit-slider-thumb:hover {
  background: #eee;
  transform: scale(1.1);
}

.slider::-moz-range-thumb:hover {
  background: #eee;
  transform: scale(1.1);
}
.justification button {
  all: unset; /* Supprime tous les styles */
  cursor: pointer;
  opacity: 0.3; /* Opacité réduite par défaut */
  transition: opacity 0.2s ease-in-out;
}

.justification button.active {
  opacity: 1; /* Complètement visible quand actif */
}

button img {
  height: 16px;
}


.text-cercle {
  font-family: Basteleur-Bold;
  height: 40vh;
  margin-top: 100vh;
  overflow: hidden;
  z-index: 0;
  
}
.et {
  z-index: 20;
  position: absolute;
  color: white;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5vw;
}


.majuscules {
  z-index: 20;
  position: absolute;
  top: 70%;
  left: 50%;
  width: 80vw;
  transform: translate(-50%, -50%);
}
.majuscules text {
  fill: white;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 10;
  animation: rotate 100s linear infinite;
  transform-origin: 250px 250px;
}
.minuscules {
  z-index: 20;

  position: absolute;
  top: 70%;
  left: 50%;
  width: 55vw;
  transform: translate(-50%, -50%);
}
.minuscules text {
  text-transform: lowercase;
  fill: white;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 10;
  animation: rotate 100s linear infinite;
  transform-origin: 250px 250px;
}

.majusculesSpe {
  z-index: 20;

  position: absolute;
  top: 70%;
  left: 50%;
  width: 70vw;
  transform: translate(-50%, -50%);
}
.majusculesSpe text {
  text-transform: lowercase;
  fill: white;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 10;
  animation: -rotate 100s linear infinite;
  transform-origin: 250px 250px;
}
.minusculesSpe {
  z-index: 20;

  position: absolute;
  top: 70%;
  left: 50%;
  width: 45vw;
  transform: translate(-50%, -50%);
}
.minusculesSpe text {
  /* text-transform: lowercase; */
  fill: white;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 10;
  animation: -rotate 100s linear infinite;
  transform-origin: 250px 250px;
}
.chiffre {
  z-index: 20;

  position: absolute;
  top: 70%;
  left: 50%;
  width: 30vw;
  transform: translate(-50%, -50%);
}
.chiffre text {
  fill: white;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: 2px;
  animation: rotate 25s linear infinite;
  transform-origin: 250px 250px;
}
.spe {
  z-index: 20;

  position: absolute;
  top: 70%;
  left: 50%;
  width: 18vw;
  transform: translate(-50%, -50%);
}
.spe text {
  fill: white;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: 2px;
  animation: -rotate 25s linear infinite;
  transform-origin: 250px 250px;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes -rotate {
  to {
    transform: rotate(-360deg);
  }
}

/* .textcircle {
    transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
    transform-origin: 250px 250px;
  }
  
  svg:hover .textcircle {
    transform: scale(1.2) rotate(90deg);
  } */

.img {
  padding: 48px 24px;
  display: flex;
  gap: 12px;
  background: #9C0204;
  overflow: hidden;
  position: relative;
  height: 100%;
  justify-content: center;
  align-items: center;
}


.img1 img,
.img2 img {
  width: 100%; 
}






.lettrine-flex{
  display: flex;
}

.lettrine-flex span{
  font-size: 80px;
  font-family: Basteleur-Bold;
}

.button-changeFont{
  z-index: 80;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  margin: 24px;
  display: flex;
  font-size: 20px;
  border-radius: 8px;
}

.button-moonlight {
  color:#edc000;
  font-family: Basteleur-Bold;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 25px;
  width:25px;
  z-index: 20;

}
.button-basteleur {
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 25px;
  width:25px;
  font-family: Basteleur;

}

.button-bg{
  position: absolute;
  width: 50%;
  right: 0;
  height: 100%;
  inset: 0;
  /* left: 50%; */
  background: rgb(255, 255, 255);
  /* border-radius: 8px; */
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

}

.text_explication{
  display: flex;
  gap: 24px;
  width: 50%;
  margin-left: auto;
}
@media (min-width: 1280px) {
  .text_explication {
    width: 50%;
  }
}

/* 💻 Écran moyen (Tablettes et petits laptops) */
@media (max-width: 1024px) {
  .text_explication {
    width: 60%;
  }
}

/* 📱 Tablette en mode portrait */
@media (max-width: 768px) {
  .text_explication {
    width: 70%;
  }
}

/* 📲 Mobile */
@media (max-width: 600px) {
  .text_explication {
    width: 80%;
  }
}

/* 📱 Petit mobile */
@media (max-width: 400px) {
  .text_explication {
    width: 100%;
  }
}


.section-images2 {
  padding: 48px 24px;
  background-color: #9C0204;
}

.section-images2 img {
  width: 100%;
  height: auto;
}

.section-images2-flex{
  display: grid;
  grid-template-columns: repeat(2, 2fr);
  width: 100%;
  gap: 4px;
}



.font-history {
  background: #00569d;
  
  padding: 48px 24px;


}
.font-histor-contanier{
  width: 100%;
  margin-top: 68px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Colonnes adaptatives */
  justify-content: space-between;
  gap: 40px;
}
.font-etoile{
  font-size: 30px;
}

.footer{
  background-color: #9C0204;
  padding: 48px 24px;
}
.footer-title{
  color: #ffffff54;
  width: max-content;
  margin-bottom: 8px;
}

.font-etoile-title{
  position: relative;
  top: -5px;
  margin-bottom: 16px;
}

.license{
  width: 60%;
}

.footer-flex{
  margin-top: 50px;
  flex-wrap: wrap;
  width: 70%;
  display: flex;
  gap: 40px;
}
.footer-lastline{
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-top: 80px;
  color: white;

}
.footer-lastline a{
  color: white;

}
.button-flex{
  display: flex;
  gap: 12px;
  font-size: 14px;
}
.button-flex p{
  width: max-content;
  
}
.buttons{
  margin-top: 12px;
}
.button-primary{
  background: #ffffff;
  color: #09002B;
  border-radius: 99px;
  padding: 12px 12px 8px 12px;
  width: fit-content;

}
.button-primary a{
  color: #09002B;

}
.button-primary:hover{
  background: #ffffffb1;
 
  transition: all 0.2s ease-out;

}
.button-secondary{
  position: relative;
  width: fit-content;
  border: solid 1px white;
  color: #ffffff;
  border-radius: 99px;
  padding: 12px 12px 8px 12px;
  overflow: hidden;
}
.button-secondary:hover{
  transition: all 0.2s ease-out;

  background: #ffffff2f;
}
.button-secondary p{
   position: relative;
}

.bg-button{
  inset: 0;
  border-radius: 99px;
  background: #ff0000;
  position: absolute;
  transform: translateY(100%);
  width: 100%;
  height: 100%;
}


.footer-BigText{
  font-size: 10vw;
}
.footer-firstLine{
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 50px;

}
.footer-firstLine h3{
  position: relative;
  top: 25px;
}

#retour {
  top: 0%;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgb(226, 193, 249);
	background: radial-gradient(
		circle,
		rgba(226, 193, 249, 1) 0%,
		rgba(240, 255, 250, 1) 25%,
		rgba(251, 255, 228, 1) 50%,
		rgba(254, 218, 251, 1) 75%,
		rgba(226, 193, 249, 1) 100%
	);
	position: absolute;
  z-index: 50;
}

#retour a {
	/*placer le nom de votre font*/
	font-size: 18px;
	text-decoration: none;
	color: #f34b40;
}
.text_explication-container{
  background: #00569d;
  padding: 48px 24px;
}


.visuels {
  padding: 48px 24px;
  background-color: #EDC000;
}

.visuels img {
  width: 100%;
  height: 100%;
}

.visuels-grid{
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 3fr);
  width: 100%;
  gap: 4px;
}

.navbar{
  position: fixed;
  z-index: 50;
  display: flex;
  top: 0;
  justify-content: center;
  align-items: center;
  justify-items: center;
  width: 100%;
  background: #ffffff16;
}
.navbar ul {
  list-style-type: none; /* Enlève les puces */
  margin: 10px 0;
  padding: 8px 12px;
  display: flex;
  border-radius: 999px;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  font-family: Basteleur;

}



.navbar a{
  color: rgba(255, 255, 255, 0.432);
}