/* =============================================================================
   contenu.css — navigation des SOUS-PAGES (commun aux 6 thèmes)
     1) Cartes « Dans cette rubrique » sous une page parente   → .ntc-sous-pages
        (titre + description méta si présente — SANS photo, volontairement léger)
     2) Menus déroulants accessibles des crans du fil d'Ariane → .ntc-fil-pop
   Neutre : n'utilise AUCUNE variable de thème (couleurs en rgba + currentColor),
   clair + sombre via [data-mode="sombre"]. Chargé en <link> parallèle dans les
   _header.php, après megamenu.css. Tout est scopé sous .ntc-sous-pages /
   .ntc-fil-pop pour ne jamais déborder sur le reste du thème.
   ============================================================================= */

/* ---------- 1. Cartes « Dans cette rubrique » (titre + description, sans photo) ---------- */
.ntc-sous-pages { margin: 2.5rem 0 .5rem; }
.ntc-sous-pages .ntc-sp-titre {
  margin: 0 0 1rem; font-size: 1.2rem; font-weight: 700; line-height: 1.2;
}
.ntc-sous-pages .ntc-sp-grille {
  display: grid; gap: 12px; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.ntc-sous-pages a.ntc-sp-carte {
  display: block; padding: 14px 16px;
  border: 1px solid rgba(0,0,0,.10); border-radius: 12px;
  background: #fff; color: inherit; text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.06); /* léger relief : ressort sur les fonds crème/colorés */
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ntc-sous-pages a.ntc-sp-carte:hover,
.ntc-sous-pages a.ntc-sp-carte:focus-visible {
  border-color: rgba(0,0,0,.3); transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.07);
}
.ntc-sous-pages .ntc-sp-nom { display: block; font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.ntc-sous-pages .ntc-sp-desc { display: block; margin-top: 5px; font-size: .92rem; line-height: 1.45; opacity: .72; }

[data-mode="sombre"] .ntc-sous-pages a.ntc-sp-carte { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.15); }
[data-mode="sombre"] .ntc-sous-pages a.ntc-sp-carte:hover,
[data-mode="sombre"] .ntc-sous-pages a.ntc-sp-carte:focus-visible { border-color: rgba(255,255,255,.34); box-shadow: 0 8px 20px rgba(0,0,0,.45); }

@media (max-width: 560px) {
  .ntc-sous-pages .ntc-sp-grille { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ntc-sous-pages a.ntc-sp-carte { padding: 11px 13px; }
  .ntc-sous-pages .ntc-sp-desc { display: none; }
}

/* ---------- 2. Menus déroulants du fil d'Ariane (<details> natif, accessible) ---------- */
/* Petit caret fin collé au libellé du cran, aligné au texte — pas de grosse boîte. */
.ntc-fil-pop { display: inline-block; position: relative; vertical-align: middle; }
.ntc-fil-pop > summary {
  list-style: none; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center;
  width: 1.4em; height: 1.4em; margin-left: 3px;
  border-radius: 7px; color: inherit;
  background: rgba(0,0,0,.08); transition: background .15s ease;
}
.ntc-fil-pop > summary::-webkit-details-marker { display: none; }
.ntc-fil-pop > summary:hover,
.ntc-fil-pop[open] > summary { background: rgba(0,0,0,.15); }
.ntc-fil-pop > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.ntc-fil-pop .ntc-fil-chev {
  display: block; width: .6em; height: .6em;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .9; transition: transform .15s ease;
}
.ntc-fil-pop[open] > summary .ntc-fil-chev { transform: rotate(180deg); }
.ntc-fil-pop .ntc-fil-menu {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  min-width: 230px; max-width: 86vw; padding: 6px;
  background: #fff; border: 1px solid rgba(0,0,0,.14); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
  display: flex; flex-direction: column; text-align: left;
}
.ntc-fil-pop .ntc-fil-menu-h {
  margin: 3px 9px 6px; font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; opacity: .5;
}
.ntc-fil-pop .ntc-fil-menu a {
  display: block; padding: 8px 10px; border-radius: 7px;
  font-size: .98rem; line-height: 1.3; text-decoration: none; color: inherit;
}
.ntc-fil-pop .ntc-fil-menu a:hover { background: rgba(0,0,0,.07); }
.ntc-fil-pop .ntc-fil-menu a.ntc-here { font-weight: 700; }
.ntc-fil-pop .ntc-fil-menu a.ntc-here::before { content: "\25B8\00A0"; opacity: .6; }

[data-mode="sombre"] .ntc-fil-pop > summary { background: rgba(255,255,255,.12); }
[data-mode="sombre"] .ntc-fil-pop > summary:hover,
[data-mode="sombre"] .ntc-fil-pop[open] > summary { background: rgba(255,255,255,.2); }
[data-mode="sombre"] .ntc-fil-pop .ntc-fil-menu { background: #1c2025; border-color: rgba(255,255,255,.16); box-shadow: 0 10px 30px rgba(0,0,0,.55); }
[data-mode="sombre"] .ntc-fil-pop .ntc-fil-menu a:hover { background: rgba(255,255,255,.1); }

/* === Trombinoscope des élus : 3 rangs (maire / adjoints / conseillers) — partagé tous thèmes === */
.ntc-elus-groupe { font-size: 1.5rem; margin: 2.4rem 0 1.1rem; line-height: 1.25; }
.ntc-elus-groupe:first-of-type { margin-top: 1.25rem; }

/* === Bloc « Services » de la page d'accueil (générique — Bastide a son propre rendu) ===
   Neutre comme le reste du fichier : aucune variable de thème, clair + sombre. */
.ntc-bloc-services { margin: 2.5rem 0; }
.ntc-bloc-services h2 { margin: 0 0 1rem; }
.ntc-bloc-services .ntc-services-grille {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px; align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.ntc-bloc-services .ntc-services-grille a {
  display: block; height: 100%;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(0, 0, 0, .14); border-radius: 8px;
  background: rgba(255, 255, 255, .55);
  text-decoration: none; color: inherit;
}
.ntc-bloc-services .ntc-services-grille a:hover { border-color: currentColor; }
.ntc-bloc-services .ntc-services-grille strong { display: block; margin-bottom: .35rem; font-size: 1.05rem; }
.ntc-bloc-services .ntc-services-grille span { font-size: .92rem; opacity: .85; }
[data-mode="sombre"] .ntc-bloc-services .ntc-services-grille a {
  border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05);
}

/* === Élus — photo de groupe du conseil (générique, clair + sombre) ===
   Rendue en tête de /elus/ au-dessus du trombinoscope (ElusRepo::photoGroupeHtml).
   Neutre : aucune variable de thème, comme le reste du fichier. */
.ntc-conseil-photo { margin: 1.25rem auto 2.2rem; max-width: 900px; }
.ntc-conseil-photo img {
  display: block; width: 100%; height: auto; max-height: 60vh;
  object-fit: cover; border-radius: 10px; border: 1px solid rgba(0, 0, 0, .12);
}
.ntc-conseil-photo figcaption {
  margin-top: .55rem; text-align: center;
  font-size: .92rem; font-style: italic; opacity: .8;
}
[data-mode="sombre"] .ntc-conseil-photo img { border-color: rgba(255, 255, 255, .16); }

/* === Élus — page « Commissions & délégations » (générique, clair + sombre) ===
   Rendu mutualisé (CommissionsRepo::rendreSection) pour les 6 thèmes. */
/* Page générique (hors conteneur de thème) : gouttière propre desktop + mobile. */
.ntc-commissions { max-width: 1150px; margin: 0 auto; box-sizing: border-box;
  padding: 1.25rem clamp(1rem, 4vw, 1.5rem) 2.5rem; }
.ntc-comm-section { margin: 1.5rem 0 2.5rem; }
.ntc-comm-section > h2 { margin: 0 0 1rem; }
/* Flex + justify-center : les cartes gardent une largeur de lecture confortable,
   et une carte esseulée (3, 5, 7 commissions…) se CENTRE au lieu de laisser un grand
   vide à droite. align-items:stretch → cartes d'égale hauteur par rangée. */
.ntc-comm-liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
}
.ntc-comm {
  flex: 1 1 330px; max-width: 460px;
  border: 1px solid rgba(0, 0, 0, .14); border-radius: 10px;
  padding: 1rem 1.15rem; background: rgba(255, 255, 255, .55);
}
.ntc-comm-nom { margin: 0 0 .35rem; font-size: 1.15rem; }
.ntc-comm-organisme { margin: 0 0 .4rem; font-weight: 600; opacity: .9; }
.ntc-comm-mission { margin: 0 0 .5rem; opacity: .85; font-size: .95rem; line-height: 1.45; }
.ntc-comm-membres {
  list-style: none; margin: .5rem 0 0; padding: .6rem 0 0;
  border-top: 1px solid rgba(0, 0, 0, .1); font-size: .92rem;
}
/* Chaque membre en 2 colonnes : nom (+ fonction en sous-ligne) à gauche, badge de
   rôle À DROITE → tous les badges alignés, les noms alignés, lecture nette. */
.ntc-comm-membres li {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  padding: .4rem 0;
}
.ntc-comm-membres li + li { border-top: 1px solid rgba(0, 0, 0, .05); }
.ntc-comm-m { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ntc-comm-m-nom { font-weight: 600; }
.ntc-comm-membre.est-resp .ntc-comm-m-nom { font-weight: 700; }
.ntc-comm-fct { opacity: .68; font-size: .82em; }
.ntc-comm-role {
  flex: 0 0 auto; white-space: nowrap;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: .14rem .45rem; border-radius: 5px; background: rgba(0, 0, 0, .07);
}
.ntc-comm-membre.est-resp .ntc-comm-role { background: rgba(0, 0, 0, .82); color: #fff; }
[data-mode="sombre"] .ntc-comm-role { background: rgba(255, 255, 255, .12); }
[data-mode="sombre"] .ntc-comm-membre.est-resp .ntc-comm-role { background: rgba(255, 255, 255, .9); color: #111; }
.ntc-commissions-retour, .ntc-elus-lien-commissions { margin: 1.5rem 0; }
.ntc-elus-lien-commissions a { font-weight: 600; }
.ntc-commissions-vide { opacity: .8; font-style: italic; }
[data-mode="sombre"] .ntc-comm { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); }
[data-mode="sombre"] .ntc-comm-membres { border-top-color: rgba(255, 255, 255, .14); }
[data-mode="sombre"] .ntc-comm-role { background: rgba(255, 255, 255, .14); }

/* === Élus — contact public d'un élu (opt-in RGPD, générique) ===
   Rendu par ElusRepo::contactHtml uniquement si l'élu a coché l'affichage. */
.ntc-elu-contact { margin: .35rem 0 0; display: flex; flex-direction: column; gap: .08rem; font-size: .88rem; }
.ntc-elu-contact a { word-break: break-word; }

/* === Élus — liens « commissions » sous chaque fiche du trombinoscope ===
   Fiches en colonne → le bloc « commissions » se COLLE EN BAS et s'aligne d'une
   carte à l'autre, que l'élu siège dans 0, 1 ou plusieurs commissions.
   align-items:center préserve le centrage (photo 140px + textes) commun aux 6 thèmes. */
.ntc-trombi-fiche, .cv-trombi-fiche, .bas-trombi-fiche,
.lag-trombi-fiche, .ter-trombi-fiche, .pin-trombi-fiche {
  display: flex; flex-direction: column; align-items: center;
}
.ntc-elu-commissions { width: 100%; margin: auto 0 0; padding-top: .55rem;
  border-top: 1px solid rgba(0, 0, 0, .1); font-size: .84rem; line-height: 1.45; }
.ntc-elu-commissions a { font-weight: 600; }
.ntc-elu-commissions-ico { opacity: .7; }
[data-mode="sombre"] .ntc-elu-commissions { border-top-color: rgba(255, 255, 255, .14); }

/* Intro de la page « Commissions & délégations » (sous le titre) + ancres. */
.ntc-commissions-intro { max-width: 65ch; margin: 0 0 2rem; line-height: 1.6; opacity: .85; }
.ntc-comm { scroll-margin-top: 90px; }
.ntc-comm:target { box-shadow: 0 0 0 2px rgba(0, 0, 0, .25); }
[data-mode="sombre"] .ntc-comm:target { box-shadow: 0 0 0 2px rgba(255, 255, 255, .3); }