@font-face {
    font-family: Garage Gothic Regular;
    src: url("../fonts/GarageGothicRegular.otf") format("opentype");
  }
  
  @font-face {
    font-family: Garage Gothic Bold;
    src: url("../fonts/GarageGothicBold.otf") format("opentype");
  }
  
  @font-face {
    font-family: Garage Gothic Black;
    src: url("../fonts/GarageGothicBlack.otf") format("opentype");
  }


html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

body {
  font-family: Manrope, sans-serif;
  font-size: 1em;
  font-weight: normal;
  margin: 0;
  padding: 2em;
  padding-bottom: 0em;
  height: 100%;
}



/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-bottom: 2em;

}

/* Logo */
.logo {
    height: 60px;
    width: auto;
    margin: auto 0; /* Répartit la marge en haut et en bas */
}

/* Titre centré */
.title {
    font-family: "Garage Gothic Black", sans-serif;
    font-size: 4em;
    margin: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Bouton Menu */
button {
    display: inline-block;
    padding: 0.5em 1em;
    font-size: 0.9em;
    font-weight: 600;
    color: white;
    background-color: #8AB587;
    border: none;
    border-radius: 1em;
    user-select: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, padding 0.3s ease;
    border-bottom: 3px solid #105F4A;
}

button:hover{
    margin-top: 1px;
    border-bottom-width: 1.5px;
    cursor: pointer;}


button:active{
    margin-top: 2.5px;
    border-bottom-width: 0px;
}


p {margin-bottom: 2em;}

p br {margin-bottom: 1em;}
  
h1 {
  font-family: Garage Gothic Black, sans-serif;
  font-size: 3.8em;
  margin-bottom: 0em;
  margin-top: 1em;
  font-weight: normal;
  text-align: center;}

h2 {
  font-family: Garage Gothic Regular, sans-serif;
  font-size: 2em;
  font-weight: normal;
  margin-bottom: 10px;}

h3 {
  font-family: Manrope, sans-serif;
  font-size: 1em;
  font-weight: bold;}

h4 {
    font-family: Manrope, sans-serif;
    font-size: 0.8em;
    font-weight: normal;
    font-style: italic;
    margin-bottom: 3em;
    text-align: right;}
  
img {
  display: block; /* Supprime les espaces autour des images */
  max-width: 100%; /* Limite la largeur des images à la taille de l'écran */
  max-height: 30em;
  height: auto; /* Maintient les proportions des images */
  border-radius: 0.6em;
  margin-bottom: 1em;
  margin: 0 auto 1em auto;;
}
  
/* Masquer scrollbar */
::-webkit-scrollbar {display: none;}
* {scrollbar-width: none;}
body {-ms-overflow-style: none;}


/* ----------------------------------------------------------
   ACCUEIL
---------------------------------------------------------- */
.acc {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.espaces {
  display: flex;
  width: 100%;
  height: 70vmin;
  gap: 2em;
}

.carte {
  position: relative;
  height: 50vh;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2em;
  width: 100vmin;
  height: 70vmin;
  position: relative;
}

.bubble {
  background-color: #8ab5877b;
  border: none;
  position: relative;
}

.bubble a {
  position: absolute;
  font-family: Garage Gothic Regular, sans-serif;
  font-size: 2em;
  color: #000;
  text-decoration: none;
  background: linear-gradient(0deg, #8AB587, #8AB587) no-repeat right bottom / 0 var(--bg-h);
  transition: background-size 300ms;
  --bg-h: 2px;
}

.bubble a:hover {
  background-size: 100% var(--bg-h);
  background-position-x: left;
  text-decoration: none;
}

.bubble1 a.mdh { top: 30%; left: 20%; }
.bubble1 a.mjc { top: 60%; right: 20%; }

.bubble2 a.voisins { top: 30%; left: 50%; }
.bubble2 a.gc { bottom: 25%; left: 20%; }

.bubble3 a.bibli { top: 10%; left: 15%; }
.bubble3 a.college { top: 30%; left: 10%; }
.bubble3 a.lycee { top: 50%; left: 20%; }
.bubble3 a.ime { top: 70%; left: 40%; }

.bubble4 a.creche { top: 20%;   left: 30%; }
.bubble4 a.ecole { top: 45%; right: 20%; }
.bubble4 a.adoma { bottom: 20%; left: 20%; }

.bubble1 { background-color: #d0ba2a7b; border-radius: 48% 40% 30% 47% / 61% 49% 64% 43%; }
.bubble2 { background-color: #8ab5877b; border-radius: 49% 44% 36% 64% / 62% 77% 59% 60%; }
.bubble3 { background-color: #63b1e17b; border-radius: 30% 60% 40% 80% / 55% 45% 55% 45%; }
.bubble4 { background-color: #de799c7b; border-radius: 40% 48% 52% 40% / 50% 58% 42% 48%; }

/* ----------------------------------------------------------
   BOUTONS PROJETS
---------------------------------------------------------- */
.projet-btn {position: absolute;}

/* Positionnement des boutons dans les bulles */

.p1  { top: 12%; left: 18%; }
.p2  { top: 30%; left: 45%; }
.p3  { top: 50%; left: 10%; }
.p4  { top: 60%; left: 50%; }

.p6  { top: 12%; left: 7%; }
.p7  { top: 10%; left: 32%; }
.p8  { top: 25%; left: 10%; }
.p9  { top: 24%; left: 75%; }
.p10 { top: 40%; left: 15%; }
.p11 { top: 30%; left: 45%; }
.p12 { top: 50%; left: 65%; }
.p13 { top: 55%; left: 30%; }
.p14 { top: 67%; left: 50%; }
.p15 { top: 75%; left: 20%; }

/* Crèche Chatelet */
.c1 { top: 10%; left: 20%; }
.c2 { top: 30%; left: 50%; }
.c3 { top: 50%; left: 25%; }

/* École Chatelet */
.e1 { top: 15%; left: 15%; }
.e2 { top: 25%; left: 60%; }
.e3 { top: 40%; left: 30%; }
.e4 { top: 60%; left: 10%; }
.e5 { top: 75%; left: 40%; }

/* Adoma */
.a1 { top: 20%; left: 20%; }
.a2 { top: 40%; left: 50%; }

/* Bibli */
.b1 { top: 30%; left: 30%; }

/* Collège */
.co1 { top: 15%; left: 20%; }
.co2 { top: 30%; left: 50%; }
.co3 { top: 45%; left: 30%; }
.co4 { top: 60%; left: 10%; }
.co5 { top: 75%; left: 30%; }

/* lycée */
.l1 { top: 30%; left: 20%; }

/* IME */
.i1 { top: 30%; left: 20%; }


/* ----------------------------------------------------------
   STYLES DE BULLES PAR CONTENU
---------------------------------------------------------- */

.bubble-mjc { background-color: #d0ba2a7b; flex: 1; border-radius: 50% 40% 40% 50% / 60% 40% 50% 30%; }
.bubble-mdh { background-color: #d0ba2a62; flex: 2; border-radius: 40% 60% 30% 30% / 50% 50% 40% 60%; }

.bubble-voisin { background-color: #8AB5877b; flex: 1; border-radius: 52% 38% 42% 48% / 58% 42% 56% 32%; }
.bubble-charpin { background-color: #B2CDA87b; flex: 2; border-radius: 42% 58% 35% 33% / 52% 48% 43% 61%; }

.bubble-creche { flex: 1; background-color: #de799c63; border-radius: 40% 60% 40% 50% / 60% 50% 50% 40%; }
.bubble-ecole { flex: 2; background-color: #e8729b5f; border-radius: 50% 40% 40% 60% / 50% 50% 60% 40%; }
.bubble-adoma { flex: 1.5; background-color: #e297bf6b; border-radius: 45% 55% 50% 45% / 55% 45% 60% 50%; }

.bubble-bibli { flex: 1.5; background-color: #63b1e17b; border-radius: 45% 55% 40% 50% / 60% 50% 50% 40%; }
.bubble-college { flex: 1.5; background-color: #71bae883; border-radius: 45% 50% 60% 60% / 40% 45% 50% 40%; }
.bubble-lycee { flex: 1; background-color: #5eb1e461; border-radius: 48% 52% 42% 48% / 28% 22% 32% 48%; }
.bubble-ime { flex: 1; background-color: #65b8ec74; border-radius: 40% 50% 45% 45% / 35% 35% 40% 30%; }

/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */
@media (max-width: 767px) {
  h1 { font-size: 2em; }
  h2 { font-size: 1.5em; }

  .grid {
    margin-top: 30em;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto);
    width: 90vw;
    height: auto;
    gap: 4vw;
  }

  .bubble {
    aspect-ratio: auto;
    height: 40vmin;
  }

  .bubble a {
    font-size: 1.5em;
  }
}






.deco {
    opacity: 30%;
	width: 50vmin;
	height: 50vmin;
	background: #b1c7bf;
	/* border: calc(50vmin * 0.09) solid #d7e3de; */
	position: absolute;
	top: calc(50% - (50vmin * 0.49));
	left: calc(50% - (50vmin * 0.49));
	overflow: visible;
	border-radius: 48% 40% 62% 47% / 61% 49% 64% 43%;
	animation: rotate 35s infinite linear;
	z-index: 1;
}

@keyframes rotate {
	0% { transform: rotate(0turn); }
	100% { transform: rotate(1turn); }
}

.deco::before {
	content: '';
	position: absolute;
	top: calc(50vmin * 0.1);
	left: calc(50vmin * 0.1);
	width: calc(100% - (50vmin * 0.3));
	height: calc(100% - (50vmin * 0.3));
	background: #659282;
	/* border: calc(50vmin * 0.065) solid #8bada0; */
	border-radius: 41% 40% 50% 55% / 49% 52% 51% 43%;
	z-index: -2;
	animation: rotateBefore 35s infinite linear;
}

@keyframes rotateBefore {
	0% { transform: rotate(0turn); }
	100% { transform: rotate(-2turn); }
}

.deco::after {
	content: '';
	position: absolute;
	top: calc(50vmin * 0.2);
	left: calc(50vmin * 0.2);
	width: calc(100% - (50vmin * 0.5));
	height: calc(100% - (50vmin * 0.5));
	background: #105f4a;
	/* border: calc(50vmin * 0.05) solid #3f7865; */
	border-radius: 42% 63% 51% 60% / 47% 62% 42% 52%;
	animation: rotateAfter 35s infinite linear;
}

@keyframes rotateAfter {
	0% { transform: rotate(0turn); }
	100% { transform: rotate(2turn); }
}







/* Conteneur du bouton */
.box-projet {
    position: relative;
    width: 200px;
    text-align: center;
    margin: 2em 0; /* Espacement pour s'intégrer dans votre mise en page */
}
  
/* Bouton principal */
.projet {
    padding: 15px 20px;
    background-color: #8AB587; /* Couleur de fond en harmonie avec votre projet */
    color: white;
    font-family: Garage Gothic Regular, sans-serif;
    font-size: 1.2em;
    cursor: pointer;
    border-radius: 1em; /* Bord arrondi comme vos tags */
    transition: all 0.3s ease;
    user-select: none; /* Empêche la sélection du texte */
}
  
/* Contenu caché */
.expanded-content {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: white;
    border-radius: 0.6em; /* Bord arrondi comme vos images */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s ease, padding 0.5s ease;
}
  
/* Animation au survol */
.box-projet:hover .expanded-content {
    max-height: 150px; /* Ajustez cette valeur en fonction de la quantité de contenu */
    padding: 10px;
}
  
  
/* Bouton d'action dans le contenu caché */
.action-button {
    display: inline-block;
    padding: 10px 15px;
    background-color: #105F4A; /* Couleur de fond en harmonie avec vos tags */
    color: white;
    font-family: Garage Gothic Regular, sans-serif;
    font-size: 1em;
    text-decoration: none;
    border-radius: 1em; /* Bord arrondi comme vos tags */
    transition: background-color 0.3s ease;
}
  
/* Effet au survol du bouton d'action */
.action-button:hover {
    background-color: #0A4536; /* Assombrir légèrement la couleur au survol */
}
  









/* Masque l'overlay au départ */
#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0); /* Fond totalement transparent au départ */
    justify-content: flex-end;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;}

/* Quand l'overlay est actif */
#overlay.active {
    opacity: 1;
    background: rgba(0, 0, 0, 0.8); /* Fait apparaître progressivement le fond sombre */}

/* Conteneur de l'iframe avec animation */
.overlay-content {
    width: 66%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s ease-in-out;}

/* Active l'animation quand la classe 'active' est ajoutée */
#overlay.active .overlay-content {
    transform: translateX(0);}

#closeOverlay {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
    margin-top: 0px;
    border-bottom-width: 0px;
}

#closeOverlay::before,
#closeOverlay::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 3px;
    background-color: black;
    transition: opacity 0.2s ease-in-out;
}

#closeOverlay::before { transform: rotate(45deg); }
#closeOverlay::after { transform: rotate(-45deg); }

#closeOverlay:hover { transform: rotate(90deg); }
#closeOverlay:hover::before,
#closeOverlay:hover::after { opacity: 0.5; }

/* Iframe plein écran dans le conteneur */
#overlayFrame {
    flex-grow: 1;
    width: 100%;
    border: none;}



@media (max-width: 767px) {
    #overlay {
        align-items: flex-end; /* Fait apparaître le contenu depuis le bas */
    }

    /* Modifie l'animation pour que la page projet glisse du bas */
    .overlay-content {
        width: 100%; /* Pleine largeur */
        height: 80%; /* 80% de la hauteur de l'écran */
        border-radius: 20px 20px 0 0; /* Coins arrondis en haut */
        transform: translateY(100%); /* Caché sous l'écran */
        transition: transform 0.4s ease-in-out;
    }

    /* Active l'animation pour faire remonter la page projet */
    #overlay.active .overlay-content {
        transform: translateY(0);
    }
}


/* display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-bottom: 2em;
 */


 /* display: flex;
 justify-content: center;
 align-items: center;
 position: absolute;
 bottom: 0;
 width: 100%;
 margin: 0;
 margin-bottom: 2em;
 margin-right: 25em; */


 
footer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 1em;
    margin-bottom: 1em;

    padding-top: 1em;
    padding-bottom: 0em;
}

/* footer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: 0;
    margin-bottom: 2em;
    padding: 2em;
    border: 2px solid red;
} */




.spacer, .about-container {
    display: block; /* Transforme le bouton en élément de bloc */
    margin-left: auto; /* Crée un espace à gauche pour le pousser à droite */
    margin-right: 0; /* Assure que le bouton est collé à la droite */
    white-space: nowrap;
    min-width: 5.7em;
    height: 20px;
}



/* Conteneur des boutons de navigation */
.navigation-lieux {
    display: flex;
    justify-content: space-around; /* Éloigne les éléments */
    align-items: center;
    width: 100%;
    padding: 10px 20px; /* Ajoute du padding pour aérer */
}

/* Boutons texte */
.nav-button {
    color: black;
    text-decoration: none;
    font-size: 1em;
    text-align: center;
    width: auto; /* Ajuste à la taille du texte */
    padding: 5px 10px;
}

.nav-button.prev {text-align: left;}

.nav-button.next {text-align: right;}

/* Affichage bloc du strong */
.nav-button strong {display: block;}

.underline {
    position: relative;
    display: inline-block;
    padding-bottom: 2px;
    background: linear-gradient(0deg, #8AB587, #8AB587) no-repeat right bottom / 0 var(--bg-h);
    transition: background-size 300ms;
    --bg-h: 2px;
}

.nav-button:hover .underline {
    background-size: 100% var(--bg-h);
    background-position-x: left;
}

/* Icônes SVG pour mobile */
.nav-button.mobile-only {
    display: none; /* Caché par défaut */
}

/* Style des flèches SVG */
.nav-icon {
    width: 100px; /* Taille plus grande */
    height: auto;
    padding: 0;
    margin: 0;
}

/* Affichage des icônes SVG uniquement sur mobile */
@media (max-width: 768px) {
    .nav-button {
        display: none; /* Cache les liens texte */
    }
    .nav-button.mobile-only {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .nav-button.prev.mobile-only {
        justify-content: flex-start; /* Flèche gauche collée au bord */
    }
    .nav-button.next.mobile-only {
        justify-content: flex-end; /* Flèche droite collée au bord */
    }
}