/* =============================================================================
   L'attribut hidden doit toujours l'emporter.

   « display: none » sur [hidden] vient de la feuille du navigateur : n'importe
   quelle règle d'auteur qui pose un display la bat, même à spécificité égale.
   Deux éléments en avaient déjà fait les frais — la fenêtre de détail d'un
   événement, affichée vide par-dessus la page, et les lignes du planning
   masquées par le filtre, qui restaient visibles sur téléphone parce qu'elles
   y passent en display:block.

   Une règle générale plutôt qu'une rustine à chaque endroit : le JS du site
   masque par cet attribut un peu partout, et le prochain oubli est certain.
   ============================================================================= */
[hidden] { display: none !important; }

/* AEGP — palette inspirée du logo (montagnes, soleil, rivière, tons bronze/or) */
:root {
  --aegp-brown-900: #2b1b10;
  --aegp-brown-800: #3e2a1a;
  --aegp-brown-700: #4a2e1a;
  --aegp-gold-600: #b9832a;
  --aegp-gold-500: #c9971f;
  --aegp-gold-400: #e3b23c;
  --aegp-gold-100: #faf1dc;
  --aegp-cream: #fbf6ea;
  --aegp-white: #ffffff;
  --aegp-red: #a3312a;
  --aegp-green: #2f6b3a;
  --font-base: "Segoe UI", Arial, Helvetica, sans-serif;
  --radius: 10px;
  --shadow: 0 2px 10px rgba(43, 27, 16, 0.12);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-base);
  color: var(--aegp-brown-900);
  background: var(--aegp-white);
  line-height: 1.55;
}

a { color: var(--aegp-brown-700); }
a:hover { color: var(--aegp-gold-600); }

h1, h2, h3, h4 { font-family: var(--font-base); color: var(--aegp-brown-800); line-height: 1.25; }
h1 { font-size: 2.1rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; }

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* --- Navigation --- */
.site-header {
  background: var(--aegp-white);
  border-bottom: 1px solid #eee4cd;
  position: sticky;
  top: 0;
  z-index: 40;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.25rem;
  max-width: 1120px;
  margin: 0 auto;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--aegp-brown-800);
  font-weight: 700;
  font-size: 1.05rem;
}

.navbar-brand img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow);
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.navbar-links a {
  text-decoration: none;
  color: var(--aegp-brown-800);
  font-weight: 500;
  font-size: 0.95rem;
}

.link-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  color: var(--aegp-brown-800);
  font-weight: 500;
  font-size: 0.95rem;
}
.link-btn:hover { color: var(--aegp-gold-600); }

.navbar-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--aegp-brown-800);
}

/* --- Boutons --- */
.btn {
  display: inline-block;
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 0.95rem;
  transition: all 0.15s ease;
}

.btn-primary {
  background: var(--aegp-gold-500);
  color: var(--aegp-brown-900);
}
.btn-primary:hover { background: var(--aegp-gold-400); color: var(--aegp-brown-900); }

.btn-outline {
  background: transparent;
  border-color: var(--aegp-brown-700);
  color: var(--aegp-brown-700);
}
.btn-outline:hover { background: var(--aegp-brown-700); color: var(--aegp-white); }

.btn-danger { background: var(--aegp-red); color: var(--aegp-white); }
.btn-sm { padding: 0.35rem 0.9rem; font-size: 0.85rem; }

/* --- Hero / bandeau --- */
.hero {
  background: linear-gradient(135deg, var(--aegp-brown-800), var(--aegp-brown-700));
  color: var(--aegp-white);
  padding: 4rem 1.25rem;
  text-align: center;
}
.hero h1 { color: var(--aegp-white); font-size: 2.4rem; margin-bottom: 0.75rem; }
.hero p { font-size: 1.15rem; color: var(--aegp-gold-100); max-width: 640px; margin: 0 auto 1.5rem; }

/* --- Hero de marque -------------------------------------------------------
   Le degrade d'origine allait d'un or clair au centre a un brun sombre sur
   les bords, avec un texte brun fonce. Le contraste tombait a 2,3:1 sur le
   bas du degrade — sous le minimum de 4,5:1, et illisible des que la
   luminosite de l'ecran baisse.

   L'or est un ton MOYEN : ni le texte sombre ni le texte clair n'y tient sur
   toute la hauteur. Le degrade est donc assombri en bronze, et le texte passe
   en creme — 5:1 au point le plus clair, bien davantage sur les bords. La
   carte du logo, restee creme, s'en detache mieux qu'avant. */
