/* ============================================================
   ACER MINISTERES — Design system v2
   Signature : logos métalliques réels sur fond sombre texturé
   (identité existante honorée), panneaux clairs uniquement pour
   la saisie/lecture de données. Icônes en ligne, sans emoji.
   ============================================================ */

:root {
  --clr-bg-1: #1d1220;
  --clr-bg-2: #55303c;
  --clr-cream: #fbf7f4;
  --clr-ink: #23151b;
  --clr-ink-soft: #6a5761;
  --clr-accent: #d3542f;
  --clr-accent-dark: #a83f22;
  --clr-gold: #d9a441;
  --clr-white: #ffffff;
  --glass-bg: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.14);
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-card: 0 12px 32px rgba(10, 4, 10, 0.35);
  --font-display: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--clr-ink);
  background-color: var(--clr-bg-1);
  background-image:
    linear-gradient(175deg, rgba(20,12,20,0.72) 0%, rgba(70,38,48,0.55) 55%, rgba(20,12,20,0.72) 100%),
    url('https://megachurchacer.fr/wp-content/uploads/2025/10/webproduct_darkbg3.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
svg { display: block; width: 20px; height: 20px; }

/* ---------- Placeholder "miroitement" pendant le chargement des images ----------
   S'applique automatiquement à toutes les images du site : dégradé animé
   tant que l'image n'est pas prête, remplacé en fondu par l'image réelle
   dès qu'elle est chargée (géré par le script en fin de includes/footer.php).
   Ainsi, jamais de zone vide/blanche pendant le chargement. */
@keyframes miroitement {
  0% { background-position: -400% 0; }
  100% { background-position: 400% 0; }
}
img {
  background-image: linear-gradient(100deg, #ece0da 30%, #f7f0ec 50%, #ece0da 70%);
  background-size: 400% 100%;
  animation: miroitement 1.6s ease-in-out infinite;
  transition: opacity .25s ease;
}
/* Variante sombre : sur les cartes/panneaux à fond foncé (zones, églises,
   catégories vidéo), le dégradé clair tranchait trop — on utilise un
   miroitement blanc translucide, cohérent avec ce fond-là. */
.glass-panel img,
.zone-tile img,
.eglise-card img,
.hub-header img,
.video-cat-card img {
  background-image: linear-gradient(100deg, rgba(255,255,255,0.06) 30%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.06) 70%);
}
/* Cette règle doit toujours passer en dernier (peu importe la variante de
   fond ci-dessus) : une fois l'image chargée, plus aucun fond visible. */
img.img-charge {
  background-image: none !important;
  animation: none !important;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- Topbar (retour+back-office / logo centré / vidéothèque+compte) ---------- */
.topbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px 10px;
  padding: 20px 0 0px;
}
.topbar-left, .topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  justify-content: center;
  width: auto;
}
.topbar-center { order: -1; flex-basis: 100%; display: flex; justify-content: center; }
.brand { display: inline-block; }
.brand img { height: 34px; display: block; }
.brand-hero img { height: 58px; display: block; margin: 0 auto; }

.btn-account {
  background: var(--glass-bg);
  backdrop-filter: blur(6px);
  color: var(--clr-white);
  padding: 9px 18px 9px 14px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--glass-border);
  transition: background .15s ease;
  white-space: nowrap;
}
.btn-account:hover { background: rgba(255,255,255,0.13); }
.btn-account svg { width: 16px; height: 16px; opacity: .85; flex-shrink: 0; }
.btn-label-prenom {
  max-width: 110px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; display: inline-block; vertical-align: middle;
}

/* Sur petit écran : boutons plus compacts (padding réduit, puis icônes
   seules sans texte en dessous de 420px) — la structure logo-puis-une-
   ligne-de-boutons, elle, est désormais la même à toutes les tailles. */
@media (max-width: 720px) {
  .btn-account { padding: 9px 12px; }
}
@media (max-width: 420px) {
  .btn-label { display: none; }
  .btn-account { padding: 10px; }
  .btn-account svg { width: 18px; height: 18px; opacity: 1; }
  .breadcrumb a { padding: 10px; }
}

/* ---------- Content panels (forms / tables / readable text) ---------- */
.panel {
  background: var(--clr-cream);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 34px;
  margin: 22px 0;
}

.section-title {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  margin: 0 0 20px;
  color: var(--clr-ink);
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-title::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--clr-accent);
  flex-shrink: 0;
}

/* ---------- Glass panel (navigation on dark bg: zones, eglises) ---------- */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 34px;
  margin: 22px 0;
}
.glass-panel .section-title { color: var(--clr-white); }
.glass-panel .section-title::before { background: var(--clr-gold); }

/* ---------- Zone grid (fond sombre, logos métalliques réels) ---------- */
.zone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 28px 0;
}
.zone-tile {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 34px 16px 22px;
  text-align: center;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.zone-tile:hover { transform: translateY(-5px); border-color: rgba(217,164,65,0.55); background: rgba(255,255,255,0.1); }
.zone-tile img { max-width: 100%; height: 54px; object-fit: contain; margin: 0 auto; }
.zone-tile .zone-meta { margin-top: 16px; font-size: 0.72rem; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,0.65); }

