:root {
  --tir19-bg: #0c1020;
  --tir19-card: rgba(255, 255, 255, 0.08);
  --tir19-border: rgba(255, 255, 255, 0.15);
  --tir19-text: #f5f5f5;
  --tir19-muted: #b8bdd0;
  --tir19-physical: #ff6b6b;
  --tir19-emotional: #4d96ff;
  --tir19-intellectual: #ffd93d;
  --tir19-radius: 22px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
 }
.tir19-page {
  width: 100%;
  max-width: 1200px;
  margin: auto;
  padding: 30px 20px 60px;
}
/* HEADER */
.tir19-header {
  text-align: center;
  padding: 60px 20px 40px;
}
.tir19-header h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin-bottom: 15px;
  background:
    linear-gradient(90deg, #ffffff, #9eaaff);
  -webkit-background-clip: text;
  color: transparent;
}
.tir19-header p {
  max-width: 700px;
  margin: auto;
  color: var(--tir19-muted);
  font-size: 1.15rem;
  line-height: 1.6;
}
/* CARTES GENERALES */
.tir19-intro-card, .tir19-form-card, .tir19-profile-card, .tir19-information-card, .tir19-chart-card, .tir19-explanation-card {
  background:
    var(--tir19-card);
  border:
    1px solid var(--tir19-border);
  backdrop-filter:
    blur(15px);
  border-radius:
    var(--tir19-radius);
  padding: 30px;
  margin-bottom: 30px;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, .25);
}
/* INTRO CYCLES */
.tir19-cycle-intro {
  display: grid;
  grid-template-columns:
    repeat(3, 1fr);
  gap: 20px;
  margin-top: 25px;
}
.tir19-intro-item {
  padding: 25px;
  border-radius: 18px;
  background:
    rgba(255, 255, 255, .05);
  text-align: center;
}
.tir19-intro-item span {
  font-size: 2rem;
  display: block;
  margin-bottom: 10px;
}
/* FORMULAIRE */
.tir19-form-line {
  display: flex;
  gap: 15px;
  margin-top: 15px;
}
#tir19-birth-date {
  flex: 1;
  padding: 15px;
  border-radius: 14px;
  border: none;
  font-size: 1rem;
	background-color: #4d375b;
}
#tir19-birth-date{
    -webkit-appearance:none;
    appearance:none;
    background:#4d375b;
    color:#fff;
}
input[type="date"]{
    color:#fff;
    padding:8px 12px;
}
input[type="date"]::-webkit-calendar-picker-indicator{
    filter:brightness(0) invert(1);
    cursor:pointer;
}
.tir19-button {
  padding: 15px 30px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  background:
    linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  transition: .3s;
}
.tir19-button:hover {
  transform:
    translateY(-3px);
  box-shadow:
    0 10px 25px rgba(0, 0, 0, .4);
}
/* CYCLES */
.tir19-cycles-container {
  display: grid;
  grid-template-columns:
    repeat(3, 1fr);
  gap: 25px;
  margin-bottom: 30px;
}
.tir19-cycle-card {
  background:
    var(--tir19-card);
  border-radius:
    var(--tir19-radius);
  padding: 30px;
  text-align: center;
  border:
    1px solid var(--tir19-border);
}
.tir19-cycle-icon {
  font-size: 2.5rem;
}
.tir19-cycle-value {
  font-size: 2.5rem;
  font-weight: bold;
  margin: 20px 0;
}
/* BARRES */
.tir19-progress {
  width: 100%;
  height: 14px;
  background:
    rgba(255, 255, 255, .15);
  border-radius: 20px;
  overflow: hidden;
}
.tir19-progress-bar {
  height: 100%;
  width: 0;
  transition:
    width 1.2s ease;
}
.tir19-cycle-physical-card .tir19-progress-bar {
  background:
    var(--tir19-physical);
}
.tir19-cycle-emotional-card .tir19-progress-bar {
  background:
    var(--tir19-emotional);
}
.tir19-cycle-intellectual-card .tir19-progress-bar {
  background:
    var(--tir19-intellectual);
}
/* TEXTE REbmitLTATS */
#tir19-profile-content, #tir19-personal-information {
  line-height: 1.8;
  color: #e8e8ef;
}
/* GRAPH */
#tir19-biorhythm-chart {
  width: 100%;
  height: auto;
  background:
    rgba(0, 0, 0, .15);
  border-radius: 15px;
}
/* EXPLICATION */
.tir19-explanation {
  margin-top: 40px;
}
.tir19-explanation li {
  margin-bottom: 10px;
}
/* ANIMATION APPARITION */
.tir19-results {
  animation:
    tir19Fade .8s ease;
}
@keyframes tir19Fade {
  from {
    opacity: 0;
    transform:
      translateY(20px);
  }
  to {
    opacity: 1;
    transform:
      translateY(0);
  }
}
.fullscreen #tir19-biorhythm-chart {
    display: none;
}
/* RESPONSIVE */
@media(max-width:900px) {
  .tir19-cycle-intro, .tir19-cycles-container {
    grid-template-columns:
      1fr;
  }
}
@media(max-width:600px) {
  .tir19-page {
    padding:
      15px;
  }
  .tir19-form-line {
    flex-direction: column;
  }
  .tir19-button {
    width: 100%;
  }
  .tir19-intro-card, .tir19-form-card, .tir19-profile-card, .tir19-information-card, .tir19-chart-card, .tir19-explanation-card {
    padding: 20px;
  }
}
.tir19-info-grid {
  display: grid;
  grid-template-columns:
    repeat(3, 1fr);
  gap: 20px;
}
.tir19-info-grid p {
  background:
    rgba(255, 255, 255, .05);
  padding: 18px;
  border-radius: 15px;
  margin: 0;
}
@media(max-width:800px) {
  .tir19-info-grid {
    grid-template-columns: 1fr;
  }
}
/* ==========================================
   EXPLORATION D'UNE AUTRE DATE
========================================== */
.tir19-date-explorer {
  margin: 35px auto;
  padding: 25px;
  max-width: 800px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.25);
  text-align: center;
}
.tir19-date-explorer h2 {
  margin-bottom: 10px;
  font-size: 1.5rem;
}
.tir19-date-explorer p {
  opacity: 0.85;
  margin-bottom: 25px;
}
/* Conteneur choix date */
.tir19-date-choice {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}
.tir19-date-choice label {
  font-weight: bold;
}
/* Champ date */
#tir19-analysis-date {
  padding: 12px 15px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  color: inherit;
  font-size: 1rem;
  min-width: 170px;
  cursor: pointer;
}
#tir19-analysis-date:focus {
  outline: none;
  border-color: #ffd93d;
  box-shadow:
    0 0 10px rgba(255, 217, 61, .4);
}
/* Bouton */
#tir19-change-date {
  padding: 12px 25px;
  border-radius: 25px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  transition:
    transform .2s ease, box-shadow .2s ease;
}
#tir19-change-date:hover {
  transform: translateY(-2px);
  box-shadow:
    0 5px 15px rgba(0, 0, 0, .3);
}
/* Animation apparition */
.tir19-date-explorer {
  animation:
    tir19FadeIn .5s ease;
}
@keyframes tir19FadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Mobile */
@media(max-width:600px) {
  .tir19-date-explorer {
    margin: 25px 10px;
    padding: 20px;
  }
  .tir19-date-choice {
    flex-direction: column;
  }
  #tir19-analysis-date, #tir19-change-date {
    width: 100%;
  }
}
/* ==========================================
   TRANSITION DES BLOCS BIORYTHME
========================================== */
.tir19-fade-out {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
  transition:
    opacity .5s ease, transform .5s ease;
}
.tir19-fade-in {
  animation:
    tir19ResultsAppear .8s ease forwards;
}
@keyframes tir19ResultsAppear {
  from {
    opacity: 0;
    transform:
      translateY(25px);
  }
  to {
    opacity: 1;
    transform:
      translateY(0);
  }
}
/* ==========================================
   TRANSITIONS INTRO / RESULTATS
========================================== */
.tir19-intro-hide {
  opacity: 0;
  transform: translateY(-20px);
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  transition:
    opacity .6s ease, transform .6s ease, max-height .8s ease;
}
.tir19-results-show {
  animation:
    tir19ResultsFade .8s ease forwards;
}
@keyframes tir19ResultsFade {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.tir19-header-element {

    transition:
    opacity .6s ease,
    transform .6s ease;

}
/* ==========================================
   CARTES CYCLES COMPACTES
========================================== */


.tir19-cycle-card {

    padding:18px;

    min-height:auto;

}



.tir19-cycle-icon {

    font-size:1.6rem;

    margin-bottom:5px;

}



.tir19-cycle-card h3 {

    font-size:1.1rem;

    margin:5px 0;

}



.tir19-cycle-value {

    font-size:1.8rem;

    font-weight:bold;

    margin:8px 0;

}



.tir19-progress {

    height:8px;

    margin:10px 0;

}



.tir19-cycle-card p {

    font-size:.9rem;

    margin:5px 0;

}
.tir19-cycles-container {

    gap:15px;

}
@media(max-width:600px){

    .tir19-cycle-card {

        padding:12px;

    }


    .tir19-cycle-value {

        font-size:1.5rem;

    }


    .tir19-cycle-icon {

        font-size:1.4rem;

    }

}