/**
 * Mode NÉGATIF pour la page /realisations-negatif/
 *
 * Inverse la charte de couleurs :
 *   paper #e6e6e5 (fond clair)  →  #121212  (dark ink)
 *   ink   #121212 (texte foncé) →  #e6e6e5  (texte clair)
 *   accents (badedf bleu, F9893D orange) restent — bien lisibles sur fond dark.
 *
 * Approche : cibler tout ce qui a explicitement ces couleurs plutôt qu'un
 * filter:invert() global (qui casserait les images et les screenshots des
 * projets). Le CSS est chargé UNIQUEMENT sur les pages avec body.cc-neg-mode.
 */

/* Body + arrière-plans globaux ─────────────────────────── */
body.cc-neg-mode,
body.cc-neg-mode .site-main,
body.cc-neg-mode main,
body.cc-neg-mode #site-main,
body.cc-neg-mode .site-content {
    background-color: #121212 !important;
    color: #e6e6e5 !important;
}

/* Sections Elementor ───────────────────────────────────── */
body.cc-neg-mode .elementor-section,
body.cc-neg-mode .elementor-top-section {
    background-color: #121212 !important;
}

/* Texte foncé → texte clair ────────────────────────────── */
body.cc-neg-mode,
body.cc-neg-mode p,
body.cc-neg-mode h1,
body.cc-neg-mode h2,
body.cc-neg-mode h3,
body.cc-neg-mode h4,
body.cc-neg-mode h5,
body.cc-neg-mode h6,
body.cc-neg-mode span,
body.cc-neg-mode div,
body.cc-neg-mode a,
body.cc-neg-mode .text-box,
body.cc-neg-mode .elementor-widget-container,
body.cc-neg-mode .elementor-heading-title {
    color: #e6e6e5;
}

/* Éléments avec text_color: #121212 (widgets cygnitextbox) : override */
body.cc-neg-mode .elementor-widget-cygnitextbox * {
    color: #e6e6e5 !important;
}

/* Sauf le fond bleu accent (background:#badedf) qui reste sur son texte foncé */
body.cc-neg-mode font[style*="badedf"],
body.cc-neg-mode [style*="background:#badedf"],
body.cc-neg-mode [style*="background: #badedf"],
body.cc-neg-mode .cc4-title em,
body.cc-neg-mode .cc4-intro-title em,
body.cc-neg-mode em[style*="badedf"] {
    color: #121212 !important;
}

/* Grille 4-cols négative — widgets natifs Elementor ────── */
/* Toutes les cartes ont le MÊME fond dark (identique à la page).
   Les variations aléatoires ont été retirées. */
body.cc-neg-mode .cc4-card {
    color: #e6e6e5 !important;
    background-color: #121212 !important;
    border-color: rgba(230,230,229,0.12) !important;
    transition: background-color 0.4s ease;
}
/* Pas de règle background-color ici — laisse le JS gérer via inline style. */

/* ─── Animation reveal-on-scroll : voir css/reveal-scroll.css (partagé) ────
   Les règles de base (translateX, blur, opacity, transitions) sont dans
   reveal-scroll.css et s'appliquent aux 2 pages.
   Ici on garde seulement le filter final (duotone dark) et le hover. */

/* État final : filter duotone dark appliqué sur l'image */
body.cc-neg-mode .cc4-card.cc4-visible .elementor-widget-image.cc4-image img {
    filter: blur(0) saturate(1) grayscale(1) contrast(1.12) brightness(0.9);
}
/* Hover : retour couleur (override grayscale) */
body.cc-neg-mode .cc4-card.cc4-visible:hover .elementor-widget-image.cc4-image img {
    filter: blur(0) saturate(1.05) grayscale(0) contrast(1) brightness(1);
}

/* Duotone overlay — synchronisé avec le reveal-on-scroll.
   Au repos (pas visible) : opacity 0 comme l'image.
   Card visible : opacity 1 (l'overlay bleu s'affiche par-dessus le grayscale).
   Hover : opacity 0 (retour couleur).
   Le mode dark utilise "screen" au lieu de "lighten" pour bien "éclaircir" les
   niveaux gris avec le bleu (lighten sur fond dark = juste bleu partout). */
