/* Masque visuellement un élément sans le retirer de l'arbre d'accessibilité
   (pattern "sr-only" standard) : utilisé pour le titre <h2> ajouté avant
   #pp-app, qui donne un repère de navigation aux lecteurs d'écran sans
   dupliquer visuellement un titre de page déjà posé par le thème. */
.pp-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===================== Variables ===================== */
#pp-app {
  --pp-border: #cbd5e1;
  --pp-bg: #ffffff;
  --pp-bg-alt: #f8fafc;
  --pp-text: #1e293b;
  --pp-muted: #64748b;
  --pp-accent: #2563eb;
  --pp-accent-text: #ffffff;
  --pp-danger: #dc2626;
  --pp-warning: #d97706;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Taille de base explicite plutôt que dépendre du thème (qui peut poser
     13-14px) : tous les textes du plugin sont dimensionnés en px à partir
     d'ici, une base plus généreuse relève donc l'ensemble. */
  font-size: 16px;
  color: var(--pp-text, #1e293b);
  max-width: 100%;
  position: relative;
}

#pp-app *, #pp-app *::before, #pp-app *::after { box-sizing: border-box; }

.pp-loading { color: #64748b; font-style: italic; }

/* ===================== Barre d'outils ===================== */
.pp-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
  padding: 10px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
}

.pp-toolbar .pp-spacer { flex: 1 1 auto; }

/* Zone de connexion (bouton "Se connecter", ou nom + rôle + "Se déconnecter"),
   toujours affichée en bout de barre d'outils. */
.pp-auth-area { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pp-auth-name { font-size: 14px; color: #475569; font-weight: 600; }

/* Onglets Connexion / Créer un compte de la fenêtre d'authentification. */
.pp-auth-tabs { display: flex; gap: 8px; margin-bottom: 14px; }

/* Regroupe la bascule tableau/liste et l'icône de filtrage : ce conteneur
   reste toujours affiché en ligne (jamais en colonne), y compris sur
   mobile où .pp-main-toolbar passe ses propres enfants en colonne — voir
   la media query plus bas. */
.pp-toolbar-icons { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }

.pp-tabs { display: flex; gap: 6px; }
#pp-app .pp-tab-btn {
  padding: 9px 16px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #1e293b;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
}
#pp-app .pp-tab-btn.pp-active { background: var(--pp-accent, #2563eb); color: var(--pp-accent-text, #ffffff); border-color: var(--pp-accent, #2563eb); }

/* Boutons ronds/carrés à icône seule : bascule tableau/liste, icône de
   filtrage, icône de paramétrage (⚙). Remplacent les anciens boutons
   textuels de la barre d'outils. */
#pp-app .pp-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
  position: relative;
  font-family: inherit;
}
#pp-app .pp-icon-btn:hover { background: #f1f5f9; color: #1e293b; }
#pp-app .pp-icon-btn.pp-active {
  background: var(--pp-accent, #2563eb);
  color: var(--pp-accent-text, #ffffff);
  border-color: var(--pp-accent, #2563eb);
}
#pp-app .pp-icon-btn .pp-icon { display: inline-flex; }

/* Point indicateur affiché sur l'icône de filtrage quand au moins un
   filtre est actif alors que le volet des filtres est masqué (cf.
   anyFiltersActive() dans script.js), pour ne pas cacher un filtre en
   cours d'application à l'utilisateur. */
#pp-app .pp-icon-btn-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pp-warning, #d97706);
  border: 1.5px solid #ffffff;
}
#pp-app .pp-icon-btn.pp-active .pp-icon-btn-dot { border-color: var(--pp-accent, #2563eb); }

/* Menu déroulant "Paramètres" : regroupe Gérer les églises / Exporter CSV /
   Importer CSV, auparavant en boutons séparés dans la barre d'outils. */
.pp-settings-menu { position: relative; }
.pp-settings-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .15);
  padding: 6px;
  gap: 2px;
}
#pp-app .pp-settings-item {
  display: block;
  width: 100%;
  padding: 9px 11px;
  border: none;
  background: none;
  color: #1e293b;
  border-radius: 5px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  font-family: inherit;
  white-space: nowrap;
}
#pp-app .pp-settings-item:hover { background: #f1f5f9; }

