html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto; /* prend tout l’espace restant */
}

footer {
  flex-shrink: 0; /* ne rétrécit jamais */
}


.navbar .nav-link {
  background-color: #f8f9f7 !important;
  font-weight: 700;   
  color: #808080;
}

.navbar .nav-link:hover {
  color: #0080c6ff;  
}
    
    body {
  background-color: #f8f8ec   ;
  color: #1a1a1a;
    }

    a {
  text-decoration: none;
  color: inherit;
}

    
    .card {
      height: auto;
      min-height: 0;
      background-color: #f8f9f7;
    }
    .card-img-top {
      width: 100%;
      height: auto;
      display: block;
    }

.svg-container svg {
  width: 500px;  /* taille par défaut sur ordinateur */
  height: auto;
  display: block;
  margin: 0 auto; /* centré */
}

@media (max-width: 768px) {
  .svg-container svg {
    width: 80%; /* réduit sur mobile */
  }

    .container-pupitre {
    width: 80%; /* réduit sur mobile */
  }


}



    /* Barre décorative */
.separator {
  width: 100%;
  border-top: 5px solid #808080; 
}


    /* Boutons alignés et espacés */
    .bouton {
      display: flex;
      justify-content: center;
      gap: 20px;
      flex-wrap: wrap;
      margin-top: 20px;
    }

/* Boutons en version mobile avec @media (600px) */
@media (max-width: 600px) {
  .bouton {
    flex-direction: column;
  }

  .logo-text {
    font-size: 0.9rem !important; /* Ajuste selon tes besoins */
  }
  .logo-text-2 {
    font-size: 0.9rem !important; /* Plus petit pour le sous-titre */
    display: block !important;   /* Optionnel : force le sous-titre à passer dessous si c'est trop large */
    margin-left: 0 !important; /* Aligne à gauche si passage à la ligne */
  }

}


    /* Texte centré dans la présentation */
    .presentation p {
      text-align: center;
    }

    /* Google Font Titres */

    

h1 {
  max-width: 700px;
  margin: 3rem auto 1.5rem;
  padding: 0 1rem;

  font-family: "Merriweather", serif;
  font-size: 3rem;
  line-height: 1.2;
  font-weight: 700;
  color: #222;

  text-align: center;
}


h5 {
  font-family: "Kablammo", system-ui;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "MORF" 0;
  font-size: 2rem;
}

.logo-text {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 2rem;      /* taille du texte */
  color: #0080c6ff;       /* couleur du texte */
}

.logo-text-2 {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 2rem;      /* taille du texte */
  color: #808080;       /* couleur du texte */
}


/* MODULE - SIMULATION */

.sim-machine,
.sim-pupitre {
  max-width: 100%;
    display: block;
}



/* ANIMATIONS */


/* Animations logo navbar*/
.logo-img {
  transition: transform 0.3s ease;
}

.logo:hover .logo-img {
  transform: scale(1.2) rotate(8deg);
}




/* Animations cartes*/
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.card:hover {
  transform: translateY(-10px) translateX(5px); /* décalage */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* ombre */
}

/* Ombre plus foncée pour la carte active */
.card.darker {
 box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
  transition: none; /* pas d’animation */
   transform: rotate(2deg);
}

/* Désactiver le hover pour la carte active */
.card.darker:hover {
  transform: rotate(2deg);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8); /* reste la même ombre */
}


/* Métronome */

#g27, #g29, #g30, #g31 {
    cursor: pointer;
  }

  #g6 {
  display: block;
}
#g37 {
  display: none;
}
#g1 {
  display: block;
}

  .animate-rythm {
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% {
    opacity: 1; /* visible */
  }
  50% {
    opacity: 0; /* invisible */
  }
}

/* Définir l'animation de retournement horizontal 
.animate-flip {
  animation: flip 1s infinite;  /* Animation de 1 seconde, répétée indéfiniment 
}

@keyframes flip {
   0%, 100% {
    opacity: 1; /* visible 
  }
  50% {
    opacity: 0; /* invisible 
  }
} */


  /* La fenêtre (infobulle) */
  #infoBox {
    position: absolute;
    background: white;
    border: 1px solid #999;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    display: none; /* cachée par défaut */
    pointer-events: none;
  }


.content {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Titre niveau 1 */
.title-level-1 {
  margin: 3rem 0 1.5rem;

  font-family: "Merriweather", "Georgia", serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.25;
  color: #111;
}



/* Procédure */


.content {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Titres */
.title-level-1 {
  margin: 3rem 0 1.5rem;
  font-family: "Merriweather", "Georgia", serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #111;
}

.title-level-2 {
  margin: 2.5rem 0 1rem;
  font-family: "Merriweather", "Georgia", serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #222;
}



.steps {
  list-style: none;          /*enlève les puces natives */
  padding-left: 0;
  margin: 0 0 2rem;

  font-family: "Georgia", serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #333;
}

.steps li {
  position: relative;
  padding-left: 1.2rem;      /* espace pour la puce */
  margin-bottom: 0.6rem;
}

/* Puce personnalisée */
.steps li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0.1em;

  color: #666;
  font-size: 1.2em;
  line-height: 1;
}

.content-text {
  max-width: 700px;          /* largeur de lecture */
  margin: 0 auto 1.5rem;     /* centré + espace entre paragraphes */
  padding: 0 1rem;           /* marge gauche / droite sur mobile */
  
 
  font-size: 1.05rem;
  line-height: 1.7;
  color: #333;

  text-align: justify;   
}




/* PUPITRE-MACHINE APPLICATION */


#g1, #g466, #g28, #g35, #g464, #g468, #g469 {
    cursor: pointer;
  }

#g1.EnService {
  filter: drop-shadow(0 0 6px #00ffcc);
  opacity: 1;
}



/* effet de bouton au clic */
.push {
  filter: brightness(1.3); /* +30% de luminosité */
}

.hide {

  display: none !important;
}


/* Messages d'information, pupitre-machine */

#messages-container {
  max-width: 600px;      /* confort de lecture */
  margin: 20px auto;     /* centrer horizontalement */
  text-align: center;
  display: block;        /* pas flex pour éviter superposition */
  position: relative;   
}

.message {
  font-size: 1rem;
  font-weight: 500;
  margin: 0;             /* pas de margin-top qui décalerait les div */
  padding: 2px 0;        /* espace interne */
  min-height: 1em;       /* garantit que le div garde sa place même vide */
}


.alert-red {
  color: red;
}

.alert-blue {
  color: rgb(6, 143, 255);
}