/* ============================================================
   Styles spécifiques à horaire_messe.php
   À charger APRES style.css (variables --bleu/--emeraude/--rubis
   et styles partagés du menu / modal / boutons admin déjà dedans)
   ============================================================ */

.fil-ariane{
  position:relative;
  z-index:1;
  max-width:960px;
  margin:0 auto;
  padding:1.2rem 1.5rem 0;
  font-size:0.82rem;
  color:var(--encre-doux);
}
.fil-ariane a{
  color:var(--encre-doux);
  text-decoration:none;
}
.fil-ariane a:hover{
  color:var(--rubis);
}
.fil-ariane .separateur{
  margin:0 0.4rem;
  opacity:0.6;
}
.fil-ariane .courant{
  color:var(--rubis);
  font-weight:600;
}

.intro-horaires{
  position:relative;
  z-index:1;
  max-width:960px;
  margin:0 auto;
  padding:0 1.5rem;
  text-align:center;
  color:var(--encre-doux);
  font-size:0.98rem;
  line-height:1.6;
}

.image-hero{
  position:relative;
  z-index:1;
  max-width:960px;
  margin:2rem auto;
  padding:0 1.5rem;
  text-align:center;
}
.image-hero img{
  width:100%;
  max-height:360px;
  object-fit:cover;
  border-radius:12px;
  box-shadow:0 14px 34px rgba(29,36,48,0.15);
}
.image-hero figcaption{
  margin-top:0.7rem;
  font-family:'Playfair Display', serif;
  font-style:italic;
  color:var(--encre-doux);
  font-size:0.95rem;
}

.onglets-jours{
  position:relative;
  z-index:1;
  max-width:960px;
  margin:0 auto;
  padding:0 1.5rem;
  display:flex;
  justify-content:center;
  gap:0.5rem;
  flex-wrap:wrap;
  margin-bottom:2rem;
}
.onglet-jour{
  background:#fff;
  border:1px solid rgba(29,36,48,0.12);
  color:var(--encre);
  padding:0.65rem 1.3rem;
  font-size:0.85rem;
  font-weight:600;
  border-radius:24px;
  cursor:pointer;
  transition:background 0.15s, color 0.15s, border-color 0.15s;
}
.onglet-jour:hover{
  border-color:var(--rubis);
  color:var(--rubis);
}
.onglet-jour.actif-onglet{
  background:var(--bleu);
  border-color:var(--bleu);
  color:#fff;
}

.panneau-jour{
  position:relative;
  z-index:1;
  max-width:760px;
  margin:0 auto;
  padding:0 1.5rem 4rem;
}

.ligne-horaire{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0.9rem 1.1rem;
  background:#fff;
  border:1px solid rgba(29,36,48,0.08);
  border-left:4px solid var(--bleu);
  border-radius:8px;
  margin-bottom:0.7rem;
}
.ligne-horaire-info{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:0.7rem;
}
.ligne-horaire .heure{
  font-family:'Playfair Display', serif;
  font-weight:700;
  font-size:1.05rem;
  color:var(--bleu);
  min-width:70px;
}
.ligne-horaire .langue{
  font-size:0.9rem;
  font-weight:600;
  color:var(--encre);
}
.ligne-horaire .lieu{
  font-size:0.85rem;
  color:var(--encre-doux);
}
.ligne-horaire .lieu::before{
  content:"· ";
}
.ligne-horaire .note-badge{
  font-size:0.75rem;
  font-weight:600;
  color:var(--rubis);
  background:rgba(155,26,45,0.08);
  border-radius:20px;
  padding:0.2rem 0.6rem;
}

.ligne-horaire-actions{
  display:flex;
  align-items:center;
  gap:0.4rem;
  flex:none;
}
.btn-modifier{
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid rgba(24,43,74,0.25);
  background:#EEF1F6;
  color:var(--bleu);
  font-size:0.85rem;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition:background 0.15s, color 0.15s;
}
.btn-modifier:hover{
  background:var(--bleu);
  color:#fff;
}
.btn-suppr-ligne{
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid rgba(155,26,45,0.3);
  background:#FBEEEF;
  color:var(--rubis);
  font-size:0.95rem;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.15s, color 0.15s;
}
.btn-suppr-ligne:hover{
  background:var(--rubis);
  color:#fff;
}

@media (max-width:600px){
  .ligne-horaire{
    flex-direction:column;
    align-items:flex-start;
  }
  .ligne-horaire-actions{
    align-self:flex-end;
  }
}