/* ==========================================================================
   « Les horaires » — infoparoisses12eme.com
   Modernisation du design — PORTÉE STRICTE : tout est préfixé .new-site
   (blocs Gutenberg : wp-block-heading / wp-block-list / wp-block-separator /
    wp-block-table). Aucun effet hors de la div .new-site.
   À coller dans : Apparence → Personnaliser → CSS additionnel
   ========================================================================== */

/* ---- 1. Jetons de design --------------------------------------------- */
.new-site {
  --np-indigo:      #1f2a64;   /* bleu liturgique (modernise le #000080)   */
  --np-indigo-soft: #3b478f;
  --np-gold:        #c79a3b;   /* accent doré                              */
  --np-gold-tint:   rgba(199,154,59,.10);
  --np-ink:         #2b2f38;
  --np-muted:       #6b7280;
  --np-line:        #e7e3d8;
  --np-card:        #ffffff;
  --np-bg:          #f7f5ef;   /* fond chaud type papier                   */
  --np-radius:      16px;
  --np-shadow:      0 1px 2px rgba(31,42,100,.04),
                    0 10px 30px -12px rgba(31,42,100,.18);
  --np-shadow-hov:  0 6px 14px rgba(31,42,100,.08),
                    0 22px 48px -16px rgba(31,42,100,.28);
  --np-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --np-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E");

  max-width: 940px;
  margin-inline: auto;
  padding: clamp(1.25rem, 4vw, 3rem) clamp(1rem, 4vw, 2.25rem);
  background: var(--np-bg);
  border-radius: var(--np-radius);
  color: var(--np-ink);
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(1rem, .95rem + .3vw, 1.0625rem);
  line-height: 1.65;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- 2. Titre de page (1er h2, non centré) --------------------------- */
.new-site h2.wp-block-heading:not(.has-text-align-center) {
  font-family: "Oswald", "Open Sans", sans-serif;
  font-weight: 600;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem);
  letter-spacing: .02em;
  color: var(--np-indigo);
  margin: 0 0 1.5rem;
  padding-bottom: .6rem;
  position: relative;
}
.new-site h2.wp-block-heading:not(.has-text-align-center)::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 72px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--np-gold), #e7c878);
}

/* ---- 3. Paragraphes centrés (gérés finement pour les 2 pages) -------- */
.new-site p.has-text-align-center { text-align: center; }

/* 3a. Barre de navigation par ancres : UNIQUEMENT les  qui contiennent
   au moins 2 liens (la nav « X | Y | Z »). On masque les « | » via
   font-size:0 et on transforme les liens en pastilles. Ne touche PAS les
   paragraphes centrés à un seul lien ou à simple texte (page Écho).      */
.new-site p.has-text-align-center:has(a ~ a) {
  font-size: 0;                 /* masque les « | » et les espaces        */
  line-height: 0;
  margin: 0 0 1.75rem;
}
.new-site p.has-text-align-center:has(a ~ a) a {
  display: inline-block;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  margin: .3rem;
  padding: .55rem 1rem;
  border-radius: 999px;
  color: var(--np-indigo);
  background: #fff;
  border: 1px solid var(--np-line);
  box-shadow: 0 1px 2px rgba(31,42,100,.05);
  transition: all .2s ease;
}
.new-site p.has-text-align-center:has(a ~ a) a:hover {
  color: #fff;
  background: var(--np-indigo);
  border-color: var(--np-indigo);
  transform: translateY(-1px);
}

/* 3b. Sous-titre centré en gras (« Actualité du mois », « L'écho 2025-2026 ») */
.new-site p.has-text-align-center:has(> strong:only-child) {
  font-family: "Oswald", "Open Sans", sans-serif;
  font-size: 1.15rem;
  letter-spacing: .04em;
  color: var(--np-indigo);
  margin: 1.75rem 0 .75rem;
}
.new-site p.has-text-align-center:has(> strong:only-child) strong { font-weight: 600; }

