/* Applique le modèle box-sizing à tous les éléments */
* {
  box-sizing: border-box;
}

/* Paramètres globaux du document */
html {
  scroll-behavior: smooth;   /* défilement fluide */
  position: relative;
  padding: 0;
  margin: 0;
}

/* Styles globaux du body */
body{
  padding: 0;
  margin: 0;
  width: 100%;
  height:100%;
  color: black;
  font-family: acumin-variable, Helvetica, Arial, sans-serif;
  background-color: rgb(252, 192, 79);
  position: relative;
  border: 1px solid transparent;
}

/* Scrollbar personnalisée (Chrome / Edge / Safari) */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 8px;               /* largeur de la scrollbar */
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: rgb(252, 192, 79); /* fond de la scrollbar */
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.35);  /* couleur du curseur */
  border-radius: 12px;           /* arrondi */
}

/* Scrollbar Firefox */
html,
body {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.35) rgb(252, 192, 79);
}

/* Reset des marges et hauteur de ligne des titres */
h1, h2, h3{
  line-height: 1;
  padding: 0;
  margin: 0;
}

/* Liens sans soulignement et héritant de la couleur */
a{
  text-decoration: none;
  color:inherit;
}

/* Conteneur principal pleine hauteur écran */
.container{
  width: 100%;
  height: 100vh;
  min-height: 500px;         /* hauteur minimale */
}

/* Styles génériques des inputs */
input{
  border: none;
  border-radius: 5px;
}

/* Taille de police globale responsive */
body{
  font-size: clamp(20px, 1.3vw, 30px);
}

/* Tailles de titres */
.is_titre{
  font-size: clamp(30px, 4vw, 50px);
}
.is_titre3{
  font-size: clamp(25px, 2vw, 30px);
}
.is_titre4{
  font-size: clamp(20px, 1.5vw, 30px);
}

/* Texte et champs */
.inputs{
  font-size: clamp(18px, 1.3vw, 30px);
}
button, select, input{
  font-size: clamp(18px, 1.2vw, 30px);
}

/* Flatpickr : tailles de texte */
.flatpickr-calendar,
.flatpickr-day,
.flatpickr-weekdays {
  font-size: clamp(16px, 1.1vw, 30px);
}
.flatpickr-months,
.flatpickr-current-month{
  font-size: clamp(14px, 1vw, 30px);
  height: 50px;              /* hauteur du header calendrier */
}

/* Barre de navigation desktop */
#nav{
  width: 100%;
  height:5vh;
  min-height:50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color:white;               /* couleur finale appliquée */
  gap:2%;
  background-color: #70c3dc;
  margin-top: 1%;
  width: 97%;
  margin-left: 1.5%;
  border-radius: 20px;
  z-index: 2;                /* au-dessus du contenu */
}

/* Logo dans la navigation */
.logo{
  width: 10%;
  height: auto;
  position: absolute;
  right:2%;
  bottom: 2%;
  min-width: 100px;          /* taille minimale */
}

/* Navigation responsive (menu mobile off-canvas) */
#nav_resp{
  position: fixed;
  inset: 0;
  width: 100%;
  background-color: #70c3dc;
  transform: translateX(-100%);
  transition: transform 1s ease;
  z-index: 9999999;

  overflow-y: auto;     /* 👈 SCROLL ICI */
}
#in_nav_resp{
  position: relative;
  width: 100%;
  min-height: 500px;    /* 👈 TON BESOIN */
  height: 100%;
}

/* État ouvert du menu responsive */
.open_resp_nav{
  transform: translateX(0%)!important;
}


/* Conteneur du bouton de fermeture */
#container_close{
  width: 100%;
  height: auto;
  display: flex;
}

/* Icône fermeture menu */
#close_nav{
  width: 30px;
  height: auto;
  margin-left: auto;
  margin-right: 5%;
  margin-top: 5%;
  cursor: pointer;
}

/* Conteneur principal du menu responsive */
#container_resp_nav{
  width: 80%;
  margin-left: 10%;
  margin-top: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  height:60%;
}

/* Conteneur overflow du menu */
#container_overflow{
  width: 100%;
  height: auto;
  text-align: center;
}

/* Élément de navigation */
.element_nav{
  margin-top: 1%;
}

/* Navigation responsive (liste) */
#naving_resp{
  margin-top: 5%;
}

/* Logo en bas du menu responsive */
#logo_nav_resp{
  position: absolute;
  bottom: 5%;
  left:50%;
  transform: translateX(-50%);
  width: 20%;
  max-width: 150px;
  min-width: 100px;
}

