/*===============================================================================================================================
	Fichier				: style.css
	Objectif(s)			: Mise en forme du titre
	Auteur				: Pelcener Thiabaut
	Date de création	: Janvier 2023
	Date de modification: Janvier 2025
===============================================================================================================================

      ___                                   ___     
     /  /\          ___       ___          /__/\    		
    /  /::\        /  /\     /  /\        |  |::\   
   /  /:/\:\      /  /:/    /  /:/        |  |:|:\  
  /  /:/~/::\    /  /:/    /__/::\      __|__|:|\:\ 
 /__/:/ /:/\:\  /  /::\    \__\/\:\__  /__/::::| \:\
 \  \:\/:/__\/ /__/:/\:\      \  \:\/\ \  \:\~~\__\/
  \  \::/      \__\/  \:\      \__\::/  \  \:\      
   \  \:\           \  \:\     /__/:/    \  \:\     
    \  \:\           \__\/     \__\/      \  \:\    
     \__\/                                 \__\/    
  
===============================================================================================================================
TABLE DES SECTIONS
  1) Base & titres
  2) Langues (header drapeaux)
  3) Layout global (center/layout/colonnes)
  4) Sélecteur de modèle
  5) Formulaire (container + colonnes)
  6) Période d’envoi (H/Min + suffixes)
  7) Inputs / labels / selects / bouton
  8) Zone échantillonnage et info trame
  9) Switch (on/off)
 10) Aside gauche (carte produit)
 11) Aside droite (SF + charts)
 12) Panneau d’infos conso
 13) États visuels (stale, flash invalid)
 14) Responsive
 15) Bouton secret
 16) Mode debug (body.body)
 17) Repeteur mode
===============================================================================================================================*/

/* ============================== 1) Base & titres ============================== */
body{
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #fff;
  color: #000;
}

h1, h2, h3{
  color: #000;
  font-size: 1.3em;
  font-weight: bold;
}

/* h3 centré (titres blocs) */
h3{ text-align: center; }

/* ============================== 2) Langues (header drapeaux) ============================== */
/* conteneur du select */
#modelangue{
    position: relative;
    left: 1%;          /* aligné avec le logo (qui est aussi left:1%) */
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    gap: 6px;
    z-index: 5;
}

/* boutons drapeaux */
#modelangue .lang-option{
    width: 26px;
    height: 18px;
    margin-left: 20px;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.1s ease;
}

#modelangue .lang-option img{
    width: 100%;
    height: 100%;
    display: block;
}

#modelangue .lang-option:hover{
    opacity: 0.9;
    transform: translateY(-1px);
}

#modelangue .lang-option.active{
    opacity: 1;
}

/* ============================== 3) Layout global ============================== */
.center{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
  position: relative;
  box-sizing:border-box;
}
.center::before{
  content:"";
  position: absolute;
  top: -50px; left: 0; right: 0;
  height: 50px;
  background-color: #dddddd;
}

.layout{
  display:flex;
  justify-content: space-evenly;
  align-items:flex-start;
  width:100%;
  box-sizing:border-box;
  margin: 0 auto;
  gap: 3%;            /* espace entre les 3 colonnes */
  padding: 0 3%;     /* marge intérieure gauche/droite du container */
}

.aside-left{  flex: 1; max-width: 300px; min-width: 150px; }
.aside-right{ flex: 1; max-width: 300px; min-width: 150px; position: relative; } /* pour la position du choix de transmission*/

.main-center{
  position: relative;
  flex: 2;
  max-width: 700px;
  border: 2px solid #000;
}
/* trait médian (optionnel, transparent) */
.main-center::after{
  content:"";
  position:absolute; top:0; bottom:0; left:50%;
  width:2px; background:transparent; transform:translateX(-50%);
  pointer-events:none;
}

/* ============================== 4) Sélecteur de modèle ============================== */
.modelSelect-container{
  display:flex; align-items:center; gap:15px; margin-left:37px;
}
.modelSelect-container h2{ margin-bottom:20px; }
#produit-label{ text-align:center; font-weight:bold; }

#modelSelect{
  margin-left:10px;
  font-size:1.0rem;
  padding:8px 5px;
  border:2px solid #000; border-radius:6px;
  min-width:20px;
  font-weight:520;
  overflow-y:auto;
  size:5;
  cursor:pointer;
}
#modelSelect option{ font-size:1.0rem; font-weight:520; color:#000; }

