/* =========================
   Base
   ========================= */
body{
  font-family: sans-serif;
  background:#fff;
  margin:0;
}

.wrapper{
  background-color:#f7e7ce; /* champagne */
  padding:20px;
}

/* =========================
   Header / Footer / Nav
   ========================= */
header, .footer{
  background-color:#4a90e2;
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 20px;
  flex-wrap:wrap;
}

.title{
  font-size:20px;
  font-weight:bold;
}

nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
}
nav li{ position:relative; }
nav > ul > li{ margin-left:15px; }

nav a{
  display:block;
  padding:10px 14px;
  color:#fff;
  text-decoration:none;
}
nav li:hover > a{ background-color:#444; }

nav ul ul{
  position:absolute;
  top:100%;
  left:0;
  display:none;
  min-width:150px;
  background-color:#444;
  z-index:999;
}
nav li:hover > ul{ display:block; }
nav ul ul li a:hover{ background-color:#555; }

/* =========================
   Popup
   ========================= */
#customPopup{
  display:none;
  position:fixed;
  top:30%;
  left:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  padding:20px;
  border:2px solid #444;
  border-radius:10px;
  z-index:9999;
  box-shadow:0 0 10px rgba(0,0,0,.3);
  font-size:16px;
  max-width:90%;
  text-align:center;
}
#customPopup button{
  margin-top:10px;
  padding:6px 12px;
  font-size:14px;
  cursor:pointer;
}

/* =========================
   Calendrier
   ========================= */
.calendrier{
  width:100%;
  overflow-x:auto;
  padding:10px;
  box-sizing:border-box;
}
.calendrier table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.calendrier th,
.calendrier td{
  border:1px solid #ccc;
  padding:8px;
  text-align:center;
  word-wrap:break-word;
  overflow:hidden;
  white-space:normal;
  height:auto;
}
.calendrier th{ font-size:14px; }
.calendrier td{
  font-size:10px;
  border-bottom:1px solid purple;
}

/* Colonne Heure sticky */
.calendrier th.col-heure,
.calendrier td.col-heure{
  width:80px;
  background-color:#f4f4f4;
  font-weight:bold;
  position:sticky;
  left:0;
  z-index:2;
}
.calendrier td.col-heure{ border-bottom:1px solid purple; }

/* Colonnes salles */
.calendrier th[class^="col-salle-"],
.calendrier td[class^="col-salle-"]{
  background-color:#fff;
}

.not-accessible{
  background-color:#f8f8f8;
  color:#aaa;
  cursor:not-allowed;
}

/* Alternance lignes vides */
.calendrier tr:nth-of-type(even) td:not(.booked):not(.not-accessible):not(.col-heure){
  background-color:#f9f9f9;
}
.calendrier tr:nth-of-type(odd) td:not(.booked):not(.not-accessible):not(.col-heure){
  background-color:#efefef;
}

.salle-interdite{
  background-color:red !important;
  color:#fff;
  font-weight:bold;
}

/* =========================
   Login
   ========================= */
#countdown{
  font-size:24px;
  font-weight:bold;
  text-align:center;
  margin-top:20px;
}

/* container login responsive */
.login-container{
  max-width:520px;
  width:min(520px, calc(100% - 24px));
  margin:24px auto;
  padding:22px 18px;
  background:#fff;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.login-container h2{ margin-top:0; }
.login-container form{ width:100%; }

/* labels (si présents) */
.login-container label{
  display:block;
  margin:14px 0 6px;
  font-weight:600;
}

/* champs */
.login-container input[type="text"],
.login-container input[type="password"]{
  width:100%;
  box-sizing:border-box;
  padding:12px 44px 12px 12px; /* place pour le 👁 */
  border:1px solid #d1d5db;
  border-radius:10px;
  font-size:16px;
  outline:none;
  margin:12px 0; /* garde ton rythme vertical */
}
.login-container input:focus{
  border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(96,165,250,.25);
}

/* Erreur */
.login-container .error{
  background:#fee2e2;
  color:#991b1b;
  padding:10px 12px;
  border-radius:8px;
  margin-bottom:12px;
}

/* Password + œil */
.password-wrapper{
  position:relative;
  width:100%;
}

/* ✅ bouton 👁 “anti-styles globaux” */
.password-wrapper .toggle-password{
  all:unset;
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;

  width:34px;
  height:34px;
  display:grid;
  place-items:center;

  border-radius:10px;
  background:transparent;
  font-size:18px;
  line-height:1;
  color:#6b7280;
}
.password-wrapper .toggle-password:active{
  transform:translateY(-50%) scale(0.96);
}
.password-wrapper .toggle-password:focus{
  outline:2px solid rgba(37,99,235,.35);
  outline-offset:2px;
}

/* Bouton Connexion */
.login-container .btn-login{
  width:100%;
  margin-top:16px;
  padding:14px 16px;
  background:#4a90e2;
  color:#fff;
  border:none;
  border-radius:12px;
  font-size:18px;
  font-weight:700;
  cursor:pointer;
}
.login-container .btn-login:hover{ background:#357ABD; }

/* reCAPTCHA status */
#recaptcha_status{
  margin-top:10px;
  font-size:0.95rem;
}

/* Mobile */
@media (max-width:480px){
  header .title{
    font-size:1.5rem;
    padding:14px 16px;
  }
  .login-container{
    margin:18px auto;
    padding:18px 14px;
  }
}

/* FIX DEFINITIF : le bouton 👁 ne doit JAMAIS hériter des styles globaux */
.password-wrapper { position: relative; width: 100%; }

.password-wrapper input{
  width: 100%;
  box-sizing: border-box;
  padding-right: 48px; /* espace pour le bouton */
}

/* on cible précisément le bouton */
.password-wrapper > button.toggle-password#togglePsw{
  all: unset !important;         /* reset total (et gagne contre les styles globaux) */
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center !important;

  cursor: pointer !important;
  border-radius: 10px !important;
  background: transparent !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: #6b7280 !important;
}

.password-wrapper > button.toggle-password#togglePsw:hover{
  background: rgba(0,0,0,.06) !important;
}

.password-wrapper > button.toggle-password#togglePsw:active{
  transform: translateY(-50%) scale(0.96) !important;
}

.password-wrapper > button.toggle-password#togglePsw:focus{
  outline: 2px solid rgba(37,99,235,.35) !important;
  outline-offset: 2px !important;
}