/* ============================================================================
   CPME.NC — MODE SOMBRE
   Toutes les règles sont préfixées par html.cpme-dark : le mode clair est intact.
   Palette (mapping design) :
     Fonds     base #0f1c22 · surface #152730 · surface2 #1b323d · elevated #20404d
               header/footer #0c161b · input #12222a
     Texte     primary #e8eef0 · secondary #a9bcc4 · muted #7f97a1 · onAccent #fff
     Bordures  soft #25404b · medium #2c4a56
     Accents   pétrole #4fa3bf · pétroleText #79c2da · teal #2a7d99
               rouge #e0554d · rougeText #f08a83 · rougeFill #cf3a33 (hover #bf2b25)
               success #4fbf87
     Halo      0 0 0 1px rgba(79,163,191,.10), 0 8px 28px rgba(0,0,0,.45)
   ============================================================================ */

/* Variables locales au thème sombre (héritées par toutes les règles ci-dessous). */
html.cpme-dark {
	--cd-base:      #0f1c22;
	--cd-surface:   #152730;
	--cd-surface2:  #1b323d;
	--cd-elevated:  #20404d;
	--cd-header:    #0c161b;
	--cd-input:     #12222a;

	--cd-text:      #e8eef0;
	--cd-text2:     #a9bcc4;
	--cd-muted:     #7f97a1;
	--cd-on-accent: #ffffff;

	--cd-soft:      #25404b;
	--cd-medium:    #2c4a56;

	--cd-petrol:      #4fa3bf;
	--cd-petrol-text: #79c2da;
	--cd-teal:        #2a7d99;

	--cd-red:       #e0554d;
	--cd-red-text:  #f08a83;
	--cd-red-fill:  #cf3a33;
	--cd-red-hover: #bf2b25;

	--cd-success:   #4fbf87;

	--cd-halo:       0 0 0 1px rgba(79,163,191,.10), 0 8px 28px rgba(0,0,0,.45);
	--cd-halo-hover: 0 0 0 1px rgba(79,163,191,.22), 0 8px 28px rgba(0,0,0,.55);
	--cd-focus:      0 0 0 3px rgba(79,163,191,.20);

	/* Scrollbars et champs natifs (date/select/…) suivent le thème sombre. */
	color-scheme: dark;
}

/* ------------------------------------------------------------------
   0. TRANSITION DOUCE + SÉLECTION
   ------------------------------------------------------------------ */
