/**
 * --------------------------------------------------
 * TGV Lyria – Rapports d’Astreinte
 * Styles globaux (v0.1)
 * --------------------------------------------------
 */

/* =========================
   VARIABLES
   ========================= */
:root{
  --lyria-red: #eb0a28;
  --lyria-dark: #222222;
  --lyria-grey: #666666;
  --lyria-light: #f4f4f4;
  --lyria-border: #e5e5e5;
  --lyria-radius: 16px;
  --lyria-radius-pill: 999px;
}

/* =========================
   RESET LOCAL
   ========================= */
.lyria-rapports *,
.lyria-form *{
  box-sizing: border-box;
}

/* =========================
   LISTE DES RAPPORTS
   ========================= */
.lyria-reports{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 24px 0;
}

/* Carte rapport */
.lyria-card{
  display: block;
  background: #ffffff;
  border-radius: var(--lyria-radius);
  padding: 16px;
  text-decoration: none;
  border: 1px solid var(--lyria-border);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  transition: transform .15s ease, box-shadow .15s ease;
}

.lyria-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

/* Haut de carte */
.lyria-card__top{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

/* Titre */
.lyria-card__title{
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--lyria-dark);
  line-height: 1.3;
}

/* Badge statut */
.lyria-badge{
  background: var(--lyria-red);
  color: #ffffff;
  border-radius: var(--lyria-radius-pill);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* Métadonnées */
.lyria-card__meta{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

.lyria-card__meta span{
  display: block;
  font-size: 12px;
  color: var(--lyria-grey);
}

.lyria-card__meta strong{
  display: block;
  font-size: 13px;
  color: var(--lyria-dark);
  font-weight: 700;
}

/* =========================
   FORMULAIRE RAPPORT
   ========================= */
.lyria-form{
  background: #ffffff;
  border-radius: var(--lyria-radius);
  padding: 20px;
  border: 1px solid var(--lyria-border);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  max-width: 900px;
}

.lyria-form__row{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0;
}

.lyria-form__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.lyria-form label{
  font-weight: 700;
  font-size: 14px;
  color: var(--lyria-dark);
}

.lyria-form input,
.lyria-form select,
.lyria-form textarea{
  border: 1px solid var(--lyria-border);
  border-radius: 12px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
}

.lyria-form textarea{
  resize: vertical;
}

/* Bouton */
.lyria-btn{
  margin-top: 12px;
  background: var(--lyria-red);
  color: #ffffff;
  border: none;
  border-radius: var(--lyria-radius-pill);
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}

.lyria-btn:hover{
  filter: brightness(0.95);
  transform: translateY(-1px);
}

/* =========================
   NOTIFICATIONS
   ========================= */
.lyria-notice{
  border-radius: 12px;
  padding: 14px 16px;
  margin: 16px 0;
  font-weight: 700;
}

.lyria-notice--ok{
  background: rgba(46,204,113,0.15);
  color: #1e7e34;
  border: 1px solid rgba(46,204,113,0.25);
}

.lyria-notice--err{
  background: rgba(235,10,40,0.12);
  color: #a10a1f;
  border: 1px solid rgba(235,10,40,0.25);
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 600px){
  .lyria-card__meta{
    grid-template-columns: 1fr;
  }
}