/* ============================== 5) Formulaire (container + colonnes) ============================== */
.form-container{
  width:100%;
  overflow:hidden;
  display:none;
  box-sizing:border-box;
}
.left-column{
  float:left;
  margin-left:4%;
  width:50%;
  box-sizing:border-box;
}
.right-column{
  float:right;
  margin-right:4%;
  width:35%;
  box-sizing:border-box;
}
/* masquer les <br> inutiles dans la colonne droite */
.right-column br{ display:none; }

.right-column label{ margin-bottom: 10px;}
.right-column select{ margin-bottom: 5px;}

/* MR4 : compteurs intégrés dans input1..input4 */
.right-column .counting{
  font-size: 0.9rem;
  margin-bottom: 18px;
}
.right-column .counting input{
  width: 180px;
  height: 25px;
  padding: 0 10px;
  box-sizing: border-box;
}
/* Alerte mode front pour les inputs*/
.front-warning {
  display: inline-block;
  position: absolute;
  cursor: help;
  visibility: hidden; /* caché par défaut */
  user-select: none;
}

label[id^="input"] {
  position: relative; /* permet au span d’être positionné par rapport au label */
}
/* Front Bulle d’avertissement détaillée */
.front-warning-bubble {
  position: absolute;
  top: 33px; left: 0px;
  width: 250px; transform:translateX(-20px);
  background: #fffdf0; color: #333;
  font-size: 13px; padding: 8px 10px;
  border: 1px solid #999; border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  z-index: 9999;
  display: none;
}

/* espace entre tvie et température */
#trameDeVie { display:block; margin-bottom:1px; }
#temp-label { display:block; margin-top:1px; } /* ton #temp-label existant avait margin-top:5px */

/* limites de largeur pour 2 champs spécifiques */
#historisationNumber, #nbrBatterie{
  max-width:97%;
  box-sizing:border-box;
}
#historisationNumber{
  margin-bottom: 0px;
}

/* ============================== 6) Période d’envoi (H/Min + suffixes) ============================== */
.left-column .period-envoi{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:end;
  font-size:1.0rem; font-weight:500;
}
.left-column .period-envoi .envoi label{ display:block; margin-bottom:6px; }
.left-column .period-envoi .envoi input{ width:100%; }

/* suffixe visuel (H/Min) */
.input-unit{ position:relative; display:block; width:60%; }
.input-unit input{
  width:100%; padding-right:2.8em; font-size:1.0rem; font-weight:500;
}
.input-unit::after{
  content:attr(data-unit);
  position:absolute; top:52%; transform:translateY(-50%);
  margin-left:40%;
  background:transparent; font-size:1.0rem; color:#000; line-height:1; pointer-events:none;
  padding:5px;
}

