/* RESET */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* BODY */
body{
  font-family:system-ui, Arial, sans-serif;
  background:#f6f7fb;
  color:#333;
  min-height:100vh;
}

/* HEADER */
header{
  background:#2563eb;
  color:#fff;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:100;
}

.header-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 20px;
}

/* LOGO */
.logo svg{
  height:45px;
  fill:#fff;
}

/* TITRE PAGE */
.page-title{
  color:#fff;
  font-size:22px;
  font-weight:600;
}

/* BURGER */
.burger{
  display:none;
  cursor:pointer;
}

.burger div{
  width:25px;
  height:3px;
  background:#fff;
  margin:5px;
  transition:0.3s;
}

.burger.active div:nth-child(1){
  transform:rotate(45deg) translate(5px,5px);
}

.burger.active div:nth-child(2){
  opacity:0;
}

.burger.active div:nth-child(3){
  transform:rotate(-45deg) translate(5px,-5px);
}

/* LAYOUT */
.layout{
  display:flex;
  padding-top:70px;
  padding-bottom:60px;
}

/* MENU DESKTOP */
nav{
  position:fixed;
  top:70px;
  bottom:60px;
  left:0;
  width:220px;
  background:#6a6a6a;
  color:#fff;
  padding-top:0;
  transition:0.3s;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* LIENS */
nav a{
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
  text-decoration:none;
  padding:14px 20px;
  transition:0.3s;
}

/* ===== SUBMENU ALIGNÉ COMME LE MENU ===== */

.menu-item {
  position: relative;
}

/* bouton identique aux liens */
.submenu-toggle{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
  padding:14px 20px;
  background:none;
  border:none;
  cursor:pointer;
  font:inherit;
  text-align:left;
  transition:0.3s;
}

/* hover identique */
.submenu-toggle:hover{
  background:#2563eb;
}

/* comportement menu replié */
nav.collapsed .submenu-toggle{
  justify-content:center;
}

nav.collapsed .submenu-toggle .text{
  display:none;
}

/* ===== SOUS MENU OVERLAY ===== */

.menu-item{
  position:relative;
}

/* liens du menu + bouton sous-menu : même rendu */
nav a,
.submenu-toggle{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  color:#fff;
  text-decoration:none;
  padding:14px 20px;
  transition:0.3s;
  box-sizing:border-box;
}

/* bouton sous-menu */
.submenu-toggle{
  background:none;
  border:none;
  cursor:pointer;
  font:inherit;
  text-align:left;
  margin:0;
  border-radius:0;
}

/* icônes parfaitement alignées */
.icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  min-width:24px;
  font-size:20px;
  line-height:1;
  flex-shrink:0;
}

/* texte */
.text{
  white-space:nowrap;
  line-height:1.2;
}

/* hover identique */
nav a:hover,
.submenu-toggle:hover{
  background:#2563eb;
}

/* menu replié */
nav.collapsed a,
nav.collapsed .submenu-toggle{
  justify-content:center;
  padding-left:0;
  padding-right:0;
}

nav.collapsed .text{
  display:none;
}

/* sous-menu à droite */
.submenu{
  display:none;
  position:absolute;
  top:0;
  left:100%;
  min-width:220px;
  background:#6a6a6a;
  border-left:1px solid rgba(255,255,255,0.08);
  box-shadow:4px 4px 12px rgba(0,0,0,0.18);
  z-index:2000;
}

/* liens du sous-menu */
.submenu a{
  display:flex;
  align-items:center;
  color:#fff;
  padding:14px 20px;
  background:#6a6a6a;
  text-decoration:none;
  white-space:nowrap;
}

.submenu a:hover{
  background:#2563eb;
}

/* affichage */
.menu-item.open > .submenu{
  display:block;
}

/* ICONES */
.icon{
  font-size:20px;
  width:25px;
  text-align:center;
}

/* TEXTE */
.text{
  white-space:nowrap;
}

/* SURVOL */
nav a:hover{
  background:#2563eb;
}

