/* =============================================================================
   N2M SÉCURITÉ — Mode clair : AJUSTEMENTS uniquement.
   Le système de variables (design-system.css) gère 99 % de la bascule.
   Ici : contraste boutons, ombres clair, overlays résiduels, vitrines sombres.
   ============================================================================= */

/* ── Bouton or : texte sombre (lisible sur l'or dans les 2 nuances) ──────── */
[data-theme="light"] .gold-btn,
[data-theme="light"] .gold-btn:hover,
[data-theme="light"] .gold-btn:focus { color: #050508; }

/* ── Logo PNG sans fond : aucun filtre needed ─────────────────────────────── */
/* [data-theme="light"] .n2m-logo img { filter: brightness(0); } — désactivé : logo PNG transparent */

/* ── Étape 6 : ajustements propres au mode clair ─────────────────────────── */
[data-theme="light"] .n2m-card { box-shadow: 0 2px 16px rgba(10,22,40,0.08); }
[data-theme="light"] #n2m-header { box-shadow: 0 1px 20px rgba(10,22,40,0.10); }
[data-theme="light"] #n2m-header.scrolled { background: var(--nav-bg); box-shadow: 0 6px 24px rgba(10,22,40,0.10); }
[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-secondary); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 6px; }

/* Lien « Évaluer mon besoin » + sélecteur de langue (couleurs en dur via inline-style enqueue) */
[data-theme="light"] .n2m-diag-link { color: var(--text-primary); }
[data-theme="light"] .n2m-diag-link:hover { color: #050508; }
[data-theme="light"] .n2m-lang-switcher a { color: var(--text-muted); }
[data-theme="light"] .n2m-lang-switcher a.active { color: var(--text-primary); }

/* ── Overlays sombres rgba non variabilisés → clairs ─────────────────────── */
[data-theme="light"] .n2m-dropdown { background: var(--bg-secondary); border-color: var(--border); box-shadow: 0 12px 30px rgba(10,22,40,0.12); }
[data-theme="light"] .n2m-dropdown a:hover { background: var(--bg-tertiary); }
[data-theme="light"] #n2m-nav-mobile { background: var(--bg-primary); }
/* Panneau secteurs : conçu pour fond sombre (titre blanc, accents couleur secteur).
   En clair, les couleurs secteur claires (platine #E2E8F0 du VIP) deviennent invisibles.
   On force un schéma lisible : texte navy, coches/icônes dorées. */
[data-theme="light"] .n2m-secteur-panel__inner:not(.has-bg) { background: var(--card-bg); }
[data-theme="light"] .n2m-secteur-panel__title { color: var(--text-primary); }
[data-theme="light"] .n2m-secteur-panel__desc  { color: var(--text-secondary); }
[data-theme="light"] .n2m-secteur-panel__icon-wrap { color: var(--text-primary); background: rgba(10,22,40,0.06); }
[data-theme="light"] .n2m-secteur-panel__icon-wrap svg { stroke: var(--text-primary); }
[data-theme="light"] .n2m-secteur-panel__service-card { color: var(--text-primary); background: #fff; border-color: rgba(10,22,40,0.10); }
[data-theme="light"] .n2m-secteur-panel__service-check { background: rgba(245,194,0,0.15); }
[data-theme="light"] .n2m-secteur-panel__service-check svg { stroke: #C89B00; }
[data-theme="light"] .n2m-secteur-pill { color: var(--text-secondary); }
[data-theme="light"] .n2m-secteur-pill.active { color: var(--text-primary); background: rgba(10,22,40,0.06); border-color: rgba(10,22,40,0.28); }
[data-theme="light"] .n2m-secteur-panel .outline-btn { color: var(--text-primary) !important; border-color: rgba(10,22,40,0.35) !important; }

/* ── Section « Par où commencer » / parcours (#07090f en dur) → claire ───── */
[data-theme="light"] .n2m-parcours { background: var(--bg-primary); }

/* ── Liens CTA « En savoir plus » des cartes service : utilisent la couleur du
   service (platine/or clair) → illisibles sur carte claire. Texte navy lisible. */
[data-theme="light"] .n2m-service-card__link { color: var(--text-primary); }
/* Labels dorés sur cartes claires → or foncé lisible (contraste AA). */
[data-theme="light"] .n2m-cf-cert__meta,
[data-theme="light"] .n2m-cf-academy__subtitle { color: #8a6a00; }

/* ── Page Certifications/Qualité : numéros (P1-P7) et signature en or sur
   cartes claires → or foncé + badge plus contrasté pour la lisibilité. */
[data-theme="light"] .n2m-qual-principe__num { color: #8a6a00; background: rgba(245,194,0,0.20); border-color: rgba(200,155,0,0.5); }
[data-theme="light"] .n2m-qual-policy__sign  { color: #8a6a00; }

/* ── Badges métier (cartes offres) : or clair sur carte claire → or foncé. */
[data-theme="light"] .n2m-job-card__badge { color: #8a6a00; background: rgba(245,194,0,0.20); border-color: rgba(200,155,0,0.45); }

/* ── Cartes réalisations (pages service) : année + lien en couleur service
   (or/platine) sur carte claire → lisibles. */
[data-theme="light"] .n2m-real-card__annee { color: #8a6a00; }
[data-theme="light"] .n2m-real-card__lien  { color: var(--text-primary); }

/* ── Bloc écosystème (bande cross-promo, claire en mode clair) : lien + flèche
   en or → texte navy + flèche or foncé lisibles. */
[data-theme="light"] .n2m-bloc-ecosysteme-item,
[data-theme="light"] .bloc-ecosysteme-item { color: var(--text-primary); }
[data-theme="light"] .bloc-ecosysteme-item__arrow { color: #8a6a00; }

/* ── Numéros d'étapes (timeline processus, pages services) : or sur badge clair
   → or foncé + fond plus marqué. C'étaient les « numéros illisibles ». */
[data-theme="light"] .n2m-processus-step__num { color: #8a6a00; background: rgba(245,194,0,0.18); }

/* ── Astérisques de champs requis : couleur service (platine) invisible sur
   formulaire clair → rouge conventionnel, toujours lisible. */
[data-theme="light"] .n2m-service-cta__form label span { color: var(--status-danger); }
[data-theme="light"] .n2m-label span.required { color: var(--status-danger); }

/* ── Tags/liens accent sur fonds clairs (carrières home, cartes groupe, titres
   blog/ressources home) → couleurs lisibles. */
[data-theme="light"] .n2m-home-job__tag { color: #8a6a00; background: rgba(245,194,0,0.18); border-color: rgba(200,155,0,0.4); }
[data-theme="light"] .n2m-groupe-card__link { color: var(--text-primary); }
[data-theme="light"] .n2m-res-card__title a { color: var(--text-primary); }

/* ── Section CTA finale « Protégez ce qui compte » : showcase SOMBRE (canvas
   particules) — garder fond sombre + texte clair même en mode clair. */
[data-theme="light"] .n2m-section-cta-final {
  background: #0A1628;
  color: #FFFFFF;
  --n2m-white: #FFFFFF; --text-primary: #FFFFFF;
  --n2m-muted: #B8C4D0; --text-secondary: #B8C4D0; --text-muted: #B8C4D0;
  --n2m-gold: #F5C200; --accent: #F5C200;
}
[data-theme="light"] .n2m-section-cta-final .outline-btn {
  color: #FFFFFF !important; border-color: rgba(255,255,255,0.5) !important;
}

/* ── Sections service AVEC photo de fond (risques / avantages / équipements) ──
   La photo + l'overlay sombre s'affichent dans LES DEUX modes (la photo doit
   rester visible aussi en clair). La section devient une « vitrine sombre » : on
   re-déclare la palette sombre à l'intérieur → en-tête, sous-titre et cartes
   restent lisibles par-dessus la photo, exactement comme en mode sombre.
   (L'image + le ::before viennent de service.css ; on ne les masque plus.) */
[data-theme="light"] .n2m-section.has-section-bg {
  --bg-primary:#050508; --bg-secondary:#0A1628; --bg-tertiary:#162545;
  --text-primary:#FFFFFF; --text-secondary:#B8C4D0; --text-muted:#8892A4;
  --accent:#F5C200; --accent-dim:#C89B00; --border:rgba(245,194,0,0.12);
  --card-bg:#0A1628; --card-bg-hover:#162545;
  --n2m-white:#FFFFFF; --n2m-muted:#8892A4; --n2m-text:#B8C4D0;
  --n2m-text-secondary:#B8C4D0; --n2m-gold:#F5C200; --n2m-gold-dim:#C89B00;
  --n2m-border:rgba(245,194,0,0.12); --n2m-card-bg:#0A1628; --n2m-navy:#0A1628;
  color:#FFFFFF;
}
/* Cartes SANS photo dans une vitrine sombre : on annule le fix « blanc » du mode
   clair (inapproprié ici) → elles redeviennent navy translucide comme en sombre. */
[data-theme="light"] .n2m-section.has-section-bg .n2m-avantage-card:not(.has-card-bg),
[data-theme="light"] .n2m-section.has-section-bg .n2m-techno-card:not(.has-card-bg) {
  background: #0A1628;
  border-color: rgba(245,194,0,0.12);
  box-shadow: none;
}
[data-theme="light"] .n2m-section.has-section-bg .n2m-techno-card:not(.has-card-bg) .n2m-techno-card__desc,
[data-theme="light"] .n2m-section.has-section-bg .n2m-avantage-card:not(.has-card-bg) .n2m-avantage-card__content p {
  color: #8892A4;
}
[data-theme="light"] .n2m-section.has-section-bg .n2m-techno-card:not(.has-card-bg) .n2m-techno-card__logo-img {
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

/* ── Cartes/panneaux À PHOTO DE FOND : la photo + l'overlay sombre s'affichent
   dans les 2 modes (la photo doit rester visible aussi en mode clair).
   L'overlay étant sombre, on force le texte en clair à l'intérieur. ───────── */
[data-theme="light"] .n2m-service-card.has-bg,
[data-theme="light"] .n2m-secteur-panel__inner.has-bg {
  --n2m-text: #FFFFFF; --n2m-white: #FFFFFF; --n2m-muted: #CBD5E1;
  --n2m-text-secondary: #CBD5E1; --text-primary: #FFFFFF;
  --text-secondary: #CBD5E1; --text-muted: #CBD5E1;
  color: #FFFFFF;
}

/* ── Cartes À IMAGE DE FOND (risque/avantage/techno/processus) ────────────────
   Elles gardent volontairement leur image + overlay SOMBRE dans les 2 modes.
   En clair, le texte basculait en navy → illisible sur le fond sombre.
   On re-scope les variables de texte en CLAIR à l'intérieur de la carte, donc
   tout texte (titre var(--n2m-text), desc var(--n2m-muted)…) redevient lisible. */
[data-theme="light"] .has-card-bg {
  --n2m-text:        #FFFFFF;
  --n2m-white:       #FFFFFF;
  --n2m-muted:       #CBD5E1;
  --n2m-text-secondary: #CBD5E1;
  --text-primary:    #FFFFFF;
  --text-secondary:  #CBD5E1;
  --text-muted:      #CBD5E1;
  color: #FFFFFF;
}

/* ── Cartes service (avantages / équipements) SANS image de fond ──────────────
   En mode clair, leur fond égalait EXACTEMENT celui de la section (≈ #F4F6F9)
   → cartes invisibles, « délavées ». On les passe en blanc net + bordure + ombre
   pour qu'elles ressortent, on assombrit la description (le muted clair était
   limite), et on neutralise le filtre qui peignait les logos en blanc (donc
   invisibles sur carte claire). Les cartes .has-card-bg gardent leur photo. */
[data-theme="light"] .n2m-avantage-card:not(.has-card-bg),
[data-theme="light"] .n2m-techno-card:not(.has-card-bg) {
  background: #FFFFFF;
  border: 1px solid rgba(10,22,40,0.10);
  box-shadow: 0 2px 16px rgba(10,22,40,0.06);
}
[data-theme="light"] .n2m-avantage-card:not(.has-card-bg) {
  border-left: 3px solid var(--service-accent, #C89B00);
}
[data-theme="light"] .n2m-techno-card:not(.has-card-bg) .n2m-techno-card__desc,
[data-theme="light"] .n2m-avantage-card:not(.has-card-bg) .n2m-avantage-card__content p {
  color: #4A5A72;
}
[data-theme="light"] .n2m-techno-card:not(.has-card-bg) .n2m-techno-card__logo-img {
  filter: none;
  opacity: 1;
}

/* ── Styles inline sombres résiduels dans les templates PHP ──────────────── */
[data-theme="light"] [style*="background:#050508"],
[data-theme="light"] [style*="background: #050508"],
[data-theme="light"] [style*="background:#0A1628"],
[data-theme="light"] [style*="background:#0a1628"],
[data-theme="light"] [style*="background:rgba(5,5,8"],
[data-theme="light"] [style*="background: rgba(5,5,8"] { background: var(--card-bg) !important; }
[data-theme="light"] [style*="color:#fff"],
[data-theme="light"] [style*="color: #fff"],
[data-theme="light"] [style*="color:#ffffff"],
[data-theme="light"] [style*="color:#e8ebf0"] { color: var(--text-primary) !important; }

/* ════════════════════════════════════════════════════════════════════════
   VITRINES VOLONTAIREMENT SOMBRES (hero vidéo + Élite 360 image premium)
   On re-déclare la palette SOMBRE à l'intérieur → vidéo/image visibles,
   textes clairs lisibles, cohérence parfaite, même en mode clair.
   ════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .n2m-hero,
[data-theme="light"] .n2m-archive-hero,
[data-theme="light"] .n2m-service-hero {
  /* Variables sémantiques */
  --bg-primary:    #050508;
  --bg-secondary:  #0A1628;
  --bg-tertiary:   #162545;
  --text-primary:   #FFFFFF;
  --text-secondary: #B8C4D0;
  --text-muted:     #8892A4;
  --accent:       #F5C200;
  --accent-dim:   #C89B00;
  --accent-glow:  rgba(245,194,0,0.25);
  --border:       rgba(245,194,0,0.12);
  --card-bg:      #0A1628;
  --card-bg-hover:#162545;
  --surface-soft: rgba(255,255,255,0.04);
  --hairline:     rgba(255,255,255,0.10);
  --overlay:      rgba(5,5,8,0.6);
  --input-bg:     #0A1628;
  --input-border: rgba(245,194,0,0.2);
  /* COULEUR HÉRITÉE : le titre .n2m-h1 n'a PAS de color propre → il hérite
     de la couleur CALCULÉE du body (navy en clair). On force ici la couleur
     de base à blanc : seul le texte sans color explicite (le titre) en hérite ;
     muted/gold gardent la leur. C'est ce qui rend les titres de héros lisibles. */
  color: #FFFFFF;
  /* ALIAS : OBLIGATOIRE de les re-déclarer en littéral (sinon ils gardent
     la valeur calculée au :root = palette claire → texte navy illisible). */
  --n2m-black:    #050508;
  --n2m-navy:     #0A1628;
  --n2m-navy-mid: #162545;
  --n2m-white:    #FFFFFF;
  --n2m-muted:    #8892A4;
  --n2m-text:     #B8C4D0;
  --n2m-text-secondary: #B8C4D0;
  --n2m-gold:     #F5C200;
  --n2m-gold-dim: #C89B00;
  --n2m-glow:     rgba(245,194,0,0.25);
  --n2m-border:   rgba(245,194,0,0.12);
  --n2m-surface:  rgba(255,255,255,0.04);
  --n2m-hairline: rgba(255,255,255,0.10);
  --n2m-card-bg:  #0A1628;
  --n2m-bg-secondary: #0A1628;
}

/* ── Portail : textes rouge clair (pensés sombre) → rouge foncé lisible ───── */
[data-theme="light"] .n2m-portal-login__err { color: #b91c1c; }
[data-theme="light"] .n2m-portal-head__logout:hover { color: #b91c1c; }
[data-theme="light"] .n2m-portal-login__foot a { color: var(--accent-dim, #C89B00); }

/* ── Bandeaux de confirmation candidature : texte pâle (pensé sombre) → foncé
   sur le fond clair, sinon illisible. ───────────────────────────────────── */
[data-theme="light"] .n2m-cand__alert--ok  { color: #065f46; background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.45); }
[data-theme="light"] .n2m-cand__alert--ok strong { color: #064e3b; }
[data-theme="light"] .n2m-cand__alert--err { color: #991b1b; background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.45); }

/* ── Élite 360 : section premium → claire en mode clair ──────────────────────
   Le titre est un dégradé platine (#E2E8F0 → gold) invisible sur blanc.
   On le repasse en dégradé sombre (navy → gold) pour qu'il reste lisible. */
[data-theme="light"] .n2m-elite360-titre,
[data-theme="light"] .n2m-elite360-titre-accent {
  background: none;
  -webkit-text-fill-color: #0A1628;
  color: #0A1628;
}
[data-theme="light"] .n2m-section-elite360 .n2m-label--platinum {
  color: #0A1628; border-color: rgba(10,22,40,0.2);
}
/* Badge flottant « Standard international / Certifié ISO » : fond navy sombre
   dans les 2 modes → le texte doit rester clair (sinon navy sur navy = illisible). */
[data-theme="light"] .n2m-elite360-badge strong { color: #FFFFFF; }
[data-theme="light"] .n2m-elite360-badge span   { color: #B8C4D0; }
[data-theme="light"] .n2m-elite360-badge__icon  { color: #F5C200; }

/* ── Badges « Étape 1 / Étape 2 » (parcours) : texte clair sur fond pâle → illisible.
   On fonce le texte pour garder le contraste sur fond blanc. ─────────────── */
[data-theme="light"] .n2m-parcours__card--diag  .n2m-parcours__step { background: rgba(245,194,0,0.16);  color: #7A5C00; }
[data-theme="light"] .n2m-parcours__card--devis .n2m-parcours__step { background: rgba(120,160,220,0.18); color: #2C4A7A; }
[data-theme="light"] .n2m-parcours__card--devis .n2m-parcours__ic   { color: #2C4A7A; }
/* ...mais si la carte a une PHOTO de fond (overlay sombre), on garde tout clair */
[data-theme="light"] .n2m-parcours__card.has-bg .n2m-parcours__step { color: #FFFFFF; background: rgba(255,255,255,0.16); }
[data-theme="light"] .n2m-parcours__card.has-bg .n2m-parcours__ic   { color: #F5C200; }

/* ── Crosslink « Pas encore sûr… » (page devis) : variabilisé dans le PHP,
   ici on sécurise le cas où l'ancien style-inline bleu serait servi. ─────── */
[data-theme="light"] .n2m-crosslink__tx strong { color: var(--text-primary); }
[data-theme="light"] .n2m-crosslink__tx        { color: var(--text-secondary); }

/* ════════════════════════════════════════════════════════════════════════
   BOUTON BASCULE (header desktop) + FAB (mobile)
   ════════════════════════════════════════════════════════════════════════ */
/* Le toggle thème vit désormais dans la pile de boutons flottants (footer).
   Anciens boutons (header + FAB bas-gauche) retirés pour éviter les doublons. */
.n2m-theme-toggle { display: none !important; }
.n2m-theme-fab:not(.n2m-float-btn) { display: none !important; }

/* Icônes sun/moon du bouton thème (pile flottante) */
.n2m-theme-fab__moon { display: none; }
[data-theme="light"] .n2m-theme-fab__sun  { display: none; }
[data-theme="light"] .n2m-theme-fab__moon { display: inline; }