/* ---------- Eglise grid (fond sombre, logos métalliques réels) ---------- */
.eglise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 26px 0;
}
.eglise-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 26px 18px 20px;
  text-align: center;
  transition: transform .15s ease, border-color .15s ease;
}
.eglise-card:hover { transform: translateY(-4px); border-color: rgba(217,164,65,0.55); }
.eglise-card img { max-width: 100%; height: 46px; object-fit: contain; margin: 0 auto 0px; display: block; }
.eglise-card .tag {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--clr-gold);
  font-weight: 700;
}
.eglise-card h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  margin: 4px 0 0;
  color: var(--clr-white);
  font-weight: 500;
}

/* ---------- Church hub header ---------- */
.hub-header { display: flex; align-items: center; gap: 24px; flex-wrap: nowrap; }
.hub-header img.hub-logo {
  height: auto;
  max-height: 56px;
  width: auto;
  max-width: 220px;
  min-width: 24px;
  object-fit: contain;
  flex-shrink: 999;
  flex-grow: 0;
  flex-basis: auto;
}
/* Avant chargement, on réserve un peu de place pour que le placeholder
   "miroitement" soit visible (pas juste une bande de 24px) ; une fois
   l'image affichée, elle redevient libre de rétrécir sur petit écran. */
.hub-header img.hub-logo:not(.img-charge) { min-width: 90px; min-height: 40px; }
/* Seul le logo doit rétrécir quand la place manque : titre, badges et
   bulle(s) de responsable gardent leur taille tant que c'est possible. */
.hub-header > *:not(.hub-logo) { flex-shrink: 0; min-width: max-content; }

/* Note : .hub-badges-empiles n'a AUCUN style ici (base/desktop) — les 2
   badges de zone.php restent naturellement côte à côte (inline-block),
   exactement comme avant. Le style d'empilement vertical n'existe QUE
   dans la media query mobile plus bas, pour ne jamais affecter le PC. */

/* ---------- Bulles de responsables (1 à 3, côte à côte, légèrement empilées) ---------- */
.responsables-group { display: flex; align-items: center; margin-left: auto; flex-wrap: wrap; }
.responsable-bubble { display: flex; align-items: center; gap: 9px; position: relative; }
.responsable-bubble:not(:first-child) { margin-left: -15px; }
.responsable-bubble:nth-child(1) { z-index: 3; }
.responsable-bubble:nth-child(2) { z-index: 2; }
.responsable-bubble:nth-child(3) { z-index: 1; }
.responsable-bubble img {
  width: 80px; height: 80px; border-radius: 50%; object-fit: cover;
  background: #f0f8ff3b;
  border: 2px solid rgba(255,255,255,0.3); flex-shrink: 0;
  box-shadow: 3px 4px 8px rgba(0,0,0,0.35);
}
.responsable-name { font-size: 0.78rem; color: rgba(255,255,255,0.68); line-height: 1.3; }
.responsable-name strong { color: var(--clr-white); display: block; font-size: 0.86rem; }
/* Avec 2 ou 3 responsables empilés, le nom est masqué (sinon le texte se
   chevaucherait avec la bulle suivante) : seul le cercle photo reste visible,
   comme une pile d'avatars. Avec un seul responsable, le nom reste affiché. */
.responsable-bubble:not(:only-child) .responsable-name { display: none; }

/* ---------- Action tiles (church hub) ---------- */
.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 14px;
  margin-top: 26px;
}
.action-tile {
  background: var(--clr-white);
  border: 1px solid #f0e6e2;
  border-radius: var(--radius-md);
  padding: 22px 12px;
  text-align: center;
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--clr-ink);
  box-shadow: 0 3px 10px rgba(43,24,38,0.05);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.action-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); background: #fff9f7; }