/* 3c. Lien isolé centré (« Téléchargez au format PDF… ») → bouton */
.new-site p.has-text-align-center:has(> a:only-child) { margin: .25rem 0 1.5rem; }
.new-site p.has-text-align-center:has(> a:only-child) a {
  display: inline-block;
  font-weight: 600;
  line-height: 1.3;
  padding: .7rem 1.4rem;
  border-radius: 999px;
  color: #fff;
  background: var(--np-indigo);
  border: 0;
  box-shadow: var(--np-shadow);
  transition: background-color .2s ease, transform .2s ease;
}
.new-site p.has-text-align-center:has(> a:only-child) a strong { color: #fff; }
.new-site p.has-text-align-center:has(> a:only-child) a:hover {
  background: var(--np-gold);
  transform: translateY(-1px);
}

/* ---- 4. Titres de section (h2 centrés avec id) ----------------------- */
.new-site h2.wp-block-heading.has-text-align-center {
  font-family: "Oswald", "Open Sans", sans-serif;
  font-weight: 600;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--np-indigo);
  text-align: center;
  margin: clamp(2.25rem, 5vw, 3.25rem) 0 1.5rem;
  scroll-margin-top: 110px;     /* compense l'en-tête fixe lors des ancres */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.new-site h2.wp-block-heading.has-text-align-center strong { font-weight: 600; }
/* petits filets dorés de part et d'autre du titre */
.new-site h2.wp-block-heading.has-text-align-center::before,
.new-site h2.wp-block-heading.has-text-align-center::after {
  content: "";
  height: 2px; width: clamp(24px, 8vw, 64px);
  background: linear-gradient(90deg, transparent, var(--np-gold));
  border-radius: 2px;
}
.new-site h2.wp-block-heading.has-text-align-center::after {
  background: linear-gradient(90deg, var(--np-gold), transparent);
}
/* surbrillance douce de la section ciblée par une ancre */
.new-site h2.wp-block-heading.has-text-align-center:target {
  animation: np-flash 1.6s ease;
}
@keyframes np-flash {
  0%, 30% { background: var(--np-gold-tint); }
  100%    { background: transparent; }
}

/* ---- 5. Intitulés (lieu / jour) : … ---------- */
.new-site p { margin: 0 0 1rem; }
.new-site p strong, .new-site strong, .new-site b {
  color: var(--np-indigo); font-weight: 700;
}
/* paragraphe (NON centré) dont l'unique contenu est un libellé en gras
   → sous-titre à barre dorée (libellés « S^te Anne : » de la page horaires) */
.new-site p:has(> strong:only-child):not(.has-text-align-center) {
  display: flex; align-items: baseline; gap: .55rem;
  margin: 1.4rem 0 .55rem;
  font-family: "Oswald", "Open Sans", sans-serif;
  font-size: 1.05rem; letter-spacing: .02em;
}
.new-site p:has(> strong:only-child):not(.has-text-align-center)::before {
  content: ""; flex: 0 0 auto;
  width: 6px; height: 1.05em; border-radius: 3px;
  background: var(--np-gold); transform: translateY(.12em);
}

/* ---- 6. Listes d'horaires → cartes ----------------------------------- */
.new-site ul.wp-block-list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: .4rem;
  background: var(--np-card);
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  box-shadow: var(--np-shadow);
  transition: box-shadow .25s ease, transform .25s ease;
}
.new-site ul.wp-block-list:hover {
  box-shadow: var(--np-shadow-hov);
  transform: translateY(-2px);
}
.new-site ul.wp-block-list li {
  position: relative;                 /* l'icône se place en absolu dedans  */
  padding: .7rem .9rem .7rem 2.7rem;  /* place réservée à gauche pour l'icône */
  border-radius: 10px;
  font-size: 1.02rem;
  /* le texte coule en inline → les  (S^t, S^te) restent collés au mot */
}
.new-site ul.wp-block-list li + li { border-top: 1px solid var(--np-line); }
.new-site ul.wp-block-list li:hover { background: var(--np-gold-tint); }
.new-site ul.wp-block-list li::before {     /* horloge dorée (créneaux) */
  content: "";
  position: absolute;
  left: .85rem;
  top: .9rem;                         /* alignée sur la 1re ligne           */
  width: 20px; height: 20px;
  background: var(--np-gold);
  -webkit-mask: var(--np-clock) center / contain no-repeat;
          mask: var(--np-clock) center / contain no-repeat;
}
/* élément de liste qui n'est qu'un lien (PDF à télécharger) → icône download */
.new-site ul.wp-block-list li:has(> a:only-child)::before {
  -webkit-mask-image: var(--np-doc);
          mask-image: var(--np-doc);
}
.new-site ul.wp-block-list li:has(> a:only-child) {
  font-weight: 600;
}