/* Conteneur principal de l’application */
#container_main{
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}

/* Panneau de transition latéral */
.page_transition{
  position: fixed;
  transition: transform 1s ease; /* animation entrée/sortie */
  right: 0%;
  transform: translateX(100%);   /* caché à droite */
  width: 50%;
  height:100vh;
  top:0;
  z-index: 5;
  background-color: rgb(94, 179, 205);
  padding: 1%;
  padding-top: 3%;
  padding-left: 2%;

}

/* État ouvert du panneau */
.is_open{
  transform: translateX(0);
}

/* Scrollbar du panneau (Webkit) */
.page_transition::-webkit-scrollbar {
  width: 8px;
}
.page_transition::-webkit-scrollbar-track {
  background: rgb(252, 192, 79);
}
.page_transition::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
}
.page_transition::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.45);
}

/* Scrollbar du panneau (Firefox) */
.page_transition {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.4) transparent;
}

/* Espacement entre lignes d’information */
.lines_info{
  margin-top: 10px;
}





/* Bouton de fermeture (croix, icône close, etc.) */
.close{
  width: 35px;             /* Taille de l’icône */
  height: auto;            /* Conserve le ratio */
  position: absolute;      /* Positionné par rapport au parent */
  right: 5%;               /* Décalage à droite */
  top:2%;                  /* Décalage en haut */
  cursor: pointer;         /* Curseur cliquable */
  z-index: 10;             /* Passe au-dessus du contenu */
}


/* =========================
   FLATPICKR (CALENDRIER)
   ========================= */

/* Style général du calendrier */
.flatpickr-calendar {
  border-radius: 18px;                 /* Coins arrondis */
  box-shadow: 0 20px 60px rgba(0,0,0,0.15); /* Ombre portée */
}

/* Jour au survol */
.flatpickr-day:hover {
  background: rgba(78,160,184,0.25);
}

/* Jour sélectionné */
.flatpickr-day.selected {
  background: #4ea0b8;
  border-color: #4ea0b8;
}

/* Jour actuel */
.flatpickr-day.today {
  border-color: #4ea0b8;
}


/* =========================
   CLASSES UTILITAIRES COULEURS
   ========================= */

.is_white{
  color:white;
}
.is_marron{
  color:rgb(112, 64, 64);
}
.is_orange{
  color:rgb(252, 192, 79);
}
.is_red{
  color:rgb(122, 37, 37);
  font-weight: bold;
}
.is_black{
  color:rgb(68, 68, 68);
}

/* Marges utilitaires */
.is_margin{
  margin-top: 2%!important;
}
.is_margin2{
  margin-top: 1%;
}

/* Police Roboto */
.roboto {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}


/* =========================
   FORMULAIRES : SELECT / INPUT
   ========================= */

/* Style des select */
select {
  background-color: rgb(252, 192, 79);
  border: 1px solid rgb(252, 192, 79);
  color:rgb(39, 116, 116);
  border-radius: 15px;
  padding: 1%;
  cursor: pointer;
}

/* Suppression du focus par défaut */
select:focus {
  outline: none;
  box-shadow: none;
}
input:focus {
  outline: none;
  box-shadow: none;
}

/* Curseur cliquable sur input */
input{
  cursor: pointer;
}


/* =========================
   BOUTONS
   ========================= */

button{
  padding: 1%;
  border: 1px solid black;
  border-radius: 10px;
  cursor: pointer;
  background-color: transparent;
  color: black;
}

/* Bouton orange */
.button_orange{
  background-color: rgb(252, 192, 79);
  border: 1px solid rgb(252, 192, 79);
  color:rgb(39, 116, 116);
}

/* Bouton bleu */
.button_blue{
  background-color: rgb(39, 116, 116);
  border: 1px solid rgb(39, 116, 116);
  color:rgb(255, 255, 255);
}

/* Bouton mois (probablement calendrier) */
.month_btn{
  width: 5%;
}

/* Effet hover générique */
.hovering{
  cursor: pointer;
  transition: transform 0.5s ease;
}
.hovering:hover{
  color:rgb(87, 216, 216);
  transform: scale(1.05);
}


/* =========================
   INPUTS SPÉCIFIQUES
   ========================= */

/* Petit champ */
.little_input{
  width: 15%;
  gap:0%;
  padding-left: 0.5%;
  margin: 0;
  font-size: clamp(16px, 1.2vw, 30px);
  margin-top: 0.5%;
}

/* Champ moyen */
.box_input{
  width: 23%;
  gap:0%;
  padding-left: 0.5%;
  margin: 0;
  font-size: clamp(16px, 1.2vw, 30px);
  margin-top: 0.5%;
}