.action-tile .icon { display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; width: 30px; height: 30px; color: var(--clr-accent); }
.action-tile .icon svg { width: 26px; height: 26px; }
.action-tile.accent { background: var(--clr-accent); color: var(--clr-white); }
.action-tile.action-tile-disabled {
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(1);
  background: #f4efec;
}
.action-tile.action-tile-disabled:hover { transform: none; box-shadow: none; }
.action-tile.action-tile-disabled .badge { background: #d9cfc8; color: #6a5b52; font-size: 0.6rem; }
.action-tile.accent .icon { color: var(--clr-white); }

/* ---------- Forms ---------- */
label { display: block; font-weight: 600; font-size: 0.86rem; margin: 18px 0 6px; color: var(--clr-ink); }
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=date], input[type=datetime-local], input[type=number],
select, textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #e3d5cf;
  background: var(--clr-white);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--clr-ink);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--clr-accent);
  outline-offset: 1px;
  border-color: var(--clr-accent);
}
textarea { min-height: 100px; resize: vertical; }
select[multiple] { min-height: 130px; }
.required { color: var(--clr-accent); }
.field-hint { font-size: 0.78rem; color: var(--clr-ink-soft); margin-top: 4px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 13px 28px;
  border-radius: 999px;
  background: var(--clr-accent);
  color: var(--clr-white);
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
}
.btn:hover { background: var(--clr-accent-dark); }
.btn.secondary { background: transparent; color: var(--clr-ink); border: 1px solid #ddd; }
.btn.small { padding: 8px 16px; font-size: 0.8rem; margin-top: 0; }
.btn.on-dark { color: var(--clr-white); border: 1px solid var(--glass-border); }
.btn.danger { background: #a12f18; }
.btn.danger:hover { background: #7f2411; }
.btn.warning { background: #c9720b; }
.btn.warning:hover { background: #a25908; }
.btn.btn-info { background: #2f71d3; }
.btn.btn-info:hover { background: #25599f; }

.couleur-btn {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; padding: 0;
}
.couleur-btn-actif { border-color: var(--clr-ink); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--clr-ink); }
#couleur-libre { width: 30px; height: 30px; border: none; padding: 0; border-radius: 50%; cursor: pointer; background: none; }

/* ---------- Calendrier : pastilles d'événement + infobulle cliquable ----------
   Colonnes de largeur ÉGALE (comme Google Agenda) : c'est la HAUTEUR de la
   case qui s'adapte au nombre/longueur des événements du jour, jamais sa
   largeur — un jour avec un long titre d'événement ne doit pas élargir
   toute sa colonne au détriment des autres jours de la semaine. */
.table-calendrier { table-layout: fixed; width: 100%; }
.table-calendrier td { vertical-align: top; }
.event-pill {
  font-size: 0.72rem; font-weight: 600; border-radius: 5px; padding: 2px 6px;
  margin-top: 3px; cursor: pointer;
  white-space: normal; word-break: break-word; overflow-wrap: break-word;
  line-height: 1.3;
}
.event-popover {
  position: relative; z-index: 20;
  background: var(--clr-white); border: 1px solid #e3d5cf; border-radius: 14px;
  padding: 18px 20px; margin-top: 16px; box-shadow: 0 8px 24px rgba(43,24,38,0.18);
}
.event-popover-titre { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; padding-right: 24px; }
#event-popover-close {
  position: absolute; top: 10px; right: 14px; background: none; border: none;
  font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--clr-ink-soft);
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Sécurité : toute icône SVG "nue" (pas dans .btn/.action-tile/etc, qui ont
   déjà leur propre taille) doit avoir une taille par défaut, sinon elle
   prend la taille de remplacement par défaut du navigateur (300x150) et
   casse la mise en page (ex: icône cadenas avant un titre). */
h3 svg, h4 svg, p svg {
  display: inline-block; width: 22px; height: 22px;
  vertical-align: middle; margin-right: 4px;
}

/* ---------- Champ mot de passe avec bouton "oeil" ---------- */
.password-field { position: relative; }
.password-field input { padding-right: 44px; }
.password-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 8px;
  color: var(--clr-ink-soft); display: flex; align-items: center;
}
.password-toggle svg { width: 18px; height: 18px; }
.password-toggle:hover { color: var(--clr-accent); }

.password-generate {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; background: none; border: 1px dashed #c9b8b0;
  color: var(--clr-ink-soft); font-size: 0.8rem; padding: 6px 12px;
  border-radius: 999px; cursor: pointer;
}
.password-generate svg { width: 14px; height: 14px; }
.password-generate:hover { border-color: var(--clr-accent); color: var(--clr-accent); }

.checkbox-field { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; }
.checkbox-field input { width: auto; margin-top: 3px; }
.checkbox-field label { margin: 0; font-weight: 600; }
.checkbox-field .field-hint { margin-top: 2px; }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #f0e4df; font-size: 0.9rem; }
th { color: var(--clr-ink-soft); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.05em; }
tr:hover td { background: #fbf3f0; }

/* ---------- Members grid ---------- */
.membre-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.membre-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--clr-white);
  border: 1px solid #f2e7e2;
  border-radius: 999px;
  padding: 7px 18px 7px 7px;
  transition: box-shadow .12s ease;
}
.membre-card:hover { box-shadow: 0 4px 14px rgba(43,24,38,0.1); }
.membre-card img, .avatar {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; background: #f1e4de;
}
.membre-card .name { font-weight: 600; font-size: 0.88rem; }
.membre-card .role-badge {
  font-size: 0.63rem; color: var(--clr-ink-soft); text-transform: uppercase; letter-spacing: .03em;
}
.membre-card .role-badge-aujourdhui {
  color: #a83f22; font-weight: 700;
}

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.login-card { width: 380px; max-width: 92vw; }
.pw-toggle { display: flex; gap: 6px; align-items: center; margin-top: 6px; }

/* ---------- Utility ---------- */
.muted { color: var(--clr-ink-soft); font-size: 0.87rem; }
.on-dark-muted { color: rgba(255,255,255,0.68); font-size: 0.87rem; }
.breadcrumb { font-size: 0.86rem; margin: 0; }
.breadcrumb a { color: rgba(255,255,255,0.75); display: inline-flex; align-items: center; gap: 6px; background: var(--glass-bg); border: 1px solid var(--glass-border); padding: 9px 16px 9px 12px; border-radius: 999px; }
.breadcrumb a svg { width: 15px; height: 15px; }
.breadcrumb a:hover { color: var(--clr-white); background: rgba(255,255,255,0.13); }
.badge {
  display: inline-block; padding: 4px 13px; border-radius: 999px;
  background: var(--clr-gold); color: #3a2a10; font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 14px; margin: 20px 0; }
.stat-card { background: var(--clr-white); border-radius: var(--radius-md); padding: 18px; box-shadow: 0 3px 10px rgba(43,24,38,0.06); text-align:center; }
.stat-card .num { font-family: var(--font-display); font-size: 2rem; color: var(--clr-accent); }
.stat-card .lbl { font-size: 0.75rem; color: var(--clr-ink-soft); text-transform: uppercase; letter-spacing: .03em; }

.alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 0.9rem; }
.alert.error { background: #fbe1dc; color: #8c2f1a; }
.alert.success { background: #e2f2e4; color: #1f5c2b; }

/* ---------- Formations (liste avec point de statut couleur) ---------- */
.formation-list { list-style: none; padding: 0; margin: 10px 0 0; }
.formation-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 0.92rem; }

/* ---------- Fiche membre : onglet Infos en 2 colonnes sur grand écran ---------- */
.tab-contenu { display: none; }
.tab-contenu.tab-contenu-actif { display: block; }
.tab-infos-grid { grid-template-columns: 1fr; gap: 0 48px; }
.tab-infos-grid.tab-contenu-actif { display: grid; }
@media (min-width: 860px) {
  .tab-infos-grid.tab-contenu-actif { grid-template-columns: 1fr 1fr; }
  .tab-infos-col:last-child { border-left: 1px solid #f0e4df; padding-left: 40px; }
}
.dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dot-green { background: #2f9e44; }
.dot-orange { background: #e8890c; }
.dot-red { background: #d3542f; }

.status-check {
  display: inline-flex; align-items: center; gap: 6px;
  background: #e2f2e4; color: #1f5c2b; font-size: 0.78rem; font-weight: 600;
  padding: 5px 12px; border-radius: 999px;
}
.status-check svg { width: 14px; height: 14px; }

.badge-formation-exclusif {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(100deg, #f2c14e, #d3a02f); color: #4a3200;
  font-size: 0.75rem; font-weight: 700; padding: 4px 11px; border-radius: 999px;
}
.badge-formation-exclusif svg { width: 13px; height: 13px; }

/* ---------- Parcours de croissance : page d'un cours (barre latérale) ---------- */
.formation-layout {
  display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap;
}
.formation-sidebar {
  flex: 0 0 260px; background: var(--clr-white); border-radius: 16px;
  padding: 20px; box-shadow: 0 2px 10px rgba(43,24,38,0.06);
  position: sticky; top: 20px;
  margin: 22px 0;
}
.formation-sidebar-titre { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.formation-sidebar-pct { font-size: 0.78rem; color: var(--clr-ink-soft); margin-top: 6px; }

/* ---------- Parcours de croissance : en-tête (logo + description) ---------- */
.formation-entete { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; margin-top: 20px; }
.formation-entete-logo { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; flex-shrink: 0; }

/* ---------- Parcours de croissance : cartes de la liste ---------- */
.formation-carte { position: relative; }
.formation-carte-logo { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.formation-carte-description {
  color: rgba(255,255,255,0.72); font-size: 0.85rem; line-height: 1.55;
  margin-top: 6px; flex: 1;
}
.formation-carte-bas { margin-top: auto; padding-top: 14px; }
.formation-carte-statut {
  display: flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,0.65); font-size: 0.8rem;
}
.formation-carte-statut svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Marge sous chaque éditeur de texte riche (Quill) du Parcours de
   croissance — règle générique par motif d'ID, s'applique automatiquement
   à tous les cours (existants et futurs), sans avoir à en rajouter une
   par cours créé. */
#texte-nouveau-quill,
[id^="texte-cours-"][id$="-quill"] {
  margin-bottom: 20px;
}

/* Badge doré en coin sur une formation validée (carte de la liste) */
.formation-carte-badge-coin {
  position: absolute; top: 14px; right: 14px;
  background: linear-gradient(100deg, #ffeec6, #deb456);
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.formation-carte-badge-coin svg { width: 16px; height: 16px; color: #4a3200; }
.formation-sidebar-liste { margin-top: 18px; display: flex; flex-direction: column; gap: 3px; }
.formation-sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 9px; font-size: 0.85rem;
  color: var(--clr-ink); text-decoration: none; line-height: 1.3;
}
.formation-sidebar-item:hover { background: #fdf3ef; }
.formation-sidebar-item-actif { background: #fbe4d9; font-weight: 700; }
.formation-sidebar-item-verrouille { color: var(--clr-ink-soft); opacity: 0.6; cursor: not-allowed; }
.formation-sidebar-icone { flex-shrink: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }
.formation-sidebar-icone svg { width: 15px; height: 15px; color: #2f9e44; }
.formation-sidebar-item-verrouille .formation-sidebar-icone svg { color: var(--clr-ink-soft); }

.formation-contenu-principal { flex: 1 1 480px; min-width: 0; }

.formation-texte-riche { margin-top: 16px; line-height: 1.75; font-size: 0.96rem; }
.formation-texte-riche h1, .formation-texte-riche h2, .formation-texte-riche h3 {
  font-family: var(--font-display); color: var(--clr-accent); margin: 20px 0 8px;
}
.formation-texte-riche p { margin: 0 0 10px; }
.formation-texte-riche ul, .formation-texte-riche ol { margin: 0 0 10px 22px; }
.formation-texte-riche strong { font-weight: 700; }
.formation-texte-riche em { font-style: italic; }

.formation-cours-valide {
  display: flex; align-items: center; gap: 10px; margin-top: 20px;
  background: #e2f2e4; color: #1f5c2b; font-weight: 600; font-size: 0.9rem;
  padding: 12px 16px; border-radius: 12px;
}
.formation-cours-valide svg { width: 18px; height: 18px; flex-shrink: 0; }

.muted-inline { font-weight: 400; font-size: 0.78rem; opacity: 0.85; }

.formation-qcm-entete { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; flex-wrap: wrap; gap: 10px; }
.formation-chrono {
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  background: #fdf3ef; color: var(--clr-accent); padding: 4px 16px; border-radius: 999px;
}
.formation-chrono-urgent { background: #fbe0dc; color: #a12f18; animation: chrono-pulse 1s infinite; }
@keyframes chrono-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.formation-qcm-question {
  margin-top: 16px; padding: 14px 16px; background: #fdf9f7; border-radius: 12px;
}
.formation-trou-input {
  display: inline-block; width: auto; min-width: 110px;
  padding: 3px 8px; margin: 0 2px; border-radius: 6px;
  border: 1px solid #d9a441; background: #fff;
}

/* ---------- Association (admin : formulaire + aperçu) ---------- */
.assoc-paire-form {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
}
.assoc-paire-cote { flex: 1; }
.assoc-vignette { max-width: 60px; max-height: 60px; width: auto; height: auto; border-radius: 6px; object-fit: contain; background: #fff; }

/* ---------- Association (membre : sélection par vignettes cliquables) ---------- */
.assoc-gauche-item { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.assoc-gauche-image { max-width: 140px; max-height: 140px; width: auto; height: auto; border-radius: 10px; object-fit: contain; background: #fff; flex-shrink: 0; }
.assoc-droite-options { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; margin-left: 0; }
.assoc-option {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 2px solid #f0e4df; border-radius: 10px; padding: 8px; cursor: pointer;
  font-size: 0.8rem; text-align: center; max-width: 140px;
}
.assoc-option input { margin: 0 0 2px; }
.assoc-option:has(input:checked) { border-color: var(--clr-accent); background: #fdf3ef; }
.assoc-option img { max-width: 110px; max-height: 110px; width: auto; height: auto; border-radius: 8px; object-fit: contain; background: #fff; }

@media (max-width: 480px) {
  .assoc-gauche-image { max-width: 100px; max-height: 100px; }
  .assoc-option { max-width: 110px; }
  .assoc-option img { max-width: 85px; max-height: 85px; }
}

.formation-cas-pratique-bloc {
  margin-top: 18px; padding-top: 18px; border-top: 1px solid #f0e4df;
}
.formation-cas-pratique-bloc:first-of-type { border-top: none; padding-top: 0; margin-top: 12px; }

.formation-texte-avant-question {
  margin-top: 22px; padding: 12px 16px; background: #fdf3ef;
  border-left: 3px solid var(--clr-accent); border-radius: 0 10px 10px 0;
  font-style: italic; line-height: 1.6;
}

@media (max-width: 760px) {
  .formation-sidebar { position: static; flex: 1 1 100%; }
}

.status-age {
  display: inline-flex; align-items: center;
  border: 1px solid #ddd0cc; color: var(--clr-ink-soft); font-size: 0.78rem; font-weight: 600;
  padding: 4px 12px; border-radius: 999px; background: none;
}

.status-attendance {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 600;
  padding: 5px 12px; border-radius: 999px;
}
.status-attendance.niveau-vert   { background: #e2f2e4; color: #1f5c2b; }
.status-attendance.niveau-orange { background: #fbeedc; color: #8a4d0a; }
.status-attendance.niveau-rouge  { background: #fbe1dc; color: #8c2f1a; }

/* ---------- Anneau "santé spirituelle" autour de la photo ---------- */
.member-health-ring {
  display: inline-block; padding: 6px; border-radius: 50%; line-height: 0;
}
.member-health-ring.sante-vert   { background: linear-gradient(135deg, #a9e2b4, #14602c); }
.member-health-ring.sante-orange { background: linear-gradient(135deg, #f7cd93, #b5680a); }
.member-health-ring.sante-rouge  { background: linear-gradient(135deg, #f2ab9d, #8c2410); }
.member-health-ring img, .member-health-ring .avatar { border: 4px solid var(--clr-cream) !important; }
.health-legend { font-size: 0.76rem; color: var(--clr-ink-soft); margin-top: 10px; text-align: center; }

/* ---------- Liens familiaux (grille de bulles, 60% plus petites) ---------- */
.famille-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}
.famille-item { text-align: center; position: relative; }
.famille-item a { display: block; }
.famille-item img, .famille-item .avatar {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  margin: 0 auto; border: 2px solid #f0e4df;
  display: flex; align-items: center; justify-content: center;
  background: #eee0dc; color: #a83f22; font-weight: 700; font-size: 0.85rem;
}
.famille-item .nom { font-size: 0.72rem; font-weight: 600; margin-top: 5px; color: var(--clr-ink); line-height: 1.2; }
.famille-item .relation { font-size: 0.66rem; color: var(--clr-ink-soft); text-transform: uppercase; letter-spacing: .02em; }
.famille-item .supprimer-lien {
  position: absolute; top: -4px; right: 16px; background: #a12f18; color: #fff;
  width: 16px; height: 16px; border-radius: 50%; font-size: 0.65rem; line-height: 16px;
  text-align: center; text-decoration: none;
}

/* ---------- Compteur présences/absences ---------- */
.presence-counters { display: flex; gap: 10px; margin-top: 16px; }
.presence-counter { flex: 1; text-align: center; background: var(--clr-white); border: 1px solid #f0e4df; border-radius: var(--radius-md); padding: 12px 8px; }
.presence-counter .num { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; }
.presence-counter .lbl { font-size: 0.68rem; text-transform: uppercase; color: var(--clr-ink-soft); letter-spacing: .03em; }
.presence-counter.ok .num { color: #1f5c2b; }
.presence-counter.ko .num { color: #a12f18; }

/* ---------- Statistiques de correction des cas pratiques ---------- */
.correction-stats { display: flex; gap: 10px; margin-top: 16px; }
.correction-stat { flex: 1; text-align: center; background: var(--clr-white); border: 1px solid #f0e4df; border-radius: var(--radius-md); padding: 14px 10px; }
.correction-stat .num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: #1f5c2b; }
.correction-stat .lbl { font-size: 0.72rem; color: var(--clr-ink-soft); }
.correction-stat-attente .num { color: #a83f22; }

/* ---------- Chat par église ---------- */
.chat-box {
  max-height: 480px; overflow-y: auto; padding: 16px;
  background: #fdf9f7; border: 1px solid #f0e4df; border-radius: var(--radius-md);
  display: flex; flex-direction: column; gap: 14px;
}
.chat-bubble { display: flex; gap: 10px; max-width: 78%; }
.chat-bubble.chat-mine { align-self: flex-end; flex-direction: row-reverse; }
.chat-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.chat-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  background: #eee0dc; color: #a83f22; font-weight: 700; font-size: 0.78rem;
}
.chat-content { background: var(--clr-white); border-radius: 14px; padding: 9px 14px; box-shadow: 0 2px 6px rgba(43,24,38,0.06); }
.chat-mine .chat-content { background: var(--clr-accent); color: #fff; }
.chat-meta { font-size: 0.68rem; color: var(--clr-ink-soft); margin-bottom: 3px; }
.chat-mine .chat-meta { color: rgba(255,255,255,0.8); }
.chat-role { text-transform: uppercase; letter-spacing: .02em; }
.chat-text { font-size: 0.9rem; white-space: pre-wrap; word-break: break-word; }

.chat-form { display: flex; gap: 10px; margin-top: 16px; align-items: flex-end; }
.chat-form textarea { flex: 1; margin: 0; min-height: 48px; }
.chat-form .btn { margin-top: 0; white-space: nowrap; }

/* ---------- Messagerie privée ---------- */
.conversation-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 12px; margin-bottom: 4px;
  transition: background .12s ease;
}
.conversation-item:hover { background: #fbf3f0; }
.badge-notif {
  background: #a12f18; color: #fff; font-size: 0.7rem; font-weight: 700;
  min-width: 20px; height: 20px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px; flex-shrink: 0;
}
.badge-notif-topbar { position: absolute; top: -4px; right: -4px; }

/* ---------- Vidéothèque ---------- */
.video-ratio { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; background: #000; margin: 14px 0; }
.video-ratio iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

.video-accordion { border: 1px solid #f0e4df; border-radius: var(--radius-md); margin-bottom: 10px; overflow: hidden; background: var(--clr-white); }
.video-accordion summary {
  list-style: none; cursor: pointer; padding: 16px 18px; display: flex; align-items: center; gap: 12px;
  font-weight: 600; font-size: 0.95rem;
}
.video-accordion summary::-webkit-details-marker { display: none; }
.video-accordion summary::after { content: '+'; margin-left: auto; font-size: 1.3rem; color: var(--clr-ink-soft); }
.video-accordion[open] summary::after { content: '–'; }
.video-accordion .sub { font-weight: 400; color: var(--clr-ink-soft); font-size: 0.85rem; }
.video-accordion-body { padding: 0 18px 20px; }

.progress-bar-track { background: #f0e4df; border-radius: 999px; height: 10px; overflow: hidden; margin: 10px 0 4px; }
.progress-bar-fill { background: linear-gradient(90deg, #8fd19e, #1b6e34); height: 100%; border-radius: 999px; transition: width .3s ease; }

/* ---------- Gestionnaire de projets/missions ---------- */
.projet-accordion summary { background: var(--clr-white); }
.projet-accordion.projet-termine summary { background: #e2f2e4; }
.projet-accordion.projet-termine summary svg { color: #1f5c2b; width: 18px; height: 18px; }
.projet-accordion .sub svg { width: 13px; height: 13px; vertical-align: -2px; }
.projet-en-retard { color: #a12f18 !important; font-weight: 600; }

.tache-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid #f5ece7;
}
.tache-item:last-of-type { border-bottom: none; }
.tache-check {
  width: 22px; height: 22px; border-radius: 6px; border: 2px solid #d9cabf;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: #fff; cursor: pointer;
}
.tache-check.tache-faite { background: #1f5c2b; border-color: #1f5c2b; }
.tache-check svg { width: 14px; height: 14px; }
.tache-texte { flex: 1; font-size: 0.9rem; }
.tache-texte-faite { text-decoration: line-through; color: var(--clr-ink-soft); }
.tache-assigne {
  font-size: 0.7rem; background: #eee0dc; color: #a83f22; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.tache-supprimer { color: #a12f18; font-size: 1.1rem; text-decoration: none; padding: 0 4px; }

.note-item { background: #fdf9f7; border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; font-size: 0.88rem; }
.note-meta { font-size: 0.72rem; color: var(--clr-ink-soft); margin-bottom: 3px; }

.annonce-banniere {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 50px 18px 20px;
  border-radius: 16px;
  margin-bottom: 14px;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  position: relative;
}
.annonce-icone { flex-shrink: 0; margin-top: 2px; }
.annonce-icone svg { width: 40px; height: 40px; color: #fff; }
.annonce-contenu { flex: 1; min-width: 0; }
.annonce-titre { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: #fff; }
.annonce-texte { margin-top: 4px; color: rgba(255,255,255,0.95); font-size: 12px; }
.annonce-meta { margin-top: 5px; font-size: 0.78rem; font-style: italic; color: rgba(255,255,255,0.8); }
.annonce-fermer {
  position: absolute; top: 10px; right: 15px; background: none; border: none;
  font-size: 35px; line-height: 1; color: #fff; cursor: pointer; padding: 2px 6px;
  opacity: 0.85;
}
.annonce-fermer:hover { opacity: 1; }

/* ---------- Planning de service ---------- */
.planning-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; margin-top: 24px;
}
.planning-carte { background: #fdf9f7; border-radius: 14px; padding: 16px; padding-top: 20px; }
.planning-carte-titre { font-family: var(--font-display); font-weight: 700; margin-bottom: 10px; }
.planning-personne {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; font-size: 0.9rem; border-bottom: 1px solid #f0e4df;
}
.planning-personne:last-of-type { border-bottom: none; }
.planning-retirer { background: none; border: none; color: #a12f18; font-size: 1.1rem; cursor: pointer; padding: 0 4px; line-height: 1; }

/* Personne de l'église jumelle (planning mutualisé) — visible mais pas
   retirable depuis cette page, repère vert au lieu du bouton × rouge. */
.planning-personne-jumelle { opacity: 0.9; }
.planning-jumelle-marqueur { color: #1f5c2b; display: flex; align-items: center; }
.planning-jumelle-marqueur svg { width: 15px; height: 15px; }

.planning-personne-editable { cursor: pointer; }
.planning-personne-editable:hover { text-decoration: underline dotted; }
.planning-poste {
  display: inline-block; font-size: 0.72rem; color: #9c8d88;
  font-style: italic; margin-left: 4px;
}

/* ---------- Planning : menu déroulant d'ajout (fermé par défaut) ---------- */
.planning-dropdown { position: relative; margin-top: 10px; }
.planning-dropdown-toggle { width: 100%; justify-content: center; }
.planning-dropdown-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background: var(--clr-white); border: 1px solid #e3d5cf; border-radius: 12px;
  padding: 10px; box-shadow: 0 8px 24px rgba(43,24,38,0.18);
}
.planning-dropdown-recherche { margin: 0 0 8px; font-size: 0.85rem; padding: 8px 10px; }
.planning-dropdown-liste { max-height: 220px; overflow-y: auto; }
.planning-dropdown-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 6px; border-radius: 7px; cursor: pointer; font-size: 0.88rem;
}
.planning-dropdown-item:hover { background: #fbf3f0; }
.planning-dropdown-item input { margin: 0; width: auto; }
.planning-dropdown-panel .btn.small { width: 100%; margin-top: 8px; justify-content: center; }

/* ---------- Bande d'anniversaires (accueil église) ---------- */
.anniversaires-bande {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: rgba(255,255,255,0.08); color: #f2e9e4;
  padding: 10px 18px; border-radius: 12px; margin-bottom: 16px;
  font-size: 0.85rem;
}
.anniversaires-bande svg { width: 16px; height: 16px; flex-shrink: 0; color: #f2c14e; }
.anniversaire-jour-j { font-weight: 700; color: #f2c14e; }

/* ---------- Onglets Membres / Visiteurs ---------- */
.tabs-membres { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid #f0e4df; }
.tab-membres {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; font-weight: 600; font-size: 0.9rem;
  color: var(--clr-ink-soft); border-bottom: 3px solid transparent;
  margin-bottom: -1px; text-decoration: none;
}
.tab-membres:hover { color: var(--clr-ink); }
.tab-membres-actif { color: var(--clr-accent); border-bottom-color: var(--clr-accent); }
.tab-membres svg { width: 16px; height: 16px; }

.video-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 24px 0; align-items: stretch; }
.video-cat-card {
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md);
  padding: 22px 20px; transition: transform .15s ease, border-color .15s ease;
  display: flex; flex-direction: column; height: 100%;
}
.video-cat-card:hover { transform: translateY(-4px); border-color: rgba(217,164,65,0.55); }
.video-cat-card > span:first-child svg { width: 44px; height: 44px; color: var(--clr-gold); }
.formation-carte-icone-principale svg { width: 44px; height: 44px; color: var(--clr-gold); }
.icon-xl { display: inline-block; }
.icon-xl svg { width: 60px; height: 60px; }
.video-cat-card h3 { font-family: var(--font-display); color: #fff; margin: 8px 0 4px; font-size: 1.05rem; }
.video-cat-card .muted-on-dark { color: rgba(255,255,255,0.6); font-size: 0.8rem; }
.video-cat-card .muted-on-dark svg { width: 14px; height: 14px; vertical-align: -2px; }

/* ============================================================
   RESPONSIVE — passe complète mobile/tablette
   ============================================================ */
@media (max-width: 900px) {
  .stat-cards, .action-grid, .zone-grid, .eglise-grid, .video-cat-grid { gap: 12px; }
}

@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  .panel, .glass-panel { padding: 18px; margin: 16px 0; border-radius: 16px; }
  .brand img { height: 26px; }
  .hub-header { gap: 12px; }
  .section-title { font-size: 1.25rem; gap: 9px; }

  /* Zones/églises : sur mobile on garde uniquement la bulle photo du
     responsable (sans le nom en texte), pour que logo + badges + bulle
     restent sur une seule ligne dans la grande majorité des cas. */
  .responsable-name { display: none; }
  .responsables-group { margin-left: 8px; }

  /* Zone.php UNIQUEMENT (mobile) : le petit logo décoratif ZCN/ZNO/ZSE
     est masqué, et les 2 badges passent l'un sous l'autre — ça laisse
     la place à la photo du responsable de rester à côté, sans déborder.
     Ciblé via .hub-logo-zone (classe dédiée, distincte de .hub-logo tout
     court utilisé sur eglise.php pour la VRAIE photo de l'église —
     jamais touchée, à aucune taille d'écran). */
  .hub-header img.hub-logo-zone { display: none; }
  .hub-badges-empiles { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 8px; }

  /* Tableaux : on autorise le défilement horizontal plutôt que de casser
     la mise en page (les colonnes gardent leur largeur naturelle). */
  table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  th, td { padding: 10px 12px; }

  /* Grilles d'action/navigation : 2 colonnes minimum au lieu de tuiles trop
     petites en accordéon forcé. */
  .action-grid { grid-template-columns: repeat(2, 1fr); }
  .action-tile { padding: 16px 8px; font-size: 0.8rem; }
  .action-tile .icon svg { width: 22px; height: 22px; }

  .zone-grid, .eglise-grid, .video-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .zone-tile { padding: 22px 10px 16px; }
  .zone-tile img { height: 38px; }

  /* Formulaires : boutons pleine largeur, plus faciles à toucher */
  .btn { width: 100%; justify-content: center; }
  .btn.small { width: auto; }
  form .btn.secondary, form .btn.danger, form .btn.warning { margin-top: 10px; }

  /* Bulles de responsables : un peu plus compactes */
  .responsable-bubble img { width: 60px; height: 60px; }

  /* Chat : le formulaire d'envoi passe en colonne pour rester confortable */
  .chat-form { flex-direction: column; align-items: stretch; }
  .chat-bubble { max-width: 90%; }

  /* Filtres (selects/inputs en ligne) : on les empile proprement */
  form[method="get"] { flex-direction: column !important; align-items: stretch !important; }
  form[method="get"] select, form[method="get"] input[type="text"] { width: 100%; }
}

@media (max-width: 380px) {
  .action-grid, .zone-grid, .eglise-grid, .video-cat-grid { grid-template-columns: 1fr; }
}

footer { text-align: center; padding: 40px 0 30px; color: rgba(255,255,255,0.5); font-size: 0.82rem; }

/* La page login affiche déjà son propre logo en grand : on masque la
   topbar (logo + compte) pour éviter le doublon. */
.page-login .topbar { display: none; }