/* =====================================================================
   css/site.css : bandeau du haut, menu, connexion
   Valeurs reprises des pages WebDev (thème « Material Indigo »).
   ===================================================================== */

:root{
  --zad-indigo: #3F51B5;
  --zad-rose:   #FF4081;
  --zad-texte:  #616161;
  --zad-titre:  #424242;
  --zad-police: Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Bandeau du haut ---------- */
.zad-bandeau{
  /* Le bandeau défile avec la page (comme sous WebDev) : vos contenus HTM
     qui ont des barres « collées » en haut (top:0) restent bien visibles.
     z-index 80 : au-dessus du contenu, mais sous vos fenêtres pop-up. */
  position: relative; z-index: 80;
  display: flex; align-items: center;
  height: 56px;
  padding: 0 0 0 11px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  font-family: var(--zad-police);
  box-sizing: border-box;
}
.zad-bandeau .zad-logo{ display: block; flex: 0 0 auto; }
.zad-bandeau .zad-logo img{ width: 70px; height: auto; display: block; }
.zad-bandeau .zad-nom{
  margin-left: 10px;
  font-family: var(--zad-police); font-size: 16px; font-weight: 700; line-height: 22.4px;
  color: var(--zad-titre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zad-bandeau .zad-deconnexion{ display: block; flex: 0 0 auto; margin-left: 10px; }
.zad-bandeau .zad-deconnexion img{ width: 34px; height: 34px; display: block; }

/* Menu (ordinateur) : cases de même largeur, police Arial 14 px */
.zad-bandeau .zad-menu{
  margin: 0 8% 0 auto; align-self: stretch;
  display: flex; min-width: min(654px, 60%);
}
.zad-bandeau .zad-menu a{
  flex: 1 1 0; min-width: max-content; display: flex; align-items: center; justify-content: center;
  white-space: nowrap;
  padding: 10px 8px 8px; box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 400;
  color: var(--zad-indigo); text-decoration: none; text-align: center;
  border-bottom: 3px solid transparent;
}
.zad-bandeau .zad-menu a:hover{ text-decoration: none; }
.zad-bandeau .zad-menu a.actif{ color: var(--zad-rose); border-bottom-color: var(--zad-rose); }

/* Bouton « burger » (mobile) : carré indigo comme sous WebDev */
.zad-bandeau .zad-burger{
  display: none; margin: 0 8px 0 auto; width: 40px; height: 40px; padding: 0;
  background: var(--zad-indigo); border: 0; cursor: pointer;
}
.zad-bandeau .zad-burger span{ display: block; width: 22px; height: 2px; margin: 5px auto; background: #fff; transition: .2s; }

/* Contenu de la page (petite marge comme sous WebDev) */
.zad-contenu{ display: block; padding: 12px 8px 0; box-sizing: border-box; }

/* ---------- Mobile / tablette ---------- */
@media (max-width: 1024px){
  .zad-bandeau .zad-burger{ display: block; }
  .zad-bandeau .zad-nom{ flex: 1 1 auto; text-align: center; margin: 0 6px; }
  .zad-bandeau .zad-menu{
    position: absolute; top: 100%; left: 0; right: 0; margin: 0; width: auto; max-width: none;
    flex-direction: column; background: #fff;
    box-shadow: 0 6px 12px rgba(0,0,0,.15);
    max-height: 0; overflow: hidden; transition: max-height .25s ease;
  }
  body.zad-menu-ouvert .zad-bandeau .zad-menu{ max-height: 420px; }
  .zad-bandeau .zad-menu a{
    justify-content: flex-start; padding: 14px 18px; text-align: left;
    border-bottom: 1px solid #f0f0f0; border-left: 3px solid transparent;
  }
  .zad-bandeau .zad-menu a.actif{ border-bottom-color: #f0f0f0; border-left-color: var(--zad-rose); }
  body.zad-menu-ouvert .zad-burger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  body.zad-menu-ouvert .zad-burger span:nth-child(2){ opacity: 0; }
  body.zad-menu-ouvert .zad-burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 480px){
  .zad-bandeau .zad-logo img{ width: 56px; }
  .zad-bandeau .zad-deconnexion img{ width: 31px; height: 31px; }
}

/* ---------- Page de connexion (mêmes mesures que l'ancienne) ---------- */
/* (pas de règle sur body ici : le contenu HTM garde la main sur le fond et la police) */
.zad-login-carte{
  width: 330px; max-width: calc(100% - 32px);
  margin: 0 auto; padding: 6px 0 30px;
  display: flex; flex-direction: column;
  font-family: Arial, Helvetica, sans-serif; color: var(--zad-texte);
}
.zad-login-logo{ display: block; width: 351px; max-width: 100%; height: 252px; object-fit: contain; margin: 0 auto; align-self: center; }
.zad-login-carte label{
  display: block; margin: 0 0 3px 7px; line-height: 22.4px;
  font-size: 16px; font-weight: 700; color: var(--zad-texte);
}
.zad-login-carte label + input, .zad-login-carte label + .zad-mdp{ margin-bottom: 14px; }
.zad-login-carte input[type=email],
.zad-login-carte input[type=password],
.zad-login-carte input[type=text]{
  width: 100%; height: 41px; box-sizing: border-box;
  padding: 0 8px 0 16px;
  font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 700; color: #333;
  background: #fff; border: 1px solid #dadada; border-radius: 21px; outline: none;
}
.zad-login-carte input:focus{ border-color: #333; }
.zad-mdp{ position: relative; }
.zad-mdp input{ padding-right: 34px !important; }
.zad-oeil{ position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; padding: 0; background: none; border: 0; cursor: pointer; }
.zad-oeil img{ width: 24px; height: 24px; display: block; }
.zad-bouton{
  margin-top: 7px; height: 42px; border: 0; border-radius: 21px;
  background: var(--zad-indigo); color: #fff;
  font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 700; text-transform: uppercase;
  cursor: pointer;
}
.zad-bouton:hover{ filter: brightness(1.1); }
.zad-login-lien{ margin: 11px 0 0 -4px; font-size: 14px; color: var(--zad-texte); text-decoration: none; text-align: left; }
.zad-login-lien:hover{ text-decoration: underline; }
.zad-login-erreur{
  background: #fdecea; color: #b71c1c; border-radius: 8px;
  padding: 10px 12px; font-size: 14px; margin: 0 0 12px;
}

/* Mot de passe oublié : logo comme la connexion, puis le contenu HTM */
.zad-reinit{ width: 100%; max-width: 351px; margin: 0 auto; padding: 6px 0 30px; display: flex; flex-direction: column; }
.zad-reinit .zad-login-logo{ margin-bottom: 20px; }
.zad-reinit .zad-login-lien{ text-align: center; margin: 14px 0 0; }