app.css

/* 📦 1. Importer la police Pacifico */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

/* 2. Réinitialisation globale */
div#root{
  margin: 0rem !important;
}

.header-burgundy {
  color: #39404B; /* Burgundy */
  font-weight: bold;
  font-size: 1em;
  margin-bottom: 0.5em;
}

.burgundy-border {
  border: 2px solid #800020; /* Burgundy border */
  color: #800020;            /* Burgundy text */
  border-radius: 6px;
  padding: 0.5em 1em;
}

.source_body{
  margin: 2em;
  background-color: #ECF4F7;     
}

.layout_top {
    padding-top: 5em;
}

.css-w1lhxi{
  /* --color-background-light: #910029; */
  background-color: #910029 ;
  color: aliceblue;
}

.table_s{
  padding-top: 2em;
}
.table_t{
  padding-top: 1.3em;
}

.Title_Page {
   font-weight: bold;
   font-size: 2em;
   color: #39404B;
  display: block;
  box-sizing: border-box;
  position: relative;
width: 100%;
}

.Title_Page::after {
     content: '';
   position: absolute;
   bottom: -8px;
left: 0;
    width: 100%;
    height: 3px;
    background-color: #39404B;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.bodyp{
  margin: 0;
  padding: 0;
}

/* 3. Partie .presentation sans background image */
.presentation {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100%;
  position: relative;
  background-color: #f8f9fa; /* Light gray background instead of image */
  color: #2c3e50; /* Dark blue-gray text for good contrast */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
}

/* 4. Nom de l'app en haut à gauche, stylé Pacifico */
.App_name {
  position: absolute;
  top: 20px;
  left: 30px;
  font-size: 2.5em;
  font-family: 'Pacifico', cursive;
  color: #2c3e50; /* Dark color for contrast */
  z-index: 2;
}

/* 5. Texte de présentation avec effet elevated au survol */
.presentation_text {
  position: relative;
  z-index: 2;
  text-align: center;
  font-size: 2em;
  padding: 20px 30px;
  max-width: 80%;
  background: rgba(44, 62, 80, 0.05); /* Light dark background */
  border: 1px solid rgba(44, 62, 80, 0.1);
  border-radius: 8px;
  color: #2c3e50; /* Dark text color */
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.presentation_text:hover {
  background: rgba(44, 62, 80, 0.1);
  transform: translateY(-5px) scale(1.02);
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.15),
    0 0 15px rgba(44, 62, 80, 0.2);
}

/* 6. Responsive */
@media (max-width: 768px) {
  .App_name {
    font-size: 1.8em;
    top: 15px;
    left: 20px;
  }
  .presentation_text {
    font-size: 1.3em;
    padding: 15px 20px;
  }
}

@media (max-width: 768px) {
    .source_body {
        margin: 1em;
        padding: 0.5em;
    }
    
    .layout_top {
        padding-top: 2em;
    }
    
    .table_s, .table_t {
        padding-top: 1em;
    }
    
    /* Make inputs and buttons more touch-friendly on mobile */
    input, button, select {
        min-height: 44px; /* Apple's recommended touch target size */
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Improve table readability on mobile */
    .taipy-table {
        font-size: 14px;
    }
    
    /* Better text wrapping for info messages */
    .info-message {
        font-size: 14px;
        line-height: 1.4;
        margin-bottom: 1em;
    }
    
    /* Ensure burgundy borders are visible on mobile */
    .burgundy-border {
        border-width: 1px;
        margin-bottom: 1em;
    }
}

/* Improve button styling for mobile */
@media (max-width: 480px) {
    .source_body {
        margin: 0.5em;
    }
    
    .Title_Page {
        font-size: 1.5em;
    }
    
    .header-burgundy {
        font-size: 1.1em;
    }
}