.hero-brand {
  background: radial-gradient(circle at 50% 30%, #8a5d1e 0%, #6f4a18 30%, #543713 58%, #3a2610 80%, #241609 100%);
  padding: 3.5rem 1.25rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-brand::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 105%, rgba(0, 0, 0, 0.22), transparent 60%);
  pointer-events: none;
}
.hero-brand .container { max-width: 560px; position: relative; z-index: 2; }
.hero-brand h1 { color: var(--aegp-gold-100); font-size: 1.6rem; margin: 0 0 1.5rem; }
.hero-logo-card {
  background: #fffaf2;
  border: 1px solid rgba(58, 36, 16, 0.14);
  border-radius: 22px;
  padding: 1.5rem 1.5rem 1.3rem;
  box-shadow: 0 16px 38px rgba(35, 18, 6, 0.32);
  margin: 0 auto 1.5rem;
  max-width: 260px;
}
.hero-logo-card img { display: block; width: 100%; height: auto; }
.hero-divider {
  width: 110px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--aegp-gold-400), transparent);
  margin: 0 auto 1.5rem;
  position: relative;
}
.hero-divider::after {
  content: "◆";
  position: absolute; top: -7px; left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--aegp-gold-400);
}
.hero-brand .mission {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #f4e8d0;
  max-width: 480px;
  margin: 0 auto 1.8rem;
}
/* Sur fond sombre, le bouton reprend l'or de la charte : c'est lui qui
   attire l'oeil, et le contraste texte/bouton reste a 6:1. */
