/* =============================================================================
   THÈME CIVIUM — Style institutionnel français, header 2 niveaux, hero impactant
   Design inspiré DSFR + standards mairie 2026.
   ============================================================================= */

/* megamenu.css : chargé en <link> parallèle dans _header.php (plus d'@import sérialisé). */

/* ---------- Reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ntc-font-body);
  font-weight: var(--ntc-fw-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--cv-texte);
  background: var(--cv-fond);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Palette (mode clair par défaut) ---------- */
:root {
  /* Socle typo L5b : tokens canoniques ntc-font et ntc-fw (pilotables) ; logo = identité statique. */
  --ntc-font-title: 'Marianne', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ntc-font-body:  'Marianne', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ntc-font-ui:    'Marianne', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ntc-font-logo:  'Marianne', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ntc-fw-title: 700;
  --ntc-fw-body: 400;
  --ntc-fw-ui: 500;   /* civium : menu principal à 500 (consommé par .cv-menu a / .ntc-menu-liste a) */
  /* ───────── Socle « design tokens » (Lot 2) — 3 couches, cf. brief §D.1.
     ⚠️ Civium : vocabulaire réduit (pas de --cv-primaire) et mapping admin INVERSÉ —
     « principale » pilote le BLEU institutionnel (link/brand/title), « accent » le CTA or.
     Perso ON : le moteur surcharge les tokens sémantiques (gagne en clair ET en sombre). */
  --ntc-brand-action: #fac21f;   /* champ « accent » — jaune CTA principal */
  --ntc-brand-accent: #1a3c6e;   /* champ « principale » — bleu marine (aplats hero) */

  --ntc-color-action:        var(--ntc-brand-action); /* CTA */
  --ntc-color-action-hover:  #d4a017;
  --ntc-color-action-pale:   #fff7d6;
  --ntc-color-brand:         var(--ntc-brand-accent); /* bleu marine fond hero overlay */
  --ntc-color-title:         #0c1d3a;                 /* bleu nuit du header */
  --ntc-color-link:          #1d5a8f;                 /* bleu institutionnel lien */
  --ntc-color-link-pale:     #eaf0f7;
  --ntc-color-text:          #1a1f2e;
  --ntc-color-text-muted:    #4a5061;
  --ntc-color-text-faint:    #5e6678;
  --ntc-color-bg:            #ffffff;
  --ntc-color-surface:       #ffffff;
  --ntc-color-surface-alt:   #f6f7fa;
  --ntc-color-border:        #d6dbe3;
  --ntc-color-border-strong: #b3bccd;
  --ntc-color-success:       #18753c;
  --ntc-color-urgent:        #ce0500;
  --ntc-color-warning:       #b34000;

  /* Couche 3 — alias historiques. */
  --cv-marine:       var(--ntc-color-title);
  --cv-marine-claire:var(--ntc-color-brand);
  --cv-bleu:         var(--ntc-color-link);
  --cv-bleu-pale:    var(--ntc-color-link-pale);
  --cv-or:           var(--ntc-color-action);
  --cv-or-fonce:     var(--ntc-color-action-hover);
  --cv-or-pale:      var(--ntc-color-action-pale);

  --cv-texte:        var(--ntc-color-text);
  --cv-texte-doux:   var(--ntc-color-text-muted);
  --cv-texte-pale:   var(--ntc-color-text-faint);

  --cv-fond:         var(--ntc-color-bg);
  --cv-fond-alt:     var(--ntc-color-surface-alt);
  --cv-fond-carte:   var(--ntc-color-surface);
  --cv-bord:         var(--ntc-color-border);
  --cv-bord-fort:    var(--ntc-color-border-strong);

  --cv-vert:         var(--ntc-color-success);
  --cv-rouge:        var(--ntc-color-urgent);
  --cv-orange:       var(--ntc-color-warning);

  --cv-shadow-card:  0 2px 6px rgba(12, 29, 58, .06), 0 1px 2px rgba(12, 29, 58, .04);
  --cv-shadow-hover: 0 6px 18px rgba(12, 29, 58, .12);

  --cv-rayon:        4px;
  --cv-rayon-grand:  8px;
  --cv-trans:        .2s ease;

  --cv-max-w:        1280px;
}

/* ---------- Mode sombre ---------- */
[data-mode="sombre"] {
  /* Mode sombre = redéclaration des TOKENS sémantiques (les alias --cv-* suivent). */
  --ntc-color-bg:            #0f1424;
  --ntc-color-surface-alt:   #131a2c;
  --ntc-color-surface:       #1a2138;
  --ntc-color-border:        #2a3252;
  --ntc-color-border-strong: #3b466b;
  --ntc-color-text:          #e4e7f0;
  --ntc-color-text-muted:    #b0b8cc;
  --ntc-color-text-faint:    #8790a8;                 /* contraste AA sur fond sombre (4.99:1) */
  /* Le mode sombre ne redéfinissait QUE link-pale : les liens gardaient le bleu
     institutionnel clair (#1d5a8f) sur fond bleu nuit, soit 2.21:1 — illisibles. */
  --ntc-color-link:          #3d90d8;                 /* contraste AA sur fond sombre (4.69:1) */
  --ntc-color-link-pale:     rgba(118, 165, 220, .12);
  --ntc-color-action-pale:   rgba(250, 194, 31, .15);
}

/* ---------- Typo ---------- */
h1, h2, h3, h4 { color: var(--cv-marine); font-family: var(--ntc-font-title); font-weight: var(--ntc-fw-title); letter-spacing: -.01em; }
[data-mode="sombre"] h1,
[data-mode="sombre"] h2,
[data-mode="sombre"] h3,
[data-mode="sombre"] h4 { color: #fff; }
h1 { font-size: 2.25rem; line-height: 1.15; margin: 0 0 1rem; }
h2 { font-size: 1.6rem; line-height: 1.2; margin: 2rem 0 1rem; }
h3 { font-size: 1.25rem; margin: 1.5rem 0 .75rem; }
p { margin: 0 0 1rem; }
a { color: var(--cv-bleu); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--cv-marine); }
[data-mode="sombre"] a { color: #7eb2e8; }
img { max-width: 100%; height: auto; }

/* ---------- Layout helpers ---------- */
:is(.cv-container,.ntc-container) {
  max-width: var(--cv-max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.cv-main { min-height: 60vh; }
:is(.cv-contenu-zone,.ntc-contenu-zone) {
  padding: 2.5rem 1.5rem;
  margin: 0 auto;
}
.skip-link {
  position: absolute; top: -100px; left: 0;
  background: var(--cv-or); color: var(--ntc-color-on-action);
  padding: .65rem 1.25rem; font-weight: 700;
  z-index: 9999;
}
.skip-link:focus { top: 0; }
/* `[data-mode="sombre"] a` est plus spécifique que `.skip-link` : en mode sombre ce lien
   prenait la couleur CLAIRE des liens alors que son fond, lui, ne change pas — 1,27:1
   (RGAA 3.2). Il garde donc la couleur de son propre fond dans les deux modes. */
[data-mode="sombre"] .skip-link { color: var(--ntc-color-on-action); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ============================================================================
   HEADER 2 NIVEAUX
   ============================================================================ */
.cv-header { background: var(--cv-marine); color: var(--ntc-color-on-title); }

/* --- Niveau 1 : barre supérieure --- */
.cv-header-top { background: var(--cv-marine); }
.cv-header-top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem 1.5rem;
  flex-wrap: nowrap;       /* en desktop on garde tout sur une ligne */
  max-width: var(--cv-max-w);
  margin: 0 auto;
}
.cv-marque { flex: 1; min-width: 0; }   /* le titre peut rétrécir si manque de place */
.cv-header-liens { flex-shrink: 0; }

.cv-marque {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--ntc-color-on-title);
  text-decoration: none;
}
/* Le titre est un repère identitaire : pas de variation au survol (sinon il
   se confond avec le fond marine sombre). On neutralise le a:hover global. */
.cv-marque:hover,
.cv-marque:focus,
.cv-marque:active {
  color: var(--ntc-color-on-title); /* audit 10 : #fff littéral illisible à title piloté clair (2,44 à principale blanche) */
  text-decoration: none;
}
.cv-blason {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cv-blason img,
.cv-blason svg { width: 44px; height: 52px; display: block; }
.cv-titre {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
  font-family: var(--ntc-font-logo);  /* logo = identité STATIQUE (découplé du corps pilotable) */
}
.cv-titre strong {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv-titre small {
  font-size: .8rem;
  color: var(--ntc-color-on-title); /* audit 6 : opaque — 72% tombait à 3,23:1 quand le pick bascule */
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cv-header-liens {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: .9rem;
}
.cv-lien-util {
  color: var(--ntc-color-on-title); /* audit 6 : opaque (85% → 3,83:1 au pire) */
  text-decoration: none;
  transition: color var(--cv-trans);
}
.cv-lien-util:hover { color: var(--ntc-color-on-title); text-decoration: underline; }

.cv-cta-citoyen {
  background: var(--cv-or);
  color: var(--ntc-color-on-action);
  padding: .65rem 1.25rem;
  border-radius: var(--cv-rayon);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: 1px;
  text-decoration: none;
  transition: background var(--cv-trans), transform var(--cv-trans);
}
/* Bouton toggle clair/sombre — discret dans le bandeau supérieur Civium */
.cv-mode-toggle {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--ntc-color-on-title) 25%, transparent);
  color: var(--ntc-color-on-title); /* audit 6 : dans le header (fond title piloté) */
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--cv-trans), border-color var(--cv-trans);
}
.cv-mode-toggle:hover {
  background: transparent; /* audit 7 : le tint 10% éclaircissait le fond SOUS l'encre pick (3,79:1 à #b4b4b4) */
  border-color: var(--ntc-color-on-title);
}
[data-mode="sombre"] .cv-mode-toggle {
  border-color: color-mix(in srgb, var(--ntc-color-on-title) 35%, transparent);
}
.cv-cta-citoyen:hover {
  background: #fff;
  color: #0c1d3a; /* audit 7 : fond LITTÉRAL blanc → encre LITTÉRALE (marine pilotée devenait #a6a6a6 = 2,43:1) */
  transform: translateY(-1px);
}
/* Copie du CTA reprise en tête du menu mobile déplié : masquée en desktop,
   affichée uniquement quand le burger est ouvert (voir @media max-width:900px). */
.cv-cta-drawer { display: none; }

/* --- Niveau 2 : menu principal --- */
.cv-header-nav {
  background: var(--cv-marine-claire);
  border-top: 1px solid color-mix(in srgb, var(--ntc-color-inverse) 10%, transparent);
  color: var(--ntc-color-inverse); /* audit 5 : le survol change de RÔLE (→ brand) → l'encre suit */
}
.cv-header-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 1.5rem;
  flex-wrap: nowrap;
  max-width: var(--cv-max-w);
  margin: 0 auto;
}

.cv-menu,
.ntc-menu-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 1;
}
.cv-menu li,
.ntc-menu-liste li {
  position: relative;
}
.cv-menu a,
.ntc-menu-liste a {
  display: flex;
  align-items: center;
  padding: 1.1rem 1.25rem;
  color: var(--ntc-color-inverse); /* audit 6 : opaque (92% → 4,19:1 au pire) */
  text-decoration: none;
  font-family: var(--ntc-font-ui);
  font-weight: var(--ntc-fw-ui);
  font-size: .95rem;
  border-bottom: 3px solid transparent;
  transition: background var(--cv-trans), border-color var(--cv-trans);
}
.cv-menu a:hover,
.ntc-menu-liste a:hover,
.cv-menu a[aria-current="page"],
.ntc-menu-liste a[aria-current="page"] {
  /* audit 10 : zéro voile sous encre pick — rgba(0,0,0,.18) assombrissait le fond title piloté
     sous une encre inverse calculée pour le fond NU (pick marginal à #767676 : 4,61 → 3,38).
     Le soulignement or reste le feedback ; le couple title/inverse garde sa garantie. */
  background: transparent;
  border-bottom-color: var(--cv-or);
  color: var(--ntc-color-inverse);
}

/* Sous-menus */
.cv-menu .ntc-sous-menu,
.ntc-menu-liste .ntc-sous-menu {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--cv-bord);
  border-top: 3px solid var(--cv-or);
  box-shadow: var(--cv-shadow-hover);
  padding: .25rem 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s;
  z-index: 100;
}
.cv-menu li:hover > .ntc-sous-menu,
.cv-menu li:focus-within > .ntc-sous-menu,
.ntc-menu-liste li:hover > .ntc-sous-menu,
.ntc-menu-liste li:focus-within > .ntc-sous-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.cv-menu .ntc-sous-menu a,
.ntc-menu-liste .ntc-sous-menu a {
  padding: .65rem 1.25rem;
  color: var(--cv-texte);
  border-bottom: 0;
  font-weight: 500;
}
.cv-menu .ntc-sous-menu a:hover,
.ntc-menu-liste .ntc-sous-menu a:hover {
  background: var(--cv-bleu-pale);
  color: var(--ntc-color-on-link-pale);
  border-bottom: 0;
}
.cv-menu .ntc-sous-menu .ntc-sous-menu,
.ntc-menu-liste .ntc-sous-menu .ntc-sous-menu {
  top: 0; left: 100%;
  margin-left: 2px;
  border-top: 1px solid var(--cv-bord);
  border-left: 3px solid var(--cv-or);
}
/* Mode sombre : le sous-menu desktop avait fond #fff en dur — texte clair sur
   fond clair devenait illisible. On remet un fond sombre + bordures cohérentes. */
[data-mode="sombre"] .cv-menu .ntc-sous-menu,
[data-mode="sombre"] .ntc-menu-liste .ntc-sous-menu {
  background: #1a2238;
  border-color: var(--cv-bord);
  border-top-color: var(--cv-or);
}
[data-mode="sombre"] .cv-menu .ntc-sous-menu a,
[data-mode="sombre"] .ntc-menu-liste .ntc-sous-menu a {
  color: #e4e7f0;
}
[data-mode="sombre"] .cv-menu .ntc-sous-menu a:hover,
[data-mode="sombre"] .ntc-menu-liste .ntc-sous-menu a:hover {
  background: rgba(126, 178, 232, .14);
  color: #fff;
}
/* Indicateur flèche pour les sous-menus */
.cv-menu .ntc-sous-menu .ntc-has-sub > a::after,
.ntc-menu-liste .ntc-sous-menu .ntc-has-sub > a::after {
  content: ' ›';
  float: right;
  color: var(--cv-texte-pale);
  font-weight: 700;
}