/* BOUTON REPLIER */
.toggle-menu{
  background:none;
  border:none;
  color:#fff;
  font-size:22px;
  cursor:pointer;
  padding:10px 20px;
  text-align:left;
  margin-bottom:10px;
}

/* MENU REPLIE */
nav.collapsed{
  width:65px;
}

nav.collapsed .text{
  display:none;
}

nav.collapsed a{
  justify-content:center;
}

/* CONTENU */
main{
  flex:1;
  display:flex;
  justify-content:center;
  padding:25px;
  margin-left:220px;
  transition:0.3s;
}

/* QUAND MENU REPLIE */
nav.collapsed ~ main{
  margin-left:65px;
}

/* BASE DES CONTAINERS */
.container1,
.container2,
.container3{
  background:#fff;
  padding:25px;
  border-radius:12px;
  box-shadow:0 4px 8px rgba(0,0,0,0.1);
  margin:auto;
  width:100%;
}

/* CONTAINER LARGE */
.container1{
  max-width:90%;
}

/* CONTAINER STANDARD */
.container2{
  max-width:55%;
}

/* SOUS CONTAINER */
.container3{
  max-width:90%;
  padding:20px;
  margin-top:20px;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
  border:1px solid #eee;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* TITRES */
h2{
  margin-bottom:15px;
}

/* FORMULAIRE */
.form-container{
  display:flex;
  flex-direction:column;
  gap:15px;
  margin-top:20px;
}

.form-container label{
  font-weight:600;
  color:#333;
}

.form-container input,
.form-container select,
.form-container textarea{
  padding:10px 12px;
  border:1px solid #ccc;
  border-radius:8px;
  font-size:14px;
  width:100%;
  transition:border-color 0.3s, box-shadow 0.3s;
  background:#fff;
}

.form-container input:focus,
.form-container select:focus,
.form-container textarea:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 2px rgba(37,99,235,0.2);
  outline:none;
}

.form-container input::placeholder,
.form-container textarea::placeholder{
  color:#888;
}

/* BOUTONS GENERAUX BLEUS */
button{
  background:#2563eb;
  color:#fff;
  border:none;
  padding:10px 18px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  margin:8px;
  transition:0.3s;
  position:relative;
}

button:hover{
  background:#1e4bb8;
}

button:disabled,
#btn-submit:disabled{
  background:#bfc5d1;
  color:#f5f5f5;
  cursor:not-allowed;
  opacity:0.7;
}

button:disabled:hover,
#btn-submit:disabled:hover{
  background:#bfc5d1;
}

/* LISERE SUR LES BOUTONS VERTS ET ROUGES DANS MODAL */
.BoutonVert::after,
.BoutonRouge::after{
  content:"";
  display:block;
  height:4px;
  width:100%;
  position:absolute;
  bottom:0;
  left:0;
  border-radius:0 0 8px 8px;
  background:transparent;
  transition:background 0.3s;
}

.BoutonVert:hover::after{
  background:#28a745;
}

.BoutonRouge:hover::after{
  background:#dc3545;
}

/* BOUTONS SCROLL */
.scroll-btn{
  position:fixed;
  z-index:1000;
  width:50px;
  height:50px;
  font-size:28px;
  background:#2563eb;
  color:#fff;
  border:none;
  border-radius:50%;
  cursor:pointer;
  opacity:0;
  transition:opacity 0.3s, transform 0.3s;
}

.scroll-btn.show{
  opacity:1;
}

#scrollDown{
  top:90px;
  right:10px;
}

#scrollUp{
  bottom:60px;
  right:10px;
}

/* FOOTER */
footer{
  background:#000;
  color:#fff;
  text-align:center;
  padding:15px;
  position:fixed;
  bottom:0;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:5px;
}

footer a{
  color:#fff;
  text-decoration:none;
  transition:color 0.2s;
}

footer a:visited{
  color:#fff;
}

footer a:hover{
  color:#fff;
  text-decoration:underline;
}

footer a:active{
  color:#ff0000;
}

/* LOADER */
#loader{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(255,255,255,0.7);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