html.cpme-dark body,
html.cpme-dark body * {
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
@media (prefers-reduced-motion: reduce) {
	html.cpme-dark body,
	html.cpme-dark body * {
		transition: none !important;
	}
}
html.cpme-dark ::selection {
	background: rgba(79,163,191,.30);
	color: var(--cd-text);
}
html.cpme-dark ::-moz-selection {
	background: rgba(79,163,191,.30);
	color: var(--cd-text);
}

/* ------------------------------------------------------------------
   1. BASE : body, main, page-header, titres, paragraphes, liens
   ------------------------------------------------------------------ */
html.cpme-dark body,
html.cpme-dark main.site-main {
	background-color: var(--cd-base) !important;
	color: var(--cd-text) !important;
}
html.cpme-dark .page-header {
	background-color: var(--cd-surface) !important;
	border-bottom: 1px solid var(--cd-soft) !important;
}
html.cpme-dark h1,
html.cpme-dark h2,
html.cpme-dark h3,
html.cpme-dark h4,
html.cpme-dark .entry-title,
html.cpme-dark .page-header .entry-title {
	color: var(--cd-text) !important;
}
html.cpme-dark p,
html.cpme-dark li,
html.cpme-dark span {
	color: var(--cd-text) !important;
}
/* Texte secondaire/atténué courant. */
html.cpme-dark small,
html.cpme-dark .text-muted,
html.cpme-dark figcaption {
	color: var(--cd-muted) !important;
}
/* Liens = accent pétrole éclairci (PASS AA). */
html.cpme-dark a {
	color: var(--cd-petrol) !important;
}
html.cpme-dark a:hover,
html.cpme-dark a:focus {
	color: var(--cd-petrol-text) !important;
}
html.cpme-dark hr {
	border-color: var(--cd-soft) !important;
}

/* ------------------------------------------------------------------
   2. ELEMENTOR GÉNÉRIQUE : sections, headings, text-editor, boutons,
      image-box / icon-box, image widget
   ------------------------------------------------------------------ */
/* Sections/conteneurs à fond blanc/clair → fond sombre.
   On ne force que le fond des conteneurs, pas des enfants, pour ne pas casser
   les bandeaux pétrole/hero qui posent leur propre background. */
html.cpme-dark .elementor-section,
html.cpme-dark .e-con,
html.cpme-dark .elementor-widget-wrap {
	color: var(--cd-text) !important;
}
/* Sections alternées claires → surface2. Les sections qui portent déjà une
   couleur de fond inline sombre/pétrole ne sont pas ciblées (voir hero teal). */
html.cpme-dark section[style*="#ffffff"],
html.cpme-dark section[style*="#fff"],
html.cpme-dark section[style*="#f6f8f9"],
html.cpme-dark section[style*="#f4f7f8"],
html.cpme-dark .e-con[style*="#ffffff"],
html.cpme-dark .e-con[style*="#f6f8f9"],
html.cpme-dark .e-con[style*="#f4f7f8"] {
	background-color: var(--cd-surface) !important;
}
/* Headings et text-editor → texte clair. */
html.cpme-dark .elementor-widget-heading .elementor-heading-title {
	color: var(--cd-text) !important;
}
html.cpme-dark .elementor-widget-text-editor,
html.cpme-dark .elementor-widget-text-editor p,
html.cpme-dark .elementor-widget-text-editor li {
	color: var(--cd-text) !important;
}
html.cpme-dark .elementor-widget-text-editor a {
	color: var(--cd-petrol) !important;
}

/* Boutons Elementor — primaire rouge par défaut (fill assombri pour AA du label). */
html.cpme-dark .elementor-button,
html.cpme-dark a.elementor-button,
html.cpme-dark button.elementor-button {
	background-color: var(--cd-red-fill) !important;
	color: var(--cd-on-accent) !important;
	border-color: var(--cd-red-fill) !important;
}
html.cpme-dark .elementor-button:hover,
html.cpme-dark .elementor-button:focus,
html.cpme-dark a.elementor-button:hover,
html.cpme-dark a.elementor-button:focus {
	background-color: var(--cd-red-hover) !important;
	border-color: var(--cd-red-hover) !important;
	color: var(--cd-on-accent) !important;
}
html.cpme-dark .elementor-button:focus-visible {
	outline: 2px solid var(--cd-red-text) !important;
	outline-offset: 2px !important;
}
/* Variante pétrole/secondaire : bouton avec classe/couleur pétrole d'origine. */
html.cpme-dark .elementor-button.is-petrol,
html.cpme-dark .elementor-button.cpme-btn-petrol,
html.cpme-dark .elementor-button[style*="#114D61"],
html.cpme-dark .elementor-button[style*="#155a72"] {
	background-color: #155a72 !important;
	border-color: #155a72 !important;
	color: var(--cd-on-accent) !important;
}
html.cpme-dark .elementor-button.is-petrol:hover,
html.cpme-dark .elementor-button.cpme-btn-petrol:hover {
	background-color: #1a6a86 !important;
	border-color: #1a6a86 !important;
}

/* Cartes image-box / icon-box → surface sombre + bordure + halo. */
html.cpme-dark .elementor-widget-image-box .elementor-image-box-wrapper,
html.cpme-dark .elementor-widget-icon-box .elementor-icon-box-wrapper {
	background-color: var(--cd-surface) !important;
	border: 1px solid var(--cd-soft) !important;
	border-radius: 12px !important;
	box-shadow: var(--cd-halo) !important;
}
html.cpme-dark .elementor-widget-image-box .elementor-image-box-title,
html.cpme-dark .elementor-widget-icon-box .elementor-icon-box-title,
html.cpme-dark .elementor-image-box-title,
html.cpme-dark .elementor-icon-box-title {
	color: var(--cd-text) !important;
}
html.cpme-dark .elementor-widget-image-box .elementor-image-box-description,
html.cpme-dark .elementor-widget-icon-box .elementor-icon-box-description,
html.cpme-dark .elementor-image-box-description,
html.cpme-dark .elementor-icon-box-description {
	color: var(--cd-text2) !important;
}
/* Icônes icon-box → accent pétrole (par défaut). */
html.cpme-dark .elementor-widget-icon-box .elementor-icon,
html.cpme-dark .elementor-widget-icon-box .elementor-icon i,
html.cpme-dark .elementor-widget-icon-box .elementor-icon svg {
	color: var(--cd-petrol) !important;
	fill: var(--cd-petrol) !important;
}
/* Icônes marquées "rouge/accent" → rouge lisible. */
html.cpme-dark .elementor-widget-icon-box.is-accent-red .elementor-icon,
html.cpme-dark .elementor-widget-icon-box.is-accent-red .elementor-icon i,
html.cpme-dark .elementor-widget-icon-box.is-accent-red .elementor-icon svg {
	color: var(--cd-red-text) !important;
	fill: var(--cd-red-text) !important;
}
/* Images décoratives très lumineuses : atténuation OPTIONNELLE, jamais sur logos
   ni photos de personnes (référents/portraits exclus via :not()). */
html.cpme-dark .elementor-widget-image.is-dim img:not([src*="logo"]) {
	filter: brightness(.94);
}

/* ------------------------------------------------------------------
   3. HEADER + MENUS
   ------------------------------------------------------------------ */
html.cpme-dark header.elementor-location-header {
	background-color: var(--cd-header) !important;
	border-bottom: 1px solid var(--cd-soft) !important;
}
/* Les conteneurs INTERNES du header portent souvent un fond blanc explicite
   (.e-con / .elementor-container) qui recouvrait la barre → tous forcés en sombre,
   y compris l'état « sticky » d'Elementor. Les widgets (boutons rouges, logo,
   interrupteur) gardent leurs propres couleurs car non ciblés ici. */
html.cpme-dark .elementor-location-header,
html.cpme-dark .elementor-location-header .e-con,
html.cpme-dark .elementor-location-header .e-con-inner,
html.cpme-dark .elementor-location-header .elementor-container,
html.cpme-dark .elementor-location-header .elementor-sticky--effects,
html.cpme-dark .elementor-location-header.elementor-sticky--active {
	background-color: var(--cd-header) !important;
	background-image: none !important;
}
/* Liens de menu clairs. */
html.cpme-dark header.elementor-location-header ul.elementor-nav-menu > li > a,
html.cpme-dark header.elementor-location-header ul.elementor-nav-menu .elementor-item {
	color: var(--cd-text) !important;
}
html.cpme-dark header.elementor-location-header ul.elementor-nav-menu > li > a:hover,
html.cpme-dark header.elementor-location-header ul.elementor-nav-menu .elementor-item:hover,
html.cpme-dark header.elementor-location-header ul.elementor-nav-menu .elementor-item.elementor-item-active {
	color: var(--cd-petrol-text) !important;
}
/* Sous-menus et méga-menus → panneaux sombres élevés. */
html.cpme-dark .sub-menu,
html.cpme-dark ul.elementor-nav-menu .sub-menu,
html.cpme-dark .cpme-mega {
	background-color: var(--cd-elevated) !important;
	border: 1px solid var(--cd-soft) !important;
	box-shadow: var(--cd-halo) !important;
}
html.cpme-dark .sub-menu a,
html.cpme-dark .cpme-mega a {
	color: var(--cd-text2) !important;
}
html.cpme-dark .sub-menu a:hover,
html.cpme-dark .cpme-mega a:hover {
	color: var(--cd-petrol-text) !important;
	background-color: rgba(79,163,191,.10) !important;
}
html.cpme-dark .cpme-mega h3,
html.cpme-dark .cpme-mega h4,
html.cpme-dark .cpme-mega .cpme-mega-title {
	color: var(--cd-text) !important;
}
/* Mega « Mon compte » : GARDER la bordure rouge signature, éclaircie en #e0554d. */
html.cpme-dark .cpme-acct-mega {
	background-color: var(--cd-elevated) !important;
	border: 1px solid var(--cd-red) !important; /* signature rouge conservée, éclaircie */
	box-shadow: var(--cd-halo) !important;
}
html.cpme-dark .cpme-acct-mega a {
	color: var(--cd-text2) !important;
}
html.cpme-dark .cpme-acct-mega a:hover {
	color: var(--cd-petrol-text) !important;
}
/* Accents rouges du menu (Guides, entrées rouges). */
html.cpme-dark .cpme-menu-guide,
html.cpme-dark .cpme-menu-guide a,
html.cpme-dark .cpme-menu .is-red,
html.cpme-dark a.cpme-menu-guide {
	color: var(--cd-red-text) !important;
}

/* Logo header : sombre sur transparent → invisible. On force en blanc cassé.
   Cible UNIQUEMENT les images "logo" du header (jamais les autres visuels). */
html.cpme-dark header.elementor-location-header img[src*="logo"],
html.cpme-dark header.elementor-location-header .elementor-widget-image img[src*="logo"] {
	filter: brightness(0) invert(1) brightness(.96) !important;
}

/* ------------------------------------------------------------------
   4. FOOTER
   ------------------------------------------------------------------ */
html.cpme-dark .elementor-location-footer {
	background-color: var(--cd-header) !important;
	border-top: 1px solid var(--cd-soft) !important;
	color: var(--cd-text2) !important;
}
html.cpme-dark .elementor-location-footer h1,
html.cpme-dark .elementor-location-footer h2,
html.cpme-dark .elementor-location-footer h3,
html.cpme-dark .elementor-location-footer h4,
html.cpme-dark .elementor-location-footer .elementor-heading-title {
	color: var(--cd-text) !important;
}
html.cpme-dark .elementor-location-footer p,
html.cpme-dark .elementor-location-footer li,
html.cpme-dark .elementor-location-footer span {
	color: var(--cd-text2) !important;
}
html.cpme-dark .elementor-location-footer a {
	color: var(--cd-petrol) !important;
}
html.cpme-dark .elementor-location-footer a:hover {
	color: var(--cd-petrol-text) !important;
}
/* Logo footer : même traitement que le header. */
html.cpme-dark .elementor-location-footer img[src*="logo"],
html.cpme-dark .elementor-location-footer .elementor-widget-image img[src*="logo"] {
	filter: brightness(0) invert(1) brightness(.96) !important;
}

/* ------------------------------------------------------------------
   5. LE MAG : cartes, recherche, pagination, badges, carrousel FB, portraits
   ------------------------------------------------------------------ */
html.cpme-dark .cpme-mag-card {
	background-color: var(--cd-surface) !important;
	border: 1px solid var(--cd-soft) !important;
	border-radius: 14px !important;
	box-shadow: var(--cd-halo) !important;
	color: var(--cd-text) !important;
}
html.cpme-dark .cpme-mag-card:hover {
	box-shadow: var(--cd-halo-hover) !important;
}
html.cpme-dark .cpme-mag-card h2,
html.cpme-dark .cpme-mag-card h3,
html.cpme-dark .cpme-mag-card .cpme-mag-card-title {
	color: var(--cd-text) !important;
}
html.cpme-dark .cpme-mag-card p,
html.cpme-dark .cpme-mag-card .cpme-mag-card-excerpt {
	color: var(--cd-text2) !important;
}
html.cpme-dark .cpme-mag-card .cpme-mag-card-meta,
html.cpme-dark .cpme-mag-card time,
html.cpme-dark .cpme-mag-card .cpme-mag-meta {
	color: var(--cd-muted) !important;
}
/* Badges (catégorie / recherche) — rouge lisible sans aplat saturé. */
html.cpme-dark .cpme-mag-card-badge,
html.cpme-dark .cpme-mag-searchbadge {
	background-color: rgba(224,85,77,.16) !important;
	color: var(--cd-red-text) !important;
	border: 1px solid var(--cd-red) !important;
}
/* Barre de recherche Le Mag. */
html.cpme-dark .cpme-mag-search {
	background-color: var(--cd-surface) !important;
	border: 1px solid var(--cd-soft) !important;
	box-shadow: var(--cd-halo) !important;
}
html.cpme-dark .cpme-mag-search input[type="text"],
html.cpme-dark .cpme-mag-search input[type="search"],
html.cpme-dark .cpme-mag-search select {
	background-color: var(--cd-input) !important;
	border: 1px solid var(--cd-medium) !important;
	color: var(--cd-text) !important;
}
html.cpme-dark .cpme-mag-search input::placeholder {
	color: var(--cd-muted) !important;
}
html.cpme-dark .cpme-mag-search input:focus,
html.cpme-dark .cpme-mag-search select:focus {
	border-color: var(--cd-petrol) !important;
	box-shadow: var(--cd-focus) !important;
	outline: none !important;
}
/* Pagination. */
html.cpme-dark .cpme-mag-pagination a,
html.cpme-dark .cpme-mag-pagination span {
	color: var(--cd-text2) !important;
	border-color: var(--cd-soft) !important;
}
html.cpme-dark .cpme-mag-pagination a:hover {
	background-color: #155a72 !important;
	color: var(--cd-on-accent) !important;
	border-color: #155a72 !important;
}
html.cpme-dark .cpme-mag-pagination .current,
html.cpme-dark .cpme-mag-pagination .cpme-page-active {
	background-color: #155a72 !important;
	color: var(--cd-on-accent) !important;
	border-color: #155a72 !important;
}
/* Carrousel Facebook + portraits — cartes sur surface, légendes secondaires. */
html.cpme-dark .cpme-fb2,
html.cpme-dark .cpme-fb2 .cpme-fb2-card,
html.cpme-dark .cpme-portraits,
html.cpme-dark .cpme-portraits .cpme-portrait-card {
	background-color: var(--cd-surface) !important;
	border: 1px solid var(--cd-soft) !important;
	box-shadow: var(--cd-halo) !important;
}
html.cpme-dark .cpme-fb2 figcaption,
html.cpme-dark .cpme-fb2 .cpme-fb2-caption,
html.cpme-dark .cpme-portraits figcaption,
html.cpme-dark .cpme-portraits .cpme-portrait-caption {
	color: var(--cd-text2) !important;
}

/* ------------------------------------------------------------------
   6. RÉFÉRENTS & COMMISSIONS + HERO TEAL
   ------------------------------------------------------------------ */
/* Cartes responsables (.cpme-rf-*). */
html.cpme-dark [class*="cpme-rf-"].cpme-rf-card,
html.cpme-dark .cpme-rf-card {
	background-color: var(--cd-surface) !important;
	border: 1px solid var(--cd-soft) !important;
	border-radius: 14px !important;
	box-shadow: var(--cd-halo) !important;
}
html.cpme-dark .cpme-rf-card .cpme-rf-name,
html.cpme-dark .cpme-rf-name {
	color: var(--cd-text) !important;
}
html.cpme-dark .cpme-rf-card .cpme-rf-role,
html.cpme-dark .cpme-rf-role,
html.cpme-dark .cpme-rf-function {
	color: var(--cd-text2) !important;
}
/* Coordonnées cliquables (mail/tél) → pétrole clair. */
html.cpme-dark .cpme-rf-card a,
html.cpme-dark .cpme-rf-contact a,
html.cpme-dark .cpme-rf-coords a {
	color: var(--cd-petrol-text) !important;
}
/* Section commissions (.cpme-comm-*) → sections alternées surface2. */
html.cpme-dark .cpme-comm-section,
html.cpme-dark [class*="cpme-comm-"].cpme-comm-alt,
html.cpme-dark .cpme-comm-card {
	background-color: var(--cd-surface2) !important;
	border: 1px solid var(--cd-soft) !important;
	color: var(--cd-text) !important;
}
html.cpme-dark .cpme-comm-card h3,
html.cpme-dark .cpme-comm-title {
	color: var(--cd-text) !important;
}
html.cpme-dark .cpme-comm-card p,
html.cpme-dark .cpme-comm-desc {
	color: var(--cd-text2) !important;
}
/* HERO TEAL — point d'ancrage de la charte : rester SOMBRE/PROFOND.
   On l'assombrit légèrement en aplat pétrole foncé, texte blanc conservé. */
html.cpme-dark .elementor-element-8f55a38 {
	background-color: #0d3a48 !important;
	background-image: linear-gradient(135deg, #0d3a48 0%, #114D61 100%) !important;
}
html.cpme-dark .elementor-element-8f55a38 .elementor-heading-title,
html.cpme-dark .elementor-element-8f55a38 h1,
html.cpme-dark .elementor-element-8f55a38 h2,
html.cpme-dark .elementor-element-8f55a38 p,
html.cpme-dark .elementor-element-8f55a38 span,
html.cpme-dark .elementor-element-8f55a38 a {
	color: var(--cd-on-accent) !important;
}

/* ------------------------------------------------------------------
   7. FORMULAIRES MÉTIER : RDV (.cpme-rdvf-*), salle (.cpme-sallef-*),
      verrou adhérent (.cpme-svc-gate), pastille 4x (.cpme-4x-badge)
   ------------------------------------------------------------------ */
/* Conteneurs de formulaires → carte sombre. */
html.cpme-dark [class*="cpme-rdvf-"].cpme-rdvf-form,
html.cpme-dark .cpme-rdvf-form,
html.cpme-dark .cpme-rdvf-wrap,
html.cpme-dark [class*="cpme-sallef-"].cpme-sallef-form,
html.cpme-dark .cpme-sallef-form,
html.cpme-dark .cpme-sallef-wrap {
	background-color: var(--cd-surface) !important;
	border: 1px solid var(--cd-soft) !important;
	border-radius: 14px !important;
	box-shadow: var(--cd-halo) !important;
	color: var(--cd-text) !important;
}
/* Labels. */
html.cpme-dark .cpme-rdvf-form label,
html.cpme-dark .cpme-sallef-form label,
html.cpme-dark [class*="cpme-rdvf-"] label,
html.cpme-dark [class*="cpme-sallef-"] label {
	color: var(--cd-text2) !important;
}
/* Champs. */
html.cpme-dark .cpme-rdvf-form input,
html.cpme-dark .cpme-rdvf-form select,
html.cpme-dark .cpme-rdvf-form textarea,
html.cpme-dark .cpme-sallef-form input,
html.cpme-dark .cpme-sallef-form select,
html.cpme-dark .cpme-sallef-form textarea,
html.cpme-dark [class*="cpme-rdvf-"] input,
html.cpme-dark [class*="cpme-rdvf-"] select,
html.cpme-dark [class*="cpme-rdvf-"] textarea,
html.cpme-dark [class*="cpme-sallef-"] input,
html.cpme-dark [class*="cpme-sallef-"] select,
html.cpme-dark [class*="cpme-sallef-"] textarea {
	background-color: var(--cd-input) !important;
	border: 1px solid var(--cd-medium) !important;
	color: var(--cd-text) !important;
	border-radius: 10px !important;
}
html.cpme-dark .cpme-rdvf-form input::placeholder,
html.cpme-dark .cpme-rdvf-form textarea::placeholder,
html.cpme-dark .cpme-sallef-form input::placeholder,
html.cpme-dark .cpme-sallef-form textarea::placeholder {
	color: var(--cd-muted) !important;
}
html.cpme-dark .cpme-rdvf-form input:focus,
html.cpme-dark .cpme-rdvf-form select:focus,
html.cpme-dark .cpme-rdvf-form textarea:focus,
html.cpme-dark .cpme-sallef-form input:focus,
html.cpme-dark .cpme-sallef-form select:focus,
html.cpme-dark .cpme-sallef-form textarea:focus {
	border-color: var(--cd-petrol) !important;
	box-shadow: var(--cd-focus) !important;
	outline: none !important;
}
/* Boutons rouges conservés. */
html.cpme-dark .cpme-rdvf-form button,
html.cpme-dark .cpme-rdvf-form input[type="submit"],
html.cpme-dark .cpme-rdvf-submit,
html.cpme-dark .cpme-sallef-form button,
html.cpme-dark .cpme-sallef-form input[type="submit"],
html.cpme-dark .cpme-sallef-submit {
	background-color: var(--cd-red-fill) !important;
	color: var(--cd-on-accent) !important;
	border: 1px solid var(--cd-red-fill) !important;
}
html.cpme-dark .cpme-rdvf-form button:hover,
html.cpme-dark .cpme-sallef-form button:hover,
html.cpme-dark .cpme-rdvf-submit:hover,
html.cpme-dark .cpme-sallef-submit:hover {
	background-color: var(--cd-red-hover) !important;
	border-color: var(--cd-red-hover) !important;
}
/* Messages de validation. */
html.cpme-dark .cpme-rdvf-error,
html.cpme-dark .cpme-sallef-error,
html.cpme-dark [class*="cpme-rdvf-"] .error,
html.cpme-dark [class*="cpme-sallef-"] .error {
	color: var(--cd-red-text) !important;
}
html.cpme-dark .cpme-rdvf-success,
html.cpme-dark .cpme-sallef-success,
html.cpme-dark [class*="cpme-rdvf-"] .success,
html.cpme-dark [class*="cpme-sallef-"] .success {
	color: var(--cd-success) !important;
}
/* Verrou adhérent (.cpme-svc-gate) — encart sur surface2, bordure rouge, cadenas rouge. */
html.cpme-dark .cpme-svc-gate {
	background-color: var(--cd-surface2) !important;
	border: 1px solid var(--cd-red) !important;
	border-radius: 12px !important;
	box-shadow: var(--cd-halo) !important;
	color: var(--cd-text2) !important;
}
html.cpme-dark .cpme-svc-gate h1,
html.cpme-dark .cpme-svc-gate h2,
html.cpme-dark .cpme-svc-gate h3,
html.cpme-dark .cpme-svc-gate strong {
	color: var(--cd-text) !important;
}
html.cpme-dark .cpme-svc-gate .cpme-svc-gate-icon,
html.cpme-dark .cpme-svc-gate .dashicons,
html.cpme-dark .cpme-svc-gate i,
html.cpme-dark .cpme-svc-gate svg {
	color: var(--cd-red-text) !important;
	fill: var(--cd-red-text) !important;
}
/* Pastille paiement 4x — l'ancien fond clair #e8f1f4 devient tint pétrole. */
html.cpme-dark .cpme-4x-badge {
	background-color: #16323d !important;
	color: var(--cd-petrol-text) !important;
	border: 1px solid var(--cd-medium) !important;
}

/* ------------------------------------------------------------------
   8. MODULE APPELS D'OFFRES (.aonc-cpme__) — le plus complexe
   ------------------------------------------------------------------ */
/* Racine du module. */
html.cpme-dark .aonc-cpme__root,
html.cpme-dark [class^="aonc-cpme__"],
html.cpme-dark [class*=" aonc-cpme__"] {
	color: var(--cd-text);
}
/* Barre de filtres. */
html.cpme-dark .aonc-cpme__filters,
html.cpme-dark .aonc-cpme__filterbar,
html.cpme-dark .aonc-cpme__toolbar {
	background-color: var(--cd-surface) !important;
	border-bottom: 1px solid var(--cd-soft) !important;
	color: var(--cd-text) !important;
}
/* Chips / pills — état inactif. */
html.cpme-dark .aonc-cpme__chip,
html.cpme-dark .aonc-cpme__pill,
html.cpme-dark .aonc-cpme__filter-chip {
	background-color: var(--cd-surface2) !important;
	color: var(--cd-text2) !important;
	border: 1px solid var(--cd-medium) !important;
}
html.cpme-dark .aonc-cpme__chip:hover,
html.cpme-dark .aonc-cpme__pill:hover {
	color: var(--cd-petrol-text) !important;
	border-color: var(--cd-petrol) !important;
}
/* Chips / pills — état actif / sélectionné. */
html.cpme-dark .aonc-cpme__chip.is-active,
html.cpme-dark .aonc-cpme__chip[aria-pressed="true"],
html.cpme-dark .aonc-cpme__pill.is-active,
html.cpme-dark .aonc-cpme__pill--active,
html.cpme-dark .aonc-cpme__filter-chip.is-selected {
	background-color: rgba(79,163,191,.16) !important;
	color: var(--cd-petrol-text) !important;
	border-color: var(--cd-petrol) !important;
}
/* Cartes de résultat. */
html.cpme-dark .aonc-cpme__card,
html.cpme-dark .aonc-cpme__result,
html.cpme-dark .aonc-cpme__result-card {
	background-color: var(--cd-surface) !important;
	border: 1px solid var(--cd-soft) !important;
	border-radius: 12px !important;
	box-shadow: var(--cd-halo) !important;
	color: var(--cd-text) !important;
}
html.cpme-dark .aonc-cpme__card:hover,
html.cpme-dark .aonc-cpme__result-card:hover {
	box-shadow: var(--cd-halo-hover) !important;
}
html.cpme-dark .aonc-cpme__card-title,
html.cpme-dark .aonc-cpme__result-title {
	color: var(--cd-text) !important;
}
html.cpme-dark .aonc-cpme__card-meta,
html.cpme-dark .aonc-cpme__result-meta {
	color: var(--cd-muted) !important;
}
html.cpme-dark .aonc-cpme__card-link,
html.cpme-dark .aonc-cpme__result a,
html.cpme-dark .aonc-cpme__view {
	color: var(--cd-petrol) !important;
}
html.cpme-dark .aonc-cpme__card-link:hover,
html.cpme-dark .aonc-cpme__view:hover {
	color: var(--cd-petrol-text) !important;
}
/* Tableau. */
html.cpme-dark .aonc-cpme__table {
	background-color: var(--cd-surface) !important;
	border: 1px solid var(--cd-soft) !important;
	color: var(--cd-text) !important;
}
html.cpme-dark .aonc-cpme__table thead th,
html.cpme-dark .aonc-cpme__table th {
	background-color: var(--cd-surface2) !important;
	color: var(--cd-text2) !important;
	border-bottom: 1px solid var(--cd-soft) !important;
}
html.cpme-dark .aonc-cpme__table td {
	background-color: var(--cd-surface) !important;
	color: var(--cd-text) !important;
	border-bottom: 1px solid var(--cd-soft) !important;
}
/* Zébrage des lignes paires. */
html.cpme-dark .aonc-cpme__table tbody tr:nth-child(even) td {
	background-color: var(--cd-input) !important;
}
/* Survol de ligne. */
html.cpme-dark .aonc-cpme__table tbody tr:hover td {
	background-color: #173842 !important;
}
/* Inputs / selects (recherche, tri). */
html.cpme-dark .aonc-cpme__input,
html.cpme-dark .aonc-cpme__search,
html.cpme-dark .aonc-cpme__select,
html.cpme-dark .aonc-cpme__filters input,
html.cpme-dark .aonc-cpme__filters select,
html.cpme-dark .aonc-cpme__toolbar input,
html.cpme-dark .aonc-cpme__toolbar select {
	background-color: var(--cd-input) !important;
	border: 1px solid var(--cd-medium) !important;
	color: var(--cd-text) !important;
	border-radius: 10px !important;
}
html.cpme-dark .aonc-cpme__input::placeholder,
html.cpme-dark .aonc-cpme__search::placeholder {
	color: var(--cd-muted) !important;
}
html.cpme-dark .aonc-cpme__input:focus,
html.cpme-dark .aonc-cpme__search:focus,
html.cpme-dark .aonc-cpme__select:focus {
	border-color: var(--cd-petrol) !important;
	box-shadow: var(--cd-focus) !important;
	outline: none !important;
}
/* Chevron/flèche des selects → pétrole clair (color hérité par les svg/::after maison). */
html.cpme-dark .aonc-cpme__select {
	color: var(--cd-text) !important;
}
html.cpme-dark .aonc-cpme__select-chevron,
html.cpme-dark .aonc-cpme__select::-ms-expand {
	color: var(--cd-petrol-text) !important;
}
/* Pagination du module (idem Le Mag). */
html.cpme-dark .aonc-cpme__pagination a,
html.cpme-dark .aonc-cpme__pagination span {
	color: var(--cd-text2) !important;
	border-color: var(--cd-soft) !important;
}
html.cpme-dark .aonc-cpme__pagination a:hover {
	color: var(--cd-petrol-text) !important;
	border-color: var(--cd-petrol) !important;
}
html.cpme-dark .aonc-cpme__pagination .is-active,
html.cpme-dark .aonc-cpme__pagination .current,
html.cpme-dark .aonc-cpme__page--active {
	background-color: #155a72 !important;
	color: var(--cd-on-accent) !important;
	border-color: #155a72 !important;
}
/* Modales / popovers (détail + connexion). */
html.cpme-dark .aonc-cpme__modal,
html.cpme-dark .aonc-cpme__popover,
html.cpme-dark .aonc-cpme__dialog {
	background-color: var(--cd-elevated) !important;
	border: 1px solid var(--cd-medium) !important;
	border-radius: 14px !important;
	box-shadow: var(--cd-halo-hover) !important;
	color: var(--cd-text) !important;
}
html.cpme-dark .aonc-cpme__modal h1,
html.cpme-dark .aonc-cpme__modal h2,
html.cpme-dark .aonc-cpme__modal h3,
html.cpme-dark .aonc-cpme__dialog h2 {
	color: var(--cd-text) !important;
}
html.cpme-dark .aonc-cpme__modal p,
html.cpme-dark .aonc-cpme__modal li,
html.cpme-dark .aonc-cpme__dialog p {
	color: var(--cd-text2) !important;
}
/* Overlay/backdrop des modales. */
html.cpme-dark .aonc-cpme__overlay,
html.cpme-dark .aonc-cpme__backdrop,
html.cpme-dark .aonc-cpme__modal-overlay {
	background-color: rgba(6,12,15,.72) !important;
}
/* Champs à l'intérieur des modales. */
html.cpme-dark .aonc-cpme__modal input,
html.cpme-dark .aonc-cpme__modal select,
html.cpme-dark .aonc-cpme__modal textarea,
html.cpme-dark .aonc-cpme__dialog input,
html.cpme-dark .aonc-cpme__dialog select {
	background-color: var(--cd-input) !important;
	border: 1px solid var(--cd-medium) !important;
	color: var(--cd-text) !important;
}
html.cpme-dark .aonc-cpme__modal input:focus,
html.cpme-dark .aonc-cpme__dialog input:focus {
	border-color: var(--cd-petrol) !important;
	box-shadow: var(--cd-focus) !important;
	outline: none !important;
}
/* Bouton fermer. */
html.cpme-dark .aonc-cpme__modal-close,
html.cpme-dark .aonc-cpme__close {
	color: var(--cd-text2) !important;
}
html.cpme-dark .aonc-cpme__modal-close:hover,
html.cpme-dark .aonc-cpme__close:hover {
	color: var(--cd-text) !important;
}
/* Boutons primaires du module (connexion, valider) → rouge conservé. */
html.cpme-dark .aonc-cpme__btn--primary,
html.cpme-dark .aonc-cpme__button.is-primary,
html.cpme-dark .aonc-cpme__submit {
	background-color: var(--cd-red-fill) !important;
	color: var(--cd-on-accent) !important;
	border: 1px solid var(--cd-red-fill) !important;
}
html.cpme-dark .aonc-cpme__btn--primary:hover,
html.cpme-dark .aonc-cpme__submit:hover {
	background-color: var(--cd-red-hover) !important;
	border-color: var(--cd-red-hover) !important;
}
/* Bouton secondaire/ghost pétrole. */
html.cpme-dark .aonc-cpme__btn--secondary,
html.cpme-dark .aonc-cpme__button.is-ghost {
	background-color: transparent !important;
	color: var(--cd-petrol) !important;
	border: 1px solid var(--cd-petrol) !important;
}
html.cpme-dark .aonc-cpme__btn--secondary:hover,
html.cpme-dark .aonc-cpme__button.is-ghost:hover {
	background-color: rgba(79,163,191,.12) !important;
	color: var(--cd-petrol-text) !important;
}

/* ------------------------------------------------------------------
   9. INPUTS / SELECTS / TEXTAREA GÉNÉRIQUES
   ------------------------------------------------------------------ */
html.cpme-dark input[type="text"],
html.cpme-dark input[type="email"],
html.cpme-dark input[type="tel"],
html.cpme-dark input[type="url"],
html.cpme-dark input[type="number"],
html.cpme-dark input[type="password"],
html.cpme-dark input[type="search"],
html.cpme-dark input[type="date"],
html.cpme-dark input[type="time"],
html.cpme-dark textarea,
html.cpme-dark select {
	background-color: var(--cd-input) !important;
	border: 1px solid var(--cd-medium) !important;
	color: var(--cd-text) !important;
}
html.cpme-dark input::placeholder,
html.cpme-dark textarea::placeholder {
	color: var(--cd-muted) !important;
}
html.cpme-dark input:focus,
html.cpme-dark textarea:focus,
html.cpme-dark select:focus {
	border-color: var(--cd-petrol) !important;
	box-shadow: var(--cd-focus) !important;
	outline: none !important;
}
/* Boutons génériques du thème (submit hors Elementor). */
html.cpme-dark button:not(.elementor-button):not([class*="aonc-cpme__"]):not([class*="cpme-"]),
html.cpme-dark input[type="submit"]:not(.elementor-button) {
	background-color: var(--cd-red-fill) !important;
	color: var(--cd-on-accent) !important;
	border: 1px solid var(--cd-red-fill) !important;
}
html.cpme-dark button:not(.elementor-button):not([class*="aonc-cpme__"]):not([class*="cpme-"]):hover {
	background-color: var(--cd-red-hover) !important;
	border-color: var(--cd-red-hover) !important;
}

/* ------------------------------------------------------------------
   10. OMBRES → HALOS génériques (cartes/panneaux du thème)
   ------------------------------------------------------------------ */
html.cpme-dark .card,
html.cpme-dark .cpme-card,
html.cpme-dark article.hentry {
	box-shadow: var(--cd-halo) !important;
	border-color: var(--cd-soft) !important;
}

/* ------------------------------------------------------------------
   11. COMPOSANTS SUR-MESURE (relief accueil + bureau) — ajoutés après coup,
       le mode sombre d'origine ne les couvrait pas. Fonds clairs → surfaces
       sombres, textes/accents ré-éclaircis. Spécificité + !important pour
       passer devant les règles !important de cpme-home-relief / cpme-bureau.
   ------------------------------------------------------------------ */

/* --- Intro « L'organisation patronale… » (panneau relief) --- */
html.cpme-dark .elementor-element-8800314 > .e-con-inner {
	background: linear-gradient(180deg, var(--cd-surface) 0%, var(--cd-base) 62%) !important;
	border: 1px solid var(--cd-soft) !important;
	box-shadow: 0 20px 54px rgba(0,0,0,.45) !important;
}
html.cpme-dark .elementor-element-8800314 > .e-con-inner::before {
	background: radial-gradient(circle at 32% 32%, rgba(79,163,191,.16), rgba(79,163,191,0) 70%) !important;
}
html.cpme-dark .elementor-element-8800314 p,
html.cpme-dark .elementor-element-8800314 .elementor-widget-text-editor {
	color: var(--cd-text2) !important;
}
html.cpme-dark .elementor-element-8800314 strong {
	background: linear-gradient(180deg, transparent 60%, rgba(240,138,131,.24) 60%) !important;
	color: var(--cd-text) !important;
}

/* --- Les 4 valeurs (cartes + cercle d'icône rouge) --- */
html.cpme-dark .elementor-element-3585420 > .elementor-widget-icon-box {
	background: var(--cd-surface) !important;
	border: 1px solid var(--cd-soft) !important;
	box-shadow: 0 12px 30px rgba(0,0,0,.4) !important;
}
html.cpme-dark .elementor-element-3585420 .elementor-icon {
	background: rgba(224,85,77,.15) !important;
	box-shadow: 0 0 0 8px rgba(224,85,77,.06) !important;
}
html.cpme-dark .elementor-element-3585420 .elementor-icon-box-description {
	color: var(--cd-text2) !important;
}

/* --- « Des outils concrets » (grille services + médaillons) --- */
html.cpme-dark .elementor-element-f2ababf > * {
	background: var(--cd-surface) !important;
	border: 1px solid var(--cd-soft) !important;
	box-shadow: 0 10px 26px rgba(0,0,0,.4) !important;
}
html.cpme-dark .elementor-element-f2ababf .elementor-icon-box-wrapper::before {
	background-color: var(--cd-teal) !important; /* médaillon plus lumineux sur fond sombre */
	box-shadow: 0 8px 18px rgba(0,0,0,.4) !important;
}
html.cpme-dark .elementor-element-f2ababf > *:hover .elementor-icon-box-wrapper::before {
	background-color: var(--cd-red-fill) !important;
}
html.cpme-dark .elementor-element-f2ababf .elementor-icon-box-title {
	color: var(--cd-petrol-text) !important;
}
html.cpme-dark .elementor-element-f2ababf .elementor-icon-box-description {
	color: var(--cd-text2) !important;
}

/* --- Bureau (cartes membres) — cpme-bureau.php --- */
html.cpme-dark .cpme-bur-card {
	background: var(--cd-surface) !important;
	border: 1px solid var(--cd-soft) !important;
	box-shadow: 0 10px 28px rgba(0,0,0,.42) !important;
}
html.cpme-dark .cpme-bur-name { color: var(--cd-text) !important; }
html.cpme-dark .cpme-bur-role { color: var(--cd-red-text) !important; }
html.cpme-dark .cpme-bur-body,
html.cpme-dark .cpme-bur-company { color: var(--cd-text2) !important; }
html.cpme-dark .cpme-bur-media { background: var(--cd-surface2) !important; }

/* ------------------------------------------------------------------
   12. MODULES / PAGES sur-mesure — appels d'offres, réservation de salle
       (FullCalendar), bande services accueil. Repérés au diagnostic « fonds
       clairs restants » en mode sombre.
   ------------------------------------------------------------------ */

/* --- Accueil : bande + colonne gauche de « Des outils concrets » --- */
html.cpme-dark .elementor-element-c9c8c1b,
html.cpme-dark .elementor-element-c9c8c1b > .e-con-inner,
html.cpme-dark .elementor-element-c9c8c1b > .e-con {
	background-color: var(--cd-base) !important;
	background-image: none !important;
}

/* --- Bureau : bouton « Contacter » (pastille blanche) --- */
html.cpme-dark .cpme-bur-contact {
	background: var(--cd-surface2) !important;
	border: 1px solid var(--cd-soft) !important;
	color: var(--cd-text) !important;
}
html.cpme-dark .cpme-bur-contact:hover {
	background: var(--cd-elevated) !important;
	color: var(--cd-petrol-text) !important;
}

/* --- Réservation de salle : FullCalendar (bascule par variables --fc-*) --- */
html.cpme-dark .cpme-resa-cal {
	--fc-page-bg-color: var(--cd-surface);
	--fc-neutral-bg-color: var(--cd-surface2);
	--fc-neutral-text-color: var(--cd-text2);
	--fc-border-color: var(--cd-soft);
	--fc-today-bg-color: rgba(79,163,191,.12);
	--fc-list-event-hover-bg-color: var(--cd-elevated);
	--fc-highlight-color: rgba(79,163,191,.18);
	background: var(--cd-surface) !important;
	color: var(--cd-text) !important;
	border-radius: 14px !important;
}
html.cpme-dark .cpme-resa-cal .fc-col-header-cell,
html.cpme-dark .cpme-resa-cal .fc-timegrid-axis,
html.cpme-dark .cpme-resa-cal thead th {
	background: var(--cd-surface2) !important;
}
html.cpme-dark .cpme-resa-cal .fc-col-header-cell-cushion,
html.cpme-dark .cpme-resa-cal .fc-timegrid-slot-label-cushion,
html.cpme-dark .cpme-resa-cal .fc-toolbar-title,
html.cpme-dark .cpme-resa-cal a {
	color: var(--cd-text) !important;
}
html.cpme-dark .cpme-resa-cal .fc-scrollgrid,
html.cpme-dark .cpme-resa-cal td,
html.cpme-dark .cpme-resa-cal th {
	border-color: var(--cd-soft) !important;
}
/* filtres salle (chips « Toutes les salles / Corail / Niaouli ») */
html.cpme-dark .cpme-resa-filter,
html.cpme-dark .cpme-resa-fbtn {
	background: var(--cd-surface) !important;
	border-color: var(--cd-soft) !important;
	color: var(--cd-text2) !important;
}
html.cpme-dark .cpme-resa-fbtn.is-active,
html.cpme-dark .cpme-resa-fbtn[aria-pressed="true"] {
	background: var(--cd-elevated) !important;
	color: var(--cd-text) !important;
}

/* --- Module appels d'offres (.aonc-cpme) : bascule par ses variables --- */
html.cpme-dark .aonc-cpme,
html.cpme-dark .aonc-ao-app {
	--aonc-bg: var(--cd-surface);
	--aonc-bg-alt: var(--cd-surface2);
	--aonc-bg-chip: var(--cd-elevated);
	--aonc-bg-agg: var(--cd-surface2);
	--aonc-bg-page: var(--cd-base);
	--aonc-text: var(--cd-text);
	--aonc-text-muted: var(--cd-muted);
	--aonc-divider: var(--cd-soft);
	--aonc-divider-soft: var(--cd-soft);
	--aonc-border-input: var(--cd-medium);
	--aonc-primary: #79c2da;      /* pétrole clair : titres/accents lisibles sur sombre */
	--aonc-primary-dark: #4fa3bf;
	background-color: var(--cd-base) !important;
	color: var(--cd-text) !important;
}
/* filets de sécurité pour les zones à fond explicite du module */
html.cpme-dark .aonc-cpme__header,
html.cpme-dark .aonc-cpme__filters-bar,
html.cpme-dark .aonc-cpme__table-wrap {
	background-color: var(--cd-surface) !important;
	border-color: var(--cd-soft) !important;
}
html.cpme-dark .aonc-cpme__quick-chips {
	background-color: transparent !important;
}
html.cpme-dark .aonc-cpme__qchip,
html.cpme-dark .aonc-cpme__combo-trigger,
html.cpme-dark .aonc-cpme__combo-panel,
html.cpme-dark .aonc-cpme__filter-input {
	background-color: var(--cd-elevated) !important;
	border-color: var(--cd-soft) !important;
	color: var(--cd-text2) !important;
}
html.cpme-dark .aonc-cpme__table-wrap th,
html.cpme-dark .aonc-cpme__table-wrap td,
html.cpme-dark .aonc-cpme__row {
	background-color: transparent !important;
	border-color: var(--cd-soft) !important;
	color: var(--cd-text2) !important;
}
html.cpme-dark .aonc-cpme__row:hover {
	background-color: rgba(79,163,191,.07) !important;
}

/* ------------------------------------------------------------------
   13. PLUGIN ADHÉSIONS (annuaire, réservation salle, compte, cotisation)
       — cpme-nc-adhesions thème tout par ses variables --cpme-*.
       Un seul flip → toutes ses pages passent en sombre. html.cpme-dark
       (0,1,1) bat le :root (0,1,0) du plugin, pas besoin de !important.
   ------------------------------------------------------------------ */
html.cpme-dark {
	--cpme-bg:            var(--cd-base);
	--cpme-surface:       var(--cd-surface);
	--cpme-border:        var(--cd-soft);
	--cpme-border-strong: var(--cd-medium);
	--cpme-text:          var(--cd-text);
	--cpme-text-soft:     var(--cd-text2);
	--cpme-text-muted:    var(--cd-muted);
	--cpme-primary:       #79c2da; /* pétrole clair : titres/liens lisibles sur sombre */
	--cpme-primary-dark:  #4fa3bf;
	--cpme-success:       #4fbf87;
	--cpme-success-bg:    rgba(33,121,74,.20);
	--cpme-warning:       #e0954a;
	--cpme-warning-bg:    rgba(192,112,31,.20);
	--cpme-danger:        #f08a83;
	--cpme-danger-bg:     rgba(168,24,21,.22);
	--cpme-info:          #6bb2e0;
	--cpme-info-bg:       rgba(30,111,177,.18);
	--cpme-shadow-sm:     0 1px 2px rgba(0,0,0,.35);
	--cpme-shadow:        0 1px 3px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.45);
}
/* Filets pour les zones à fond explicite (non basées sur les variables). */
html.cpme-dark .cpme-annuaire-toolbar,
html.cpme-dark .cpme-annuaire-card,
html.cpme-dark .cpme-annuaire-cta,
html.cpme-dark .cpme-combo-toggle,
html.cpme-dark .cpme-combo-list,
html.cpme-dark .cpme-annuaire-toolbar select,
html.cpme-dark .cpme-annuaire-toolbar input[type="search"] {
	background-color: var(--cd-surface) !important;
	border-color: var(--cd-soft) !important;
	color: var(--cd-text) !important;
}
html.cpme-dark .cpme-combo-opt:hover,
html.cpme-dark .cpme-combo-opt.is-active {
	background-color: rgba(79,163,191,.12) !important;
	color: var(--cd-text) !important;
}
html.cpme-dark .cpme-annuaire-secteur {
	background-color: var(--cd-elevated) !important;
	color: var(--cd-text2) !important;
}
/* Les fiches épinglées (--pinned) n'ont plus AUCUNE distinction (badge « À la une »
   et fond retirés côté plugin) → elles suivent le style sombre standard des cartes. */

/* --- Assistant RDV (.cpme-rdvf-*) : écrans, cartes de choix, fil d'étapes.
   Les CHAMPS et le conteneur étaient déjà couverts (section 7) ; il manquait
   les cartes de sélection du domaine et l'indicateur d'étapes. --- */
html.cpme-dark .cpme-rdvf-form,
html.cpme-dark .cpme-rdvf-screen {
	background-image: none !important;
}
html.cpme-dark .cpme-rdvf-card,
html.cpme-dark .cpme-rdvf-card-in {
	background: var(--cd-surface2) !important;
	background-image: none !important;
	border-color: var(--cd-soft) !important;
	color: var(--cd-text) !important;
}
html.cpme-dark .cpme-rdvf-card:hover .cpme-rdvf-card-in,
html.cpme-dark .cpme-rdvf-card.is-active .cpme-rdvf-card-in,
html.cpme-dark input:checked + .cpme-rdvf-card-in {
	background: var(--cd-elevated) !important;
	border-color: var(--cd-petrol) !important;
}
html.cpme-dark .cpme-rdvf-card-lbl,
html.cpme-dark .cpme-rdvf-title { color: var(--cd-text) !important; }
html.cpme-dark .cpme-rdvf-desc,
html.cpme-dark .cpme-rdvf-desc-txt { color: var(--cd-text2) !important; }
html.cpme-dark .cpme-rdvf-frame-wrap {
	background: var(--cd-elevated) !important;
	border-color: var(--cd-soft) !important;
}
html.cpme-dark .cpme-rdvf-step-n {
	background: var(--cd-elevated) !important;
	color: var(--cd-text) !important;
}
html.cpme-dark .cpme-rdvf-step.is-active .cpme-rdvf-step-n,
html.cpme-dark .cpme-rdvf-step[aria-current] .cpme-rdvf-step-n {
	background: var(--cd-red-fill) !important;
	color: #fff !important;
}
html.cpme-dark .cpme-rdvf-step-t { color: var(--cd-text2) !important; }
html.cpme-dark .cpme-rdvf-stepline { background: var(--cd-soft) !important; }

/* --- Le Mag : bandes de section + pills catégories + cartes articles --- */
html.cpme-dark .elementor-element-dc25cc17,
html.cpme-dark .elementor-element-ce65b641,
html.cpme-dark .elementor-element-3d09171 {
	background-color: var(--cd-base) !important;
	background-image: none !important;
}
html.cpme-dark .cpme-mag-pills { background-color: transparent !important; }
html.cpme-dark .cpme-mag-pill {
	background-color: var(--cd-surface) !important;
	border-color: var(--cd-soft) !important;
	color: var(--cd-text2) !important;
}
html.cpme-dark .cpme-mag-pill:hover { background-color: var(--cd-elevated) !important; color: var(--cd-text) !important; }
html.cpme-dark .cpme-mag-pill.is-active,
html.cpme-dark .cpme-mag-pill.active,
html.cpme-dark .cpme-mag-pill[aria-current] {
	background-color: var(--cd-red-fill) !important;
	border-color: var(--cd-red-fill) !important;
	color: #fff !important;
}
html.cpme-dark .cpme-mag-card,
html.cpme-dark .cpme-pf-card {
	background-color: var(--cd-surface) !important;
	border-color: var(--cd-soft) !important;
	color: var(--cd-text) !important;
}
html.cpme-dark .cpme-mag-card-media,
html.cpme-dark .cpme-pf-card-media { background-color: var(--cd-surface2) !important; }

/* --- Référents & commissions : panneaux de détail --- */
html.cpme-dark .cpme-cm-detail,
html.cpme-dark .cpme-cm-card,
html.cpme-dark .cpme-cm-panel,
html.cpme-dark .cpme-cm-list,
html.cpme-dark .cpme-cm-member {
	background-color: var(--cd-surface) !important;
	border-color: var(--cd-soft) !important;
	color: var(--cd-text) !important;
}
html.cpme-dark .cpme-cm-badge,
html.cpme-dark .cpme-cm-tag,
html.cpme-dark .cpme-cm-chip {
	background-color: var(--cd-elevated) !important;
	color: var(--cd-text2) !important;
}

/* --- Méga-menus : titres bien lisibles. Le méga « Mon compte » (.cpme-acct-mega)
   avait ses titres en <b> couleur #0d3a48 = sombre sur sombre → invisibles.
   Les sous-items étaient un peu ternes → on éclaircit. --- */
html.cpme-dark .cpme-acct-mega b,
html.cpme-dark .cpme-acct-mega strong,
html.cpme-dark .cpme-mega b,
html.cpme-dark .cpme-mega strong {
	color: var(--cd-text) !important;
}
html.cpme-dark .elementor-sub-item,
html.cpme-dark .cpme-mega a,
html.cpme-dark .cpme-acct-mega a {
	color: var(--cd-text) !important;
}
html.cpme-dark .elementor-sub-item:hover,
html.cpme-dark .cpme-mega a:hover,
html.cpme-dark .cpme-acct-mega a:hover {
	color: var(--cd-petrol-text) !important;
	background-color: rgba(79,163,191,.12) !important; /* survol pétrole discret (le rose clair est neutralisé) */
}
html.cpme-dark .cpme-acct-mega a:hover b,
html.cpme-dark .cpme-mega a:hover b { color: var(--cd-petrol-text) !important; }
/* Les sous-titres <em> restent en gris doux. */
html.cpme-dark .cpme-acct-mega em,
html.cpme-dark .cpme-mega em { color: var(--cd-text2) !important; }

/* Annuaire : bouton « Voir la fiche » plus lumineux sur fond sombre. */
html.cpme-dark .cpme-annuaire-more {
	background: var(--cd-teal) !important;
	color: #ffffff !important;
	box-shadow: 0 4px 12px rgba(0,0,0,.4) !important;
}
html.cpme-dark .cpme-annuaire-more:hover { background: var(--cd-petrol) !important; }

/* --- Compte adhérent : fiche annuaire (champ Secteur blanc + panneau « Masquer ») --- */
html.cpme-dark .cpme-annuaire-account input,
html.cpme-dark .cpme-annuaire-account textarea,
html.cpme-dark .cpme-annuaire-account select,
html.cpme-dark .cpme-annuaire-fields input,
html.cpme-dark .cpme-annuaire-fields textarea,
html.cpme-dark .cpme-annuaire-fields select {
	background-color: var(--cd-input) !important;
	border-color: var(--cd-medium) !important;
	color: var(--cd-text) !important;
}
html.cpme-dark .cpme-annuaire-account input::placeholder,
html.cpme-dark .cpme-annuaire-account textarea::placeholder {
	color: var(--cd-muted) !important;
}
html.cpme-dark .cpme-annuaire-visibility {
	background-color: var(--cd-surface2) !important;
	border-color: var(--cd-soft) !important;
}
html.cpme-dark .cpme-annuaire-visibility .cpme-label,
html.cpme-dark .cpme-annuaire-visibility-hint,
html.cpme-dark .cpme-annuaire-hide { color: var(--cd-text2) !important; }
html.cpme-dark .cpme-annuaire-visibility .cpme-label { color: var(--cd-text) !important; }

/* --- Assistant « Ma fiche annuaire » (.cpme-wz-*) : boutons primaires. Le style
   <button> du thème (fond magenta) traversait sur « Suivant », et --wz-primary
   clair (#79c2da) donnait un contraste faible avec le texte blanc. On force un
   pétrole moyen lisible, cohérent sur les deux boutons. --- */
html.cpme-dark .cpme-wz-btn--primary {
	background: #2a7d99 !important;
	color: #ffffff !important;
}
html.cpme-dark .cpme-wz-btn--primary:hover { filter: brightness(1.1); }
html.cpme-dark .cpme-wz-btn--ghost {
	color: var(--cd-text2) !important;
	border-color: var(--cd-soft) !important;
	background: transparent !important;
}

/* ------------------------------------------------------------------
   FIN — mode sombre CPME
   ------------------------------------------------------------------ */