#pp-app .pp-btn {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #1e293b;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.3;
  text-decoration: none;
  font-family: inherit;
}
#pp-app .pp-btn:hover { background: #f1f5f9; color: #1e293b; }
#pp-app .pp-btn-primary { background: var(--pp-accent, #2563eb); color: var(--pp-accent-text, #ffffff); border-color: var(--pp-accent, #2563eb); }
#pp-app .pp-btn-primary:hover { background: var(--pp-accent, #2563eb); filter: brightness(0.88); color: var(--pp-accent-text, #ffffff); }
#pp-app .pp-btn-danger { color: #dc2626; border-color: #fca5a5; background: #fff; }
#pp-app .pp-btn-danger:hover { background: #fef2f2; }
#pp-app .pp-btn-small { padding: 5px 11px; font-size: 13px; }
#pp-app .pp-add-btn { margin-top: 4px; }

.pp-filters { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 15px; }
.pp-filters label { display: flex; align-items: center; gap: 5px; cursor: pointer; }

.pp-filterbar { font-size: 15px; }
.pp-filterbar-groups { align-items: stretch; }
.pp-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 13px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  min-width: 200px;
}
#pp-app .pp-filter-group-title {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
  background: none;
  border: none;
  padding: 2px 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
#pp-app .pp-filter-group-title:hover { color: #334155; }
#pp-app .pp-filter-group-title-active { color: var(--pp-accent, #2563eb); }
.pp-filter-group-caret { font-size: 11px; width: 11px; display: inline-block; }
.pp-filter-group-body { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.pp-filter-group-collapsed { padding-bottom: 8px; }
.pp-reset-btn-all { align-self: center; }
.pp-filter-item { display: flex; align-items: center; gap: 5px; cursor: pointer; }
#pp-app .pp-filter-item select,
#pp-app .pp-filter-item input[type="date"] {
  padding: 6px 8px;
  border: 1px solid #94a3b8;
  border-radius: 5px;
  font-size: 14px;
  background: #ffffff;
  color: #1e293b;
  font-family: inherit;
}
.pp-church-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#pp-app .pp-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px 5px 9px;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  background: #ffffff;
  color: #334155;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
#pp-app .pp-chip.pp-chip-active {
  background: #eff6ff;
  border-color: var(--pp-accent, #2563eb);
  color: #1e3a8a;
  font-weight: 600;
}
#pp-app .pp-reset-btn { font-size: 13px; color: #64748b; background: none; border: 1px solid #cbd5e1; border-radius: 5px; padding: 5px 10px; cursor: pointer; font-family: inherit; }
#pp-app .pp-reset-btn:hover { background: #f1f5f9; color: #334155; }

/* ===================== Pastille couleur église ===================== */
.pp-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,.15);
}

.pp-church-label { display: inline-flex; align-items: center; font-weight: 600; }

/* Pastille de légende dans les filtres "Sans chanteur"/"Sans musicien" :
   reprend les mêmes couleurs que .pp-alert-dot-strong/-light pour que le
   filtre serve aussi de rappel du code couleur utilisé ailleurs (tableau,
   liste). Purement décorative (aria-hidden), le texte du filtre porte déjà
   le sens. */