#loader div{
  border:6px solid #f3f3f3;
  border-top:6px solid #2563eb;
  border-radius:50%;
  width:50px;
  height:50px;
  animation:spin 1s linear infinite;
}

@keyframes spin{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}

/* CONTAINER BOUTONS */
.container-btn{
  display:flex;
  flex-direction:column;
  gap:10px;
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
  padding:20px;
}

.container-btn button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.btn-full{
  display:inline;
}

.btn-short{
  display:none;
}

/* BOUTONS PDF */
#buttons-pdf{
  display:flex;
  flex-direction:column;
  gap:10px;
}

#buttons-pdf a{
  width:100%;
}

#buttons-pdf button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:0;
}

/* MODALES GENERIQUES */
.modal-overlay{
  display:flex;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.5);
  z-index:10000;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.modal-card{
  background:#fff;
  padding:24px;
  border-radius:12px;
  max-width:560px;
  width:100%;
  position:relative;
  box-shadow:0 10px 25px rgba(0,0,0,0.18);
  max-height:90vh;
  overflow:auto;
}

.modal-card h3{
  margin-bottom:14px;
  color:#222;
}

.modal-card p{
  margin-bottom:14px;
  line-height:1.4;
  color:#444;
}

.modal-card .form-container{
  margin-top:10px;
}

.modal-card .button-row{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
}

.modal-card .button-row button{
  margin:0;
}

.modal-card .field-hint{
  font-size:13px;
  color:#666;
  margin-top:-8px;
}

.modal-card .section-title{
  font-size:15px;
  font-weight:700;
  margin-top:12px;
  margin-bottom:8px;
  color:#2563eb;
}

.modal-card textarea{
  resize:vertical;
  min-height:90px;
}

/* MODALES EXISTANTES */
#paletteModal,
#temperatureModal{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  z-index:10000;
  align-items:center;
  justify-content:center;
  padding:20px;
}

#paletteModal .modal-content,
#temperatureModal .modal-content{
  background:#fff;
  padding:25px;
  border-radius:12px;
  max-width:400px;
  width:100%;
  position:relative;
  box-shadow:0 10px 25px rgba(0,0,0,0.18);
  max-height:90vh;
  overflow:auto;
}

#paletteModal .close-btn,
#temperatureModal .close-temp-btn{
  position:absolute;
  top:10px;
  right:10px;
  font-size:22px;
  cursor:pointer;
  border:none;
  background:none;
  color:#333;
  margin:0;
  padding:0;
  line-height:1;
}

#paletteModal .close-btn:hover,
#temperatureModal .close-temp-btn:hover{
  color:#2563eb;
  background:none;
}

/* GROUPE DE BOUTONS DANS MODALES */
.button-group{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-start;
}

.button-group button{
  margin:0;
}

/* SIGNATURE */
.signature-canvas-wrap{
  width:100%;
  overflow:hidden;
}

.signature-canvas-wrap canvas{
  display:block;
  width:100%;
  max-width:100%;
  background:#fff;
  touch-action:none;
}

/* INPUT COLOR ET RANGE DANS MODAL SIGNATURE */
input[type="color"]{
  width:70px;
  min-width:70px;
  height:40px;
  padding:4px;
  border:1px solid #ccc;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
}

input[type="range"]{
  width:100%;
  cursor:pointer;
}

/* AJOUT : gestion safe des popups trop hautes */
#paletteModal,
#temperatureModal,
#signatureModal,
#preSignModal,
.modal-overlay{
  overflow-y:auto;
  overflow-x:hidden;
  box-sizing:border-box;
}

#signatureModal > div,
#preSignModal > div{
  box-sizing:border-box;
  max-height:calc(100vh - 90px);
  overflow-y:auto;
  margin-top:70px;
  margin-bottom:20px;
}

#paletteModal .modal-content,
#temperatureModal .modal-content{
  box-sizing:border-box;
  max-height:calc(100vh - 90px);
  overflow-y:auto;
}