/* ---- 7. Séparateurs -------------------------------------------------- */
.new-site hr.wp-block-separator {
  border: 0; height: auto; margin: 2.25rem auto;
  width: 100%; max-width: 220px; text-align: center;
  overflow: visible;
}
.new-site hr.wp-block-separator::before {
  content: "✦";
  display: block;
  color: var(--np-gold);
  font-size: .85rem;
  position: relative;
}
.new-site hr.wp-block-separator::after {
  content: ""; display: block;
  height: 1px; margin-top: -.7rem;
  background: linear-gradient(90deg, transparent, var(--np-line) 25%,
                                      var(--np-line) 75%, transparent);
}

/* ---- 8. Tableau (permanences d'accueil) ------------------------------ */
.new-site .wp-block-table { margin: 0 0 1.5rem; overflow-x: auto; }
.new-site .wp-block-table table {
  width: 100%; border-collapse: collapse;
  background: var(--np-card);
  border-radius: var(--np-radius); overflow: hidden;
  box-shadow: var(--np-shadow);
  font-size: .95rem;
}
.new-site .wp-block-table td,
.new-site .wp-block-table th {
  padding: .7rem .8rem; border: 1px solid var(--np-line);
  text-align: center; vertical-align: middle;
}
/* 1re ligne = en-tête des jours */
.new-site .wp-block-table tr:first-child td {
  background: var(--np-indigo); color: #fff;
  font-family: "Oswald", sans-serif; letter-spacing: .03em; border-color: var(--np-indigo);
}
.new-site .wp-block-table tr:first-child td strong { color: #fff; }
/* 1re colonne = Matin / Après-midi */
.new-site .wp-block-table td:first-child {
  background: var(--np-gold-tint); font-weight: 600; color: var(--np-indigo);
}
.new-site .wp-block-table tbody tr:not(:first-child):hover td { background: var(--np-gold-tint); }
.new-site .wp-block-table em { color: var(--np-muted); }

/* ---- 9. Détails typographiques --------------------------------------- */
.new-site sup { font-size: .62em; line-height: 0; }   /* S^te, S^t propres */
.new-site em { color: var(--np-muted); }
.new-site a {
  color: var(--np-indigo); text-decoration: none;
  border-bottom: 1px solid rgba(199,154,59,.5);
  transition: color .2s ease, border-color .2s ease;
}
.new-site a:hover { color: var(--np-gold); border-color: var(--np-gold); }
/* la note d'édition « présentation en accordéon ? » */
.new-site mark {
  background: #fff4d6; color: #8a6d1f;
  padding: .1em .45em; border-radius: 6px; font-size: .9em;
}
.new-site img { max-width: 100%; height: auto; border-radius: 12px; }

/* ---- 10. Accessibilité & responsive ---------------------------------- */
@media (max-width: 600px) {
  .new-site ul.wp-block-list li { font-size: .98rem; }
}
@media (prefers-reduced-motion: reduce) {
  .new-site *, .new-site h2:target { animation: none !important; transition: none !important; }
}
.new-site :focus-visible {
  outline: 2px solid var(--np-gold); outline-offset: 2px; border-radius: 4px;
}