/* --- Recherche header --- */
.cv-recherche {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.10);
  border-radius: var(--cv-rayon);
  padding: 0;
  transition: background var(--cv-trans);
}
.cv-recherche:focus-within { background: #fff; }
.cv-recherche input {
  border: 0;
  background: transparent;
  color: #fff;
  padding: .55rem .85rem;
  font-size: .9rem;
  outline: none;
  width: 180px;
}
.cv-recherche:focus-within input { color: var(--cv-marine); }
.cv-recherche input::placeholder { color: var(--ntc-color-on-title); } /* audit 6 : opaque — toute transparence peut faire chuter le pick (~4,58) sous 4,5 */
.cv-recherche:focus-within input::placeholder { color: var(--cv-texte-pale); }
.cv-recherche button {
  background: transparent;
  border: 0;
  padding: .55rem .85rem;
  color: var(--ntc-color-on-title); /* audit 6 : opaque (85% → 3,83:1 au pire) */
  cursor: pointer;
}
.cv-recherche:focus-within button { color: var(--cv-marine); }
.cv-recherche button:hover { color: var(--cv-or); }

/* --- Chevron mobile (injecté par JS pour déplier les sous-menus) ---
   Caché en desktop, affiché uniquement < 900px via le @media ci-dessous. */
.cv-header-nav .cv-menu-chevron { display: none; }

/* Le burger natif est généré par MenuRender pour TOUS les menus (principal, legal…).
   On le cache toujours dans le footer (menu legal n'a besoin que de la liste plate). */
.ntc-footer .ntc-menu-toggle,
.ntc-footer-legal .ntc-menu-toggle { display: none !important; }
.ntc-footer .ntc-menu-liste,
.ntc-footer-legal .ntc-menu-liste { display: flex !important; }

/* --- Burger natif (MenuRender génère .ntc-menu-toggle) ---
   Caché par défaut, affiché uniquement < 900px. */
.cv-header-nav .ntc-menu-toggle {
  display: none;
  background: transparent; /* audit 7 : le tint 10% éclaircissait le fond sous l'encre pick (3,79:1 à #757575) */
  color: var(--ntc-color-inverse); /* audit 6 : la nav est un fond brand piloté */
  border: 1px solid color-mix(in srgb, var(--ntc-color-inverse) 40%, transparent);
  padding: .55rem .9rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}
.cv-header-nav .ntc-menu-toggle:hover {
  background: transparent;
  border-color: var(--ntc-color-inverse); /* audit 7 : retour tactile par la bordure, pas par un tint sous l'encre */
}

/* ============================================================================
   HERO PLEIN ÉCRAN (override du bloc HERO existant)
   ============================================================================ */
.ntc-hero,
.cv-hero {
  position: relative;
  width: 100%;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
}
.ntc-hero--petite  { min-height: 360px; aspect-ratio: 21/8; }
.ntc-hero--moyenne { min-height: 480px; aspect-ratio: 21/9; max-height: 620px; }
.ntc-hero--grande  { min-height: 560px; aspect-ratio: 16/8; max-height: 720px; }

.ntc-hero-slides { position: relative; width: 100%; height: 100%; }
.ntc-hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 3rem 1.5rem;
  opacity: 0;
  visibility: hidden; /* masquée pour de bon, pas seulement transparente (RGAA 10.8, 04/09/2026) */
  transition: opacity .7s ease-in-out, visibility 0s linear .7s;
  pointer-events: none;
  overflow: hidden;
}
.ntc-hero-slide[aria-current="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
  transition: opacity .7s ease-in-out, visibility 0s;
}
/* Image LCP du hero : un seul <img> pilotable (plus de background-image en doublon)
   → optimisations LCP via fetchpriority, srcset, width/height. */
.ntc-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.ntc-hero-contenu { position: relative; z-index: 2; }
/* Voile dégradé sombre côté gauche pour lisibilité du texte */
.ntc-hero-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(12, 29, 58, .85) 0%,
    rgba(12, 29, 58, .55) 40%,
    rgba(12, 29, 58, .15) 70%,
    transparent 100%);
  pointer-events: none;
  /* Voile entre image (z:0) et contenu (z:2) — sinon image z-index:0 crée
     un stacking context et masque le ::before resté en z-index:auto. */
  z-index: 1;
}
.ntc-hero-contenu {
  position: relative;
  z-index: 2;
  max-width: 540px;
  margin-left: max(2rem, calc((100vw - var(--cv-max-w)) / 2 + 2rem));
  color: #fff;
}
.ntc-hero-titre {
  color: #fff !important; /* audit 8 : hero = IMAGE sous VOILE bleu nuit FIXE → encre FIXE claire (un pick de marque devenait noir sur le voile avec principale blanche) */
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 1.25rem;
  letter-spacing: -.02em;
}
.ntc-hero-sst {
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  color: #fff; /* audit 8 : voile fixe → encre fixe */
  line-height: 1.4;
  margin: 0 0 1.75rem;
}
.ntc-hero-cta {
  display: inline-block;
  background: var(--cv-or);
  color: var(--ntc-color-on-action);
  padding: 1rem 2rem;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--cv-rayon);
  transition: background var(--cv-trans), transform var(--cv-trans);
}
.ntc-hero-cta:hover {
  background: #fff;
  color: var(--cv-marine);
  transform: translateY(-2px);
}

/* Image accessibilité (off-screen) */
.ntc-hero-img-srlite {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0);
}

/* Flèches navigation */
.ntc-hero-prev, .ntc-hero-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.45);
  color: #fff;
  border: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 5;
  transition: background var(--cv-trans);
}
.ntc-hero-prev:hover, .ntc-hero-next:hover { background: var(--cv-or); color: var(--ntc-color-on-action); }
.ntc-hero-prev { left: 1.5rem; }
.ntc-hero-next { right: 1.5rem; }

/* Dots */
.ntc-hero-dots {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .5rem;
  z-index: 5;
}
.ntc-hero-dot {
  width: 24px;               /* zone tactile ≥ 24px (a11y) ; pastille visuelle en ::before */
  height: 24px;
  padding: 0;                /* reset padding par défaut des boutons (cause des ovales) */
  border: 0;
  background: transparent;
  cursor: pointer;
  box-sizing: border-box;
  display: grid;
  place-content: center;
  transition: transform var(--cv-trans);
}
.ntc-hero-dot::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  transition: background var(--cv-trans);
}
.ntc-hero-dot.actif { transform: scale(1.3); }
.ntc-hero-dot.actif::before { background: var(--cv-or); }

/* ============================================================================
   TUILES "ACCÈS RAPIDES" (le bloc en grille 6 colonnes sous le hero)
   ============================================================================ */