.hero-brand .btn-primary { background: var(--aegp-gold-400); color: #241609; }
.hero-brand .btn-primary:hover { background: var(--aegp-gold-100); color: #241609; }

/* --- Sections --- */
.section { padding: 3rem 1.25rem; }
.section-alt { background: var(--aegp-gold-100); }
.section-title { text-align: center; margin-bottom: 2rem; }

.grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.card {
  background: var(--aegp-white);
  border: 1px solid #eee4cd;
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.stat {
  text-align: center;
}
.stat-value {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--aegp-gold-600);
  display: block;
}
.stat-label { color: var(--aegp-brown-700); font-size: 0.95rem; }

.badge {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--aegp-gold-100);
  color: var(--aegp-brown-700);
}
.badge-success { background: #e4f2e6; color: var(--aegp-green); }
.badge-danger { background: #f6e3e1; color: var(--aegp-red); }
.badge-info { background: #e6eef6; color: #29527a; }

/* --- Types d'evenements du planning ---------------------------------------
   Une couleur par type, pour que le tableau se lise d'un coup d'oeil. Le
   contraste texte/fond respecte le niveau AA (4.5:1) : la couleur n'est pas
   la seule information, le libelle reste ecrit en toutes lettres. */
.badge-type-reunion   { background: #e6eef6; color: #1d4373; }
.badge-type-atelier   { background: #e4f2e6; color: #235c30; }
.badge-type-formation { background: #ede6f6; color: #4c2a73; }
/* Les deux variantes de formation restent dans la famille violette, pour se
   lire comme apparentees, tout en se distinguant nettement l'une de l'autre.
   Contraste verifie au niveau AA comme les autres types. */
.badge-type-formation_rdv     { background: #f3e6f2; color: #6b2160; }
.badge-type-module_formation  { background: #e6e9f6; color: #2f3a78; }
.badge-type-webinaire { background: var(--aegp-gold-100); color: var(--aegp-gold-600); }
.badge-type-autre     { background: #eeeae4; color: #5c4a36; }

/* Filet de couleur en bord de ligne, en complement du badge. */
tr[data-type] > td:first-child { border-left: 4px solid transparent; padding-left: 0.7rem; }
tr[data-type="reunion"]   > td:first-child { border-left-color: #1d4373; }
tr[data-type="atelier"]   > td:first-child { border-left-color: #235c30; }
tr[data-type="formation"] > td:first-child { border-left-color: #4c2a73; }
tr[data-type="webinaire"] > td:first-child { border-left-color: var(--aegp-gold-500); }
tr[data-type="autre"]     > td:first-child { border-left-color: #8a7460; }

/* --- Barre de filtre du planning --- */
.filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  margin: 1rem 0 1.25rem; padding: 0.75rem 1rem;
  background: var(--aegp-cream); border-radius: 10px;
}
.filter-bar label { font-weight: 600; color: var(--aegp-brown-800); }
.filter-bar select { padding: 0.35rem 0.6rem; border: 1px solid #d8cfc0; border-radius: 8px; }
.filter-bar .filter-count { margin-left: auto; color: #6b5a45; font-size: 0.9rem; }

/* --- Formulaires --- */
form p { margin: 0.9rem 0; }
label { display: block; font-weight: 600; margin-bottom: 0.3rem; color: var(--aegp-brown-800); }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="url"], input[type="date"], input[type="datetime-local"], input[type="number"],
textarea, select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid #d8c9a3;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--aegp-white);
  color: var(--aegp-brown-900);
}

input:focus, textarea:focus, select:focus {
  outline: 3px solid var(--aegp-gold-400);
  outline-offset: 1px;
}

.help-text { font-size: 0.82rem; color: #6b5a44; }
.errorlist { color: var(--aegp-red); list-style: none; padding: 0; margin: 0.2rem 0; font-size: 0.85rem; }

/* --- Tables --- */
table { width: 100%; border-collapse: collapse; background: var(--aegp-white); }
th, td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid #eee4cd; font-size: 0.92rem; }
th { background: var(--aegp-gold-100); color: var(--aegp-brown-800); }

/* --- Messages --- */
.messages { list-style: none; padding: 0; margin: 1rem auto; max-width: 1120px; }
.messages li {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}
.messages .success { background: #e4f2e6; color: var(--aegp-green); }
.messages .error { background: #f6e3e1; color: var(--aegp-red); }
.messages .info, .messages .warning { background: var(--aegp-gold-100); color: var(--aegp-brown-800); }

/* --- Footer --- */
.site-footer {
  background: var(--aegp-brown-900);
  color: var(--aegp-gold-100);
  padding: 2.5rem 1.25rem 1.5rem;
  margin-top: 3rem;
}
.site-footer a { color: var(--aegp-gold-400); }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  max-width: 1120px;
  margin: 0 auto 1.5rem;
}
.footer-bottom {
  text-align: center;
  font-size: 0.82rem;
  color: #cbb686;
  border-top: 1px solid #4a2e1a;
  padding-top: 1rem;
  max-width: 1120px;
  margin: 0 auto;
}

/* --- Bandeau cookies RGPD --- */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--aegp-brown-900);
  color: var(--aegp-white);
  padding: 1rem 1.25rem;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  z-index: 100;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}
#cookie-banner p { margin: 0; font-size: 0.9rem; max-width: 720px; }
#cookie-banner .actions { display: flex; gap: 0.6rem; }

/* --- Dashboard layout --- */
.app-layout { display: flex; min-height: 70vh; }
.app-sidebar {
  width: 230px;
  flex-shrink: 0;
  background: var(--aegp-gold-100);
  padding: 1.5rem 1rem;
  border-right: 1px solid #eee4cd;
}
.app-sidebar a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--aegp-brown-800);
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 0.15rem;
}
.app-sidebar a:hover, .app-sidebar a.active { background: var(--aegp-gold-400); color: var(--aegp-brown-900); }
.app-sidebar .sidebar-group-title {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: #8a6f45;
  margin: 1.2rem 0 0.4rem;
  font-weight: 700;
}
.app-content { flex: 1; padding: 2rem; }

.sidebar-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  background: var(--aegp-gold-100);
  border: none;
  border-bottom: 1px solid #eee4cd;
  padding: 0.9rem 1.1rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--aegp-brown-800);
  cursor: pointer;
  text-align: left;
}
.sidebar-toggle span::after {
  content: "▾";
  display: inline-block;
  margin-left: 0.5rem;
  transition: transform 0.15s;
}
.sidebar-toggle[aria-expanded="true"] span::after { transform: rotate(180deg); }

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--aegp-gold-500);
  color: var(--aegp-brown-900);
  padding: 0.6rem 1rem;
  z-index: 999;
}
.skip-link:focus { left: 1rem; top: 1rem; }

@media (max-width: 860px) {
  .app-layout { flex-direction: column; }
  .sidebar-toggle { display: flex; }
  .app-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #eee4cd;
    display: none;
  }
  .app-sidebar.open { display: block; }
}

@media (max-width: 720px) {
  .navbar-toggle { display: block; }
  .navbar-links {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 1rem 0;
  }
  .navbar-links.open { display: flex; }
  .hero h1 { font-size: 1.8rem; }
}


/* --- Barre de recherche de l'espace membres --------------------------------
   Recherche entierement interne : le champ interroge ce meme site, jamais un
   service exterieur. */
.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;
}

.site-search {
  position: relative;
  display: flex; gap: 0.5rem; align-items: center;
  margin-bottom: 1.5rem;
}
.site-search input[type="search"] {
  flex: 1; min-width: 0;
  padding: 0.55rem 0.9rem;
  border: 1px solid #d8cfc0; border-radius: 999px;
  font-size: 0.95rem; background: var(--aegp-white);
}
.site-search input[type="search"]:focus {
  outline: 2px solid var(--aegp-gold-500); outline-offset: 1px; border-color: var(--aegp-gold-500);
}

.site-search-suggestions {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  margin: 0; padding: 0.25rem; list-style: none;
  background: var(--aegp-white); border: 1px solid #e3d9c9; border-radius: 12px;
  box-shadow: 0 12px 28px rgba(43, 27, 16, 0.14);
  max-height: 320px; overflow-y: auto;
}
.site-search-suggestions li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
  padding: 0.45rem 0.7rem; border-radius: 8px;
}
.site-search-suggestions li:hover { background: var(--aegp-cream); }
.site-search-suggestions a { text-decoration: none; font-weight: 600; }
.site-search-suggestions .famille {
  font-size: 0.78rem; color: #7a6952; white-space: nowrap;
}

@media (max-width: 600px) {
  .site-search { flex-wrap: wrap; }
  .site-search input[type="search"] { flex-basis: 100%; }
}


/* --- Annuaire des membres --------------------------------------------------
   Ne sont affiches que les membres ayant consenti (cf apps/accounts/views.py). */
.annuaire { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.membre-carte { text-align: center; }
.membre-photo {
  width: 96px; height: 96px; border-radius: 50%;
  object-fit: cover; margin: 0 auto 0.75rem; display: block;
  border: 3px solid var(--aegp-gold-100);
}
.membre-photo-vide {
  display: flex; align-items: center; justify-content: center;
  background: var(--aegp-cream); color: var(--aegp-brown-700);
  font-size: 1.6rem; font-weight: 700; letter-spacing: 1px;
}
.membre-carte h3 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.membre-entreprise { margin: 0 0 0.4rem; font-weight: 600; color: var(--aegp-brown-700); }
.membre-coordonnees { font-size: 0.9rem; margin: 0.6rem 0; word-break: break-word; }
.membre-roles { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: center; margin: 0.5rem 0 0; }


/* --- Messages du formulaire de contact --- */
.message-contact { margin-bottom: 1rem; border-left: 4px solid var(--aegp-gold-500); }
.message-contact.message-traite { border-left-color: #cfc6b6; opacity: 0.75; }
.message-entete { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.message-entete h3 { margin: 0 0 0.2rem; font-size: 1.05rem; }
.message-corps {
  background: var(--aegp-cream); border-radius: 8px;
  padding: 0.75rem 1rem; margin: 0.75rem 0 1rem; white-space: pre-wrap;
}


/* --- Textes legaux (mentions legales, politique de confidentialite) --------
   Le gabarit propose un texte par defaut ; il s'efface des que l'association
   saisit le sien depuis l'administration. */
.texte-legal { max-width: 820px; }
.texte-legal h2 {
  font-size: 1.25rem; margin: 2.2rem 0 0.6rem;
  padding-bottom: 0.35rem; border-bottom: 2px solid var(--aegp-gold-100);
}
.texte-legal h3 { font-size: 1.02rem; margin: 1.4rem 0 0.4rem; color: var(--aegp-brown-700); }
.texte-legal p, .texte-legal li { font-size: 0.95rem; }
.texte-legal ul { padding-left: 1.2rem; }
.texte-legal li { margin-bottom: 0.35rem; }
.legal-chapo {
  background: var(--aegp-cream); border-left: 4px solid var(--aegp-gold-500);
  border-radius: 0 8px 8px 0; padding: 0.9rem 1.1rem; margin-bottom: 1.5rem;
}
.legal-maj { margin-top: 2.5rem; font-size: 0.82rem; color: #6b5a44; font-style: italic; }

/* Information que l'association doit fournir : volontairement voyant, pour
   qu'aucun trou ne passe inapercu a la relecture en preprod. */
.a-completer {
  background: #fff3c4; color: #7a5a00; border: 1px dashed #d6ad2e;
  border-radius: 4px; padding: 0.05rem 0.4rem; font-style: italic; font-size: 0.9em;
}

/* Un tableau large ne doit jamais elargir la page : il defile dans son cadre. */
.table-wrap { overflow-x: auto; margin: 0.8rem 0 1.2rem; }
.table-legal { font-size: 0.9rem; border: 1px solid #e3d9c9; border-radius: 8px; }
.table-legal th { background: var(--aegp-cream); text-align: left; }
.table-legal th, .table-legal td { padding: 0.55rem 0.75rem; vertical-align: top; }
.table-legal tbody tr + tr { border-top: 1px solid #efe7d8; }


/* --- Consentement a l'annuaire, page de profil ----------------------------- */
.bloc-rgpd { border-left: 4px solid var(--aegp-gold-500); }
.etat-consentement { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0 0 1rem; }
.champ-consentement label { display: flex; align-items: flex-start; gap: 0.55rem; cursor: pointer; }
.champ-consentement input[type="checkbox"] { margin-top: 0.25rem; width: 1.05rem; height: 1.05rem; flex: none; }
.champ-consentement .help-text { display: block; margin-top: 0.4rem; }


/* --- Organigramme : arbre de parrainage -------------------------------------
   Arbre en CSS pur, sans bibliotheque : les traits sont dessines par les
   pseudo-elements de chaque <li>. La vue neutralise les cycles en amont. */
.orga-arbre { margin-top: 1rem; overflow-x: auto; padding-bottom: 0.5rem; }
.orga-arbre ul { list-style: none; margin: 0; padding-left: 1.6rem; }
.orga-arbre > ul { padding-left: 0; }
.orga-arbre li { position: relative; padding: 0.3rem 0 0.3rem 1.6rem; }
.orga-arbre > ul > li { padding-left: 0; }

.orga-arbre li::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  border-left: 2px solid #e3d9c9;
}
.orga-arbre li:last-child::before { bottom: auto; height: 1.5rem; }
.orga-arbre li::after {
  content: ""; position: absolute; left: 0; top: 1.5rem; width: 1.1rem;
  border-top: 2px solid #e3d9c9;
}
.orga-arbre > ul > li::before, .orga-arbre > ul > li::after { display: none; }

.orga-noeud {
  display: inline-flex; flex-direction: column; gap: 0.1rem;
  background: var(--aegp-white); border: 1px solid #e3d9c9;
  border-left: 3px solid var(--aegp-gold-500);
  border-radius: 8px; padding: 0.5rem 0.85rem;
  box-shadow: 0 1px 4px rgba(43, 27, 16, 0.07);
}
.orga-nom { font-weight: 700; color: var(--aegp-brown-800); }
.orga-entreprise { font-size: 0.85rem; color: var(--aegp-brown-700); }
.orga-contact { font-size: 0.82rem; color: #6b5a44; word-break: break-word; }
.orga-noeud .badge { align-self: flex-start; margin-top: 0.3rem; }

/* Membre n'ayant pas consenti : sa place dans la chaine est conservee, son
   identite ne l'est pas. */
.orga-noeud-masque {
  border-left-color: #cfc6b6; background: var(--aegp-cream);
  box-shadow: none; opacity: 0.85;
}
.orga-noeud-masque .orga-nom { font-weight: 600; font-style: italic; color: #6b5a44; }


/* --- Coordonnees revelees a la demande -------------------------------------
   Le nom est un bouton : les coordonnees ne sont ni a l'ecran, ni dans le code
   source de la page. Elles sont demandees au serveur, une personne a la fois
   (cf templates/includes/_coordonnees_js.html). */
.btn-coordonnees {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: var(--aegp-brown-700); font-weight: 700;
  text-align: inherit; cursor: pointer;
  border-bottom: 1px dashed var(--aegp-gold-500);
}
.btn-coordonnees:hover { color: var(--aegp-gold-600); border-bottom-style: solid; }
.btn-coordonnees:focus-visible { outline: 2px solid var(--aegp-gold-500); outline-offset: 2px; }
.btn-coordonnees::after {
  content: " ▾"; font-size: 0.7em; color: var(--aegp-gold-600); border: 0;
}
.btn-coordonnees[aria-expanded="true"]::after { content: " ▴"; }

.bloc-coordonnees {
  margin-top: 0.4rem; padding: 0.5rem 0.7rem;
  background: var(--aegp-cream); border-radius: 8px;
  font-size: 0.86rem; word-break: break-word;
}
.bloc-coordonnees p { margin: 0.15rem 0; }

/* Dans une carte d'annuaire, le nom reste centre comme le reste de la carte. */
.membre-carte .btn-coordonnees { font-size: 1.05rem; }
/* Dans le tableau de l'organigramme, le declencheur est un mot, pas un nom. */
table .btn-coordonnees { font-weight: 600; font-size: 0.9rem; }
/* Le noeud de l'arbre est une colonne flex : sans cela le bouton s'etirerait
   sur toute la largeur de la carte. */
.orga-noeud .btn-coordonnees { align-self: flex-start; }
.orga-noeud .bloc-coordonnees { align-self: stretch; }


/* --- Remarques et suggestions ---------------------------------------------- */
.filtres-remarques { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 1.2rem; }
.remarque { margin-bottom: 1rem; border-left: 4px solid #cfc6b6; }
.remarque-prevue  { border-left-color: #29527a; }
.remarque-traitee { border-left-color: var(--aegp-green); }
.remarque-ecartee { border-left-color: #cfc6b6; opacity: 0.75; }
.remarque-entete { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.remarque-entete .help-text { display: block; }
.remarque-texte { white-space: pre-wrap; margin: 0.6rem 0 0; }
.remarque-reponse {
  margin-top: 0.9rem; padding: 0.7rem 0.9rem;
  background: var(--aegp-cream); border-radius: 8px;
}
.remarque-reponse p { margin: 0.25rem 0; }
.remarque-version { font-size: 0.95rem; }
.remarque-actions { display: flex; gap: 0.4rem; align-items: center; margin: 0.9rem 0 0; }

/* Numero de version, en pied de la barre laterale : savoir quelle version on
   utilise evite bien des malentendus quand un membre signale un probleme. */
.sidebar-version {
  margin: 1.5rem 0 0; padding-top: 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.75rem; color: #9c8a70; text-align: center;
}


/* --- Statistiques de frequentation ------------------------------------------
   Histogramme en CSS pur : pas de bibliotheque de graphiques a charger pour
   quelques dizaines de barres. */
.stats-chiffres { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stat-tuile { display: flex; flex-direction: column; gap: 0.2rem; text-align: center; }
.stat-valeur { font-size: 2rem; font-weight: 700; color: var(--aegp-brown-800); line-height: 1.1; }
.stat-sur { font-size: 1.2rem; color: #8a7860; font-weight: 600; }
.stat-libelle { font-size: 0.82rem; color: #6b5a44; }

.stats-histogramme {
  display: flex; align-items: flex-end; gap: 2px;
  height: 220px; padding: 0.5rem 0 1.6rem;
  overflow-x: auto; border-bottom: 1px solid #e3d9c9;
}
.stats-barre {
  position: relative; flex: 1 0 14px; min-width: 14px;
  height: 100%; display: flex; align-items: flex-end;
}
.stats-barre-remplissage {
  width: 100%; min-height: 2px; border-radius: 3px 3px 0 0;
  background: var(--aegp-gold-400);
}
.stats-barre:hover .stats-barre-remplissage { background: var(--aegp-gold-600); }
.stats-barre-date {
  position: absolute; bottom: -1.3rem; left: 50%; transform: translateX(-50%) rotate(-45deg);
  transform-origin: center; font-size: 0.62rem; color: #8a7860; white-space: nowrap;
}

.stats-part { background: var(--aegp-cream); border-radius: 3px; height: 10px; min-width: 60px; }
.stats-part-remplissage { background: var(--aegp-gold-500); height: 100%; border-radius: 3px; }


/* --- Guides d'utilisation --------------------------------------------------- */
.guide { max-width: 780px; }
.guide h2 {
  font-size: 1.3rem; margin: 2.4rem 0 0.7rem;
  padding-bottom: 0.35rem; border-bottom: 2px solid var(--aegp-gold-100);
}
.guide h3 { font-size: 1.02rem; margin: 1.5rem 0 0.4rem; color: var(--aegp-brown-700); }
.guide p, .guide li { font-size: 0.95rem; }
.guide ul { padding-left: 1.2rem; }
.guide li { margin-bottom: 0.4rem; }
.guide-chapo {
  background: var(--aegp-cream); border-left: 4px solid var(--aegp-gold-500);
  border-radius: 0 8px 8px 0; padding: 0.9rem 1.1rem; margin-bottom: 1.5rem;
}
.guide-avertissement {
  background: #fdf6e3; border: 1px solid #e8d9a8; border-radius: 8px;
  padding: 0.7rem 1rem;
}


/* --- Antispam : champ leurre -----------------------------------------------
   Invisible a l'ecran mais present dans le HTML : un robot qui remplit tout
   ce qu'il trouve se trahit. Volontairement retire du flux plutot que
   display:none — certains robots ignorent les champs ainsi masques.
   Le lecteur d'ecran l'ignore grace a aria-hidden et tabindex="-1". */
.antispam-leurre {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}
/* as_p enveloppe chaque champ dans un <p> : on masque aussi l'etiquette et le
   paragraphe entier, sans quoi une ligne vide subsisterait. */
p:has(> .antispam-leurre) { position: absolute; left: -9999px; height: 0; margin: 0; }
label[for="id_site_web"] { position: absolute; left: -9999px; }


/* --- Planning : filtre multiple, onglets et vue calendrier ------------------ */
.filter-bar { flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.filter-titre { font-weight: 600; font-size: 0.9rem; }
.filtre-types { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filtre-type { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; }
.filtre-type input { cursor: pointer; }
/* Un type décoché s'estompe : l'état du filtre se lit sans relire les cases. */
.filtre-type:has(input:not(:checked)) .badge { opacity: 0.35; }

.onglets-planning { display: flex; gap: 0.25rem; margin: 1.2rem 0 0; border-bottom: 2px solid var(--aegp-gold-100); }
.onglet {
  background: none; border: 0; border-bottom: 3px solid transparent;
  padding: 0.5rem 1.1rem; margin-bottom: -2px;
  font: inherit; font-weight: 600; color: var(--aegp-brown-700);
  cursor: pointer; border-radius: 8px 8px 0 0;
}
.onglet:hover { background: var(--aegp-cream); }
.onglet.actif { border-bottom-color: var(--aegp-gold-500); color: var(--aegp-brown-900); }
.vue-planning { padding-top: 1.2rem; }

.cellule-actions { white-space: nowrap; display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }

.cal-entete { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }
.cal-entete strong { min-width: 11ch; text-align: center; text-transform: capitalize; }

.cal-grille {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px; background: var(--aegp-gold-100);
  border: 1px solid var(--aegp-gold-100); border-radius: 10px; overflow: hidden;
}
.cal-jour-titre {
  background: var(--aegp-cream); padding: 0.4rem;
  font-size: 0.78rem; font-weight: 700; text-align: center; text-transform: uppercase;
}
.cal-jour {
  background: #fff; min-height: 92px; padding: 0.3rem;
  display: flex; flex-direction: column; gap: 2px;
}
.cal-hors-mois { background: #fbfaf8; }
.cal-hors-mois .cal-numero { opacity: 0.4; }
.cal-aujourdhui { box-shadow: inset 0 0 0 2px var(--aegp-gold-500); }
.cal-numero { font-size: 0.78rem; font-weight: 700; color: var(--aegp-brown-700); }
.cal-puce {
  display: block; font-size: 0.72rem; line-height: 1.25;
  padding: 2px 5px; border-radius: 5px; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-puce:hover { text-decoration: underline; }

/* Sur téléphone, une grille de sept colonnes est illisible, et la faire
   défiler horizontalement l'est presque autant : on abandonne la grille.
   Chaque jour devient une ligne, et seuls les jours porteurs d'un événement
   restent affichés — le mois se parcourt alors d'un simple défilement
   vertical, sans jamais sortir de l'écran. */
@media (max-width: 720px) {
  .cal-grille { display: block; border: 0; background: none; }
  .cal-jour-titre { display: none; }

  .cal-jour {
    min-height: 0; padding: 0;
    border-bottom: 1px solid var(--aegp-gold-100);
    flex-direction: row; align-items: baseline; gap: 0.6rem;
  }
  /* Un jour sans événement n'a rien à dire : il n'occupe pas de place. */
  .cal-jour:not(:has(.cal-puce)) { display: none; }
  .cal-hors-mois { display: none; }

  .cal-numero {
    flex: 0 0 2.2rem; padding: 0.6rem 0 0.6rem 0.2rem;
    font-size: 1rem; text-align: right;
  }
  .cal-jour > .cal-numero + * { margin-top: 0.55rem; }
  .cal-puce {
    flex: 1 1 100%; white-space: normal; font-size: 0.82rem;
    padding: 0.4rem 0.6rem; margin-bottom: 0.4rem;
  }
  .cal-aujourdhui { box-shadow: none; border-left: 3px solid var(--aegp-gold-500); }
  .cal-aujourdhui .cal-numero { color: var(--aegp-gold-600); }
}

/* --- Champ figé (parrain dans le profil) ----------------------------------- */
.champ-fige { margin: 0 0 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--aegp-gold-100); }
.champ-fige-libelle { display: block; font-size: 0.9rem; color: var(--aegp-brown-700); }
.champ-fige strong { display: block; margin: 0.15rem 0; }

/* --- Remarques : les actions restent sur une ligne -------------------------- */
.remarque-actions { flex-wrap: wrap; }
.remarque-actions form { display: inline-flex; margin: 0; }



/* --- Tableaux sur téléphone : empilés plutôt que défilants ------------------
   Un tableau à cinq colonnes ne tient pas sur un écran de téléphone. Le faire
   défiler latéralement cache la moitié de l'information, sans qu'on sache
   qu'il en reste à droite. Chaque ligne devient donc un bloc.

   L'intitulé de colonne est repris devant chaque valeur — « Nantes » seul sur
   une ligne ne voudrait rien dire. Il est recopié automatiquement depuis
   l'en-tête par static/js/main.js, ce qui vaut pour tous les tableaux du site,
   y compris ceux qu'on ajoutera. La règle .table-legal est exclue : ces
   tableaux-là n'ont que deux colonnes et se lisent tels quels. */
@media (max-width: 720px) {
  .table-wrap { overflow-x: visible; }

  table:not(.table-legal) thead { display: none; }
  table:not(.table-legal),
  table:not(.table-legal) tbody,
  table:not(.table-legal) tr,
  table:not(.table-legal) td { display: block; width: auto; }

  table:not(.table-legal) tr {
    border: 1px solid var(--aegp-gold-100); border-radius: 10px;
    padding: 0.7rem 0.9rem; margin-bottom: 0.8rem; background: #fff;
  }
  table:not(.table-legal) td { border: 0; padding: 0.2rem 0; }
  table:not(.table-legal) td[data-label]::before {
    content: attr(data-label) " : ";
    font-weight: 700; font-size: 0.8rem; color: var(--aegp-brown-700);
  }
  table:not(.table-legal) td:empty { display: none; }

  /* La colonne des boutons : ils passent à la ligne au lieu de tenir de force
     sur une seule, ce qui rallongeait le tableau au-delà de l'écran. */
  .cellule-actions,
  table:not(.table-legal) td:last-child {
    white-space: normal !important;
    display: flex; flex-wrap: wrap; gap: 0.35rem;
    padding-top: 0.6rem !important;
  }
  table:not(.table-legal) td:last-child:empty { display: none; }
}


/* --- Messages de contact : réponse et actions ------------------------------ */
.message-reponse {
  margin-top: 0.9rem; padding: 0.7rem 0.9rem;
  background: var(--aegp-cream); border-left: 3px solid var(--aegp-green); border-radius: 8px;
}
.message-reponse p { margin: 0.25rem 0; }
.message-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.9rem; }
.message-actions form { display: inline-flex; margin: 0; }
.message-recu .message-entete .help-text { display: block; }


/* --- Abonnement au calendrier ---------------------------------------------- */
.champ-abonnement { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.champ-abonnement input {
  flex: 1 1 22rem; min-width: 0;
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, monospace;
  font-size: 0.78rem; padding: 0.5rem 0.7rem;
  border: 1px solid var(--aegp-gold-100); border-radius: 8px;
  background: var(--aegp-cream); color: var(--aegp-brown-800);
}
.aide-abonnement { margin-top: 1rem; }
.aide-abonnement summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.aide-abonnement p { margin: 0.5rem 0; font-size: 0.88rem; }


/* --- Bloc d'abonnement au calendrier ---------------------------------------- */
.bloc-abonnement {
  background: var(--aegp-cream); border: 1px solid var(--aegp-gold-100);
  border-radius: 12px; padding: 0.9rem 1.1rem; margin: 1.2rem 0;
}
/* Dans le profil, la carte fournit déjà le cadre : on l'allège. */
.card .bloc-abonnement { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
.abonnement-entete { margin-bottom: 0.7rem; }
.abonnement-entete .help-text { display: block; margin-top: 0.15rem; }
.abonnement-boutons { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.abonnement-avertissement { margin: 0.9rem 0 0; }


/* --- Panneau de détail d'un événement -------------------------------------- */
.modale { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modale-fond { position: absolute; inset: 0; background: rgba(43, 27, 16, 0.55); }
.modale-boite {
  position: relative; background: #fff; border-radius: 14px;
  padding: 1.6rem 1.8rem; max-width: 560px; width: 100%;
  max-height: 85vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(35, 18, 6, 0.35);
}
.modale-boite h2 { margin: 0.3rem 0 1rem; font-size: 1.35rem; }
.modale-fermer {
  position: absolute; top: 0.6rem; right: 0.8rem;
  background: none; border: 0; font-size: 1.7rem; line-height: 1;
  color: var(--aegp-brown-700); cursor: pointer; padding: 0.2rem 0.4rem; border-radius: 8px;
}
.modale-fermer:hover { background: var(--aegp-cream); }
.modale-type { margin: 0; }

.detail-champs { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.9rem; margin: 0 0 1rem; }
.detail-champs dt { font-weight: 700; font-size: 0.85rem; color: var(--aegp-brown-700); }
.detail-champs dd { margin: 0; }
.detail-description { white-space: pre-wrap; margin: 0 0 1.2rem; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }

/* La puce du calendrier est devenue un bouton : on lui retire l'apparence
   par défaut que le navigateur donne aux boutons. */
button.cal-puce {
  border: 0; font: inherit; text-align: left; cursor: pointer; width: 100%;
}
button.cal-puce:hover { filter: brightness(0.95); text-decoration: underline; }