/* DESKTOP */
@media (min-width:1025px){
  .container-btn{
    position:fixed;
    top:50%;
    right:20px;
    transform:translateY(-50%);
    background:#fff;
    padding:20px;
    border-radius:12px;
    box-shadow:0 2px 6px rgba(0,0,0,0.08);
    border:1px solid #eee;
    display:flex;
    flex-direction:column;
    gap:10px;
    width:220px;
  }

  .container-btn button{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
  }

  .container1{
    margin-right:260px;
  }

  #buttons-pdf{
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  #buttons-pdf a{
    width:100%;
  }

  #buttons-pdf button{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
  }

  /* AJOUT : recentrer les popups si la hauteur d'écran le permet */
  @media (min-height:700px){
    #signatureModal,
    #preSignModal,
    .modal-overlay{
      align-items:center !important;
    }

    #signatureModal > div,
    #preSignModal > div{
      margin-top:20px;
      margin-bottom:20px;
      max-height:calc(100vh - 40px);
    }
  }
}

/* TABLETTE */
@media (max-width:1024px) and (min-width:769px){
  .container-btn{
    position:static;
    width:90%;
    margin:15px auto;
    flex-direction:row;
    justify-content:space-between;
    flex-wrap:wrap;
  }

  #buttons-pdf{
    flex-direction:row;
    justify-content:space-between;
    width:100%;
  }

  #buttons-pdf a,
  #buttons-pdf button{
    flex:1;
  }

  .modal-card{
    max-width:90%;
  }
}

/* MOBILE */
@media (max-width:768px){
  .page-title{
    font-size:18px;
  }

  .layout{
    flex-direction:column;
    align-items:center;
  }

  .container1,
  .container2{
    width:95%;
    max-width:95%;
    margin:20px auto;
  }

  .container3{
    width:95%;
    max-width:95%;
  }

  nav{
    position:fixed;
    top:70px;
    left:-220px;
    height:calc(100vh - 70px - 60px);
    z-index:1000;
    transition:0.3s;
  }

  nav.show{
    left:0;
  }
  
  
  /* QUAND MENU REPLIE */
  nav.collapsed ~ main{
    margin-left:0px;
  }

  .burger{
    display:block;
  }

  main{
    margin-left:0;
    width:100%;
  }

  .container-btn{
    position:static;
    width:95%;
    margin:15px auto;
    flex-direction:row;
    justify-content:space-between;
    flex-wrap:wrap;
  }



  .btn-full{
    display:none;
  }

  .btn-short{
    display:inline;
  }

  .container-btn button{
    font-size:12px;
    padding:10px 12px;
  }

  #buttons-pdf{
    flex-direction:row;
    justify-content:space-between;
    width:100%;
  }

  #buttons-pdf a,
  #buttons-pdf button{
    flex:1;
  }

  .modal-overlay{
    padding:12px;
  }

  .modal-card{
    padding:18px;
    border-radius:10px;
    max-width:100%;
    max-height:92vh;
  }

  .modal-card .button-row{
    flex-direction:column;
    align-items:stretch;
  }

  .modal-card .button-row button{
    width:100%;
  }

  .button-group{
    flex-direction:column;
  }

  .button-group button{
    width:100%;
  }

  #paletteModal .modal-content,
  #temperatureModal .modal-content{
    max-width:100%;
    width:100%;
    padding:18px;
    border-radius:10px;
    max-height:92vh;
  }

  input[type="color"]{
    width:100%;
    min-width:0;
  }

  /* AJOUT : sur petit écran, démarrer sous le header et scroller si besoin */
  #paletteModal,
  #temperatureModal,
  #signatureModal,
  #preSignModal,
  .modal-overlay{
    align-items:flex-start !important;
    padding-top:78px;
    padding-bottom:12px;
  }

  #paletteModal .modal-content,
  #temperatureModal .modal-content,
  #signatureModal > div,
  #preSignModal > div,
  .modal-card{
    max-height:calc(100vh - 90px);
    overflow-y:auto;
    margin-top:0;
    margin-bottom:0;
  }
}