/* Padding global des inputs */
input{
  padding: 0.5%;
}

/* Conteneur de champs alignés */
.container_data{
    display: flex;
    gap: 1%;
}




/* =========================
   ZONE IMAGE + CERCLE DÉCORATIF
   ========================= */

#container_cirlc_epicture{
  width: 35%;                 /* Largeur de la colonne image */
  height:100%;                /* Prend toute la hauteur du parent */
  position: relative;         /* Référence pour les éléments absolus */
}

/* Conteneur interne de l’image */
#container_in_pict{
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: start;     /* Aligne à gauche */
  align-items: end;           /* Aligne en bas */
}

/* Image principale (admin / personnage) */
#img_admin{
  width: auto;
  height: 80%;                /* Hauteur relative au conteneur */
  min-height: 400px;
  max-height: 800px;
  transform: scaleX(-1);      /* Effet miroir horizontal */
  z-index: 1;                 /* Au-dessus du cercle */
  position: absolute;
  left:0;
  bottom: 0;
}

/* Cercle décoratif en arrière-plan */
#circle{
  position: absolute;
  left:-150px;                /* Dépasse sur la gauche */
  width: 40%;
  min-width: 400px;
  max-width: 800px;
  border-radius: 50%;         /* Cercle parfait */
  bottom: -100px;             /* Décalage vers le bas */
  aspect-ratio: 1/1;          /* Maintient le ratio carré */
  background-color: #67bed9f9;
  z-index: 0;                 /* Derrière l’image */
}


/* =========================
   ZONE TEXTE
   ========================= */

#cotnainer_text{
  width: 65%;                 /* Colonne texte */
  height:70vh;
  min-height: 600px;
  margin-left: 30%;           /* Décalage pour laisser place à l’image */
  margin-top: 5%;
  position: relative;
}

/* Conteneur du titre */
.container_titre{
  height:30%;
  width: 100%;
}

/* Conteneur des éléments (ticks, liste, infos) */
.tick_container{
  height: 70%;
  width: 80%;
  margin-top: 5%;
  margin-left: 10%;
}


/* =========================
   HELPERS / UTILITAIRES
   ========================= */

/* Layout flex centré pour une page */
.is_flex_page{
  display: flex;
  gap:3%;
  width: 100%;
  justify-content: center;
  align-items: center;
}

/* Élément cliquable sans sélection de texte */
.clikcer{
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none;     /* IE */
}


/* Icône menu responsive (burger) */
#icone_resp_menu{
  display: none;
  width: 25px;
  height: auto;
  position: absolute;
  right: 5%;
  top: 20px;
  cursor: pointer;
  z-index: 999;
}

/* Conteneur des boutons de la home */
.container_btn_home{
  display: flex;
  flex-wrap: wrap;           /* Retour à la ligne si besoin */
  gap:2%;
  align-items: center;
}

/* Nom affiché uniquement en responsive */
.name_resp{
  display: none;
}


/* =========================
   MEDIA QUERIES
   ========================= */

/* Écrans <= 1366px */
@media (max-width: 1366px) {
  .close{
    width: 25px;              /* Icône close plus petite */
  }

  /* Flatpickr hérite des tailles globales */
  .flatpickr-calendar,
  .flatpickr-day,
  .flatpickr-weekdays,
  .flatpickr-months,
  .flatpickr-current-month{
    font-size: inherit;
  }

  .flatpickr-months,
  .flatpickr-current-month{
    height: auto;
  }

  .tick_container{
    margin-left: 10%;
  }
}


/* Tablettes / laptops moyens */
@media (max-width: 1280px) and (max-height: 1024px){
  #circle{
    width: 45%;               /* Cercle légèrement plus grand */
  }

  /* Ajustements typo */
  body{
    font-size: clamp(20px, 1.3vw, 30px);
  }
  .is_titre{
    font-size: clamp(30px, 4.5vw, 50px);
  }
  .is_titre3{
    font-size: clamp(25px, 2.5vw, 30px);
  }
  .is_titre4{
    font-size: clamp(20px, 2vw, 30px);
  }
  .inputs{
    font-size: clamp(18px, 1.8vw, 30px);
  }
  button, select, input{
    font-size: clamp(18px, 1.8vw, 30px);
  }
}