/* ============================== 7) Inputs / labels / selects / bouton ============================== */
input{
  display:block; width:100%;
  margin-bottom:10px; padding:6px;
  border:2px solid #000; border-radius:4px;
  background:transparent; color:#000; outline:none;
  transition:border-color .3s ease;
}
label{ font-size:0.9rem; color:#000; margin-bottom:5px; font-weight:bold; text-shadow:none; }
select{ 
  font-size:1.0rem; color:#000; padding:6px 10px; 
  border:2px solid #000; background:transparent; outline:none; transition:border-color .3s; 
  border-radius:4px; box-sizing:border-box; 
}

/* bouton générique (hérite) */
input[type="button"]{
  background:#464646; color:#fff; border:none; padding:15px 20px; cursor:pointer;
  transition:background-color .3s ease, transform .3s ease;
}
input[type="button"]:hover{ background:#162521; transform:scale(1.05); }
input[type="button"]:active{ background:#7e5b4d; transform:scale(.95); }

/* bouton Calculer (centré) */
#calculer{
  display:block; margin:8px auto 12px; margin-top:10px;
  padding:10px 16px; border-radius:6px; width:auto; min-width:160px;
}

/* ============================== 8) Zone échantillonnage et info trame ============================== */
#sampleNumber{ width:60%; }
.sampling{
  display:flex; align-items:center; gap:10px; width:100%;
}
.sampling input{ width:140px; }
.sampling .int-sampling{ font-weight:600; color:#555; white-space:nowrap; margin-bottom: 10px; }

/* ===== Info trames sous l'historisation ===== */
.tx-info{
  margin-top: 4px;
  margin-bottom: 6px;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.35;
}
.tx-warn{
  margin-top: 4px;
  font-size: 0.9rem;
  color: #b00020;      /* rouge matériel */
  font-weight: 600;
}


/* ============================== 9) Switch (on/off) ============================== */
.switch{ position:relative; display:inline-block; width:2em; height:1em; }
.switch > input[type="checkbox"]{ display:none; }

.slider{
  position:absolute; inset:0; background:#ccc; border-radius:.5em; transition:.4s;
}
.slider:before{
  content:""; position:absolute; left:.1em; bottom:.1em;
  width:.8em; height:.8em; background:#fff; border-radius:50%; transition:.4s;
}
input:checked + .slider{ background:#2196F3; }
input:checked + .slider:before{ transform:translateX(1em); }

/* ============================== 10) Aside gauche (carte produit) ============================== */
.card{ border:1px solid #ccc; border-radius:6px; padding:12px; background:#fff; }
#productImg{ width:100%; height:auto; display:block; margin-bottom:8px; }
#productDesc{line-height:1.3rem;}

/* ============================== 11) Aside droite (SF + charts) ============================== */

/*barre de choix du mode radio (LoRaWAN / Sigfox) au-dessus du choix de SF */
#txModeSelector{
  position:absolute; top:-40px; left:0; right:0;/* bande grise = 50px de haut, on se place dedans */
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:8px; padding:4px 8px;
  border:1px solid #000; 
  border-radius:4px; font-size:0.95rem;
}
#txModeSelector label{ margin:0; font-weight:bold; }
#txModeSelector select{
  min-width:120px; padding:4px 6px; border:1px solid #000; border-radius:4px;
  background:transparent; font-size:0.95rem; box-sizing:border-box;
}

/* Sélecteur SF */
#sfSelector{
  display:flex; justify-content:center; flex-wrap:wrap; gap:1px; margin-bottom:0px; font-weight:bold; box-sizing:border-box;
}
#sfSelector .sf-label{ margin-right:5px; font-size:1.0rem; box-sizing:border-box; }
#sfSelector label.sf-opt{ 
  display:inline-flex; box-sizing:border-box;
  cursor:pointer; 
  font-weight:normal; font-size:1.0rem; 
  padding-right:1px; margin-bottom: 0px; max-width: 61px;
}
#sfSelector label.sf-opt > input[type="radio"]{ margin-right:3px; margin-left: 5px; box-sizing:border-box; -webkit-appearance:auto; }

#sfSelector .sf-text{ margin: 1px; box-sizing:border-box;}

/* Fallback pour Safari anciens qui ne gèrent pas gap sur flex */
@supports not (gap: 1px){
  #sfSelector label.sf-opt{ margin:1px;}
  #sfSelector label.sf-opt:last-child{ margin-right:0; }
}

#chartTitle{ margin-bottom: 0px; margin-top: 0px}
#text_condition{ font-size: 0.9rem; margin-bottom: 15px;}

.aside-right{ text-align:center; }
.aside-right canvas{
  max-width:100%; height:auto; display:block; margin:0 auto; max-height:350px;
}
/* petit décalage pour ne pas coller le camembert au bord inférieur du bandeau */
.aside-right > .card{ /* new a voir*/
  margin-top:0px;
}
#chartLegend{ margin-top:8px; font-size:1.0rem; }

#autonomiePie2{
  display:block; width:100%; height:240px; max-width:280px; margin:0 auto; margin-top: 10px;
}

