/* ==========================================================================
   Flash messages
   ========================================================================== */

.flash-stack {
  margin: 16px 0;
  display: grid;
  gap: 8px;
}

.flash {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, .15);
}

.flash-success { background: rgba(0, 128, 0, .08); }
.flash-error   { background: rgba(220, 0, 0, .08); }
.flash-warning { background: rgba(255, 170, 0, .10); }
.flash-info    { background: rgba(0, 90, 255, .08); }

/* ==========================================================================
   Base / common
   ========================================================================== */

body {
  /* font-family: "Nunito", Helvetica, Arial, sans-serif; */
  background: url(img/bg-sky.jpg) center / cover no-repeat fixed #fff;
}

.container {
  background-color: #fff;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: none;
  background-color: #333;
  color: #fff;
}

/* <div id="confetti"></div> */
#confetti {
  position: fixed;
  inset: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}

/* ==========================================================================
   Header
   ========================================================================== */

header {
  display: flex;
}

header a {
  color: var(--black);
  text-decoration: none;
}

/* Logo */
header .logo img {
  max-width: 128px;
}

/* Title & nav */
header .top .site-title {
    height: 50px;
}

header .top .site-subtitle {
  font: 400 1.2em Verdana, sans-serif;
}

header .top .menu {
  height: 50px;
}

header .top .menu li a {
  transition: color .3s ease;
  -webkit-transition: color .3s ease;
  -moz-transition: color .3s ease;
  -ms-transition: color .3s ease;
  -o-transition: color .3s ease;
}



/* ==========================================================================
   Members area
   ========================================================================== */

.user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  overflow: hidden;
  flex: 0 0 auto;
  background: rgba(0, 0, 0, .06);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-fallback {
  display: block;
  width: 100%;
  height: 100%;
}

.user-name {
  font-weight: 600;
}

.user-id {
  font-size: 12px;
  opacity: .65;
}

.pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .06);
  font-size: 13px;
}

.badge {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  color: black;
  background: rgba(0, 0, 0, .08);
  font-size: 12px;
  -webkit-border-radius: 999px;
  -moz-border-radius: 999px;
  -ms-border-radius: 999px;
  -o-border-radius: 999px;
}

.badge.system {
  background: #e74444;
}

.badge.custom {
  background: #9e44e7;
}

tr.is-me {
  background: rgba(0, 0, 0, .03);
}

.mobile-hide {
  display: table-cell;
}

@media (max-width: 700px) {
  .mobile-hide { display: none; }
}

/* ==========================================================================
   Text editor - align classes
   ========================================================================== */

.ta-left { text-align: left; }
.ta-center { text-align: center; }
.ta-right { text-align: right; }
.ta-justify { text-align: justify; }


/* ==========================================================================
   Clean time recovery
   ========================================================================== */

#confetti{
	height: 100%;
	left: 0px;
	position: fixed;
	top: 0px;
	width: 100%;
	z-index: -1;
}
.recovery-keytag, 
.recovery-medail {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.recovery-keytag img {
	width: 50px;
	height: 75px;
	padding: 5px;
}
.recovery-medail img {
	width: 75px;
	height: 75px;
	padding: 5px;
}

/* ==========================================================================
   Members calendar
   ========================================================================== */

.members-cal-nav{display:flex;gap:12px;align-items:center;margin:10px 0;}
.members-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.members-cal__head{font-weight:bold;text-align:center;padding:6px 0;}
.members-cal__cell{border:1px solid #ddd;border-radius:6px;min-height:90px;padding:6px;}
.members-cal__cell--blank{border:none;background:transparent;}
.members-cal__day{font-weight:bold;margin-bottom:6px;}
.members-cal__cell--event{border-color:#999;}
.members-cal__events{margin:0;padding-left:16px;font-size:12px;}

.members-cal__cell--today {
  background: #e8f2ff; /* bleu très pâle */
  border: 1px solid #bcd6ff;
}

.members-cal__cell--today .members-cal__day {
  font-weight: 600;
  color: #0d3b7a;
	background: rgba(30, 120, 255, 0.08);
}

/* ==========================================================================
   Horizontal nav + dropdowns
   ========================================================================== */

.hnav {
  display: flex;
  gap: 18px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hnav__item { position: relative; }
.hnav__link, .hnav__label {
  display: inline-flex;
  align-items: center;
  padding: 10px 8px;
  text-decoration: none;
}

.hnav__sub {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  display: none;
  z-index: 50;
}

.hnav__sub .hnav__item { width: 100%; }
.hnav__sub .hnav__link, .hnav__sub .hnav__label {
  width: 100%;
  padding: 10px 12px;
}

.hnav__item.has-sub:hover > .hnav__sub { display: block; }

/* Optional: arrow */
.hnav__item.has-sub > .hnav__link::after,
.hnav__item.has-sub > .hnav__label::after {
  content: "▾";
  font-size: 12px;
  margin-left: 8px;
  opacity: .7;
}

/* ==========================================================================
   Menu mobile (hamburger + overlay panel)
   ========================================================================== */
.mnav__list { list-style: none; margin: 0; padding: 0; }
.mnav__item { border-bottom: 1px solid rgba(0,0,0,.08); }
.mnav__row { display: flex; gap: 10px; align-items: center; padding: 12px 0; }
.mnav__link, .mnav__label { flex: 1; text-decoration: none; }
.mnav__toggle {
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
}

.mnav__panel { padding: 0 0 10px 12px; }
.mnav__sub { padding-left: 10px; }