/* Écrans plus bas en hauteur */
@media (max-width: 1280px) and (max-height: 800px){
  body{
    font-size: clamp(17px, 1.3vw, 30px);
  }
  .is_titre{
    font-size: clamp(27px, 4vw, 50px);
  }
  .is_titre3{
    font-size: clamp(22px, 2vw, 30px);
  }
  .is_titre4{
    font-size: clamp(17px, 1.5vw, 30px);
  }
  .inputs{
    font-size: clamp(18px, 1.3vw, 30px);
  }
  button, select, input{
    font-size: clamp(15px, 1.2vw, 30px);
  }

  /* Décalage texte pour garder l’équilibre visuel */
  #cotnainer_text{
    margin-left: 35%;
  }
}




/* =========================
   ÉCRANS ≤ 1280px / 720px
   ========================= */
@media (max-width: 1280px) and (max-height: 720px){
  #cotnainer_text{
    margin-left: 30%;          /* Rééquilibrage du texte */
  }
  #circle{
    width: 40%;               /* Cercle légèrement réduit */
  }
}

/* =========================
   ÉCRANS ≤ 1176px
   ========================= */
@media (max-width: 1176px){
  #cotnainer_text{
    margin-top: 3%;           /* Réduction de l’espace vertical */
  }
  #generate_input_container{
    margin-top: 2%!important; /* Ajustement forcé du spacing */
  }
}

/* =========================
   ÉCRANS ≤ 1152px
   ========================= */
@media (max-width: 1152px){
  #cotnainer_text{
    margin-top: 10%;          /* Descend le bloc texte */
  }
}

/* =========================
   TABLETTES / MOBILE LARGE
   ========================= */
@media (max-width: 800px){
  .page_transition {
    width: 100%;              /* Page transition plein écran */
    padding-top: 10%;
    z-index: 9999;
  }

  span{
    display: inline-block;
    word-break: break-word;   /* Coupe les mots trop longs */
  }

  .lines_info{
    display: flex;
    flex-wrap: wrap;          /* Passage en lignes multiples */
    margin-top: 5%;
    gap:1%;
  }




  #img_admin{
    height: 70%;              /* Image légèrement réduite */
  }
}

/* =========================
   MOBILE ≤ 750px
   ========================= */
@media (max-width: 750px){
  body{
    font-size: clamp(20px, 3vw, 30px);
  }
  .is_titre{
    font-size: clamp(30px, 5.7vw, 50px);
  }
  .is_titre3{
    font-size: clamp(25px, 3.7vw, 30px);
  }
  .is_titre4{
    font-size: clamp(20px, 3.2vw, 30px);
  }
  .inputs{
    font-size: clamp(21px, 3vw, 30px);
  }
  button, select, input{
    font-size: clamp(18px, 2.9vw, 30px);
  }

  #nav{
    display: none;            /* Masque la nav desktop */
  }
  #icone_resp_menu{
    display: block;           /* Affiche le menu mobile */
  }

  #cotnainer_text{
    margin-top: 15%;
    width: 95%;
    margin-left: 2.5%;        /* Centrage du contenu */
  }

  .tick_container{
    margin-left: 0;
  }

  #img_admin{
    height: auto;
    width: 30%;
    min-height: auto;
    min-width: 150px;
    left:-2%;
    opacity: 0.5;
    display: none;            /* Image masquée sur mobile */
  }

  #circle{
    display: none;            /* Cercle supprimé sur mobile */
  }

  .close{
    width: 30px;              /* Icône close plus grande */
  }


  .container_btn_home{
    gap:10px;                 /* Espacement boutons */
  }



  #cotnainer_text{
    margin-top: 20%;          /* Ajustement final */
  }
}

/* =========================
   PETIT MOBILE ≤ 500px
   ========================= */
@media (max-width: 500px){
  .name{
    display: none;            /* Nom desktop masqué */
  }
  .name_resp{
    display: block;           /* Nom version mobile */
  }
}

/* =========================
   TRÈS PETIT MOBILE ≤ 400px
   ========================= */
@media (max-width: 400px){
  #cotnainer_text{
    margin-top: 100px;         /* Marge fixe pour lisibilité */
  }

  .counter{
    color:rgb(122, 37, 37);
    font-weight: bold;        /* Mise en avant compteur */
  }

  .titre_transi{
    margin-top: 50px;
  }
}

/* =========================
   PETITE HAUTEUR D’ÉCRAN
   ========================= */
@media (max-height: 500px){

  #cotnainer_text{
    padding-bottom: 20px;     /* Évite le contenu coupé */
  }

  .lines_info{
    gap:2%;                   /* Espacement augmenté */
  }
  #container_overflow{
    padding-bottom: 50px;
  }
  #container_resp_ticket{
    padding-bottom: 50px;
  }

}