.pp-legend-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin: 0 5px 0 1px;
}
.pp-legend-dot-strong { background: #dc2626; }
.pp-legend-dot-light { background: #fde68a; border: 1px solid rgba(0,0,0,.15); }

/* ===================== Alertes (couleur seule) ===================== */
/* Ce sont des <button> : on retire le style natif du navigateur puis on
   réapplique l'apparence "pastille", en ajoutant un état actif (filtre
   engagé) et un retour visuel au survol / focus clavier. */
.pp-alert {
  display: inline-block; padding: 3px 9px; border-radius: 10px; font-size: 12px; font-weight: 700;
  margin: 2px 4px 2px 0; border: 2px solid transparent; cursor: pointer; font-family: inherit; line-height: 1.4;
}
.pp-alert-strong { background: #fecaca; color: #7f1d1d; } /* sans chanteur : rouge */
.pp-alert-light { background: #fde68a; color: #78350f; }  /* sans musicien : orange, plus doux */
.pp-alert:hover { filter: brightness(0.95); }
.pp-alert:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 1px; }
.pp-alert-active { border-color: currentColor; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.pp-alert-active::after { content: ' ✓'; }

/* Variante "pastille" compacte des alertes, vue liste uniquement (voir
   alertBadge()/alertsFor() dans script.js, appelées avec {compact:true}
   par listItem()). Remplace le badge texte pleine largeur par un rond
   couleur + icône, plus discret sur mobile. La distinction forte (sans
   chanteur) / légère (sans musicien) reste portée par la couleur (comme la
   vue tableau) et renforcée par la taille et le remplissage : la pastille
   "forte" est plus grande et pleine couleur, la "légère" plus petite et
   plus douce, pour rester lisible même par les daltoniens qui ne
   distinguent pas rouge/orange. */
.pp-alert-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; margin: 2px 4px 2px 0;
  border-radius: 50%; border: 2px solid transparent; line-height: 1;
}
.pp-alert-dot::after { content: none; } /* pas de coche texte dans la pastille */
.pp-alert-dot.pp-alert-active { box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 0 0 2px #fff; }
.pp-alert-dot.pp-alert-strong {
  width: 22px; height: 22px;
  background: #dc2626; color: #fff; /* rouge plein : alerte forte */
}
.pp-alert-dot.pp-alert-light {
  width: 18px; height: 18px;
  background: #fde68a; color: #78350f; /* orange doux : alerte légère */
}
.pp-alert-dot svg { display: block; }

/* ===================== Vue tableau ===================== */
/* Remarque technique : dès qu'un axe a "overflow-x: auto", les navigateurs
   calculent aussi l'autre axe ("overflow-y") comme "auto" (règle du
   "scrolling box" en CSS). Le conteneur devient alors lui-même la zone de
   défilement de référence pour les cellules "position: sticky" qu'il
   contient — mais comme sa hauteur suit celle du tableau (elle ne défile
   jamais verticalement), les en-têtes figés ne restent pas visibles lors
   du défilement de la page. On fixe donc explicitement une hauteur
   maximale avec "overflow-y: auto" pour que ce soit le corps du tableau
   qui défile *dans* ce conteneur, et que l'en-tête sticky s'y accroche
   correctement, quelle que soit la façon dont la page défile par ailleurs. */
.pp-grid-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 220px);
  border: 1px solid #cbd5e1;
  border-radius: 8px;
}
table.pp-grid { border-collapse: collapse; width: 100%; min-width: 1100px; table-layout: fixed; }
.pp-date-col { width: 155px; }
table.pp-grid th, table.pp-grid td {
  border: 1px solid #e2e8f0;
  padding: 8px;
  vertical-align: top;
  text-align: left;
  overflow-wrap: break-word;
}
table.pp-grid thead th {
  background: #f8fafc;
  position: sticky;
  top: 0;
  z-index: 3;
  box-shadow: 0 1px 0 #cbd5e1;
}
/* Remarque : l'en-tête sticky s'accroche désormais au conteneur défilant
   ".pp-grid-wrap" (voir plus haut), pas à la fenêtre du navigateur. Il n'y a
   donc plus besoin de décaler "top" pour la barre d'administration
   WordPress : celle-ci reste au-dessus du conteneur, qui défile lui-même
   indépendamment de la page. */
/* Coin haut-gauche : la case d'en-tête "Date" reste figée à la fois en haut
   et à gauche, comme les cases "date" de chaque ligne. */
table.pp-grid thead th.pp-date-col-header { position: sticky; left: 0; z-index: 4; }
table.pp-grid td.pp-date-row-header {
  background: #f8fafc;
  font-weight: 700;
  white-space: normal;
  overflow-wrap: break-word;
  position: sticky; left: 0; z-index: 1;
}
.pp-cell { min-width: 210px; }

/* Repère visuel temporaire sur la célébration qu'on vient de créer ou de
   déplacer (date/église modifiée), une fois que la vue s'est déplacée dessus
   automatiquement — voir focusCelebration() dans script.js. S'estompe seule
   après quelques secondes (ne bloque aucune interaction, pas d'opacité). */
.pp-just-updated {
  outline: 2px solid var(--pp-accent, #2563eb);
  outline-offset: 2px;
  border-radius: 6px;
  transition: outline-color 1.6s ease, outline-offset 1.6s ease;
}
.pp-just-updated.pp-just-updated-fade {
  outline-color: transparent;
}
.pp-cell-empty { color: #cbd5e1; text-align: center; }
.pp-cell-date { font-weight: 700; text-transform: capitalize; }
.pp-cell-heure { color: #334155; margin-bottom: 4px; font-weight: 700; text-align: center; }
.pp-cell-block { margin-top: 8px; font-size: 15px; }

/* Bloc "Important" : avertissement du gestionnaire, placé juste sous
   l'horaire (voir celebrationCellContent() dans script.js). Se démarque des
   autres champs par un fond/bordure d'alerte dès qu'un texte est saisi
   (classe .pp-important-active) ; reste discret (juste le champ de saisie,
   sans mise en couleur) quand il est vide, pour ne pas alerter sans raison. */
.pp-important-block { margin-top: 4px; margin-bottom: 8px; font-size: 15px; }
.pp-important-block.pp-important-active {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 4px 6px;
}
.pp-important-block.pp-important-active .pp-label { color: #b91c1c; }
.pp-important-text { color: #b91c1c; font-weight: 700; text-align: center; }
#pp-app .pp-inline-important { font-weight: 700; text-align: center; }
#pp-app .pp-important-block.pp-important-active .pp-inline-important { color: #b91c1c; }

/* En vue liste, le bloc "Important" rejoint l'en-tête de la carte (date,
   heure, église) au lieu de rester dans le corps : c'est un avertissement
   qui doit se voir en un coup d'œil, pas un champ de détail parmi d'autres
   (voir listItem() dans script.js). Il occupe sa propre ligne, juste sous
   la ligne date/heure/église/alertes (.pp-list-item-head-top), plutôt que
   de partager cette ligne et de ne retomber à la ligne que si elle
   déborde. Les marges verticales de .pp-important-block n'ont pas lieu
   d'être ici, l'espacement est déjà géré par le "gap" de
   .pp-list-item-head. */
.pp-list-item-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.pp-list-item-head-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pp-list-item-head .pp-important-block {
  margin: 0;
  width: 100%;
}
.pp-cell-block .pp-label,
.pp-attachments .pp-label { color: #334155; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; display: block; margin-bottom: 2px; }
.pp-tags-wrap { display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center; }

/* ===================== Vue liste ===================== */
/* Cartes "app mobile" plutôt que lignes de tableur : on remplace la fine
   bordure grise omniprésente par une ombre douce (+ un fond à peine
   contrasté), on agrandit le rayon des coins, et on ajoute un léger effet
   de surélévation au survol. Le liseré de couleur gauche (église) et le
   fond coloré piloté par cellColorMode (voir listItem() dans script.js, qui
   pose background-color en style inline) sont conservés tels quels : le
   style inline l'emporte simplement sur le fond ci-dessous quand il est
   présent. */
.pp-list { display: flex; flex-direction: column; gap: 14px; }
.pp-list-item {
  border: 1px solid rgba(15, 23, 42, .05);
  border-left: 4px solid #94a3b8;
  border-radius: 16px;
  padding: 16px 18px;
  background: #fbfcfe;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 16px rgba(15, 23, 42, .06);
  transition: box-shadow .15s ease;
}
.pp-list-item:hover {
  box-shadow: 0 2px 6px rgba(15, 23, 42, .06), 0 10px 26px rgba(15, 23, 42, .09);
}
/* Bloc fusionné date + heure : les deux champs restent des éléments
   distincts (voir listItem() dans script.js), réunis dans un même bloc
   visuel — bordure et fond communs, comme un champ unique — plutôt que
   juxtaposés. Pour le gestionnaire, tout le bloc est cliquable (voir le
   gestionnaire de clic ajouté en JS) et prend l'apparence "façon tableur"
   des autres champs de saisie de la page. */
.pp-list-datetime {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 3px 7px;
}
.pp-list-datetime-editable {
  cursor: pointer;
}
.pp-list-datetime-editable:hover {
  border-color: transparent;
  background: rgba(37, 99, 235, .08);
}
.pp-list-date { font-weight: 700; text-transform: capitalize; }
.pp-list-heure { font-weight: 700; color: #334155; }
/* Le champ "façon tableur" (gestionnaire) doit garder une largeur compacte
   dans la ligne d'en-tête de la liste, plutôt que les 100% appliqués par
   défaut à .pp-inline-heure dans la vue tableau, et se fondre dans le bloc
   fusionné (plus de bordure/fond propres : c'est .pp-list-datetime qui les
   porte désormais). */
#pp-app .pp-list-item-head input.pp-inline-heure.pp-list-heure {
  width: auto;
  min-width: 62px;
  flex: 0 0 auto;
  padding: 3px 0;
}
/* Au repos et au survol, le champ heure n'affiche plus sa propre
   bordure/fond (c'est .pp-list-datetime qui les porte) ; le focus clavier
   (accessibilité) reste visible normalement, voir la règle générale
   #pp-app .pp-inline-heure:focus plus bas. */
#pp-app .pp-list-item-head input.pp-inline-heure.pp-list-heure,
#pp-app .pp-list-item-head input.pp-inline-heure.pp-list-heure:hover {
  border-color: transparent;
  background: transparent;
}
/* Hiérarchie visuelle de la carte : empilement vertical (et non plus une
   grille à 5 colonnes de poids égal) pour que l'œil suive dans l'ordre
   prêtre (discret) → intervenants (mis en avant) → remarques → pièces
   jointes (repliées, cf. .pp-list-attachments-toggle plus bas). Les blocs
   internes (.pp-cell-block, .pp-remarques-block, .pp-attachments)
   gardent leur marge haute d'origine pour la vue tableau : on la neutralise
   ici pour laisser le "gap" ci-dessous gérer l'espacement, en évitant un
   double espacement. */
.pp-list-body { display: flex; flex-direction: column; gap: 10px; }
.pp-list-body > .pp-cell-block,
.pp-list-body .pp-list-signups .pp-cell-block,
.pp-list-body .pp-attachments { margin-top: 0; }
.pp-list-col .pp-label { color: #334155; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; display: block; margin-bottom: 2px; }
.pp-list-empty-msg { color: #64748b; font-style: italic; padding: 20px; text-align: center; }

/* Intervenants (chanteurs/musiciens) : juste après le prêtre, priorité n°2
   dans la carte. Toujours sur 2 colonnes côte à côte, même sur une carte
   étroite (contrairement à .pp-list-body qui, lui, s'empile), pour que
   "qui chante" et "qui joue" restent lisibles d'un coup d'œil. */
.pp-list-signups { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }

/* Prêtre : priorité la plus basse des champs visibles (après l'en-tête),
   donc traité en simple ligne discrète plutôt qu'en bloc labellisé comme
   les autres champs — sans pour autant être moins lisible pour le
   gestionnaire, dont le champ de saisie reste normal. Masqué entièrement
   côté script.js (buildPretreListLine()) quand vide et non-gestionnaire. */
.pp-list-pretre { display: flex; align-items: baseline; gap: 6px; font-size: 13px; color: #64748b; }
.pp-list-pretre .pp-label {
  margin-bottom: 0; font-size: 12px; font-weight: 600; text-transform: none;
  letter-spacing: normal; white-space: nowrap;
}
.pp-list-pretre > div { color: #334155; }
#pp-app .pp-list-pretre input.pp-inline-text { width: auto; min-width: 130px; flex: 1 1 auto; padding: 2px 5px; }

/* Prêtre, Important (en-tête) et Remarques (corps) en vue liste : même
   principe que le champ heure et le sélecteur d'église ci-dessus (voir
   #pp-app .pp-list-item-head input.pp-inline-heure.pp-list-heure et
   .pp-church-label-editable select.pp-inline-select plus haut) — on ne
   change ni le comportement (clic, popovers, sauvegarde : bindInlineCommit()
   dans script.js) ni le focus clavier (accessibilité, cf. la règle générale
   #pp-app .pp-inline-text:focus etc. plus bas, non touchée ici), seulement
   le survol "façon tableur" (bordure grise nette + fond blanc plein) qu'on
   remplace par un halo doux et arrondi, cohérent avec
   .pp-list-datetime-editable:hover ci-dessus. Spécificité (ancêtre propre à
   la vue liste + sélecteur de classe) suffisante pour l'emporter sur la
   règle tableur commune sans y toucher, et sans affecter la vue tableau. */
#pp-app .pp-list-pretre input.pp-inline-text:hover,
#pp-app .pp-list-item-head .pp-inline-important:hover,
#pp-app .pp-list-body .pp-inline-textarea:hover {
  border-color: transparent;
  background: rgba(37, 99, 235, .08);
  border-radius: 8px;
}

/* Pièces jointes : volontairement secondaires visuellement (dernier de la
   liste, hors de vue par défaut). Repliées en une pastille compacte
   n'indiquant que leur nombre (voir buildAttachmentsListToggle() dans
   script.js) ; un clic la remplace par l'affichage complet habituel
   (.pp-attachments), qui se referme comme les autres boîtes au clic
   extérieur. */
.pp-list-attachments-toggle {
  display: inline-flex; align-self: flex-start; align-items: center;
  border: 1px solid transparent; border-radius: 12px; padding: 4px 11px;
  font-size: 13px; background: rgba(100, 116, 139, .08); color: #64748b; cursor: pointer;
  /* #64748b plutôt que #94a3b8 : contraste ~4.6:1 sur fond blanc (seuil AA
     texte normal), l'ancienne couleur tombait autour de 2.5:1. */
}
.pp-list-attachments-toggle:hover { background: rgba(100, 116, 139, .14); border-color: transparent; }
.pp-list-attachments-toggle.pp-list-attachments-has { color: #334155; background: rgba(37, 99, 235, .10); }

/* ===================== Intervenants (tags) ===================== */
.pp-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: #f1f5f9; border-radius: 12px; padding: 4px 5px 4px 10px;
  font-size: 13px;
}
.pp-tag button { border: none; background: none; cursor: pointer; color: #64748b; font-size: 16px; line-height: 1; padding: 0 5px; }
.pp-tag button:hover { color: #dc2626; }

/* Boîte qui regroupe les bulles chanteurs/musiciens : repliée par défaut
   (bulles seules, pas de bouton d'ajout), elle s'active au clic pour
   afficher les croix de suppression sur chaque bulle et le champ de
   saisie d'un nouveau nom (cf. signupBlock() dans script.js). */
.pp-signup-box {
  border: 1px dashed transparent;
  border-radius: 8px;
  padding: 3px 4px;
  margin: -3px -4px;
  cursor: pointer;
}
.pp-signup-box:hover {
  border-color: #cbd5e1;
  background: #ffffff;
}
.pp-signup-box-open {
  cursor: default;
  border-style: solid;
  border-color: var(--pp-accent, #2563eb);
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .15);
}
.pp-signup-box-hint {
  font-size: 13px;
  font-style: italic;
  color: #64748b; /* contraste AA, voir .pp-list-attachments-toggle plus haut */
}

/* ===================== Remarques ===================== */
.pp-remarques-text { font-size: 15px; color: #334155; white-space: pre-wrap; margin-bottom: 4px; }

/* ===================== Saisie "tableur" ===================== */
/* Champs de saisie directement dans les cellules (horaire, prêtre, remarques,
   ajout de chanteur/musicien), pour remplacer les fenêtres modales et se
   rapprocher d'une saisie façon tableur. */
#pp-app .pp-inline-heure,
#pp-app .pp-inline-text,
#pp-app .pp-inline-textarea,
#pp-app .pp-inline-select {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 15px;
  font-family: inherit;
  color: inherit;
}
#pp-app .pp-cell-heure input.pp-inline-heure { font-weight: 700; text-align: center; color: #334155; }
#pp-app .pp-cell-heure input.pp-inline-heure[readonly] { cursor: pointer; caret-color: transparent; }
#pp-app .pp-inline-textarea { resize: vertical; min-height: 34px; }
#pp-app .pp-inline-heure:hover,
#pp-app .pp-inline-text:hover,
#pp-app .pp-inline-textarea:hover,
#pp-app .pp-inline-select:hover {
  border-color: #cbd5e1;
  background: #ffffff;
}
#pp-app .pp-inline-heure:focus,
#pp-app .pp-inline-text:focus,
#pp-app .pp-inline-textarea:focus,
#pp-app .pp-inline-select:focus {
  outline: none;
  border-color: var(--pp-accent, #2563eb);
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(37,99,235,.15);
}
#pp-app .pp-inline-heure:disabled,
#pp-app .pp-inline-text:disabled,
#pp-app .pp-inline-textarea:disabled,
#pp-app .pp-inline-select:disabled { opacity: .6; }
/* Église en vue liste (gestionnaire) : pastille de couleur + menu déroulant
   à la place du simple libellé, sans bordure/fond au repos pour rester
   discret dans l'en-tête de la carte (comme .pp-list-heure ci-dessus). */
.pp-church-label-editable { cursor: default; }
#pp-app .pp-church-label-editable select.pp-inline-select {
  width: auto;
  max-width: 220px;
  font-weight: 600;
  border-color: transparent;
  background: transparent;
  padding: 3px 4px;
  cursor: pointer;
}
#pp-app .pp-church-label-editable select.pp-inline-select:hover,
#pp-app .pp-church-label-editable select.pp-inline-select:focus {
  border-color: #cbd5e1;
  background: #ffffff;
}

.pp-inline-add-row { display: flex; align-items: center; gap: 4px; margin-top: 3px; width: 100%; }
/* Ligne "remarques" : bouton "Enregistrer" aligné en bas du champ, qui peut
   faire plusieurs lignes (contrairement au simple champ texte d'ajout d'un
   chanteur/musicien). */
.pp-remarques-edit-row { align-items: flex-end; }
.pp-remarques-edit-row .pp-inline-textarea { flex: 1 1 auto; width: auto; }
#pp-app .pp-inline-add {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 13px;
  font-family: inherit;
  background: #ffffff;
  color: #1e293b;
}
#pp-app .pp-inline-add:focus { outline: none; border-color: var(--pp-accent, #2563eb); border-style: solid; }
#pp-app .pp-inline-add-btn {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: var(--pp-accent, #2563eb);
  cursor: pointer;
  line-height: 1;
  font-size: 15px;
  padding: 0;
}
#pp-app .pp-inline-add-btn:hover { background: #eff6ff; }

/* ===================== Pièces jointes ===================== */
.pp-attachments { margin-top: 8px; font-size: 15px; }
.pp-attachment-line { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.pp-programme-link { font-size: 13px; display: inline-flex; align-items: center; gap: 4px; color: var(--pp-accent, #2563eb); text-decoration: none; }
.pp-programme-link:hover { text-decoration: underline; }
.pp-tag-remove { border: none; background: none; cursor: pointer; color: #94a3b8; font-size: 15px; line-height: 1; padding: 0 4px; }
.pp-tag-remove:hover { color: #dc2626; }

/* ===================== Actions créateur ===================== */
.pp-creator-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  max-width: 100%;
}
.pp-creator-actions .pp-btn {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===================== Modale ===================== */
.pp-modal-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .55);
  display: flex; align-items: center; justify-content: center; z-index: 100000; padding: 16px;
}
#pp-app .pp-modal {
  background: #ffffff; color: #1e293b; border-radius: 10px; padding: 22px;
  width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  border: 1px solid #e2e8f0;
}
#pp-app .pp-modal h3 { margin-top: 0; margin-bottom: 14px; color: #1e293b; }
#pp-app .pp-modal-hint { font-size: 14px; color: #64748b; margin: 14px 0 4px; }
#pp-app .pp-field { margin-bottom: 14px; }
#pp-app .pp-field label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 14px; color: #1e293b; }
#pp-app .pp-field input[type="text"],
#pp-app .pp-field input[type="date"],
#pp-app .pp-field input[type="time"],
#pp-app .pp-field input[type="file"],
#pp-app .pp-field input[type="password"],
#pp-app .pp-field input[type="email"],
#pp-app .pp-field select,
#pp-app .pp-field textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #94a3b8 !important;
  border-radius: 6px;
  font-size: 16px;
  background: #ffffff !important;
  color: #1e293b !important;
  font-family: inherit;
  box-shadow: none;
  appearance: auto;
}
#pp-app .pp-field input:focus,
#pp-app .pp-field select:focus,
#pp-app .pp-field textarea:focus {
  outline: 2px solid var(--pp-accent, #2563eb);
  outline-offset: 1px;
  border-color: var(--pp-accent, #2563eb) !important;
}
#pp-app .pp-field textarea { min-height: 70px; resize: vertical; }
#pp-app .pp-modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
#pp-app .pp-modal-actions .pp-spacer { flex: 1; }
#pp-app .pp-modal-actions .pp-btn { min-width: 90px; text-align: center; }

/* ===================== Popover date+heure ===================== */
/* Petite fenêtre flottante (pas une modale plein écran) ouverte au clic sur
   le champ heure "façon tableur" (voir openHeurePopover() dans script.js),
   pour modifier la date et l'heure ensemble sans passer par la modale
   complète "Modifier". Positionnée en JS (position: fixed) pour rester
   toujours visible même dans le conteneur défilant de la vue tableau. */
#pp-app .pp-heure-popover {
  position: fixed;
  z-index: 100000;
  background: #ffffff;
  color: #1e293b;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  padding: 14px;
  width: 240px;
}
#pp-app .pp-heure-popover .pp-field { margin-bottom: 10px; }
#pp-app .pp-heure-popover .pp-modal-actions { margin-top: 6px; }

.pp-msg { padding: 10px 12px; border-radius: 6px; font-size: 14px; margin-bottom: 12px; }
.pp-msg-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.pp-msg-ok { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.pp-msg-info { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }

/* ===================== Import / Export ===================== */
.pp-import-report { font-size: 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 10px; margin-bottom: 14px; }
.pp-import-report ul { margin: 6px 0 0 18px; }

/* ===================== Responsive ===================== */
@media (max-width: 700px) {
  /* Seule la barre d'outils principale (bascule + filtre + actions
     créateur) passe en colonne sur mobile ; le volet de filtres
     (.pp-filterbar, qui porte aussi la classe .pp-toolbar) garde sa mise
     en page en groupes empilés définie plus haut. */
  .pp-main-toolbar { flex-direction: column; align-items: stretch; }
  .pp-tabs, .pp-filters { flex-wrap: wrap; }
  .pp-list-signups { grid-template-columns: 1fr; }
  /* pp-toolbar-icons (bascule tableau/liste + icône de filtrage) et le
     menu "Paramètres" restent groupés sur leur propre ligne plutôt que de
     s'étirer sur toute la largeur ; "+ Nouvelle célébration" peut occuper
     toute la largeur en dessous. */
  .pp-main-toolbar > .pp-toolbar-icons,
  .pp-main-toolbar > .pp-settings-menu,
  .pp-main-toolbar > .pp-auth-area { align-self: flex-start; }
  .pp-settings-dropdown { right: 0; left: auto; }
}

/* ===================== Admin (réglages) ===================== */
.pp-admin-table { margin-top: 10px; }
.pp-admin-table .pp-drag {
  cursor: grab; color: #64748b; text-align: center; width: 68px; font-size: 16px;
  display: flex; align-items: center; gap: 4px; justify-content: center;
}
.pp-admin-table tr.pp-row-inactive .pp-drag { cursor: default; opacity: .3; }
.pp-admin-table .pp-drag:active { cursor: grabbing; }
/* Boutons Monter/Descendre : alternative clavier au glisser-déposer de la
   poignée ⠿, qui n'est pas utilisable sans souris (voir moveChurch() dans
   admin.js). */
.pp-reorder-btns { display: inline-flex; flex-direction: column; gap: 1px; }
.pp-admin-table .pp-reorder-btn {
  width: 20px; height: 18px; line-height: 1; padding: 0; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
}
.pp-admin-table tr.pp-dragging { opacity: .4; }
.pp-admin-table tr.pp-drop-target { box-shadow: inset 0 2px 0 #2563eb, inset 0 -2px 0 #2563eb; }
.pp-admin-table input.pp-church-name { min-width: 200px; }
.pp-row-inactive { opacity: .55; }
.pp-admin-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-admin-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.pp-admin-save-hint { font-size: 13px; color: #b45309; font-style: italic; }
.pp-admin-msg { font-size: 14px; }
.pp-admin-msg-ok { color: #166534; }
.pp-admin-msg-error { color: #991b1b; }
.pp-admin-count { font-size: 13px; color: #64748b; }
.pp-field-label { font-weight: 600; margin: 0 0 6px; font-size: 14px; }

/* Modale « maison » utilisée en dehors de #pp-app (écran de réglages admin) :
   duplique la présentation de la modale du planning, dont les règles ci-dessus
   sont scoping à #pp-app et ne s'appliquent donc pas dans wp-admin. */
body.wp-admin .pp-modal-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .55);
  display: flex; align-items: center; justify-content: center; z-index: 100000; padding: 16px;
}
body.wp-admin .pp-modal {
  background: #ffffff; color: #1e293b; border-radius: 10px; padding: 22px;
  width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  border: 1px solid #e2e8f0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body.wp-admin .pp-modal h3 { margin-top: 0; margin-bottom: 14px; color: #1e293b; }
body.wp-admin .pp-modal input[type="text"] {
  width: 100%; padding: 9px 11px; border: 1px solid #94a3b8; border-radius: 6px; font-size: 15px;
}
body.wp-admin .pp-modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
body.wp-admin .pp-modal-actions .pp-spacer { flex: 1; }