/* Overlay motif lignes sur mode négatif : mode screen + opacity synchro reveal */
body.cc-neg-mode .elementor-widget-image.cc4-image > .elementor-widget-container::after {
    background-color: transparent;
    background-image: url('/capsulecorp/wp-content/uploads/2024/05/fond_ligne.png');
    background-repeat: repeat;
    background-size: 15px 14px;
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
body.cc-neg-mode .cc4-card.cc4-visible .elementor-widget-image.cc4-image > .elementor-widget-container::after {
    opacity: 0.7;
}
body.cc-neg-mode .cc4-card.cc4-visible:hover .elementor-widget-image.cc4-image > .elementor-widget-container::after {
    opacity: 0;
}

/* ─── Stagger PAR COLONNE : voir css/reveal-scroll.css (partagé) ─────── */
body.cc-neg-mode .elementor-widget-cygnitextbox.cc4-numrow { color: rgba(230,230,229,0.5) !important; }
body.cc-neg-mode .elementor-widget-cygnitextbox.cc4-numrow * { color: rgba(230,230,229,0.5) !important; }
body.cc-neg-mode .elementor-widget-cygnitextbox.cc4-numrow b { color: #e6e6e5 !important; }
body.cc-neg-mode .elementor-widget-cygnitextbox.cc4-sub,
body.cc-neg-mode .elementor-widget-cygnitextbox.cc4-sub * { color: rgba(230,230,229,0.75) !important; }
body.cc-neg-mode .elementor-widget-cygnitextbox.cc4-meta,
body.cc-neg-mode .elementor-widget-cygnitextbox.cc4-meta * { color: #e6e6e5 !important; }
body.cc-neg-mode .elementor-widget-cygnitextbox.cc4-meta .l,
body.cc-neg-mode .elementor-widget-cygnitextbox.cc4-meta [style*="opacity"] { color: rgba(230,230,229,0.4) !important; }
body.cc-neg-mode .elementor-widget-cygnitextbox.cc4-meta { border-top-color: rgba(230,230,229,0.15) !important; }
body.cc-neg-mode .elementor-widget-cygnitextbox.cc4-desc,
body.cc-neg-mode .elementor-widget-cygnitextbox.cc4-desc * { color: rgba(230,230,229,0.7) !important; }

/* Titre principal (cc4-title) : garder l'accent bleu, texte non-accent en clair */
body.cc-neg-mode .elementor-widget-cygnitextbox.cc4-title,
body.cc-neg-mode .elementor-widget-cygnitextbox.cc4-title * { color: #e6e6e5 !important; }
body.cc-neg-mode .elementor-widget-cygnitextbox.cc4-title font[style*="badedf"] { color: #121212 !important; }

/* CTA button natif Elementor en négatif */
body.cc-neg-mode .elementor-widget-button.cc4-cta .elementor-button {
    background: transparent !important;
    background-color: transparent !important;
    color: #e6e6e5 !important;
    border-color: #e6e6e5 !important;
}
body.cc-neg-mode .cc4-card:hover .elementor-widget-button.cc4-cta .elementor-button {
    background: #e6e6e5 !important;
    background-color: #e6e6e5 !important;
    color: #121212 !important;
}

/* Section intro : eyebrow + titre + para */
body.cc-neg-mode .elementor-widget-cygnitextbox.cc4-eyebrow,
body.cc-neg-mode .elementor-widget-cygnitextbox.cc4-eyebrow * { color: rgba(230,230,229,0.5) !important; }
body.cc-neg-mode .elementor-widget-cygnitextbox.cc4-intro-title,
body.cc-neg-mode .elementor-widget-cygnitextbox.cc4-intro-title * { color: #e6e6e5 !important; }
body.cc-neg-mode .elementor-widget-cygnitextbox.cc4-intro-title font[style*="badedf"] { color: #121212 !important; }
body.cc-neg-mode .elementor-widget-cygnitextbox.cc4-intro-body,
body.cc-neg-mode .elementor-widget-cygnitextbox.cc4-intro-body * { color: rgba(230,230,229,0.75) !important; }

/* Bordure séparation entre les rows */
body.cc-neg-mode .cc-grid-row-1 { border-top-color: rgba(230,230,229,0.15) !important; }

/* Metaline (widget cygnitextbox extrait par le JS) ─────── */
body.cc-neg-mode .cc-metaline,
body.cc-neg-mode .cc-metaline * {
    color: rgba(230,230,229,0.85) !important;
}

/* Mobile article ───────────────────────────────────────── */
body.cc-neg-mode .cc-mob-article { background: #121212 !important; color: #e6e6e5 !important; border-bottom-color: rgba(230,230,229,0.15) !important; }
body.cc-neg-mode .cc-mob-numrow { color: rgba(230,230,229,0.5) !important; }
body.cc-neg-mode .cc-mob-numrow b { color: #e6e6e5 !important; }
body.cc-neg-mode .cc-mob-title { color: #e6e6e5 !important; }
body.cc-neg-mode .cc-mob-sub { color: rgba(230,230,229,0.75) !important; }
body.cc-neg-mode .cc-mob-meta { border-top-color: rgba(230,230,229,0.15) !important; }
body.cc-neg-mode .cc-mob-meta .l { color: rgba(230,230,229,0.4) !important; }
body.cc-neg-mode .cc-mob-meta .v { color: #e6e6e5 !important; }
body.cc-neg-mode .cc-mob-desc { color: rgba(230,230,229,0.7) !important; }
body.cc-neg-mode .cc-mob-cta { border-color: #e6e6e5 !important; color: #e6e6e5 !important; }

/* Header / footer Cygni ────────────────────────────────── */
body.cc-neg-mode .site-header,
body.cc-neg-mode .site-footer,
body.cc-neg-mode header,
body.cc-neg-mode footer {
    background-color: #121212 !important;
    color: #e6e6e5 !important;
}
body.cc-neg-mode .site-header a,
body.cc-neg-mode .site-footer a,
body.cc-neg-mode nav a,
body.cc-neg-mode .menu a {
    color: #e6e6e5 !important;
}

/* Loader Cygni (paper → dark) ──────────────────────────── */
body.cc-neg-mode #loader,
body.cc-neg-mode .loader,
body.cc-neg-mode .cygni-loader {
    background-color: #121212 !important;
}

/* Boutons Elementor ────────────────────────────────────── */
body.cc-neg-mode .elementor-widget-button .elementor-button {
    background-color: transparent !important;
    color: #e6e6e5 !important;
    border-color: #e6e6e5 !important;
}
body.cc-neg-mode .elementor-widget-button .elementor-button:hover {
    background-color: #e6e6e5 !important;
    color: #121212 !important;
}

/* Divider / separator ──────────────────────────────────── */
body.cc-neg-mode .elementor-widget-divider .elementor-divider-separator {
    border-color: rgba(230,230,229,0.35) !important;
}

/* Spacer & backgrounds transparents restent ────────────── */