/* Blocs d'accueil — version compacte inspirée Aurice */
.ntc-bloc {
  max-width: var(--cv-max-w);
  margin: 2.5rem auto;
  padding: 0 1.5rem;
}
.ntc-bloc h2 {
  font-size: 1.5rem;
  color: var(--cv-marine);
  margin: 0 0 1.5rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--cv-marine);
  display: inline-block;
}
[data-mode="sombre"] .ntc-bloc h2 { color: #fff; border-bottom-color: var(--cv-bleu-clair, #7eb2e8); }

/* =============================================================================
   Mise en page colonne latérale (sidebar droite / gauche, deux colonnes)
   Le moteur de layouts (core) émet les classes .ntc-layout-* / .ntc-sidebar
   quel que soit le thème : ces règles fournissent la grille + le style des blocs.
   ============================================================================= */
.ntc-layout-sidebar-droite,
.ntc-layout-sidebar-gauche {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}
.ntc-layout-sidebar-gauche { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.ntc-layout-deux-colonnes .ntc-colonnes {
  column-count: 2;
  column-gap: 2.5rem;
}
@media (max-width: 800px) {
  .ntc-layout-sidebar-droite,
  .ntc-layout-sidebar-gauche { grid-template-columns: 1fr; }
  .ntc-layout-deux-colonnes .ntc-colonnes { column-count: 1; }
}

/* Blocs dans la colonne : carte sobre, titre compact aligné à gauche.
   Réinitialise le conteneur .ntc-bloc (centré max-width pour l'accueil). */
.ntc-sidebar .ntc-bloc {
  max-width: none;
  margin: 0 0 1.5rem;
  padding: 1.25rem;
  background: var(--cv-fond-alt);
  border: 1px solid var(--cv-bord);
  border-radius: 8px;
}
.ntc-sidebar .ntc-bloc h2 {
  display: block;
  font-size: 1rem;
  margin: 0 0 1rem;
  padding-bottom: .5rem;
  text-align: left;
  border-bottom: 2px solid var(--cv-marine);
}
[data-mode="sombre"] .ntc-sidebar .ntc-bloc h2 { border-bottom-color: var(--cv-bleu-clair, #7eb2e8); }

/* Accès rapides — tuiles compactes */
.ntc-bloc-acces-rapides { margin: 2.5rem auto; }
.ntc-acces-grille {
  list-style: none;
  padding: 0 1.5rem;
  margin: 0 auto;
  max-width: var(--cv-max-w);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}
.ntc-acces-grille li { list-style: none; }
.ntc-acces-grille a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1rem;
  background: var(--cv-fond-carte);
  border: 1px solid var(--cv-bord);
  border-radius: var(--cv-rayon);
  text-decoration: none;
  color: var(--cv-texte);
  gap: .5rem;
  transition: border-color .12s, background .12s;
}
.ntc-acces-grille a:hover {
  border-color: var(--cv-marine);
  background: var(--cv-bleu-pale);
  color: var(--ntc-color-on-link-pale); /* audit 7 : fond pâle de lien piloté */
}
.ntc-acces-grille .ntc-icone {
  font-size: 2rem;
  line-height: 1;
  display: block;
}
.ntc-acces-grille strong {
  font-size: .95rem;
  font-weight: 700;
  color: var(--cv-marine);
}
[data-mode="sombre"] .ntc-acces-grille strong { color: #7eb2e8; }

/* ============================================================================
   ARTICLES / CARTES
   ============================================================================ */
.cv-article,
.cv-page {
  background: var(--cv-fond-carte);
  padding: 2rem;
  border-radius: var(--cv-rayon-grand);
  box-shadow: var(--cv-shadow-card);
  margin-bottom: 2rem;
}
.cv-chapeau {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--cv-texte-doux);
  line-height: 1.5;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--cv-bord);
}
.cv-meta {
  color: var(--cv-texte-pale);
  font-size: .9rem;
}
.cv-une {
  width: 100%;
  border-radius: var(--cv-rayon);
  margin: 1rem 0 1.5rem;
}
.cv-contenu { font-size: 1.02rem; line-height: 1.65; }
.cv-contenu h2,
.cv-contenu h3 { margin-top: 2rem; }

/* Fil d'Ariane */
.cv-fil-ariane {
  font-size: .88rem;
  color: var(--cv-texte-doux);
  margin-bottom: 1.5rem;
}
.cv-fil-ariane a { color: var(--cv-bleu); text-decoration: none; }
.cv-fil-ariane a:hover { text-decoration: underline; }

/* Liste articles (par ArticleRender) — classe réelle : .ntc-liste-articles */
.ntc-liste-articles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
.ntc-liste-articles li {
  background: var(--cv-fond-carte);
  border: 1px solid var(--cv-bord);
  border-radius: var(--cv-rayon);
  overflow: hidden;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  /* Pattern card-link : permet à <h2><a class="ntc-card-lien">::after de
     couvrir toute la carte → clic n'importe où sans englober h2 dans <a> */
  position: relative;
}
.ntc-liste-articles .ntc-card-lien { text-decoration: none; color: inherit; }
.ntc-liste-articles .ntc-card-lien::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
}
.ntc-liste-articles .ntc-card-body { position: relative; z-index: 0; }
.ntc-liste-articles .ntc-card-lien:focus-visible {
  outline: 2px solid var(--cv-marine);
  outline-offset: 2px;
}
.ntc-liste-articles li:hover {
  border-color: var(--cv-marine);
  transform: translateY(-2px);
  box-shadow: var(--cv-shadow-hover);
}
.ntc-liste-articles a {
  display: block;
  text-decoration: none;
  color: var(--cv-texte);
}
.ntc-liste-articles img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.ntc-liste-articles h2 {
  font-size: 1.1rem;
  padding: 1rem 1.25rem 0;
  margin: 0 0 .5rem;
  color: var(--cv-marine);
  line-height: 1.3;
}
.ntc-liste-articles p {
  padding: 0 1.25rem 1.25rem;
  color: var(--cv-texte-pale);
  font-size: .92rem;
  line-height: 1.5;
}
.ntc-epingle {
  display: inline-block;
  color: var(--cv-or);
  font-weight: 700;
  margin-right: .3rem;
}
[data-mode="sombre"] .ntc-liste-articles h2 { color: #7eb2e8; }

/* ============================================================================
   TROMBI ÉLUS
   ============================================================================ */
.cv-trombi {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2rem;
}
.cv-trombi-fiche {
  background: var(--cv-fond-carte);
  border: 1px solid var(--cv-bord);
  border-radius: var(--cv-rayon-grand);
  padding: 1.5rem;
  text-align: center;
  box-shadow: var(--cv-shadow-card);
}
.cv-trombi-fiche img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--cv-or);
  margin-bottom: 1rem;
}
.cv-trombi-fiche h2 { font-size: 1.1rem; margin: .5rem 0 .25rem; color: var(--cv-marine); }
[data-mode="sombre"] .cv-trombi-fiche h2 { color: #fff; }
.cv-trombi-fiche p { margin: .25rem 0; font-size: .9rem; }
.cv-delegations { color: var(--cv-texte-doux); font-style: italic; }

/* ============================================================================
   BOUTONS
   ============================================================================ */
.cv-btn,
.btn-primary, .btn-secondary {
  display: inline-block;
  padding: .75rem 1.5rem;
  border-radius: var(--cv-rayon);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  border: 0;
  cursor: pointer;
  transition: background var(--cv-trans), transform var(--cv-trans);
}
.cv-btn-primaire,
.btn-primary {
  background: var(--cv-marine);
  color: var(--ntc-color-on-title);
}
.cv-btn-primaire:hover,
.btn-primary:hover { background: var(--cv-marine-claire); transform: translateY(-1px);
  color: var(--ntc-color-inverse); /* audit 5 : le survol change de RÔLE (→ brand) → l'encre suit */
}

.cv-btn-secondaire,
.btn-secondary {
  background: transparent;
  border: 2px solid var(--cv-marine);
  color: var(--cv-marine);
}
.cv-btn-secondaire:hover,
.btn-secondary:hover { background: var(--cv-marine); color: var(--ntc-color-on-title); }

[data-mode="sombre"] .cv-btn-secondaire,
[data-mode="sombre"] .btn-secondary { border-color: #7eb2e8; color: #7eb2e8; }
[data-mode="sombre"] .cv-btn-secondaire:hover,
[data-mode="sombre"] .btn-secondary:hover { background: #7eb2e8; color: var(--cv-marine); }

.cv-btn-or {
  background: var(--cv-or);
  color: var(--ntc-color-on-action);
}
.cv-btn-or:hover { background: var(--cv-or-fonce);
  color: var(--ntc-color-on-action-hover);
}

/* ============================================================================
   404
   ============================================================================ */
.cv-404 { text-align: center; padding: 4rem 1.5rem; }
.cv-404 h1 { color: var(--cv-marine); margin-bottom: 1rem; }
.cv-404-recherche {
  display: flex;
  gap: .5rem;
  max-width: 500px;
  margin: 2rem auto;
}
.cv-404-recherche input {
  flex: 1;
  padding: .65rem;
  border: 1px solid var(--cv-bord);
  border-radius: var(--cv-rayon);
  font-size: 1rem;
  background: var(--cv-fond-carte);
  color: var(--cv-texte);
}
.cv-404-liens {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* ============================================================================
   FOOTER (réutilise les classes du module finitions/footer)
   ============================================================================ */
.ntc-footer {
  background: var(--cv-marine);
  color: var(--ntc-color-on-title); /* audit 6 : opaque (85% → 3,83:1 au pire) */
  padding: 3rem 0 0;
  margin-top: 4rem;
}
.ntc-footer-grille {
  max-width: var(--cv-max-w);
  margin: 0 auto;
  padding: 0 1.5rem 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}
.ntc-footer-col h3, .ntc-footer-newsletter h3 {
  color: var(--cv-or);
  font-size: 1rem;
  margin: 0 0 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.ntc-footer a { color: var(--ntc-color-on-title); /* audit 6 : opaque (85% → 3,83:1 au pire) */ text-decoration: none; }
.ntc-footer a:hover { color: var(--cv-or); text-decoration: underline; }
.ntc-footer ul { list-style: none; padding: 0; margin: 0; }
.ntc-footer li { padding: .25rem 0; }

.ntc-footer-legal {
  max-width: var(--cv-max-w);
  margin: 2rem auto 0;
  padding: 1.5rem 1.5rem 1rem;
  border-top: 1px solid rgba(255,255,255,.15);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  font-size: .85rem;
}
.ntc-footer-legal nav ul {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.ntc-footer-credit {
  max-width: var(--cv-max-w);
  margin: .5rem auto 0;
  padding: .85rem 1.5rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .82rem;
  color: var(--ntc-color-on-title); /* audit 6 : fond title piloté */
  border-top: 1px solid color-mix(in srgb, var(--ntc-color-inverse) 10%, transparent);
}
/* Aucune opacité sur ces deux mentions : à .8, le blanc à 65 % retombait sous 4,5:1
   (RGAA 3.2, audit rgaa-checker du 04/09/2026). */
.ntc-footer-propulse { margin-left: auto; }
.ntc-footer-credit a {
  color: inherit;
  border-bottom: 1px dotted currentColor;
}
.ntc-footer-credit a:hover { color: #fff; opacity: 1; }

@media (max-width: 600px) {
  .ntc-footer-credit {
    justify-content: center;
    text-align: center;
  }
  .ntc-footer-propulse { margin-left: 0; }
}

/* ============================================================================
   ALERTE BANDEAU
   ============================================================================ */
.ntc-alerte {
  padding: .85rem 1.5rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .65rem;
  border-bottom: 1px solid;
}
.ntc-alerte-info      { background: var(--cv-bleu-pale); color: var(--ntc-color-on-link-pale); border-color: var(--cv-bleu); }
.ntc-alerte-attention { background: #fff5e0; color: var(--cv-orange); border-color: var(--cv-orange); }
.ntc-alerte-urgent    { background: #fdeaea; color: var(--cv-rouge); border-color: var(--cv-rouge); }

/* Mode sombre : en clair, --cv-bleu-pale est pâle et --cv-marine foncé ; en
   sombre, --cv-bleu-pale devient quasi transparent et --cv-marine reste foncé
   → texte foncé sur fond foncé, illisible. On force des couleurs lisibles. */
[data-mode="sombre"] .ntc-alerte-info      { background: rgba(126,178,232,.16); color: #d6e6f7; border-color: #7eb2e8; }
[data-mode="sombre"] .ntc-alerte-attention { background: rgba(250,194,31,.16); color: #f6cf5e; border-color: #d4a017; }
[data-mode="sombre"] .ntc-alerte-urgent    { background: rgba(206,5,0,.20);  color: #ff9b95; border-color: #ff6b63; }

/* ============================================================================
   BLOCS D'ACCUEIL — versions compactes (copiées d'Aurice, adaptées à Civium)
   ============================================================================ */

/* Bloc « Mise en avant » / « La vie des associations » */
.ntc-bloc-mise-en-avant .ntc-une {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  text-decoration: none;
  color: inherit;
  border-radius: var(--cv-rayon);
  overflow: hidden;
  background: var(--cv-fond-carte);
  border: 1px solid var(--cv-bord);
  margin: 0;
  transition: box-shadow .15s, transform .15s;
}
.ntc-bloc-mise-en-avant .ntc-une:hover {
  box-shadow: var(--cv-shadow-hover);
  transform: translateY(-2px);
}
@media (min-width: 720px) {
  .ntc-bloc-mise-en-avant .ntc-une {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}
.ntc-bloc-mise-en-avant .ntc-une img {
  width: 100%; height: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.ntc-bloc-mise-en-avant .ntc-une-texte {
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.ntc-bloc-mise-en-avant .ntc-une-cat {
  display: inline-block;
  background: var(--cv-marine);
  color: var(--ntc-color-on-title);
  padding: .25rem .75rem;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .75rem;
  align-self: flex-start;
}
.ntc-bloc-mise-en-avant .ntc-une-texte h2 {
  font-size: 1.5rem;
  margin: 0 0 .75rem;
  color: var(--cv-marine);
  border: 0;
  display: block;
  padding: 0;
}
[data-mode="sombre"] .ntc-bloc-mise-en-avant .ntc-une-texte h2 { color: #fff; }
.ntc-bloc-mise-en-avant .ntc-une-texte p {
  color: var(--cv-texte-doux);
  margin: 0;
}

/* Bloc agenda — événements à venir */
.ntc-bloc-agenda-prochains ul,
.ntc-bloc-derniers ul,
.ntc-bloc-agenda ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ntc-bloc-agenda-prochains li { margin-bottom: .75rem; }
.ntc-bloc-agenda-prochains a {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  background: var(--cv-fond-carte);
  border: 1px solid var(--cv-bord);
  border-radius: var(--cv-rayon);
  text-decoration: none;
  color: var(--cv-texte);
  transition: border-color .12s;
}
.ntc-bloc-agenda-prochains a:hover { border-color: var(--cv-marine); }
.ntc-date-bloc {
  flex-shrink: 0;
  width: 60px;
  text-align: center;
  background: var(--cv-marine);
  color: var(--ntc-color-on-title);
  padding: .5rem 0;
  border-radius: var(--cv-rayon);
  line-height: 1;
}
.ntc-date-bloc strong {
  font-size: 1.4rem;
  display: block;
  margin-bottom: .15rem;
}
.ntc-date-bloc small {
  font-size: .75rem;
  text-transform: uppercase;
  opacity: .9;
}
.ntc-event-titre { display: flex; flex-direction: column; }
.ntc-event-titre strong { font-weight: 600; color: var(--cv-marine); }
.ntc-event-titre small { color: var(--cv-texte-pale); font-size: .85rem; }
[data-mode="sombre"] .ntc-event-titre strong { color: #fff; }

/* Lien « voir tout » */
.ntc-lien-plus {
  display: inline-block;
  margin-top: 1rem;
  padding: .75rem 1.25rem;
  border: 1px solid var(--cv-bord);
  border-radius: var(--cv-rayon);
  background: var(--cv-fond-carte);
  color: var(--cv-marine);
  font-weight: 500;
  text-decoration: none;
  transition: border-color .12s, background .12s;
}
.ntc-lien-plus:hover {
  border-color: var(--cv-marine);
  background: var(--cv-bleu-pale);
  color: var(--ntc-color-on-link-pale); /* audit 7 : fond pâle de lien piloté */
}
[data-mode="sombre"] .ntc-lien-plus { color: #7eb2e8; }
[data-mode="sombre"] .ntc-lien-plus:hover { color: var(--ntc-color-on-link-pale); } /* audit 10 : la ré-assertion sombre battait le survol (encre sombre sur pale piloté clair, 1,98) */

/* Grille articles (sur la home — bloc "Dernières actualités") */
.ntc-grille-articles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}
.ntc-grille-articles li {
  background: var(--cv-fond-carte);
  border: 1px solid var(--cv-bord);
  border-radius: var(--cv-rayon);
  overflow: hidden;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  position: relative;       /* card-link pattern */
}
.ntc-grille-articles .ntc-card-lien { text-decoration: none; color: inherit; }
.ntc-grille-articles .ntc-card-lien::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
}
.ntc-grille-articles .ntc-card-body { position: relative; z-index: 0; }
.ntc-grille-articles .ntc-card-lien:focus-visible {
  outline: 2px solid var(--cv-marine);
  outline-offset: 2px;
}
.ntc-grille-articles li:hover {
  border-color: var(--cv-marine);
  transform: translateY(-2px);
  box-shadow: var(--cv-shadow-hover);
}
.ntc-grille-articles a {
  display: block;
  text-decoration: none;
  color: var(--cv-texte);
}
.ntc-grille-articles img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.ntc-grille-articles h3 {
  padding: 1rem 1.25rem 0;
  margin: 0 0 .5rem;
  color: var(--cv-marine);
  font-size: 1.05rem;
}
[data-mode="sombre"] .ntc-grille-articles h3 { color: #7eb2e8; }
.ntc-grille-articles small {
  display: block;
  padding: 0 1.25rem;
  color: var(--cv-texte-pale);
  font-size: .82rem;
}
.ntc-grille-articles p {
  padding: .5rem 1.25rem 1.25rem;
  color: var(--cv-texte-pale);
  font-size: .9rem;
}

/* Bloc PanneauPocket — header + iframe + slider */
.ntc-bloc-pocket {
  background: var(--cv-fond-carte);
  border: 1px solid var(--cv-bord);
  border-radius: var(--cv-rayon);
  overflow: hidden;
}
.ntc-pocket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--cv-bord);
}
.ntc-pocket-header h2 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--cv-marine);
  border: 0;
  padding: 0;
  display: inline-block;
}
[data-mode="sombre"] .ntc-pocket-header h2 { color: #fff; }
.ntc-pocket-lien {
  color: var(--cv-marine);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
}
.ntc-pocket-lien:hover { text-decoration: underline; }
@media (max-width: 600px) { .ntc-pocket-lien-long { display: none; } }
.ntc-pocket-iframe {
  width: 100%;
  height: 500px;
  border: 0;
  display: block;
}

/* Mode slider */
.ntc-pocket-slider {
  position: relative;
  background: var(--cv-fond-carte);
  overflow: hidden;
  min-height: 320px;
}
.ntc-pocket-slides {
  position: relative;
  min-height: 320px;
}
.ntc-pocket-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 0;
  opacity: 0;
  /* Pas seulement transparente : masquée pour de bon. À opacité 0 seule, un outil d'audit
     voit encore du « texte visible masqué aux lecteurs d'écran » (RGAA 10.8, 04/09/2026).
     Même recette que le hero : la visibilité bascule à la fin du fondu. */
  visibility: hidden;
  pointer-events: none;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
.ntc-pocket-slide[aria-current="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
  transition: opacity .4s ease, visibility 0s;
}
.ntc-pocket-slide-photo {
  background: var(--cv-fond-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ntc-pocket-slide-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
.ntc-pocket-slide-body {
  padding: 1.25rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  max-height: 100%;
}
.ntc-pocket-slide-body h3 {
  margin: 0 0 .35rem;
  color: var(--cv-marine);
  font-size: 1.15rem;
}
[data-mode="sombre"] .ntc-pocket-slide-body h3 { color: #7eb2e8; }
.ntc-pocket-slide-body .ntc-pocket-date {
  color: var(--cv-texte-pale);
  font-size: .82rem;
  margin: 0 0 .65rem;
}
.ntc-pocket-slide-body .ntc-pocket-texte {
  color: var(--cv-texte);
  font-size: .95rem;
  line-height: 1.55;
  margin-bottom: .75rem;
}
/* Le texte d'une annonce est désormais structuré (paragraphes, listes — RGAA 8.9 / 9.3,
   04/09/2026) : espacements compacts, puces visibles, pas de marge sous le dernier bloc. */
.ntc-pocket-texte p, .ntc-pocket-texte ul, .ntc-pocket-texte ol { margin: 0 0 .55em; }
.ntc-pocket-texte ul, .ntc-pocket-texte ol { padding-left: 1.2em; }
.ntc-pocket-texte > :last-child { margin-bottom: 0; }
.ntc-pocket-slide:not(:has(.ntc-pocket-slide-photo)) {
  grid-template-columns: minmax(0, 1fr);
}

/* Flèches navigation slider — repris d'Aurice */
.ntc-pocket-prev, .ntc-pocket-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background: rgba(12, 29, 58, .85);
  color: #fff;
  border: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.ntc-pocket-prev:hover, .ntc-pocket-next:hover { background: var(--cv-marine); }
.ntc-pocket-prev { left: .65rem; }
.ntc-pocket-next { right: .65rem; }
/* Grand écran : les flèches ‹ › sont sur les côtés → on réserve la marge pour
   qu'elles ne passent pas par-dessus le texte. À droite sur toutes les diapos ;
   à gauche seulement sans photo (sinon la flèche gauche est posée sur l'image). */
@media (min-width: 701px) {
  .ntc-pocket-slide-body { padding-right: 4.5rem; }
  .ntc-pocket-slide:not(:has(.ntc-pocket-slide-photo)) .ntc-pocket-slide-body {
    padding-left: 4.5rem;
  }
}

/* Compteur "1/10" en pill noire dans le coin haut-droit */
.ntc-pocket-compteur {
  position: absolute;
  top: .65rem;
  right: .65rem;
  z-index: 5;
  background: rgba(0,0,0,.55);
  color: #fff;
  padding: .25rem .65rem;
  border-radius: 4px;
  font-size: .85rem;
  font-weight: 600;
}

/* Dots cliquables en bas (cercle blanc avec outline marine, plein si actif) */
.ntc-pocket-dots {
  position: absolute;
  bottom: .65rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .35rem;
  z-index: 5;
}
.ntc-pocket-dot {
  width: 24px;               /* zone tactile ≥ 24px (a11y) ; pastille visuelle en ::before */
  height: 24px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: grid;
  place-content: center;
  transition: transform .2s;
}
.ntc-pocket-dot::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--cv-marine);
  background: #fff;
  transition: background .2s;
}
.ntc-pocket-dot.actif { transform: scale(1.25); }
.ntc-pocket-dot.actif::before { background: var(--cv-marine); }

/* Lien PDF dans le slide */
.ntc-pocket-pdf {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .75rem;
  color: var(--cv-marine);
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
}
.ntc-pocket-pdf:hover { text-decoration: underline; }
[data-mode="sombre"] .ntc-pocket-pdf { color: #7eb2e8; }

/* Mode grille (cartes côte à côte) */
.ntc-pocket-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  padding: 1.25rem;
}
.ntc-pocket-grille article {
  background: var(--cv-fond-alt);
  border: 1px solid var(--cv-bord);
  border-radius: var(--cv-rayon);
  padding: 1rem;
}
.ntc-pocket-grille h3 {
  margin: 0 0 .35rem;
  font-size: 1rem;
  color: var(--cv-marine);
}
[data-mode="sombre"] .ntc-pocket-grille h3 { color: #7eb2e8; }

/* Responsive slider pocket : empile photo + texte */
@media (max-width: 700px) {
  .ntc-pocket-slide { grid-template-columns: 1fr; }
  .ntc-pocket-slide-photo { max-height: 200px; }
  /* Large marge latérale : le texte passe ENTRE les flèches ‹ › centrées. */
  .ntc-pocket-slide-body { padding: 1rem 3.25rem; }
  .ntc-pocket-slide-body h3 { font-size: 1.05rem; }
  .ntc-pocket-iframe { height: 400px; }
}

/* ============================================================================
   COOKIES — Carte institutionnelle en bas à gauche (style "préférences")
   ============================================================================ */
.ntc-rgpd {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  width: 380px;
  max-width: calc(100vw - 3rem);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  background: #ffffff;
  color: #1a1f2e;
  border-radius: 14px;
  padding: 0;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .25), 0 0 0 1px rgba(0,0,0,.04);
  z-index: 9999;
  border: 0;
  font-family: inherit;
  animation: ntcRgpdSlideIn .35s ease-out;
}
.ntc-rgpd[hidden] { display: none; }
@keyframes ntcRgpdSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
[data-mode="sombre"] .ntc-rgpd {
  background: var(--cv-fond-carte);
  color: var(--cv-texte);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255,255,255,.06);
}

/* Header avec petit bandeau bleu marine décoratif */
.ntc-rgpd h2 {
  font-size: 1.05rem;
  margin: 0;
  padding: 1.15rem 1.5rem .65rem;
  color: var(--cv-marine);
  font-weight: 700;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: .55rem;
  position: relative;
}
.ntc-rgpd h2::before {
  content: '🛡';
  font-size: 1.1rem;
  background: var(--cv-bleu-pale);
  color: var(--ntc-color-on-link-pale);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
[data-mode="sombre"] .ntc-rgpd h2 { color: #7eb2e8; }
[data-mode="sombre"] .ntc-rgpd h2::before { background: rgba(126, 178, 232, .15); color: #7eb2e8; }

/* Texte d'intro */
.ntc-rgpd > p {
  font-size: .88rem;
  margin: 0;
  padding: 0 1.5rem 1rem;
  line-height: 1.5;
  color: #4a5061;
}
[data-mode="sombre"] .ntc-rgpd > p { color: var(--cv-texte-doux); }

/* Encart "Vos choix par finalité" — sobre, sans fond coloré */
.ntc-rgpd .rgpd-finalites {
  margin: 0 1.5rem 1rem;
  padding: .75rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fafbfc;
}
[data-mode="sombre"] .ntc-rgpd .rgpd-finalites {
  background: rgba(255,255,255,.04);
  border-color: var(--cv-bord);
}
.ntc-rgpd .rgpd-finalites legend {
  font-weight: 700;
  padding: 0 .5rem;
  font-size: .82rem;
  color: var(--cv-marine);
  text-transform: uppercase;
  letter-spacing: .04em;
}
[data-mode="sombre"] .ntc-rgpd .rgpd-finalites legend { color: #7eb2e8; }
.ntc-rgpd .rgpd-finalite {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: .65rem;
  padding: .55rem 0;
  font-size: .84rem;
  border-bottom: 1px solid #eef1f6;
  align-items: start;
}
[data-mode="sombre"] .ntc-rgpd .rgpd-finalite { border-bottom-color: var(--cv-bord); }
.ntc-rgpd .rgpd-finalite:last-child { border-bottom: 0; }
.ntc-rgpd .rgpd-finalite input[type="checkbox"] {
  margin-top: 2px;
  width: 16px; height: 16px;
  accent-color: var(--cv-marine);
}
.ntc-rgpd .rgpd-finalite strong {
  color: var(--cv-marine);
  display: block;
  margin-bottom: 1px;
  font-size: .85rem;
  font-weight: 600;
}
[data-mode="sombre"] .ntc-rgpd .rgpd-finalite strong { color: #7eb2e8; }

/* Footer avec border-top — 3 boutons empilés en colonne ou côte à côte */
.ntc-rgpd .rgpd-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  margin: 0;
  padding: 1rem 1.5rem;
  background: transparent;
  border-top: 1px solid #e2e8f0;
}
[data-mode="sombre"] .ntc-rgpd .rgpd-actions { border-top-color: var(--cv-bord); }
.ntc-rgpd .rgpd-actions button {
  font-size: .85rem;
  padding: .7rem .85rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  border: 1.5px solid #d6dbe3;
  background: #ffffff;
  color: #1a1f2e;
  transition: all .15s;
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-mode="sombre"] .ntc-rgpd .rgpd-actions button {
  background: rgba(255,255,255,.06);
  border-color: var(--cv-bord-fort);
  color: var(--cv-texte);
}
.ntc-rgpd .rgpd-actions button:hover {
  border-color: var(--cv-marine);
  color: var(--cv-marine);
}
/* "Tout accepter" prend toute la largeur sur la 2e ligne, en plein marine */
.ntc-rgpd .rgpd-actions button.btn-primary:not(#rgpd-enregistrer) {
  background: var(--cv-marine);
  color: var(--ntc-color-on-title);
  border-color: var(--cv-marine);
  grid-column: 1 / -1;
}
.ntc-rgpd .rgpd-actions button.btn-primary:not(#rgpd-enregistrer):hover {
  background: var(--cv-marine-claire);
  color: var(--ntc-color-inverse); /* audit 5 : le survol change de RÔLE (→ brand) → l'encre suit */
}
/* "Enregistrer mes choix" (caché par défaut, apparaît si Paramétrer cliqué) */
.ntc-rgpd #rgpd-enregistrer {
  grid-column: 1 / -1;
  background: var(--cv-marine);
  color: var(--ntc-color-on-title);
  border-color: var(--cv-marine);
}
.ntc-rgpd #rgpd-enregistrer:hover { background: var(--cv-marine-claire);
  color: var(--ntc-color-inverse); /* audit 5 : le survol change de RÔLE (→ brand) → l'encre suit */
}

/* Lien savoir plus en bas, ultra-discret */
.ntc-rgpd .rgpd-mention {
  font-size: .78rem;
  color: var(--cv-texte-pale);
  text-align: center;
  margin: 0;
  padding: .65rem 1.5rem 1rem;
  border-top: 1px solid #eef1f6;
}
[data-mode="sombre"] .ntc-rgpd .rgpd-mention { border-top-color: var(--cv-bord); color: var(--cv-texte-pale); }
.ntc-rgpd .rgpd-mention a {
  color: var(--cv-marine);
  text-decoration: underline;
  text-decoration-color: rgba(106, 140, 217, .35);
  text-underline-offset: 2px;
}
.ntc-rgpd .rgpd-mention a:hover { text-decoration-color: var(--cv-marine); }
[data-mode="sombre"] .ntc-rgpd .rgpd-mention a { color: #7eb2e8; }

@media (max-width: 500px) {
  .ntc-rgpd {
    left: .75rem;
    right: .75rem;
    bottom: .75rem;
    width: auto;
    max-width: none;
  }
  .ntc-rgpd h2 { font-size: 1rem; padding: 1rem 1.25rem .5rem; }
  .ntc-rgpd > p { padding: 0 1.25rem 1rem; }
  .ntc-rgpd .rgpd-finalites { margin: 0 1.25rem 1rem; }
  .ntc-rgpd .rgpd-actions { padding: 1rem 1.25rem; grid-template-columns: 1fr; }
  .ntc-rgpd .rgpd-actions button.btn-primary:not(#rgpd-enregistrer) { grid-column: 1; }
  .ntc-rgpd .rgpd-mention { padding: .65rem 1.25rem 1rem; }
}

/* ============================================================================
   ADMIN FRONTBAR — barre admin flottante en bas (.ntc-frontbar, classe réelle)
   ============================================================================ */
.ntc-frontbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--cv-marine);
  color: var(--ntc-color-on-title);
  z-index: 9000;
  font-size: .85rem;
  box-shadow: 0 -4px 16px rgba(0,0,0,.30);
  border-top: 2px solid var(--cv-or);
}
.ntc-frontbar-inner {
  max-width: var(--cv-max-w);
  margin: 0 auto;
  padding: .5rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.ntc-frontbar-link {
  color: var(--ntc-color-on-title) !important; /* audit 7 : fond piloté */
  text-decoration: none !important;
  padding: .35rem .75rem;
  border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--ntc-color-on-title) 35%, transparent);
  background: transparent; /* audit 7 : plus de tint sous l'encre pick */
  transition: background .12s;
  font-weight: 500;
}
.ntc-frontbar-link:hover { background: transparent; border-color: var(--ntc-color-on-title); }
.ntc-frontbar-edit { background: rgba(250, 194, 31, .18); border-color: rgba(250, 194, 31, .45); }
.ntc-frontbar-edit:hover { background: rgba(250, 194, 31, .30); }
.ntc-frontbar-user {
  margin-left: auto;
  opacity: .9;
  color: var(--ntc-color-on-title); /* audit 7 : la frontbar est un fond TITLE piloté (inverse=pick(brand) y donnait 2,48:1) */
}
.ntc-frontbar-user small { color: var(--ntc-color-on-title); } /* audit 7 : fond title piloté — opaque */
.ntc-frontbar-logout {
  color: var(--cv-or) !important;
  border-color: rgba(250, 194, 31, .35) !important;
}

/* Réserve la place pour la frontbar en bas du body (admin connecté) */
body:has(.ntc-frontbar) { padding-bottom: 56px; }

/* ============================================================================
   PARTAGE SOCIAL — boutons Facebook/X/mail/copier sous les articles
   ============================================================================ */
.ntc-partage {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 2rem 0;
  padding: 1.25rem 0;
  border-top: 1px solid var(--cv-bord);
  border-bottom: 1px solid var(--cv-bord);
}
.ntc-partage > * {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem 1rem;
  background: var(--cv-fond-alt);
  color: var(--cv-texte);
  text-decoration: none;
  border-radius: var(--cv-rayon);
  font-size: .9rem;
  font-weight: 500;
  border: 1px solid var(--cv-bord);
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, border-color .12s, color .12s;
}
.ntc-partage > *:hover {
  background: var(--cv-bleu-pale);
  color: var(--ntc-color-on-link-pale);
  border-color: var(--cv-marine);
}
[data-mode="sombre"] .ntc-partage > *:hover { color: #7eb2e8; }
.ntc-partage-fb::before      { content: '📘'; }
.ntc-partage-twitter::before { content: '✕';  font-weight: 700; }
.ntc-partage-mail::before    { content: '✉️'; }
.ntc-partage-copier::before  { content: '🔗'; }

/* ============================================================================
   PAGINATION compacte (articles, catégories, etc.)
   ============================================================================ */
.ntc-pagination, .pagination {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  align-items: center;
  margin: 2rem 0 1rem;
  justify-content: center;
  list-style: none;
  padding: 0;
}
.ntc-pagination a,
.ntc-pagination .pagi-courante,
.ntc-pagination .pagi-ellipse,
.pagination a,
.pagination .actif {
  min-width: 38px;
  height: 38px;
  padding: 0 .65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cv-rayon);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--cv-bord);
  background: var(--cv-fond-carte);
  color: var(--cv-marine);
  transition: all .15s ease;
}
.ntc-pagination a:hover,
.pagination a:hover {
  background: var(--cv-marine);
  color: var(--ntc-color-on-title);
  border-color: var(--cv-marine);
}
.ntc-pagination .pagi-courante,
.pagination .actif {
  background: var(--cv-marine);
  color: var(--ntc-color-on-title);
  border-color: var(--cv-marine);
  font-weight: 700;
  pointer-events: none;
}
.ntc-pagination .pagi-ellipse {
  border: 0;
  background: transparent;
  color: var(--cv-texte-pale);
  pointer-events: none;
}
[data-mode="sombre"] .ntc-pagination a,
[data-mode="sombre"] .pagination a { color: #7eb2e8; }

/* Force des classes formulaires (module form-render) : on les style aussi
   au cas où le wrapper .ntc-form serait absent — wrap implicite par les inputs */
form.ntc-form label,
.ntc-form > label {
  display: block !important;
  margin: 1rem 0 .35rem;
}

/* ============================================================================
   DOCUMENTS — liste, doc-télécharger pill
   ============================================================================ */
.ntc-liste-docs {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--cv-fond-carte);
  border: 1px solid var(--cv-bord);
  border-radius: var(--cv-rayon);
  overflow: hidden;
}
.ntc-liste-docs li {
  padding: .85rem 1.25rem;
  border-bottom: 1px solid var(--cv-bord);
}
.ntc-liste-docs li:last-child { border-bottom: 0; }
.ntc-liste-docs a {
  text-decoration: none;
  font-weight: 500;
  color: var(--cv-marine);
}
.ntc-liste-docs a:hover { text-decoration: underline; }
[data-mode="sombre"] .ntc-liste-docs a { color: #7eb2e8; }

.ntc-doc {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none !important;
  padding: .75rem 1rem;
  border: 1px solid var(--cv-bord);
  border-radius: var(--cv-rayon);
  color: var(--cv-texte);
  margin: .5rem 0;
  background: var(--cv-fond-carte);
  transition: border-color .12s, background .12s;
}
.ntc-doc:hover { border-color: var(--cv-marine); background: var(--cv-bleu-pale);
  color: var(--ntc-color-on-link-pale); /* audit 7 : fond pâle de lien piloté */
}
.ntc-doc-icone {
  background: var(--cv-rouge);
  color: var(--ntc-color-on-urgent);
  padding: .4rem .65rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: .8rem;
}
.ntc-doc-corps { display: flex; flex-direction: column; }
.ntc-doc-corps small { color: var(--cv-texte-pale); font-size: .82rem; }

/* Filtres documents (sélecteurs + barre recherche) */
.ntc-doc-filtres, .documents-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: center;
  margin: 1rem 0 1.5rem;
}
.ntc-doc-filtres select, .documents-filtres select,
.ntc-doc-filtres input[type="search"], .documents-filtres input[type="search"] {
  padding: .65rem .85rem;
  border: 1px solid var(--cv-bord);
  border-radius: var(--cv-rayon);
  background: var(--cv-fond-carte);
  color: var(--cv-texte);
  font-size: .95rem;
}

/* ============================================================================
   TROMBI Élus (déjà présent, on rationalise)
   ============================================================================ */
.ntc-trombi {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
}
.ntc-trombi-fiche {
  background: var(--cv-fond-carte);
  border: 1px solid var(--cv-bord);
  border-radius: var(--cv-rayon);
  overflow: hidden;
  text-align: center;
  padding-bottom: 1.25rem;
}
.ntc-trombi-fiche img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.ntc-trombi-fiche h2 {
  font-size: 1.05rem;
  margin: 1rem .75rem .25rem;
  color: var(--cv-marine);
}
.ntc-trombi-fiche p { margin: .25rem .75rem; font-size: .9rem; color: var(--cv-texte-pale); }
[data-mode="sombre"] .ntc-trombi-fiche h2 { color: #7eb2e8; }

/* ============================================================================
   FORMULAIRES PUBLICS (.ntc-form) — contact, demandes…
   ============================================================================ */
.ntc-form {
  background: var(--cv-fond-carte);
  border: 1px solid var(--cv-bord);
  border-radius: var(--cv-rayon);
  padding: 1.5rem 2rem;
  max-width: 700px;
}
.ntc-form label {
  display: block;
  margin: 1rem 0 .35rem;
  font-weight: 500;
  color: var(--cv-texte);
}
.ntc-form input,
.ntc-form textarea,
.ntc-form select {
  width: 100%;
  padding: .65rem .85rem;
  border: 1px solid var(--cv-bord-fort, var(--cv-bord));
  border-radius: var(--cv-rayon);
  background: var(--cv-fond);
  color: var(--cv-texte);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color .12s, box-shadow .12s;
}
.ntc-form input[type="checkbox"],
.ntc-form input[type="radio"] {
  width: auto;
  margin-right: .35rem;
}
.ntc-form input:focus,
.ntc-form textarea:focus,
.ntc-form select:focus {
  outline: none;
  border-color: var(--cv-marine);
  box-shadow: 0 0 0 3px rgba(106, 140, 217, .20);
}
.ntc-form textarea { min-height: 140px; resize: vertical; }
.ntc-form button[type="submit"] {
  font-size: 1rem;
  padding: .75rem 1.75rem;
  background: var(--cv-marine);
  color: var(--ntc-color-on-title);
  border: 0;
  border-radius: var(--cv-rayon);
  cursor: pointer;
  margin-top: 1rem;
  font-weight: 600;
  transition: background .12s;
}
.ntc-form button[type="submit"]:hover { background: var(--cv-marine-claire);
  color: var(--ntc-color-inverse); /* audit 5 : le survol change de RÔLE (→ brand) → l'encre suit */
}
.ntc-form .ntc-req { color: var(--cv-rouge); }
.ntc-form small { color: var(--cv-texte-pale); font-size: .82rem; display: block; margin-top: .25rem; }

[data-mode="sombre"] .ntc-form input,
[data-mode="sombre"] .ntc-form textarea,
[data-mode="sombre"] .ntc-form select {
  background: var(--cv-fond-alt);
  border-color: var(--cv-bord);
}

/* ============================================================================
   FICHES PUBLIQUES (associations, écoles, salles, sports, cultes…)
   ============================================================================ */
.ntc-fiche, .ntc-fiche-liste {
  background: var(--cv-fond-carte);
  border: 1px solid var(--cv-bord);
  border-radius: var(--cv-rayon-grand);
  padding: 1.75rem 2rem;
  margin-bottom: 2rem;
}
.ntc-fiche-liste h1 {
  margin: 0 0 1rem;
  color: var(--cv-marine);
}
.ntc-fiche-liste .ntc-intro {
  font-size: 1.05rem;
  color: var(--cv-texte-doux);
  margin-bottom: 1.5rem;
}
/* Grille des fiches en listing (.ntc-grille-fiches) + cards (.ntc-fiche-card) */
.ntc-grille-fiches,
.ntc-fiches-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
  list-style: none;
  padding: 0;
}
.ntc-fiche-card {
  display: block;
  background: var(--cv-fond-carte);
  border: 1px solid var(--cv-bord);
  border-radius: var(--cv-rayon-grand);
  padding: 1rem;
  text-decoration: none;
  color: var(--cv-texte);
  transition: all .15s;
}
.ntc-fiche-card:hover {
  border-color: var(--cv-marine);
  box-shadow: var(--cv-shadow-hover);
  transform: translateY(-2px);
}
.ntc-fiche-card img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: var(--cv-rayon);
  margin-bottom: .65rem;
}
.ntc-fiche-card-noimg {
  width: 100%;
  height: 140px;
  background: var(--cv-fond-alt);
  border-radius: var(--cv-rayon);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  margin-bottom: .65rem;
}
.ntc-fiche-card h3 {
  margin: 0 0 .25rem;
  color: var(--cv-marine);
  font-size: 1.05rem;
}
.ntc-fiche-card p {
  margin: 0;
  color: var(--cv-texte-pale);
  font-size: .9rem;
  line-height: 1.4;
}
[data-mode="sombre"] .ntc-fiche-card { color: var(--cv-texte); }
[data-mode="sombre"] .ntc-fiche-card h3 { color: #7eb2e8; }

/* Listes d'infos (contact, bureau, chiffres, docs) dans les fiches détaillées */
.ntc-fiche-bureau,
.ntc-fiche-contact,
.ntc-fiche-chiffres,
.ntc-fiche-docs {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ntc-fiche-bureau li,
.ntc-fiche-contact li,
.ntc-fiche-chiffres li,
.ntc-fiche-docs li {
  padding: .5rem 0;
  border-bottom: 1px solid var(--cv-bord);
}
.ntc-fiche-bureau li:last-child,
.ntc-fiche-contact li:last-child,
.ntc-fiche-chiffres li:last-child,
.ntc-fiche-docs li:last-child { border-bottom: 0; }
.ntc-fiche-docs a {
  color: var(--cv-marine);
  text-decoration: none;
  font-weight: 500;
}
.ntc-fiche-docs a:hover { text-decoration: underline; }
[data-mode="sombre"] .ntc-fiche-docs a { color: #7eb2e8; }

/* Tableaux tarifs et classes (école) */
.ntc-tarifs,
.ntc-classes {
  width: 100%;
  border-collapse: collapse;
  margin: .5rem 0;
}
.ntc-tarifs th,
.ntc-tarifs td,
.ntc-classes th,
.ntc-classes td {
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--cv-bord);
  text-align: left;
}
.ntc-tarifs th { font-weight: 600; color: var(--cv-texte); }
.ntc-tarifs td { text-align: right; font-weight: 600; color: var(--cv-marine); }
.ntc-classes th { background: var(--cv-bleu-pale); color: var(--ntc-color-on-link-pale); font-weight: 700; }
[data-mode="sombre"] .ntc-tarifs td,
[data-mode="sombre"] .ntc-classes th { color: #7eb2e8; }

/* Encart "à louer" / "à louer par habitants" */
.ntc-fiche-location {
  background: var(--cv-or-pale, #fff8e0);
  border: 1px solid rgba(212, 160, 23, .4);
  padding: 1rem 1.25rem;
  border-radius: var(--cv-rayon);
  margin: 1rem 0;
  color: var(--ntc-color-on-action-pale);
}

/* Titre de catégorie (ex: "Chapelles", "Églises") */
.ntc-cat-titre {
  font-size: 1.4rem;
  color: var(--cv-marine);
  margin: 2rem 0 1rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--cv-marine);
}
[data-mode="sombre"] .ntc-cat-titre { color: #7eb2e8; border-bottom-color: #7eb2e8; }

/* En-tête fiche détaillée */
.ntc-fiche-header {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--cv-bord);
}
.ntc-fiche-header h1 {
  margin: 0;
  font-size: 1.8rem;
  color: var(--cv-marine);
}
[data-mode="sombre"] .ntc-fiche-header h1 { color: #fff; }
.ntc-fiche-logo {
  width: 100px;
  height: 100px;
  object-fit: contain;
  border-radius: var(--cv-rayon);
  background: var(--cv-fond-alt);
  padding: .5rem;
  flex-shrink: 0;
}
.ntc-fiche-categorie {
  display: inline-block;
  background: var(--cv-marine);
  color: var(--ntc-color-on-title);
  padding: .25rem .75rem;
  border-radius: 100px;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .5rem;
}
.ntc-fiche-chapeau {
  font-size: 1.1rem;
  color: var(--cv-texte-doux);
  margin: .5rem 0 0;
}
.ntc-fiche-photo {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: var(--cv-rayon);
  margin-bottom: 1.5rem;
}
.ntc-fiche-corps { line-height: 1.65; }
.ntc-fiche-description {
  font-size: 1.05rem;
  margin-bottom: 1.5rem;
}
.ntc-fiche-section {
  margin: 1.5rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cv-bord);
}
.ntc-fiche-section h2 {
  font-size: 1.2rem;
  color: var(--cv-marine);
  margin: 0 0 .75rem;
}
[data-mode="sombre"] .ntc-fiche-section h2 { color: #7eb2e8; }

/* Bouton retour vers la liste */
.ntc-fiche-retour {
  display: inline-block;
  margin-bottom: 1rem;
  color: var(--cv-marine);
  text-decoration: none;
  font-weight: 500;
}
.ntc-fiche-retour:hover { text-decoration: underline; }

/* ============================================================================
   AGENDA — calendrier mensuel + liste + onglets (classes ntc-*)
   ============================================================================ */
.ntc-agenda { margin: 1.5rem 0; }
.ntc-agenda-vues {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.ntc-agenda-vues a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .65rem 1.1rem;
  border: 1px solid var(--cv-bord);
  border-radius: var(--cv-rayon);
  text-decoration: none;
  color: var(--cv-texte);
  font-size: .92rem;
  background: var(--cv-fond-carte);
  transition: background .12s, border-color .12s, color .12s;
}
.ntc-agenda-vues a:hover {
  background: var(--cv-bleu-pale);
  border-color: var(--cv-marine);
  color: var(--ntc-color-on-link-pale);
}
.ntc-agenda-vues a.actif,
.ntc-agenda-vues a[aria-current="page"] {
  background: var(--cv-marine);
  color: var(--ntc-color-on-title);
  border-color: var(--cv-marine);
}

.ntc-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.5rem 0 1rem;
}
.ntc-cal-nav h2 {
  margin: 0;
  font-size: 1.4rem;
  text-align: center;
  flex: 1;
  border: 0;
  padding: 0;
  color: var(--cv-marine);
}
[data-mode="sombre"] .ntc-cal-nav h2 { color: #fff; }
.ntc-cal-nav a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem 1rem;
  border: 1px solid var(--cv-bord);
  border-radius: var(--cv-rayon);
  text-decoration: none;
  color: var(--cv-texte);
  background: var(--cv-fond-carte);
  font-weight: 500;
}
.ntc-cal-nav a:hover { border-color: var(--cv-marine); color: var(--cv-marine); }

.ntc-cal-grille {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--cv-bord);
  border: 1px solid var(--cv-bord);
  border-radius: var(--cv-rayon);
  overflow: hidden;
}
.ntc-cal-th {
  background: var(--cv-marine);
  color: var(--ntc-color-on-title);
  padding: .5rem;
  text-align: center;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ntc-cal-vide {
  background: var(--cv-fond-alt);
  min-height: 90px;
}
.ntc-cal-jour {
  background: var(--cv-fond-carte);
  min-height: 90px;
  padding: .45rem .5rem;
  position: relative;
  font-size: .85rem;
  overflow: hidden;
}
.ntc-cal-num {
  color: var(--cv-texte-pale);
  font-size: .78rem;
  font-weight: 600;
}
.ntc-cal-jour.ntc-aujourdhui {
  outline: 2px solid var(--cv-or);
  outline-offset: -2px;
}
.ntc-cal-jour ul {
  list-style: none;
  padding: 0;
  margin: .25rem 0 0;
}
.ntc-cal-jour li { margin-bottom: .15rem; }
.ntc-cal-jour a {
  display: block;
  font-size: .72rem;
  text-decoration: none;
  color: var(--ntc-color-on-link-pale);
  padding: .1rem .25rem;
  background: var(--cv-bleu-pale);
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ntc-cal-jour a:hover { background: var(--cv-marine); color: var(--ntc-color-on-title); }

/* Mobile : repli en liste sous le calendrier */
.ntc-cal-liste-mobile { display: none; }
@media (max-width: 700px) {
  /* Grille masquée en mobile : sélecteur SCOPÉ .ntc-agenda (0,2,0) pour battre le
     `.ntc-cal-grille{display:grid}` injecté par AgendaRender (0,1,0, source plus tardive),
     sans !important. Idem liste, par cohérence. Cf. 592739d4 (posé d'abord sur atelier). */
  .ntc-agenda .ntc-cal-grille { display: none; }
  .ntc-agenda .ntc-cal-liste-mobile { display: block; }
  .ntc-cal-ligne {
    display: flex;
    gap: .75rem;
    align-items: center;
    padding: .8rem 1rem;
    background: var(--cv-fond-carte);
    border: 1px solid var(--cv-bord);
    border-radius: var(--cv-rayon);
    text-decoration: none;
    color: var(--cv-texte);
    margin-bottom: .5rem;
  }
  .ntc-cal-ligne:hover { border-color: var(--cv-marine); }
}

.ntc-agenda-liste {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ntc-agenda-liste li { margin-bottom: .75rem; }
.ntc-agenda-liste a {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  background: var(--cv-fond-carte);
  border: 1px solid var(--cv-bord);
  border-radius: var(--cv-rayon);
  text-decoration: none;
  color: var(--cv-texte);
  transition: border-color .12s;
}
.ntc-agenda-liste a:hover { border-color: var(--cv-marine); }

.ntc-agenda-bascule {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.ntc-agenda-bascule a {
  display: inline-block;
  padding: .65rem 1.1rem;
  text-decoration: none;
  border-radius: var(--cv-rayon);
  border: 1px solid var(--cv-bord);
  color: var(--cv-texte);
  background: var(--cv-fond-carte);
  font-weight: 500;
  font-size: .92rem;
  transition: background .12s, border-color .12s, color .12s;
}
.ntc-agenda-bascule a:hover {
  border-color: var(--cv-marine);
  color: var(--ntc-color-on-link-pale);
  background: var(--cv-bleu-pale);
}
.ntc-agenda-bascule a.actif {
  background: var(--cv-marine);
  color: var(--ntc-color-on-title);
  border-color: var(--cv-marine);
}

/* ============================================================================
   GALERIES d'images dans les articles (grille thumbnails)
   ============================================================================ */
.cv-article .ntc-galerie,
.cv-page .ntc-galerie,
.cv-contenu .ntc-galerie,
.ntc-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .65rem;
  margin: 1.25rem 0;
  list-style: none;
  padding: 0;
}
.ntc-galerie-item {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--cv-rayon);
  background: var(--cv-fond-alt);
  aspect-ratio: 1 / 1;
  cursor: zoom-in;
  transition: transform .2s ease;
}
.ntc-galerie-item:hover { transform: scale(1.02); }
.ntc-galerie-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Variante "vignettes" (utilisée sur les fiches annuaires : <a> direct sans
   .ntc-galerie-item). On EXCLUT explicitement les items d'article — sinon,
   à spécificité égale, cette règle gagnait par ordre déclaratif et imposait
   height: 160px aux articles, créant un grand vide en mobile (item carré
   414×414 vs image 414×160). */
.ntc-galerie a { display: block; }
.ntc-galerie > a:not(.ntc-galerie-item) img {
  width: 100%; height: 160px; object-fit: cover;
  border-radius: var(--cv-rayon); transition: transform .15s;
}
.ntc-galerie > a:not(.ntc-galerie-item):hover img { transform: scale(1.03); }

/* ============================================================================
   LIGHTBOX images (galeries + images isolées) — partagé avec thème Aurice
   ============================================================================ */
.ntc-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 2rem;
  animation: ntcLightboxIn .2s ease;
}
.ntc-lightbox.actif { display: flex; }
@keyframes ntcLightboxIn { from { opacity: 0; } to { opacity: 1; } }
.ntc-lightbox-img {
  max-width: 95vw;
  max-height: 85vh;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  user-select: none;
}
.ntc-lightbox-legende {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  background: rgba(0,0,0,.6);
  padding: .5rem 1rem;
  border-radius: 4px;
  max-width: 90vw;
  text-align: center;
  font-size: .9rem;
}
.ntc-lightbox-fermer,
.ntc-lightbox-prev,
.ntc-lightbox-next {
  position: absolute;
  background: rgba(255,255,255,.15);
  color: #fff;
  border: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.ntc-lightbox-fermer { top: 1.5rem; right: 1.5rem; }
.ntc-lightbox-prev   { top: 50%; left: 1.5rem; transform: translateY(-50%); }
.ntc-lightbox-next   { top: 50%; right: 1.5rem; transform: translateY(-50%); }
.ntc-lightbox-fermer:hover,
.ntc-lightbox-prev:hover,
.ntc-lightbox-next:hover { background: rgba(255,255,255,.3); }
.ntc-lightbox-compteur {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  color: #fff;
  background: rgba(0,0,0,.5);
  padding: .35rem .85rem;
  border-radius: 4px;
  font-size: .9rem;
}
@media (max-width: 700px) {
  .ntc-lightbox { padding: 1rem; }
  .ntc-lightbox-fermer, .ntc-lightbox-prev, .ntc-lightbox-next { width: 40px; height: 40px; font-size: 1.25rem; }
}

/* Wrapper d'image cliquable lightbox — curseur zoom + zoom léger au hover */
.ntc-img-lightbox-wrap {
  display: inline-block;
  cursor: zoom-in;
  border-radius: 4px;
  overflow: hidden;
  transition: transform .15s;
}
.ntc-img-lightbox-wrap img {
  display: block;
  transition: transform .25s;
}
.ntc-img-lightbox-wrap:hover img { transform: scale(1.03); }
.ntc-img-lightbox-wrap:focus-visible {
  outline: 3px solid var(--cv-or);
  outline-offset: 2px;
}
.ntc-une.ntc-img-lightbox-wrap img,
.cv-une.ntc-img-lightbox-wrap img,
img.ntc-une,
img.cv-une { cursor: zoom-in; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 900px) {
  /* Burger sorti du flux et positionné à l'extrême droite de la 1re ligne.
     En mode fermé, la 2e barre nav disparaît visuellement (background
     transparent, padding 0). Quand le menu s'ouvre (aria-expanded="true"),
     :has() restaure le fond pour porter la liste dépliée. */
  .cv-header { position: relative; }

  .cv-header-top-inner {
    gap: .75rem;
    /* Réserve la place du burger absolu (~48px + 16px de droite) PLUS un écart
       pour que le CTA ne colle/chevauche pas le burger. */
    padding-right: 5rem;
  }
  .cv-titre strong { font-size: .9rem; letter-spacing: 1px; }
  .cv-titre small { font-size: .65rem; }
  .cv-header-liens { gap: .5rem; font-size: .82rem; }
  /* En mobile : on cache liens utiles + mode toggle, mais on GARDE le CTA
     (version compacte) entre la marque et le burger absolu. */
  .cv-lien-util,
  .cv-mode-toggle { display: none; }
  .cv-header-liens .cv-cta-citoyen {
    padding: .4rem .6rem;
    font-size: .58rem;
    letter-spacing: .3px;
    white-space: nowrap;
  }
  /* Sous 380px : plus de place pour le CTA en barre → on s'appuie sur la
     reprise pleine largeur dans le menu déplié (.cv-cta-drawer). */
  @media (max-width: 380px) {
    .cv-header-liens .cv-cta-citoyen { display: none; }
  }

  /* Reprise du CTA en tête du menu mobile : visible uniquement burger ouvert */
  /* Bannière pleine largeur en tête du menu déplié (flex:0 0 100% → ligne propre,
     le <nav> du menu revient sur la ligne suivante). */
  .cv-header-nav:has(.ntc-menu-toggle[aria-expanded="true"]) .ntc-menu-toggle,
  .cv-header-nav:has(.ntc-menu[aria-expanded="true"]) .ntc-menu-toggle {
    background: transparent; /* audit 6 : pastille translucide → fond éclairci sous l'encre pick */
    border-color: currentColor;
  }
  .cv-header-nav:has(.ntc-menu-toggle[aria-expanded="true"]) .cv-cta-drawer,
  .cv-header-nav:has(.ntc-menu[aria-expanded="true"]) .cv-cta-drawer {
    display: block;
    flex: 0 0 100%;
    margin: 0 0 .25rem;
    text-align: center;
    padding: .95rem 1rem;
    font-size: .85rem;
    letter-spacing: 1px;
    border-radius: 0;
  }

  .cv-header-nav { background: transparent; border-top: 0; }
  .cv-header-nav-inner { flex-wrap: wrap; padding: 0; }
  /* Quand le menu est déplié, on restaure le fond bleu sur la 2e barre
     pour porter la liste. Supporté par Chrome 105+, Safari 15.4+, FF 121+ */
  .cv-header-nav:has(.ntc-menu-toggle[aria-expanded="true"]),
  .cv-header-nav:has(.ntc-menu[aria-expanded="true"]) {
    background: var(--cv-marine-claire);
    border-top: 1px solid color-mix(in srgb, var(--ntc-color-inverse) 10%, transparent);
  color: var(--ntc-color-inverse); /* audit 5 : le survol change de RÔLE (→ brand) → l'encre suit */
}

  /* Burger absolu top-right, au-dessus du top bar */
  .cv-header-nav .ntc-menu-toggle {
    position: absolute;
    top: 1.25rem;
    right: 1rem;
    z-index: 11;
  }
  /* Le burger natif .ntc-menu-toggle prend le relais — voir bloc dédié plus haut */
  .cv-menu .ntc-sous-menu,
  .ntc-menu-liste .ntc-sous-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-left: 3px solid var(--cv-or);
    margin-left: 1rem;
    background: transparent;
  }
  .cv-menu .ntc-sous-menu a,
  .ntc-menu-liste .ntc-sous-menu a {
    color: var(--ntc-color-on-title); /* audit 6 : opaque (85% → 3,83:1 au pire) */
    padding: .75rem 1rem;
  }

  /* Recherche masquée en mobile (esthétique pas optimale dans le drawer) */
  .cv-header-nav .cv-recherche { display: none; }

  .cv-header-nav .ntc-menu-toggle { display: inline-flex; }

  /* Le menu UL se cache par défaut sous le burger en mobile,
     s'affiche quand aria-expanded="true" est posé par le JS */
  .cv-header-nav .ntc-menu-liste {
    display: none;
    flex-direction: column;
    width: 100%;
  }
  .cv-header-nav .ntc-menu[aria-expanded="true"] .ntc-menu-liste,
  .cv-header-nav .ntc-menu-toggle[aria-expanded="true"] + .ntc-menu-liste {
    display: flex;
  }
  .cv-header-nav .ntc-menu-liste > li { width: 100%; position: relative; }
  .cv-header-nav .ntc-menu-liste > li > a {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }

  /* --- Sous-menus repliés par défaut en mobile, dépliés via chevron --- */
  .cv-header-nav .ntc-has-sub > .ntc-sous-menu {
    display: none !important;
  }
  .cv-header-nav .ntc-has-sub.cv-sous-ouvert > .ntc-sous-menu {
    display: block !important;
  }

  /* Chevron cliquable injecté par le JS à droite des liens parents */
  .cv-header-nav .cv-menu-chevron {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 56px;
    background: transparent;
    border: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    outline: none;
    box-shadow: none !important;
    color: var(--ntc-color-on-title); /* audit 6 : opaque (85% → 3,83:1 au pire) */
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .25s;
  }
  .cv-header-nav .cv-menu-chevron:hover {
    background: rgba(255,255,255,.10);
    color: #fff;
  }
  /* audit 4 (P1.5) : l'outline du chevron est neutralisé plus haut → focus clavier INVISIBLE.
     Anneau de focus explicite (token focus, hérité du socle). */
  .cv-header-nav .cv-menu-chevron:focus-visible { outline: 3px solid var(--ntc-color-focus); outline-offset: -3px; }
  .cv-header-nav .ntc-has-sub.cv-sous-ouvert > .cv-menu-chevron {
    transform: rotate(180deg);
    background: rgba(0,0,0,.20);
  }

  /* Décale légèrement le label parent pour ne pas que le chevron le chevauche */
  .cv-header-nav .ntc-has-sub > a {
    padding-right: 56px;
  }

  .ntc-acces-grille { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

  /* HERO mobile : on neutralise aspect-ratio/min-height/max-height (qui sur
     iOS Safari créaient un container trop haut, l'image ne couvrait pas
     toute la zone et flèches/dots flottaient dans le vide en dessous).
     Hauteur fixe en vh pour un rendu prévisible. */
  .ntc-hero--petite,
  .ntc-hero--moyenne,
  .ntc-hero--grande {
    aspect-ratio: auto;
    min-height: 0;
    max-height: none;
    height: 60vh;
    max-height: 520px;     /* plafond pour les très grands écrans mobiles */
  }
  .ntc-hero-contenu { margin-left: 1.5rem; }
  .ntc-hero-prev, .ntc-hero-next { width: 40px; height: 40px; }
  .ntc-hero-prev { left: .5rem; }
  .ntc-hero-next { right: .5rem; }
}

@media (max-width: 600px) {
  .ntc-acces-grille { grid-template-columns: 1fr; }
  .cv-article, .cv-page { padding: 1.25rem; }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.35rem; }
}

/* ============================================================================
   PRINT
   ============================================================================ */
@media print {
  .cv-header-top, .cv-header-nav, .ntc-footer-credit,
  .ntc-hero-prev, .ntc-hero-next, .ntc-hero-dots { display: none !important; }
  .cv-main { padding: 0; }
  a { color: var(--cv-texte) !important; text-decoration: none; }
}

/* ============================================================================
   PAGE RECHERCHE — partagée mais stylée avec variables Civium
   ============================================================================ */
.ntc-recherche h1 { margin-bottom: 1.5rem; }

.ntc-recherche-form {
  display: flex;
  gap: .65rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.ntc-recherche-form input[type="search"] {
  flex: 1;
  min-width: 200px;
  padding: .85rem 1.15rem;
  font-size: 1rem;
  border: 2px solid var(--cv-bord);
  border-radius: var(--cv-rayon);
  background: var(--cv-fond-carte);
  color: var(--cv-texte);
  transition: border-color .15s, box-shadow .15s;
}
.ntc-recherche-form input[type="search"]:focus {
  outline: none;
  border-color: var(--cv-marine);
  box-shadow: 0 0 0 3px rgba(106, 140, 217, .25);
}
.ntc-recherche-form button[type="submit"] {
  padding: .85rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  background: var(--cv-marine);
  color: var(--ntc-color-on-title);
  border: 0;
  border-radius: var(--cv-rayon);
  cursor: pointer;
  transition: background .15s;
}
.ntc-recherche-form button[type="submit"]:hover { background: var(--cv-marine-claire);
  color: var(--ntc-color-inverse); /* audit 5 : le survol change de RÔLE (→ brand) → l'encre suit */
}

.ntc-recherche-compte {
  font-size: 1rem;
  color: var(--cv-texte-doux);
  padding: .85rem 1.15rem;
  background: var(--cv-fond-alt);
  border-left: 4px solid var(--cv-marine);
  border-radius: var(--cv-rayon);
  margin-bottom: 2rem;
}
.ntc-recherche-compte strong { color: var(--cv-marine); }

.ntc-recherche-vide,
.ntc-recherche-intro {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: var(--cv-fond-alt);
  border: 1px dashed var(--cv-bord);
  border-radius: var(--cv-rayon);
  color: var(--cv-texte-doux);
}
.ntc-recherche-aide { font-size: .9rem; margin-top: .5rem; color: var(--cv-texte-pale); }

.ntc-recherche-section {
  background: var(--cv-fond-carte);
  border: 1px solid var(--cv-bord);
  border-radius: var(--cv-rayon);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.ntc-recherche-section h2 {
  font-size: 1.15rem;
  color: var(--cv-marine);
  margin: 0 0 .85rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--cv-bord);
  display: flex;
  align-items: center;
  gap: .35rem;
}
[data-mode="sombre"] .ntc-recherche-section h2 { color: #7eb2e8; }
.ntc-recherche-nb {
  font-size: .85rem;
  font-weight: 400;
  color: var(--cv-texte-pale);
  background: var(--cv-fond-alt);
  padding: 0 .6rem;
  border-radius: 100px;
}
.ntc-recherche-liste {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ntc-recherche-liste li {
  padding: .65rem 0;
  border-bottom: 1px solid var(--cv-bord);
}
.ntc-recherche-liste li:last-child { border-bottom: 0; }
.ntc-recherche-liste a {
  color: var(--cv-marine);
  text-decoration: none;
  font-weight: 500;
  transition: color .12s;
}
.ntc-recherche-liste a:hover {
  color: var(--cv-marine-claire);
  text-decoration: underline;
}
[data-mode="sombre"] .ntc-recherche-liste a { color: #7eb2e8; }
.ntc-recherche-liste small {
  color: var(--cv-texte-pale);
  font-size: .85rem;
  margin-left: .35rem;
}

/* =============================================================================
   MODULE RDV CITOYEN — front public (Civium)
   ============================================================================= */
.ntc-rdv-wrapper { max-width: 900px; margin: 0 auto; padding: 1.5rem; }
.ntc-rdv-etape h1 { margin-top: 0; }
.ntc-rdv-intro { color: var(--cv-texte-doux); margin-bottom: 1.5rem; }
.ntc-rdv-ariane { font-size: .9rem; color: var(--cv-texte-doux); margin-bottom: 1rem; }
.ntc-rdv-ariane a { color: var(--cv-bleu); text-decoration: none; }
.ntc-rdv-ariane a:hover { text-decoration: underline; }
.ntc-rdv-vide { padding: 2rem; background: var(--cv-fond-alt); border: 1px dashed var(--cv-bord); border-radius: var(--cv-rayon); text-align: center; color: var(--cv-texte-doux); }
.ntc-rdv-erreur {
  background: #fef2f2; border-left: 4px solid var(--cv-rouge); color: #991b1b;
  padding: .75rem 1rem; margin: 1rem 0; border-radius: var(--cv-rayon);
}

.ntc-rdv-agents, .ntc-rdv-motifs { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.ntc-rdv-agents { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ntc-rdv-agent-lien, .ntc-rdv-motif-lien {
  display: block; padding: 1.25rem; background: var(--cv-fond-carte);
  border: 1px solid var(--cv-bord); border-radius: var(--cv-rayon);
  text-decoration: none; color: var(--cv-texte);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.ntc-rdv-agent-lien:hover, .ntc-rdv-motif-lien:hover {
  border-color: var(--cv-marine);
  transform: translateY(-1px);
  box-shadow: var(--cv-shadow-hover);
}
.ntc-rdv-agent-lien strong, .ntc-rdv-motif-lien strong {
  display: block; font-size: 1.05rem; color: var(--cv-marine); margin-bottom: .25rem;
}
.ntc-rdv-agent-lien small, .ntc-rdv-motif-lien small,
.ntc-rdv-agent-types, .ntc-rdv-motif-types {
  display: block; font-size: .82rem; color: var(--cv-texte-doux); margin-top: .25rem;
}
.ntc-rdv-motif-duree {
  display: inline-block; background: var(--cv-or); color: var(--ntc-color-on-action);
  padding: .15rem .55rem; border-radius: 3px; font-size: .78rem; font-weight: 600;
  margin: .35rem 0;
}

.ntc-rdv-calendrier { display: grid; gap: 1rem; margin: 1.5rem 0; }
.ntc-rdv-jour {
  padding: 1rem; background: var(--cv-fond-carte);
  border: 1px solid var(--cv-bord); border-radius: var(--cv-rayon);
}
.ntc-rdv-jour h3 { margin: 0 0 .75rem; font-size: 1rem; color: var(--cv-marine); }
.ntc-rdv-slots { display: flex; flex-wrap: wrap; gap: .5rem; }
.ntc-rdv-slot {
  background: #fff; border: 1px solid var(--cv-bord); color: var(--cv-texte);
  padding: .5rem .9rem; border-radius: var(--cv-rayon); font-size: .92rem;
  cursor: pointer; transition: all .15s; font-family: inherit;
}
.ntc-rdv-slot:hover { border-color: var(--cv-marine); background: var(--cv-bleu-pale);
  color: var(--ntc-color-on-link-pale); /* audit 7 : fond pâle de lien piloté */
}
.ntc-rdv-slot.actif { background: var(--cv-marine); color: var(--ntc-color-on-title); border-color: var(--cv-marine); }

.ntc-rdv-form {
  margin-top: 2rem; padding: 1.5rem; background: var(--cv-fond-carte);
  border: 1px solid var(--cv-bord); border-radius: var(--cv-rayon);
}
.ntc-rdv-recap { font-size: 1.05rem; margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--cv-bord); }
.ntc-rdv-recap strong { color: var(--cv-marine); }
.ntc-rdv-form-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
.ntc-rdv-form label { display: block; font-size: .9rem; font-weight: 500; margin-bottom: 1rem; }
.ntc-rdv-form input[type=text],
.ntc-rdv-form input[type=email],
.ntc-rdv-form input[type=tel],
.ntc-rdv-form textarea {
  display: block; width: 100%; margin-top: .25rem;
  padding: .5rem .75rem; border: 1px solid var(--cv-bord);
  border-radius: var(--cv-rayon); font: inherit; background: #fff; color: var(--cv-texte);
}
.ntc-rdv-form textarea { resize: vertical; }
.ntc-rdv-types-fs { border: 1px solid var(--cv-bord); border-radius: var(--cv-rayon); padding: .75rem 1rem; margin: 1rem 0; }
.ntc-rdv-types-fs legend { font-weight: 600; padding: 0 .5rem; color: var(--cv-marine); }
.ntc-rdv-types-fs label { display: inline-flex; align-items: center; gap: .35rem; margin-right: 1rem; font-weight: normal; }
.ntc-rdv-captcha, .ntc-rdv-rgpd { display: block; margin: 1rem 0; }
.ntc-rdv-captcha input { display: inline-block; width: 80px; margin-left: .5rem; }
.ntc-rdv-rgpd { padding: .75rem; background: var(--cv-fond-alt); border-radius: var(--cv-rayon); font-weight: normal; font-size: .9rem; }
.ntc-rdv-rgpd small { display: block; color: var(--cv-texte-doux); margin-top: .35rem; font-size: .82rem; }
.ntc-rdv-submit {
  background: var(--cv-marine); color: var(--ntc-color-on-title); border: 0;
  padding: .75rem 1.5rem; border-radius: var(--cv-rayon); font-size: 1rem;
  cursor: pointer; font-weight: 700; transition: background .15s;
}
.ntc-rdv-submit:hover { background: var(--cv-marine-claire);
  color: var(--ntc-color-inverse); /* audit 5 : le survol change de RÔLE (→ brand) → l'encre suit */
}

.ntc-rdv-confirmation, .ntc-rdv-annulation {
  padding: 1.5rem; background: var(--cv-fond-carte);
  border: 1px solid var(--cv-bord); border-radius: var(--cv-rayon);
}
.ntc-rdv-recap-final { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.5rem; margin: 1rem 0; }
.ntc-rdv-recap-final dt { font-weight: 600; color: var(--cv-texte-doux); }
.ntc-rdv-retour { color: var(--cv-bleu); }

[data-mode="sombre"] .ntc-rdv-slot { background: var(--cv-fond-carte); color: var(--cv-texte); }
[data-mode="sombre"] .ntc-rdv-slot:hover { background: rgba(126,178,232,.15); }
[data-mode="sombre"] .ntc-rdv-rgpd { background: rgba(255,255,255,.05); }

@media (max-width: 600px) {
  .ntc-rdv-form-grille { grid-template-columns: 1fr; }
  .ntc-rdv-agents { grid-template-columns: 1fr; }
}

/* ===== RDV : widget de réservation façon Calendly (Civium) ===== */
.ntc-rdv-booking {
  display: grid;
  grid-template-columns: minmax(280px, 350px) 1fr;
  gap: 2rem;
  margin: 1.5rem 0;
  align-items: start;
}
.ntc-rdv-cal {
  background: var(--cv-fond-carte);
  border: 1px solid var(--cv-bord);
  border-radius: var(--cv-rayon-grand, 8px);
  padding: 1rem 1.1rem 1.25rem;
}
.ntc-rdv-cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .85rem;
}
.ntc-rdv-cal-head strong { font-size: 1.05rem; color: var(--cv-marine); }
.ntc-rdv-cal-nav {
  width: 36px; height: 36px; flex: 0 0 36px;
  border: 1px solid var(--cv-bord); background: #fff; color: var(--cv-marine);
  border-radius: 50%; cursor: pointer; font-size: 1.3rem; line-height: 1;
}
.ntc-rdv-cal-nav:hover:not([disabled]) { background: var(--cv-marine); color: var(--ntc-color-on-title); border-color: var(--cv-marine); }
.ntc-rdv-cal-nav[disabled] { opacity: .3; cursor: not-allowed; }
.ntc-rdv-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ntc-rdv-cal-wd { text-align: center; font-size: .72rem; font-weight: 600; color: var(--cv-texte-doux); padding: .2rem 0 .4rem; }
.ntc-rdv-cal-vide { aspect-ratio: 1 / 1; }
.ntc-rdv-cal-jour {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; font: inherit; font-size: .92rem; padding: 0;
}
span.ntc-rdv-cal-jour.indispo { color: var(--cv-texte-doux); opacity: .4; }
button.ntc-rdv-cal-jour.dispo { cursor: pointer; background: var(--cv-bleu-pale); color: var(--ntc-color-on-link-pale); font-weight: 600; }
button.ntc-rdv-cal-jour.dispo:hover { background: var(--cv-marine); color: var(--ntc-color-on-title); }
.ntc-rdv-cal-jour.actif { background: var(--cv-marine) !important; color: var(--ntc-color-on-title) !important; }
.ntc-rdv-cal-jour.auj { box-shadow: 0 0 0 2px var(--cv-marine) inset; }

.ntc-rdv-slots-col { min-width: 0; }
.ntc-rdv-slots-titre { margin: 0 0 1rem; color: var(--cv-marine); }
.ntc-rdv-slots {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: .5rem; max-height: 460px; overflow: auto; padding-right: .25rem;
}
.ntc-rdv-slots-vide { color: var(--cv-texte-doux); }

[data-mode="sombre"] .ntc-rdv-cal-nav { background: var(--cv-fond-carte); }
[data-mode="sombre"] button.ntc-rdv-cal-jour.dispo { background: rgba(126,178,232,.15); color: #7eb2e8; }

@media (max-width: 760px) {
  .ntc-rdv-booking { grid-template-columns: 1fr; gap: 1.25rem; }
  .ntc-rdv-cal { max-width: 420px; }
  .ntc-rdv-slots { max-height: none; }
}

/* ---------- Bloc sous-article : navigation préc./suiv. + « À lire aussi » ---------- */
.ntc-article-nav {
  display: flex; gap: 1rem; justify-content: space-between;
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--cv-bord);
}
.ntc-article-nav-lien {
  display: flex; flex-direction: column; gap: .25rem;
  max-width: 48%; padding: .85rem 1.1rem;
  border: 1px solid var(--cv-bord); border-radius: var(--cv-rayon);
  text-decoration: none; color: var(--cv-texte); transition: border-color var(--cv-trans);
}
.ntc-article-nav-suiv { text-align: right; align-items: flex-end; margin-left: auto; }
.ntc-article-nav-lien:hover { border-color: var(--cv-or); }
.ntc-article-nav-label { font-size: .78rem; font-weight: 700; color: var(--cv-or); text-transform: uppercase; letter-spacing: .5px; }
.ntc-article-nav-titre { font-weight: 600; color: var(--cv-texte); }
.ntc-articles-lies { margin-top: 2.5rem; }
.ntc-articles-lies-titre {
  font-size: 1.4rem; margin: 0 0 1.25rem; padding-bottom: .5rem;
  border-bottom: 3px solid var(--cv-or); display: inline-block;
}

/* « À lire aussi » : toujours 3 cartes sur une ligne (≤3 similaires), 1 sur mobile */
.ntc-articles-lies .ntc-liste-articles,
.ntc-articles-lies .ntc-grille-articles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .ntc-articles-lies .ntc-liste-articles,
  .ntc-articles-lies .ntc-grille-articles { grid-template-columns: 1fr; }
}

/* ===== RDV : corrections mode sombre (titres lisibles, champs, calendrier) ===== */
[data-mode="sombre"] .ntc-rdv-agent-lien strong,
[data-mode="sombre"] .ntc-rdv-motif-lien strong,
[data-mode="sombre"] .ntc-rdv-slots-titre,
[data-mode="sombre"] .ntc-rdv-jour h3,
[data-mode="sombre"] .ntc-rdv-cal-head strong,
[data-mode="sombre"] .ntc-rdv-recap strong,
[data-mode="sombre"] .ntc-rdv-types-fs legend { color: #7eb2e8; }

/* Flèches de navigation du calendrier (fond sombre → flèche claire) */
[data-mode="sombre"] .ntc-rdv-cal-nav { color: #7eb2e8; }
[data-mode="sombre"] .ntc-rdv-cal-nav:hover:not([disabled]) { background: #7eb2e8; color: var(--cv-marine); border-color: #7eb2e8; }

/* Champs du formulaire : en sombre, fond sombre + texte clair (le #fff forcé
   rendait le texte clair illisible sur blanc). */
[data-mode="sombre"] .ntc-rdv-form input[type=text],
[data-mode="sombre"] .ntc-rdv-form input[type=email],
[data-mode="sombre"] .ntc-rdv-form input[type=tel],
[data-mode="sombre"] .ntc-rdv-form textarea,
[data-mode="sombre"] .ntc-rdv-captcha input {
  background: var(--cv-fond, #0f1424);
  color: var(--cv-texte, #e4e7f0);
  border-color: var(--cv-bord);
}
/* Créneaux : fond sombre lisible (le #fff par défaut donnait du texte clair sur blanc) */
[data-mode="sombre"] .ntc-rdv-slot { background: var(--cv-fond-carte); color: var(--cv-texte); border-color: var(--cv-bord); }
[data-mode="sombre"] .ntc-rdv-slot:hover { background: rgba(126,178,232,.18); border-color: #7eb2e8; }
[data-mode="sombre"] .ntc-rdv-slot.actif { background: #7eb2e8; color: var(--cv-marine); border-color: #7eb2e8; }

/* ===== Mode sombre : titres de listings & pages qui restaient en bleu nuit ===== */
[data-mode="sombre"] .ntc-fiche-liste h1 { color: #fff; }
[data-mode="sombre"] .cv-404 h1 { color: #fff; }


.cv-header-nav {
  --mm-accent:           var(--cv-marine, #0c1d3a);
  --mm-panel-bg:         #ffffff;
  --mm-panel-border-top: 3px solid var(--cv-or, #fac21f);
  --mm-panel-shadow:     0 8px 32px rgba(12,29,58,.13);
  --mm-col-titre-color:  var(--cv-bleu, #1d5a8f);
  --mm-col-titre-border: 2px solid var(--cv-or, #fac21f);
  --mm-lien-color:       var(--cv-texte, #1a1f2e);
  --mm-lien-hover-bg:    var(--cv-bleu-pale, #eaf0f7);
  --mm-lien-hover-color: var(--cv-bleu, #1d5a8f);
}
[data-mode="sombre"] .cv-header-nav {
  --mm-panel-bg:        #1a2640;
  --mm-lien-color:      rgba(255,255,255,.88);
  --mm-lien-hover-bg:   rgba(255,255,255,.08);
  --mm-lien-hover-color:#fac21f;
}

/* ============================================================================
   ESPACE CITOYEN + DÉMARCHES + SIGNALEMENT  (parité avec Lagune)
   ============================================================================ */

/* --- Espace citoyen : tuiles --- */
.cv-ec-intro { max-width: 720px; margin: 0 0 2rem; }
.cv-ec-intro p { font-size: 1.05rem; color: var(--cv-texte-doux); line-height: 1.6; }
.cv-ec-vide { color: var(--cv-texte-doux); }
.cv-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; list-style: none; padding: 0; margin: 0 0 2.5rem; }
.cv-tuile { position: relative; display: flex; flex-direction: column; gap: .6rem; padding: 1.6rem 1.5rem; background: var(--cv-fond-carte); border: 1px solid var(--cv-bord); border-top: 4px solid var(--cv-bleu); border-radius: var(--cv-rayon); box-shadow: var(--cv-shadow-card); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.cv-tuile:hover { box-shadow: var(--cv-shadow-hover); transform: translateY(-3px); border-top-color: var(--cv-or); }
.cv-tuile-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; font-size: 1.6rem; background: var(--cv-bleu-pale); border-radius: var(--cv-rayon);
  color: var(--ntc-color-on-link-pale); /* audit 7 : fond pâle de lien piloté */
}
.cv-tuile h2 { font-size: 1.2rem; margin: 0; color: var(--cv-marine); line-height: 1.25; }
.cv-tuile h2 a { color: inherit; text-decoration: none; }
.cv-tuile h2 a::after { content: ""; position: absolute; inset: 0; }
.cv-tuile h2 a:focus-visible { outline: 3px solid var(--cv-or); outline-offset: 3px; }
.cv-tuile p { margin: 0; color: var(--cv-texte-doux); font-size: .95rem; line-height: 1.5; }
.cv-tuile-fleche { margin-top: auto; font-weight: 700; font-size: .9rem; color: var(--cv-bleu); display: inline-flex; align-items: center; gap: .35rem; transition: gap .2s ease; }
.cv-tuile:hover .cv-tuile-fleche { gap: .6rem; }
[data-mode="sombre"] .cv-tuile-fleche { color: #7eb2e8; }

/* Mode sombre : nos sélecteurs de titres sont plus spécifiques que la règle
   globale [data-mode=sombre] h2 {color:#fff} → on force le blanc nous-mêmes. */
[data-mode="sombre"] .cv-tuile h2,
[data-mode="sombre"] .cv-tuile h2 a,
[data-mode="sombre"] .ntc-dem-theme :is(h2, h3),
[data-mode="sombre"] .ntc-dem-theme :is(h2, h3) a,
[data-mode="sombre"] .ntc-dem-fiche-lien { color: #fff; }

/* --- Signalement : masque le h2 en doublon du bloc --- */
.cv-signalement .ntc-signalement-bloc > h2 { display: none; }

/* --- Démarches : annuaire (classes ntc-dem-* communes au module) --- */
.ntc-dem-intro { max-width: 720px; color: var(--cv-texte-doux); font-size: 1.05rem; line-height: 1.6; margin: 0 0 1.5rem; }
.ntc-dem-vide { color: var(--cv-texte-doux); padding: 1rem 0; }

.ntc-dem-recherche { margin: 0 0 2rem; max-width: 640px; }
.ntc-dem-recherche label { display: block; font-weight: 700; margin-bottom: .4rem; color: var(--cv-texte); }
.ntc-dem-recherche-ligne { display: flex; gap: .5rem; }
.ntc-dem-recherche input { flex: 1; padding: .7rem .9rem; border: 1px solid var(--cv-bord-fort); border-radius: var(--cv-rayon); background: var(--cv-fond); color: var(--cv-texte); font-size: 1rem; }
.ntc-dem-recherche input:focus-visible { outline: 3px solid var(--cv-or); outline-offset: 1px; }
.ntc-dem-recherche button { padding: .7rem 1.2rem; border: 0; border-radius: var(--cv-rayon); background: var(--cv-marine-claire); color: var(--ntc-color-inverse); font-weight: 700; cursor: pointer; } /* audit 4 : link est un rôle TEXTE piloté (principale blanche → 1:1) → brand/inverse */
.ntc-dem-recherche button:hover { background: var(--cv-marine); color: var(--ntc-color-on-title); }

.ntc-dem-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 0 0 2rem; }
.ntc-dem-theme { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.4rem 1.3rem; background: var(--cv-fond-carte); border: 1px solid var(--cv-bord); border-left: 4px solid var(--cv-bleu); border-radius: var(--cv-rayon); box-shadow: var(--cv-shadow-card); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.ntc-dem-theme:hover { box-shadow: var(--cv-shadow-hover); transform: translateY(-2px); border-left-color: var(--cv-or); }
.ntc-dem-theme-ico { font-size: 1.7rem; line-height: 1; }
.ntc-dem-theme :is(h2, h3) { margin: 0; font-size: 1.1rem; color: var(--cv-marine); line-height: 1.25; }
.ntc-dem-theme :is(h2, h3) a { color: inherit; text-decoration: none; }
.ntc-dem-theme :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; }
.ntc-dem-theme :is(h2, h3) a:focus-visible { outline: 3px solid var(--cv-or); outline-offset: 3px; }
.ntc-dem-theme-n { font-size: .85rem; color: var(--cv-texte-pale); }

.ntc-dem-retour { margin: 0 0 1.25rem; }
.ntc-dem-retour a { font-weight: 700; color: var(--cv-bleu); text-decoration: none; }
.ntc-dem-retour a:hover { text-decoration: underline; }
.ntc-dem-filtre { margin: 0 0 1.25rem; max-width: 480px; }
.ntc-dem-filtre label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .35rem; color: var(--cv-texte-doux); }
.ntc-dem-filtre input { width: 100%; padding: .55rem .8rem; border: 1px solid var(--cv-bord-fort); border-radius: var(--cv-rayon); background: var(--cv-fond); color: var(--cv-texte); font-size: .95rem; }
.ntc-dem-filtre input:focus-visible { outline: 3px solid var(--cv-or); outline-offset: 1px; }
.ntc-dem-compte { color: var(--cv-texte-doux); margin: 0 0 1rem; }
.ntc-dem-liste { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.ntc-dem-fiche { padding: 1rem 0; border-bottom: 1px solid var(--cv-bord); }
.ntc-dem-fiche[hidden] { display: none; }
.ntc-dem-fiche-lien { font-weight: 700; font-size: 1.05rem; color: var(--cv-marine); text-decoration: none; }
.ntc-dem-fiche-lien:hover { color: var(--cv-bleu); text-decoration: underline; }
.ntc-dem-fiche-lien:focus-visible { outline: 3px solid var(--cv-or); outline-offset: 2px; }
.ntc-dem-ext { color: var(--cv-texte-pale); font-weight: 400; }
.ntc-dem-badge { display: inline-block; margin-left: .5rem; padding: .1rem .55rem; background: var(--cv-bleu-pale); color: var(--ntc-color-on-link-pale); font-size: .78rem; border-radius: 999px; }
.ntc-dem-fiche-desc { margin: .35rem 0 0; color: var(--cv-texte-doux); font-size: .95rem; line-height: 1.5; }
.ntc-dem-fiche-maj { margin: .3rem 0 0; color: var(--cv-texte-pale); font-size: .8rem; }

.ntc-dem-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 0 0 2rem; }
.ntc-dem-pager[hidden] { display: none; }
.ntc-dem-pager-btn { padding: .55rem 1.1rem; border: 1px solid var(--cv-bord-fort); border-radius: var(--cv-rayon); background: var(--cv-fond); color: var(--cv-texte); font-weight: 700; cursor: pointer; }
.ntc-dem-pager-btn:hover:not(:disabled) { border-color: var(--cv-bleu); color: var(--cv-bleu); }
.ntc-dem-pager-btn:disabled { opacity: .4; cursor: default; }
.ntc-dem-pager-info { color: var(--cv-texte-doux); }

.ntc-dem-source { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--cv-bord); color: var(--cv-texte-pale); font-size: .82rem; }
.ntc-dem-source a { color: var(--cv-texte-doux); }

/* Panneau Pocket — petit écran : flèches centrées verticalement sur les côtés
   (comme en desktop). Posées dans les coins bas, elles chevauchaient les
   pastilles de pagination (1re flèche sur le 1er point, dernière sur le
   dernier) → on croyait passer à la diapo suivante et on filait à la dernière. */
@media (max-width: 700px) {
  .ntc-pocket-slide-body { padding-bottom: 2.6rem; }
  .ntc-pocket-prev, .ntc-pocket-next {
    width: 34px; height: 34px; font-size: 1.25rem;
  }
}

/* ===================================================================
   MÉTÉO (module meteo) — styles autonomes, neutres vis-à-vis du thème.
   =================================================================== */
.ntc-meteo, .ntc-meteo-ruban { --m-accent: var(--ntc-color-link, #1e3a8a) /* audit 4 (P2.7) : --bleu n'existe qu'en marianne — 5 thèmes retombaient sur le bleu marianne ; link = rôle canonique piloté */; }
.ntc-meteo-titre { display:flex; align-items:center; gap:.5rem; margin:0 0 1rem; }
.ntc-meteo-ico { display:inline-block; vertical-align:middle; }
img.ntc-meteo-ico--xl { width:72px; height:72px; }
img.ntc-meteo-ico--l  { width:56px; height:56px; }
img.ntc-meteo-ico--s  { width:32px; height:32px; }
.ntc-meteo-emoji { line-height:1; }
.ntc-meteo-emoji.ntc-meteo-ico--xl { font-size:64px; }
.ntc-meteo-emoji.ntc-meteo-ico--l  { font-size:48px; }
.ntc-meteo-emoji.ntc-meteo-ico--s  { font-size:26px; }

/* --- Compact / hero --- */
.ntc-meteo-actuel, .ntc-meteo-hero { display:flex; align-items:center; gap:1rem; }
.ntc-meteo-actuel-txt, .ntc-meteo-hero-txt { display:flex; flex-direction:column; line-height:1.25; }
.ntc-meteo-temp { font-size:2.4rem; font-weight:800; color:var(--m-accent); }
.ntc-meteo-cond { font-size:1.05rem; }
.ntc-meteo-ressenti, .ntc-meteo-minmax { font-size:.9rem; opacity:.75; }
.ntc-meteo-up { color:var(--ntc-color-urgent, #dc2626); } .ntc-meteo-down { color:var(--ntc-color-link, #2563eb); }

/* --- Liste de détails --- */
.ntc-meteo-details { list-style:none; display:flex; flex-wrap:wrap; gap:.5rem 1.2rem;
  padding:.6rem 0 0; margin:.6rem 0 0; font-size:.9rem; border-top:1px solid rgba(120,120,120,.18); }
.ntc-meteo-details li { white-space:nowrap; }

/* --- Cartes 3 jours --- */
.ntc-meteo-cartes { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin-top:1rem; }
.ntc-meteo-carte { text-align:center; padding:.85rem .5rem; border:1px solid rgba(120,120,120,.2);
  border-radius:12px; background:rgba(127,127,127,.05); }
.ntc-meteo-jour { margin:0 0 .35rem; font-size:.95rem; }
.ntc-meteo-carte-cond { margin:.25rem 0; font-size:.8rem; opacity:.8; min-height:2.2em; }
.ntc-meteo-carte-temp { margin:.2rem 0 0; font-size:1.05rem; }
.ntc-meteo-carte-temp strong { color:var(--m-accent); }
.ntc-meteo-tmin { opacity:.6; }
.ntc-meteo-pluie { margin:.25rem 0 0; font-size:.8rem; color:var(--ntc-color-link, #2563eb); }

/* --- Ruban --- */
.ntc-meteo-ruban { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem;
  padding:.5rem .9rem; border-radius:10px; background:rgba(127,127,127,.08);
  font-size:.9rem; }
.ntc-meteo-ruban strong { color:var(--m-accent); }
.ntc-meteo-ruban-now, .ntc-meteo-ruban-jour { display:inline-flex; align-items:center; gap:.3rem; }
.ntc-meteo-ruban-jour em { font-style:normal; opacity:.7; }
.ntc-meteo-ruban-src { margin-left:auto; font-size:.75rem; opacity:.6; }

/* --- Détaillé : alertes / AQI / horaire / astro --- */
.ntc-meteo-alertes { margin-bottom:1rem; }
.ntc-meteo-alerte { background:#fef2f2; border:1px solid #ef4444; border-radius:8px;
  padding:.7rem .9rem; margin-bottom:.5rem; color:#7f1d1d; }
.ntc-meteo-alerte p { margin:.35rem 0 0; font-size:.9rem; }
.ntc-meteo-aqi { display:flex; flex-wrap:wrap; gap:.3rem 1rem; align-items:center;
  margin:1rem 0; padding:.55rem .9rem; border-radius:8px; border:1px solid rgba(120,120,120,.2); }
.ntc-meteo-aqi-det { font-size:.82rem; opacity:.75; }
.ntc-meteo-aqi--bon { background:#ecfdf5; border-color:#10b981; color:#1f2937; }
.ntc-meteo-aqi--moyen { background:#f7fee7; border-color:#84cc16; color:#1f2937; }
.ntc-meteo-aqi--modere { background:#fefce8; border-color:#eab308; color:#1f2937; }
.ntc-meteo-aqi--mauvais { background:#fff7ed; border-color:#f97316; color:#1f2937; }
.ntc-meteo-aqi--tresmauvais { background:#fef2f2; border-color:#ef4444; color:#1f2937; }
.ntc-meteo-aqi--dangereux { background:#faf5ff; border-color:#a21caf; color:#1f2937; }
.ntc-meteo-sous-titre { margin:1.2rem 0 .5rem; font-size:1.05rem; }
.ntc-meteo-moments { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin-top:.4rem; }
.ntc-meteo-moment { text-align:center; padding:.85rem .5rem; border:1px solid rgba(120,120,120,.2); border-radius:12px; }
.ntc-meteo-moment-lib { margin:0 0 .35rem; font-size:.95rem; }
.ntc-meteo-moment-cond { margin:.25rem 0; font-size:.8rem; opacity:.8; min-height:2.2em; }
.ntc-meteo-moment-temp { margin:.2rem 0 0; font-size:1.05rem; }
.ntc-meteo-moment-temp strong { color:var(--m-accent); }
.ntc-meteo-horaire { display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.4rem; }
.ntc-meteo-h { flex:0 0 auto; text-align:center; min-width:58px; padding:.4rem .3rem;
  border-radius:10px; background:rgba(127,127,127,.06); font-size:.82rem; }
.ntc-meteo-h-temp { display:block; font-weight:700; }
.ntc-meteo-h-pluie { display:block; color:var(--ntc-color-link, #2563eb); font-size:.75rem; }
.ntc-meteo-astro { display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; margin-top:1rem;
  font-size:.9rem; opacity:.85; }

/* --- Attribution / divers --- */
.ntc-meteo-src { display:flex; flex-wrap:wrap; gap:.3rem 1rem; align-items:center;
  margin:.9rem 0 0; font-size:.75rem; opacity:.6; }
.ntc-meteo-src a { color:inherit; }
.ntc-meteo-vide { opacity:.7; }

@media (max-width:520px) {
  .ntc-meteo-cartes { grid-template-columns:repeat(3,1fr); gap:.4rem; }
  .ntc-meteo-carte { padding:.6rem .2rem; }
  .ntc-meteo-temp { font-size:2rem; }
}
/* Bloc météo cliquable → page /meteo/ (lien superposé ; liens internes préservés) */
.ntc-meteo--cliquable { position: relative; cursor: pointer; transition: box-shadow .15s ease; }
.ntc-meteo--cliquable:hover { box-shadow: 0 3px 14px rgba(0,0,0,.10); }
.ntc-meteo-stretch { position: absolute; inset: 0; z-index: 1; }
.ntc-meteo--cliquable a:not(.ntc-meteo-stretch),
.ntc-meteo--cliquable button { position: relative; z-index: 2; }
.ntc-meteo-plus { margin: .85rem 0 0; text-align: right; }
.ntc-meteo-plus-lien { color: var(--m-accent, var(--bleu,#1e3a8a)); font-weight: 600; font-size: .9rem; }
.ntc-meteo--cliquable:hover .ntc-meteo-plus-lien { text-decoration: underline; }

/* Page /meteo/ dédiée : la section météo est rendue comme un .ntc-bloc (padding
   latéral + max-width + centrage). Déjà dans :is(.cv-contenu-zone,.ntc-contenu-zone) → double retrait :
   cartes/AQI plus indentés que le titre h1. On aligne le contenu sur le titre. */
.ntc-meteo-page .ntc-meteo {
  max-width: none;
  margin: 1.25rem 0 0;
  padding: 0;
}

/* ============================================================================
   FOOTER — liens légaux : rangée nette et lisible
   ----------------------------------------------------------------------------
   Les liens du menu « legal » héritaient du gros padding et du soulignement bas
   de la navigation d'en-tête (boutons surdimensionnés), et « Gérer mes cookies »
   n'était pas aligné avec eux. On uniformise : petits liens majuscules espacés,
   centrés, repliables. Placé en fin de feuille pour primer sur les
   redéfinitions de .ntc-menu-liste a.
   ============================================================================ */
.ntc-footer-legal { flex-direction: column; align-items: center; gap: .85rem; text-align: center; }
.ntc-footer-legal nav { width: 100%; }
.ntc-footer-legal nav ul { justify-content: center; gap: .5rem 1.75rem; }
/* Neutralise tout dropdown mobile (.ntc-menu-liste position:absolute, fond de
   carte…) susceptible de « fuir » du menu d'en-tête vers ce menu legal. */
.ntc-footer-legal .ntc-menu-liste {
  position: static; min-width: 0; max-width: none; flex-direction: row;
  background: none; border: 0; padding: 0; margin: 0; box-shadow: none;
}
.ntc-footer-legal .ntc-menu-liste li { padding: 0; }
.ntc-footer-legal a,
.ntc-footer-legal .ntc-menu-liste a {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ntc-color-on-title); /* audit 6 : opaque — 72% tombait à 3,23:1 quand le pick bascule */
}
.ntc-footer-legal a:hover,
.ntc-footer-legal .ntc-menu-liste a:hover {
  color: var(--cv-or);
  background: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===== Tableau « colonnes » : images/contenus côte à côte =====
   Usage dans l'éditeur : <table class="ntc-cols"> … </table>
   - Colonnes de largeur égale automatique (2 → 50 %, 3 → 33 %, 4 → 25 %)
   - Contenu centré, sans bordure ; cellules empilées sur mobile
   Inutile de saisir width="…" ou <center> : ils sont toujours retirés par le
   filtre HTML (site/includes/sanitizer.php). La classe, elle, est conservée. */
.ntc-cols {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 1.25rem 0;
}
.ntc-cols td,
.ntc-cols th {
  padding: .5rem;
  text-align: center;
  vertical-align: middle;
  border: 0;
  background: none;
}
.ntc-cols img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}
@media (max-width: 600px) {
  .ntc-cols,
  .ntc-cols tbody,
  .ntc-cols tr,
  .ntc-cols td,
  .ntc-cols th {
    display: block;
    width: 100%;
  }
}

/* ============================================================================
   L5 — vocabulaire adaptatif : on-action / on-accent / inverse / focus / info.
   DÉCLARÉ ici mais ENCORE INCONSOMMÉ par les composants (migration = L6) → zéro
   changement visuel. En perso ON, le moteur émet on-action/on-accent/inverse dérivés
   (contraste-pick) qui gagnent en :root ; le bloc sombre ci-dessous a la même
   spécificité que le moteur ([data-mode], 0,1,0) donc la perso le surcharge EN SOMBRE
   (comportement historique « la perso l'emporte sur le mode sombre » — cf. atelier qui,
   lui, protège son sombre via :root[data-mode="sombre"] 0,2,0).
   ============================================================================= */
:root {
  --ntc-color-accent: var(--ntc-color-action); /* L5 : civium n'avait pas d'accent distinct → = action (CTA or) */
  --ntc-color-on-action: #000000;
  --ntc-color-on-title: #ffffff; /* audit 4 : pick(#0c1d3a) — texte sur le FOND title (header civium), piloté par la principale */
  --ntc-color-on-link-pale: #000000; /* audit 7 : pick(#eaf0f7) — encre sur fond pâle de lien piloté */
  --ntc-color-on-action-hover: #000000; /* P1.1-3 audit : pick(#d4a017) — texte sûr sur fond dérivé/état */
  --ntc-color-on-action-pale: #000000; /* P1.1-3 audit : pick(#fff7d6) — texte sûr sur fond dérivé/état */
  --ntc-color-on-urgent: #ffffff; /* P1.1-3 audit : pick(#ce0500) — texte sûr sur fond dérivé/état */
  --ntc-color-urgent-hover: color-mix(in srgb, var(--ntc-color-urgent), #000000 22%); /* revue 3 : survol urgent (suit le mode via var) */
  --ntc-color-on-urgent-hover: #ffffff; /* revue 3 : pick(#a10400) — texte sûr sur survol urgent */
  --ntc-color-on-accent: #000000;
  --ntc-color-inverse:   #ffffff;
  --ntc-color-focus:     #1f6feb;
  --ntc-color-info:      #1d5a8f;
  --ntc-color-info-bg:   #e4ebf2;
}
[data-mode="sombre"] {
  --ntc-color-on-action: #000000;
  --ntc-color-on-title: #ffffff; /* audit 4 : pick(#0c1d3a) — texte sur le FOND title (header civium), piloté par la principale */
  --ntc-color-on-link-pale: #ffffff; /* audit 7 : pick(#25314c) — encre sur fond pâle de lien piloté */
  --ntc-color-on-action-hover: #000000; /* P1.1-3 audit : pick(#d4a017) — texte sûr sur fond dérivé/état */
  --ntc-color-on-action-pale: #ffffff; /* P1.1-3 audit : pick(#3c3934) — texte sûr sur fond dérivé/état */
  --ntc-color-on-urgent: #ffffff; /* P1.1-3 audit : pick(#ce0500) — texte sûr sur fond dérivé/état */
  --ntc-color-on-urgent-hover: #ffffff; /* revue 3 : pick(#a10400) — texte sûr sur survol urgent */
  --ntc-color-on-accent: #000000;
  --ntc-color-inverse:   #ffffff;
  --ntc-color-focus:     #7fb0dc;
  --ntc-color-info:      #6a92b5;
  --ntc-color-info-bg:   #132130;
}

/* ═══ Ré-assertions SOMBRES (audit 8) ═══ */
[data-mode="sombre"] .cv-marque { color: var(--ntc-color-on-title); } /* la globale sombre-a (lien bleu clair) la battait sur le fond title piloté (1,1:1 à principale blanche) */
[data-mode="sombre"] .cv-lien-util { color: var(--ntc-color-on-title); } /* audit 8 : le lien sombre clair restait sur le fond title piloté (1,1:1 à principale blanche) */