/* ============================== 12) Panneau d’infos conso ============================== */
.conso-panel{
  margin-top:16px; border:1px solid #e5e5e5; background:#cacaca; border-radius:8px; padding:10px 12px;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.Info-panel-header,
.conso-panel-header{
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px;
}
#consoExtraClose{ border:0; background:transparent; font-size:1.0rem; line-height:1; cursor:pointer; }
.conso-table{ width:100%; border-collapse:collapse; table-layout:fixed; }
.conso-table thead th{ text-align:left; font-weight:600; border-bottom:1px solid #ddd; padding:6px 4px; }
.conso-table tbody td{ padding:6px 4px; border-bottom:1px dashed #e6e6e6; vertical-align:top; word-wrap:break-word; }
.conso-table tbody tr:last-child td{ border-bottom:0; }

/* ============================== 13) États visuels (stale, flash invalid) ============================== */
/* camemberts grisés (version 1 & 2) */
#autonomiePie.stale, #autonomiePie2.stale{ filter:grayscale(1); opacity:.5; transition:filter .2s, opacity .2s; }
#chartStaleMsg, #chartStaleMsg2{ font-size:1.0rem; color:#666; font-style:italic; margin-top:6px; display:none; }
#chartStaleMsg.show, #chartStaleMsg2.show{ display:block !important; }

/* bloc texte résultats */
.result-label{ border:2px solid #000; padding:0.5rem 1rem;  font-size:0.83rem; line-height:1.3rem; text-align: left !important;}
.garantit-label{ border:2px solid #000; padding:0.5rem 0.7rem;  font-size:0.80rem; line-height:1.3rem; text-align: left !important;}

/* input invalide : petit flash */
input.flash-invalid{ outline:2px solid #e74c3c !important; animation:flashClamp .25s ease-out; }
@keyframes flashClamp{ from{ background:rgba(231,76,60,.2);} to{ background:transparent;} }

/* ============================== 14) Responsive ============================== */
@media (max-width:1200px){
  .aside-left, .aside-right{ flex-basis:26%; }
}
@media (max-width:1000px){
  .layout{ flex-direction:column; align-items:center; }
  .aside-left, .aside-right, .main-center{ flex:none; max-width:100%; }
}

.right-section{ margin-top:20px; }

/* ============================== 15) Bouton secret ============================== */
#Bouton_secret_chuuuuut{
  position:absolute; top:6px; right:6px; width:44px; height:44px;
  background:none; border:0; padding:0; z-index:9999;
}
#Bouton_secret_chuuuuut:hover::after{
  content:"🤫"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.6);
  font-size:28px; line-height:1; animation:shushPop .6s ease-out forwards;
}
@keyframes shushPop{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.6); }
  60%{ opacity:1; transform:translate(-50%,-50%) scale(1.12); }
  100%{ opacity:1; transform:translate(-50%,-50%) scale(1.0); }
}

/* = bande SF flottante = */
.sf-rail{
  position: fixed;          /* suit le scroll */
  z-index: 3000;            /* au-dessus du donut/centre */
  top: 110px;               /* valeur initiale; corrigée en JS */
  left: 0;                  /* sera positionnée en JS */
  width: 140px;
  background: #cacaca; border: 1px solid #ddd; border-radius: 12px;
  padding: 10px 12px; gap:10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  display:flex; flex-direction: column;      /* vertical */
  
}
.sf-rail .sf-label{ font-weight:700; margin-bottom:2px; }
.sf-item{ display:flex; flex-direction: column; align-items:flex-start; }
.sf-item label{ display:flex; align-items:center; gap:6px; cursor:pointer; }
.sf-val{ font-weight:700; font-size:14px; line-height:1; margin:2px 0 0 22px; }

/* === Bouton invisible sous le drapeau FR === */
#secretMicroCalcButton {
  position: absolute;
  top: 130px; left: 22px;     
  width: 80px; height: 80px;
  background: red; border: none; cursor: default; /* pour le voir mettre en wait */
  z-index: 9999;
  opacity: 0; /* pour le rendre visible mettre à 0.5 */
}

