/* =====================================================
   Thème « Nuit & univers » — alexandresws.com (aperçu 19/09/2026)
   Direction A + D : fond nuit bleutée, un cyan « signal », l'or gardé
   pour les chiffres et la signature, police mono pour les données, et la
   bande des cinq univers (LSDL, MBK, MonPluto, Chillvibes, ASwS) comme
   signature. Pas de grille de fond. Chargé APRÈS style.css : il redéfinit
   les variables et reprend une à une les couleurs que style.css fixe en
   dur (liste établie le 19/09 : 56 règles).
   ===================================================== */

@font-face { font-family: 'Sora'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/sora-400-800.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('../fonts/plex-sans-variable.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/plex-mono-500.woff2') format('woff2'); }

:root {
  --nuit:       #0B0F16;
  --nuit-2:     #101722;   /* cartes */
  --nuit-3:     #161F2D;   /* surfaces relevées */
  --craie:      #E8ECF3;
  --acier:      #A9B2C2;   /* texte secondaire — 8,2:1 sur nuit */
  --acier-2:    #8E97A8;   /* étiquettes */
  --signal:     #34D6E6;
  --signal-ink: #06131A;   /* texte sur bouton signal */
  --or:         #C9A54A;
  --or-2:       #E2C56E;
  /* les cinq univers */
  --u-lsdl:     #E2437A;
  --u-mbk:      #F7B7D2;
  --u-pluto:    #7BA693;
  --u-chill:    #3E7CB1;
  --u-asws:     #C9A54A;

  --dark:       var(--nuit);
  --card:       var(--nuit-2);
  --surface:    var(--nuit-3);
  --border:     rgba(232,236,243,0.10);
  --red:        var(--or);
  --red-light:  var(--or-2);
  --red-dark:   var(--or-2);
  --primary:    var(--signal);
  --gold:       var(--or);
  --gold-light: var(--or-2);
  --purple:     var(--signal);
  --green:      var(--signal);
  --text:       var(--craie);
  --text-muted: var(--acier);
  --gradient:         linear-gradient(135deg, #C9A54A 0%, #E2C56E 100%);
  --gradient-gold:    linear-gradient(135deg, #C9A54A 0%, #E2C56E 100%);
  --gradient-reverse: linear-gradient(135deg, #E2C56E 0%, #C9A54A 100%);
  --shadow:      0 24px 70px rgba(0,0,0,0.55);
  --shadow-card: 0 10px 36px rgba(0,0,0,0.45);
  --f-commerce: var(--u-lsdl);
  --f-gros:     var(--u-pluto);
  --f-studio:   var(--u-chill);
  --f-services: var(--or);
  --f-admin:    var(--acier-2);
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --rw-btn-ink: #06131A;   /* texte des boutons du widget recrutement (sur cyan) */
}

/* ---- Base ---- */
body { background: var(--nuit); color: var(--craie); font-family: 'IBM Plex Sans', 'Inter', system-ui, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Sora', 'Inter', sans-serif; color: var(--craie); letter-spacing: -0.01em; }
p { color: var(--acier); }
::selection { background: rgba(52,214,230,0.35); color: var(--craie); }

/* La bande des univers : signature fixée au bord gauche, sous la nav */
body::before {
  content: ""; position: fixed; left: 0; top: 0; bottom: 0; width: 5px; z-index: 1040; pointer-events: none;
  background: linear-gradient(180deg, var(--u-lsdl) 0 20%, var(--u-mbk) 20% 40%, var(--u-pluto) 40% 60%, var(--u-chill) 60% 80%, var(--u-asws) 80% 100%);
}
@media (max-width: 767px) { body::before { width: 4px; } }

/* ---- Barre haute & navigation ---- */
.topbar { background: #070A0F; border-bottom: 1px solid var(--border); color: var(--acier-2); font-family: var(--mono); font-size: 0.74rem; }
.topbar a { color: var(--acier); }
.navbar-custom { background: rgba(11,15,22,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.navbar-custom.scrolled { background: rgba(11,15,22,0.98); box-shadow: 0 4px 24px rgba(0,0,0,0.5); }
.navbar-brand, .navbar-brand .brand-text { color: var(--craie) !important; font-family: 'Sora', sans-serif; }
.navbar-brand .brand-text span { color: var(--or); }
.navbar-brand img { filter: invert(1) hue-rotate(180deg) brightness(1.05); }
.navbar-nav .nav-link { color: var(--acier); }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--craie); }
.navbar-toggler { border: 1px solid rgba(232,236,243,0.25); }
.navbar-toggler-icon { filter: invert(1); }
.dropdown-menu { background: var(--nuit-2); border: 1px solid var(--border); box-shadow: 0 16px 48px rgba(0,0,0,0.6); }
.dropdown-item { color: var(--acier); }
.dropdown-item:hover { background: rgba(52,214,230,0.08); color: var(--craie); }
.navbar-nav .nav-link.btn-nav-cta { background: var(--signal); color: var(--signal-ink) !important; font-weight: 600; }
.btn-nav-cta:hover { box-shadow: 0 4px 22px rgba(52,214,230,0.35); }

/* ---- Boutons ---- */
.btn-primary-custom, .btn-gold { background: var(--signal); color: var(--signal-ink); font-weight: 600; }
.btn-primary-custom:hover, .btn-gold:hover { background: #5FE0ED; color: var(--signal-ink); box-shadow: 0 8px 30px rgba(52,214,230,0.35); }
.btn-outline-custom { color: var(--craie); border: 1px solid rgba(232,236,243,0.28); }
.btn-outline-custom:hover { border-color: var(--signal); color: var(--signal); background: rgba(52,214,230,0.06); }
.btn-white { background: var(--nuit); color: var(--craie); }
.btn-white:hover { background: #070A0F; box-shadow: 0 8px 30px rgba(0,0,0,0.5); }

/* ---- Accueil : hero ---- */
.hero { background: var(--nuit); }
.hero-glow { background: radial-gradient(ellipse 55% 60% at 80% 30%, rgba(52,214,230,0.14), transparent 70%), radial-gradient(ellipse 40% 50% at 10% 80%, rgba(201,165,74,0.10), transparent 70%); }
.hero-grid { display: none; }              /* pas de lignes de cahier */
.hero-eyebrow { background: rgba(52,214,230,0.08); border: 1px solid rgba(52,214,230,0.3); color: var(--signal); font-family: var(--mono); font-weight: 500; letter-spacing: 0.1em; }
.hero-title { color: var(--craie); }
.hero-title .line-grad, .gold-text, .gradient-text { background: linear-gradient(90deg, #34D6E6, #7FE6F0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-stats { border-top: 1px solid var(--border); }
.hero-stat-num { font-family: var(--mono); font-weight: 500; color: var(--or); }
.hero-stat-num .cnt { color: var(--or); }
.hero-stat-label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acier-2); }
.hero-anim-visual { background: #0F1622; }
.hero-anim-svg #heroBgGrad stop { stop-color: #0F1622; }
.hero-anim-svg [fill="#5A5A5A"] { fill: var(--acier); }
.hero-anim-svg .net-lines { stroke: var(--signal); }
.hero-anim-svg .net-nodes { fill: var(--signal); }
.hero-visual-img { border: 1px solid var(--border); }
.float-card { background: rgba(16,23,34,0.96); border: 1px solid var(--border); }
.float-card .fc-t { color: var(--craie); }
.float-card .fc-s { color: var(--acier-2); font-family: var(--mono); font-size: 0.68rem; }
.fc-icon.gold { background: rgba(201,165,74,0.15); color: var(--or); }
.fc-icon.blue { background: rgba(52,214,230,0.15); color: var(--signal); }

/* ---- Sections ---- */
section { background: var(--nuit); }
.section-card, .scan-section, .page-hero, .footer, .brands-strip { background: var(--nuit-2); }
.section-badge { background: rgba(52,214,230,0.08); border: 1px solid rgba(52,214,230,0.3); color: var(--signal); font-family: var(--mono); font-weight: 500; letter-spacing: 0.1em; }
.section-badge.gold { background: rgba(201,165,74,0.10); border-color: rgba(201,165,74,0.35); color: var(--or); }
.section-title { color: var(--craie); }
.section-subtitle { color: var(--acier); }
.separator { background: var(--signal); }
.separator.gold { background: var(--or); }
.brands-strip { border-color: var(--border); }
.strip-label { color: var(--acier-2); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
.brands-strip .brand-logo-item img { filter: grayscale(1) brightness(1.6) contrast(0.9); opacity: 0.7; }
.brands-strip .brand-logo-item:hover img { filter: none; opacity: 1; }

/* Cartes : une seule surface, un liseré au survol */
.brand-card, .service-card, .metier-card, .porte-card, .process-card, .proof-card, .tech-card, .portfolio-card, .cgv-site, .repere, .diff-item .diff-content, .scan-grid {
  background: var(--nuit-2); border-color: var(--border); color: var(--craie);
}
section:not(.section-card) .brand-card, section:not(.section-card) .metier-card, section:not(.section-card) .porte-card, section:not(.section-card) .cgv-site, section:not(.section-card) .repere { background: var(--nuit-2); }
.section-card .brand-card, .section-card .service-card, .section-card .metier-card, .section-card .porte-card, .section-card .process-card, .section-card .repere, .section-card .cgv-site { background: var(--nuit-3); }
.brand-card:hover, .service-card:hover, .metier-card:hover, .porte-card:hover, .process-card:hover, .tech-card:hover, .portfolio-card:hover { border-color: rgba(52,214,230,0.45); box-shadow: 0 18px 50px rgba(0,0,0,0.5); }
.brand-card img { background: #fff; border-radius: 12px; padding: 6px; }
.brand-name { color: var(--craie); }
.brand-type, .brand-card .brand-domain { color: var(--acier-2); }
.brand-card .brand-domain { font-family: var(--mono); }
.brand-card .brand-badge { background: rgba(232,236,243,0.08); color: var(--acier); font-family: var(--mono); }
.brand-card .brand-badge.partenaire { background: rgba(123,166,147,0.18); color: #A9CDBD; }
.brand-card .brand-badge.client { background: rgba(62,124,177,0.22); color: #9CC4E6; }
.service-card h3, .metier-card h3, .porte-card h3, .diff-content h3, .process-card h3, .cgv-site h3 { color: var(--craie); }
.service-card p, .metier-card p, .porte-card p, .process-card p { color: var(--acier); }
.svc-icon, .metier-card .metier-icon, .porte-card .porte-icon, .diff-icon, .fc-icon { background: rgba(52,214,230,0.12); color: var(--signal); }
.svc-icon.gold, .diff-icon.gold { background: rgba(201,165,74,0.15); color: var(--or); }
.service-card:hover .svc-icon, .service-card:hover .svc-icon.blue, .service-card:hover .svc-icon.gold, .service-card:hover .svc-icon.purple, .service-card:hover .svc-icon.green { background: rgba(52,214,230,0.22); }
.svc-tag, .p-tag { background: rgba(232,236,243,0.06); color: var(--acier); border: 1px solid var(--border); font-family: var(--mono); font-size: 0.7rem; }
.svc-link, .metier-card .metier-link, .porte-card .porte-cta { color: var(--signal); }
.metier-card { border-top-width: 3px; }
.metier-card.commerce .metier-icon { background: rgba(226,67,122,0.16); color: #F07AA3; }
.metier-card.gros     .metier-icon { background: rgba(123,166,147,0.18); color: #A9CDBD; }
.metier-card.studio   .metier-icon { background: rgba(62,124,177,0.22); color: #9CC4E6; }
.metier-card.admin    .metier-icon { background: rgba(142,151,168,0.16); color: var(--acier); }
.metier-card li { color: var(--acier); }
.metier-card .metier-note { color: var(--acier-2); }
.diff-item p { color: var(--acier); }

/* Chiffres : toujours en mono et en or */
.proof-num, .repere .num, .step-num, .counter { font-family: var(--mono); font-weight: 500; }
.proof-num, .repere .num { background: none; -webkit-text-fill-color: var(--or); color: var(--or); }
.proof-num span { color: var(--or-2); }
.repere .lab, .proof-card p { color: var(--acier-2); }
.proof-note { color: var(--acier-2); font-family: var(--mono); font-size: 0.78rem; }
.step-num { background: var(--signal); color: var(--signal-ink); }

/* Scanner de friction (accueil) */
.scan-grid { background: var(--nuit-3); }
.scan-grid button, .scan-grid .scan-item { color: var(--acier); background: transparent; }
.scan-grid .active, .scan-grid [aria-selected="true"] { color: var(--craie); background: rgba(52,214,230,0.08); }

/* CTA et pied de page */
.cta-banner { background: linear-gradient(135deg, #12303A 0%, #0E1F2A 100%); border: 1px solid rgba(52,214,230,0.3); }
.cta-banner::before { background: radial-gradient(circle, rgba(52,214,230,0.14) 0, transparent 60%); }
.cta-banner h2 { color: var(--craie); }
.cta-banner p { color: var(--acier); }
.footer { border-top: 1px solid var(--border); }
.footer h3 { color: var(--craie); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--mono); font-weight: 500; }
.footer-link { color: var(--acier); }
.footer-link:hover { color: var(--signal); }
.footer-logo span { color: var(--craie); font-family: 'Sora', sans-serif; }
.footer-logo img { filter: invert(1) hue-rotate(180deg) brightness(1.05); }
.footer-contact-item, .footer-contact-item a { color: var(--acier); }
.footer-bottom { border-top: 1px solid var(--border); color: var(--acier-2); font-family: var(--mono); font-size: 0.72rem; }
.footer-bottom a { color: var(--acier) !important; }
.social-link { background: rgba(232,236,243,0.06); color: var(--acier); }
.social-link:hover { background: var(--signal); color: var(--signal-ink); }

/* Pages intérieures */
.page-hero { border-bottom: 1px solid var(--border); }
.page-hero::before { background: radial-gradient(ellipse 60% 80% at 10% 50%, rgba(52,214,230,0.10), transparent 70%); }
.page-hero h1 { color: var(--craie); }
.breadcrumb-item a { color: var(--acier-2); }
.breadcrumb-item.active { color: var(--acier); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--acier-2); }
.cgv-site .cgv-head img { background: #fff; border-color: var(--border); }
.cgv-site .cgv-head span, .cgv-site .cgv-note { color: var(--acier-2); font-family: var(--mono); font-size: 0.72rem; }
.cgv-site .cgv-links a { background: rgba(232,236,243,0.05); border-color: var(--border); color: var(--craie); }
.cgv-site .cgv-links a:hover { border-color: var(--signal); color: var(--signal); }
.hero-anim-visual, .rounded-4 { border-color: var(--border) !important; }
img.rounded-4 { filter: saturate(0.95); }
.form-control, .form-select, textarea { background: var(--nuit-3) !important; border-color: var(--border) !important; color: var(--craie) !important; }
.form-control::placeholder { color: var(--acier-2); }
.form-control:focus { border-color: var(--signal) !important; box-shadow: 0 0 0 3px rgba(52,214,230,0.2) !important; }
.crm-ig-overlay { background: rgba(11,15,22,0.78); }
table, .table { color: var(--craie); }
.text-muted { color: var(--acier) !important; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }