/**
 * Le Majordome AI — Theme système (light + dark)
 *
 * Source unique de vérité pour les variables de couleur et les patterns
 * adaptatifs sombre/clair. Chargé APRÈS les <style> inline pour overrider
 * les rgba(10,10,10,X) et rgba(255,255,255,X) hardcodés qui cassaient
 * l'inversion sur OS en mode dark.
 *
 * Étape 1 du refactor (commit 1) : ce fichier vit en parallèle des styles
 * inline. Étapes suivantes : retirer les duplications inline une page à
 * la fois, page par page, puis supprimer cette section commentaire.
 */

/* ────────────────────────────────────────────────────────────────
 * 1. VARIABLES CANONIQUES (light = défaut, dark = @media)
 * ──────────────────────────────────────────────────────────────── */

:root {
  /* Palette de base — alignée sur portfolio/index.html (home) */
  --bg: #faf9f7;
  --card: #ffffff;
  --card-border: rgba(0, 0, 0, 0.08);
  --primary: #0a0a0a;
  --primary-light: #2a2a2a;
  --secondary: #946b4a;
  --text: #1a1613;
  --text-muted: #6b635b;
  --glass: rgba(255, 255, 255, 0.8);

  /* Tokens sémantiques adaptatifs — utilisés pour les overlays neutres
     qui doivent s'inverser entre les deux modes. En light, ils foncent
     légèrement ; en dark (override @media), ils éclaircissent. */
  --tint-2: rgba(10, 10, 10, 0.02);   /* fond ultra-subtil (teaser, section bg) */
  --tint-5: rgba(10, 10, 10, 0.05);   /* hover dropdown léger */
  --tint-8: rgba(10, 10, 10, 0.08);   /* radial-gradient hero, shadow */
  --tint-10: rgba(10, 10, 10, 0.1);   /* gradient card-icon start */
  --tint-18: rgba(10, 10, 10, 0.18);  /* border services-cards */
  --tint-20: rgba(10, 10, 10, 0.2);   /* shadow btn-primary */
  --tint-25: rgba(10, 10, 10, 0.25);  /* border card:hover */
  --tint-35: rgba(10, 10, 10, 0.35);  /* shadow btn-primary hover */
  --tint-50: rgba(10, 10, 10, 0.5);   /* overlays sombres */

  /* Nav background — opaque adaptatif */
  --nav-bg: rgba(255, 255, 255, 0.92);
  --nav-shadow: rgba(0, 0, 0, 0.08);

  /* Card gradient end — pour les cards qui ont un fondu vers tint */
  --card-gradient-end: rgba(10, 10, 10, 0.025);

  /* Pricing featured-dark — carte "NOIR" en light, qui doit s'inverser
     en CLAIR en dark pour conserver son effet vendeur */
  --pricing-featured-bg: #0a0a0a;
  --pricing-featured-text: #ffffff;
  --pricing-featured-bullet: #ffffff;

  /* CTA band — bandeau plein-largeur qui doit toujours INVERSER par
     rapport au fond de page (noir sur page light, blanc sur page dark).
     Le composant existe sur sites-intelligents et home portfolio. */
  --cta-band-bg: #0a0a0a;
  --cta-band-text: #ffffff;
  --cta-band-text-soft: rgba(255, 255, 255, 0.85);
  --cta-band-btn-bg: #ffffff;
  --cta-band-btn-text: #0a0a0a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1714;
    --card: #262320;
    --card-border: rgba(255, 255, 255, 0.08);
    --primary: #f5f5f5;
    --primary-light: #ffffff;
    --secondary: #b8946e;
    --text: #f0ebe5;
    --text-muted: #9b938a;
    --glass: rgba(38, 35, 32, 0.8);

    /* Inversion des tokens — sur fond sombre, les overlays neutres
       deviennent des touches blanches translucides */
    --tint-2: rgba(255, 255, 255, 0.025);
    --tint-5: rgba(255, 255, 255, 0.06);
    --tint-8: rgba(255, 255, 255, 0.08);
    --tint-10: rgba(255, 255, 255, 0.1);
    --tint-18: rgba(255, 255, 255, 0.18);
    --tint-20: rgba(255, 255, 255, 0.2);
    --tint-25: rgba(255, 255, 255, 0.28);
    --tint-35: rgba(255, 255, 255, 0.35);
    --tint-50: rgba(0, 0, 0, 0.55);

    /* Nav : opaque sombre au lieu de blanc translucide */
    --nav-bg: rgba(26, 23, 20, 0.92);
    --nav-shadow: rgba(0, 0, 0, 0.4);

    --card-gradient-end: rgba(255, 255, 255, 0.025);

    /* Pricing featured : inversion totale — clair sur fond dark */
    --pricing-featured-bg: #f5f5f5;
    --pricing-featured-text: #0a0a0a;
    --pricing-featured-bullet: #0a0a0a;

    /* CTA band : inverse aussi — bandeau clair sur page dark */
    --cta-band-bg: #f5f5f5;
    --cta-band-text: #0a0a0a;
    --cta-band-text-soft: rgba(10, 10, 10, 0.75);
    --cta-band-btn-bg: #0a0a0a;
    --cta-band-btn-text: #ffffff;
  }
}

/* ────────────────────────────────────────────────────────────────
 * 2. OVERRIDES NEUTRES — corrigent les rgba hardcodés inline
 *    sans toucher au CSS spécifique de chaque page.
 *
 *    Ces sélecteurs reproduisent ceux des pages mais branchent les
 *    propriétés sur les tokens adaptatifs. En light mode : effet
 *    visuel identique à avant. En dark mode : inversion correcte.
 *
 *    NOTE !important : certaines pages (portfolio en particulier) ont
 *    un second <style> inline dans le body, donc chargé APRÈS ce
 *    fichier theme.css linké dans le head. À specificity égale, le
 *    dernier déclaré gagne — donc on a besoin de !important sur les
 *    bug-fix critiques. Phase 2 du refactor (migration page-by-page)
 *    déplacera ce CSS dans theme.css et permettra de retirer les
 *    !important. C'est temporaire et tracé.
 * ──────────────────────────────────────────────────────────────── */

/* NAV — fond opaque adaptatif */
nav {
  background: var(--nav-bg) !important;
}

.nav-dropdown-menu {
  box-shadow: 0 8px 24px var(--nav-shadow);
}

.nav-dropdown-menu a:hover {
  background: var(--tint-5);
}

/* HERO — radial glow neutre */
.hero::before {
  background: radial-gradient(circle, var(--tint-8) 0%, transparent 70%) !important;
}

/* BUTTONS — shadows adaptatives */
.btn-primary {
  box-shadow: 0 4px 20px var(--tint-20);
}

.btn-primary:hover {
  box-shadow: 0 6px 30px var(--tint-35);
}

/* CARDS — gradients & borders adaptatifs */
#services-cards .card.card-robin,
#services-cards .card.card-sites {
  background: linear-gradient(135deg, var(--card) 0%, var(--card-gradient-end) 100%);
  border-color: var(--tint-18);
}

.services-teaser {
  background: var(--tint-2);
}

.card:hover {
  border-color: var(--tint-25);
}

.card-icon {
  background: linear-gradient(135deg, var(--tint-10), rgba(148, 107, 74, 0.08));
}

/* PRICING — carte featured "NOIR" qui s'inverse en dark */
.pricing-card.featured-dark {
  background: var(--pricing-featured-bg);
  border-color: var(--pricing-featured-bg);
  color: var(--pricing-featured-text);
}

/* La règle de fond utilise mask + background-color (SVG checkmark), donc
   on cible background-color, pas background (qui résèterait le mask). */
.pricing-card.featured-dark .pricing-features li::before {
  background-color: var(--pricing-featured-bullet);
}

/* Sous-classes texte de .pricing-card.featured-dark (page tarifs/).
   En light : tous les textes sont blancs sur fond #0a0a0a noir.
   En dark : sans override, le background passe en clair via --pricing-
   featured-bg mais les textes restent blancs hardcodés → blanc-sur-blanc
   invisible. Ces overrides bascule les sous-classes texte vers du sombre
   en dark, et maintiennent leur valeur claire en light. */
@media (prefers-color-scheme: dark) {
  .pricing-card.featured-dark .pricing-name      { color: rgba(10, 10, 10, 0.6); }
  .pricing-card.featured-dark .pricing-setup     { color: rgba(10, 10, 10, 0.65); }
  .pricing-card.featured-dark .pricing-setup strong { color: #0a0a0a; }
  .pricing-card.featured-dark .pricing-price     { color: #0a0a0a; }
  .pricing-card.featured-dark .pricing-price span { color: rgba(10, 10, 10, 0.65); }
  .pricing-card.featured-dark .pricing-tagline   { color: rgba(10, 10, 10, 0.85); }
  .pricing-card.featured-dark .pricing-features li        { color: #0a0a0a; }
  .pricing-card.featured-dark .pricing-features li::before { background-color: #0a0a0a; }
  .pricing-card.featured-dark .pricing-features li.muted   { color: rgba(10, 10, 10, 0.45); }
  .pricing-card.featured-dark .pricing-features li.muted::before { background-color: transparent; color: rgba(10, 10, 10, 0.45); }

  /* Accordion "Voir tous les détails" — quand la card featured-dark passe en
     CLAIR via --pricing-featured-bg, son summary blanc devient invisible.
     Inversion vers sombre. */
  .pricing-card.featured-dark .pricing-more                  { border-top-color: rgba(10, 10, 10, 0.18); }
  .pricing-card.featured-dark .pricing-more > summary        { color: rgba(10, 10, 10, 0.7); }
  .pricing-card.featured-dark .pricing-more > summary:hover  { color: #0a0a0a; }
  .pricing-card.featured-dark .pricing-more > summary::after { color: #0a0a0a; }
  .pricing-card.featured-dark .pricing-more .pricing-features li { color: rgba(10, 10, 10, 0.75); }

  /* Badge "Le plus populaire" + boutons CTA : en light leur bg blanc sur card noire
     est contraste fort. En dark la card passe en clair (#f5f5f5) → badge/btn blancs
     deviennent invisibles. Inversion : bg sombre + texte clair. */
  .pricing-card.featured-dark::before        { background: #0a0a0a; color: #ffffff; }
  .pricing-card.featured-dark .btn-primary   { background: #0a0a0a; color: #ffffff; }
  .pricing-card.featured-dark .btn-primary:hover { background: rgba(10, 10, 10, 0.85); }
  .pricing-card.featured-dark .btn-secondary { color: #0a0a0a; border-color: rgba(10, 10, 10, 0.4); }
  .pricing-card.featured-dark .btn-secondary:hover { background: rgba(10, 10, 10, 0.08); border-color: #0a0a0a; }
}

/* ────────────────────────────────────────────────────────────────
 * 8. CONTACT SECTION — formulaire partagé sur toutes les pages
 *
 *    HTML injecté par /assets/contact-section.js dans un placeholder
 *    `<section id="contact" data-mjd-contact></section>`. CSS centralisé
 *    ici pour rester cohérent avec le reste du site (mêmes vars).
 *
 *    Pattern repris de portfolio/index.html (homepage) pour ne pas avoir
 *    deux UX différentes selon la page.
 * ──────────────────────────────────────────────────────────────── */

section#contact { padding: 6rem 2rem; max-width: 1100px; margin: 0 auto; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.contact-info h3 { font-size: 1.5rem; margin-bottom: 1rem; font-family: Georgia, 'Times New Roman', serif; letter-spacing: -0.3px; }
.contact-info p { color: var(--text-muted); margin-bottom: 2rem; font-size: 0.95rem; line-height: 1.6; }

.contact-detail {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.contact-detail svg { width: 20px; height: 20px; stroke: var(--primary); fill: none; stroke-width: 1.5; flex-shrink: 0; }

.form-group { margin-bottom: 1.25rem; }

.form-group label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.92rem;
  font-family: inherit;
  transition: border-color 0.3s;
  outline: none;
}

.form-group input:focus,
.form-group textarea:focus { border-color: var(--primary); }

.form-group textarea { resize: vertical; min-height: 100px; }

@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-info { text-align: center; }
  .contact-detail { justify-content: center; }
  section#contact { padding: 4rem 1.25rem; }
}

/* SHADOWS génériques — les box-shadow rgba(0,0,0,X) restent valides
   en light + dark (l'ombre sombre fonctionne sur les deux fonds), donc
   pas d'override nécessaire ici. */

/* ────────────────────────────────────────────────────────────────
 * 3. BUTTONS SECONDARY — fond glass + texte text (déjà adaptatif via
 *    les vars). Pas d'override nécessaire, mais on garde un fallback
 *    pour les pages teaser (cockpit, alfred) qui ont des boutons
 *    "Voir les démos" avec fond hardcodé `#0a0a0a` invisible en dark.
 * ──────────────────────────────────────────────────────────────── */

.btn-secondary[href="#demos"],
.btn-secondary[href*="demos"],
.cta-secondary {
  background: var(--glass);
  color: var(--text);
  border: 1px solid var(--card-border);
}

/* ────────────────────────────────────────────────────────────────
 * 4. SECTOR TABS (home "Choisissez votre univers")
 *
 *    En light, ce bandeau est blanc full-bleed style Intercom — c'est
 *    volontaire. En dark, il devient un bandeau card-sombre pour rester
 *    visible sans casser le rythme visuel.
 * ──────────────────────────────────────────────────────────────── */

.sector-tabs-wrap {
  background: var(--card) !important;
  border-top-color: var(--card-border) !important;
  border-bottom-color: var(--card-border) !important;
}

.sector-pill {
  background: var(--primary) !important;
}

.sector-tab {
  color: var(--text-muted) !important;
}

.sector-tab:not(.is-active):hover {
  color: var(--text) !important;
}

.sector-tab.is-active {
  color: var(--bg) !important;
}

.sector-tab .sector-count {
  background: var(--tint-8);
}

.sector-tab.is-active .sector-count {
  background: var(--tint-25);
  color: var(--bg);
}

.sector-tab:not(.is-active):hover .sector-count {
  background: var(--tint-10);
}

/* ────────────────────────────────────────────────────────────────
 * 4.5 NAV CTA — bouton "Être rappelé" présent sur toutes les pages
 *
 *    Pattern systématique dans l'inline : `.nav-cta { background:
 *    var(--primary); color: #fff !important; }`. En dark, primary
 *    devient #f5f5f5 (clair) mais color reste forcé blanc → texte
 *    invisible. Le !important inline force aussi !important ici.
 * ──────────────────────────────────────────────────────────────── */

.nav-cta {
  color: var(--bg) !important;
}

/* ────────────────────────────────────────────────────────────────
 * 5. ROBIN — démo chat preview (page /produits/robin/)
 *
 *    Bug B3 : `.demo-msg-user { color: white }` hardcodé. En dark,
 *    --primary devient #f5f5f5 (clair) → bulle claire avec texte
 *    blanc = invisible. Le texte doit s'inverser via var(--bg).
 * ──────────────────────────────────────────────────────────────── */

.demo-msg-user {
  color: var(--bg);
}

/* ────────────────────────────────────────────────────────────────
 * 6. CTA BAND — bandeau full-bleed style Intercom inverse
 *
 *    Note : `.cta-band` est utilisé par DEUX pages avec des fonds
 *    différents — Robin (`background: var(--card)`, fond sobre) et
 *    sites-intelligents (`background: var(--primary)`, fond inverse).
 *    On ne touche PAS au sélecteur générique pour ne pas casser Robin.
 *
 *    Le fix B6 (bandeau blanc géant en dark sur sites-intelligents)
 *    est appliqué inline dans `/produits/sites-intelligents/index.html`
 *    via un `@media (prefers-color-scheme: dark)` ciblé sur sa propre
 *    cta-band qui force background+color inversés.
 *
 *    Tokens --cta-band-* préservés pour usage futur (composant
 *    réutilisable avec une classe modifier `.cta-band--inverse`).
 * ──────────────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────────────
 * 7. PRICING CARD .price-card.dark (sites-intelligents pricing)
 *
 *    Carte "noire mise en avant" sur la page sites. Même logique que
 *    .pricing-card.featured-dark sur tarifs/ : doit s'inverser en
 *    dark mode.
 * ──────────────────────────────────────────────────────────────── */

.price-card.dark {
  background: var(--pricing-featured-bg);
  border-color: var(--pricing-featured-bg);
  color: var(--pricing-featured-text);
}

.price-card.dark .btn-primary {
  background: var(--pricing-featured-text);
  color: var(--pricing-featured-bg);
}

/* Sous-classes texte de .price-card.dark : en light tous les textes sont
   blancs (rgba(255,255,255,0.7) ou #fff) hardcodés dans le <style> inline
   de sites-intelligents/. En dark le background passe en clair via theme,
   donc ces textes blancs deviennent invisibles → on les bascule vers
   sombre dans le @media dark uniquement. */
@media (prefers-color-scheme: dark) {
  .price-card.dark .price-name        { color: rgba(10, 10, 10, 0.7); }
  .price-card.dark .price-desc        { color: rgba(10, 10, 10, 0.7); }
  .price-card.dark .price-desc strong { color: #0a0a0a; }
  .price-card.dark .price-value       { color: #0a0a0a; }
  .price-card.dark .price-value span  { color: rgba(10, 10, 10, 0.7); }
  .price-card.dark .btn-secondary       { color: #0a0a0a; border-color: rgba(10, 10, 10, 0.3); }
  .price-card.dark .btn-secondary:hover { border-color: #0a0a0a; background: rgba(10, 10, 10, 0.08); }
}