/* ============================== 16) Mode debug (body.body) ============================== */
/* Actif uniquement si <body class="body"> */
body.body *{ outline:1px dashed rgba(0,0,0,.18); }
body.body #header        { outline:2px solid #e74c3c !important; }
body.body #languageSwitch{ outline:2px solid #d35400 !important; }
body.body .center        { outline:2px solid #27ae60 !important; }
body.body .layout        { outline:2px solid #16a085 !important; }
body.body .aside-left    { outline:2px solid #8e44ad !important; }
body.body .main-center   { outline:2px solid #2980b9 !important; }
body.body .aside-right   { outline:2px solid #c0392b !important; }
body.body .form-container{ outline:2px solid #2c3e50 !important; }
body.body .left-column   { outline:2px solid #7f8c8d !important; }
body.body .right-column  { outline:2px solid #95a5a6 !important; }
body.body .card          { outline:2px solid #f39c12 !important; }
body.body .conso-panel   { outline:2px solid #9b59b6 !important; }
body.body #rightPanel    { outline:2px solid #34495e !important; }
body.body #sfSelector    { outline:2px solid #00a8ff !important; }
body.body #autonomiePie,
body.body #autonomiePie2 { outline:2px solid #00cec9 !important; }
body.body input,
body.body select,
body.body label          { outline:1px solid rgba(0,0,0,.35); }
body.body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9998;
  background-image:
    repeating-linear-gradient(to right, rgba(0,0,0,.06) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(to bottom, rgba(0,0,0,.04) 0 1px, transparent 1px 20px);
}
body.body canvas{ background:rgba(0,0,0,0.02); }

/* ============================== 17) Repeteur mode ============================== */
/* Caché par défaut */
.repeteur-column{
  display: none;
  float: left;
  margin-left: 4%;
  width: 56%;              /* prend la place de la left-column */
  box-sizing: border-box;
}

/* Activation : on cache la colonne gauche et on montre la colonne répéteur */
#form.repeteur-mode .left-column{
  display: none;
}

#form.repeteur-mode .repeteur-column{
  display: block;
}

/* Header et lignes : même grille pour alignement parfait */
.repeteur-header,
.repeteur-row{
  display: grid;
  grid-template-columns: /* new */
    minmax(50px, 0.9fr)
    minmax(70px, 1.4fr)
    minmax(50px, 1.1fr)
    minmax(50px, 1.1fr);
  gap: 7px;
  align-items: center;
  box-sizing: border-box;
}

/* Header */
.repeteur-header{
  margin: 6px 0 10px;
  padding: 6px 6px 8px;
  border-bottom: 1px solid rgba(0,0,0,0.20);
}

.repeteur-cell{
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.15; /* new */
  color: #000;
  white-space: nowrap; /* new */
}

/* Container des lignes (optionnel mais utile) */
#repeteur_row_container{
  display: block;
}

/* Lignes : un peu plus “tableau” */
.repeteur-row{
  padding: 8px 6px;
  border-radius: 8px;
  margin-bottom: 8px;
}

.repeteur-column .repeteur-row:nth-child(even){
  background: rgba(0,0,0,0.03);
}

.repeteur-column .repeteur-row:hover{
  background: rgba(0,0,0,0.05);
}

/* Inputs/selects dans les lignes */
.repeteur-row input,
.repeteur-row select{
  width: 100%;
  height: 30px;
  margin-bottom: 0px;
  box-sizing: border-box;
  padding: 0px 8px; /* new */
  border-radius: 4px;
  background: #fff;
}

/* Style focus léger */
.repeteur-row input:focus,
.repeteur-row select:focus{
  outline: none;
  border-color: rgba(0,0,0,0.45);
}

/* Largeurs mini utiles */
.repeteur-row input[type="number"]{
  min-width: 0;
  text-align: center;
}

/* Footer : bouton ajouter */
.repeteur-footer{
  display: flex;
  justify-content: flex-start; /* bouton à gauche (simple) */
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.15);
}

.repeteur-add-row{
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  background: #3f3f3f;
  color: #fff;
  cursor: pointer;
}

.repeteur-add-row:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

.repeteur-option-container{
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.15);
}

#form.repeteur-mode .repeteur-option-container label{
  display: block;
  margin: 10px 0 6px;
  font-weight: 700;
}

#form.repeteur-mode .repeteur-option-container input[type="number"],
#form.repeteur-mode .repeteur_option_container select,
#form.repeteur-mode .repeteur-option-container select{
  width: 100%;
  max-width: 180px;
  box-sizing: border-box;
}

/* Responsive : empilement en 2 colonnes */
@media (max-width: 900px){
  .repeteur-column{
    float: none;
    width: 100%;
    margin-left: 4%;
    margin-right: 4%;
  }

  .repeteur-header,
  .repeteur-row{
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .repeteur-cell{
    white-space: normal;
  }
  .repeteur-header{
    display: none; /* optionnel : sinon ça devient illisible en 2 colonnes */
  }
}