/* ============================================================================
   NEXT CORE — nc-theme.css
   Le système visuel partagé par TOUTES les pages du site.
   Une seule source de vérité : tu modifies ici, tout le site suit.

   Principe (repris de la nav) :
     • Inter 800/900  → les gros titres (capitales, dégradé blanc → argent)
     • Orbitron       → uniquement les petits libellés techniques (gris)
     • Inter 300/400  → le texte courant
     • rouge #e00000  → accent, jamais décor
   ============================================================================ */

/* ---------- Plus aucun parallélogramme (reste de l'ancien style) ---------- */
body *{clip-path:none !important}

/* ---------- Transition de page (fondu à l'arrivée et au départ) ---------- */
body{animation:ncPageIn .42s ease both}
@keyframes ncPageIn{from{opacity:0}to{opacity:1}}
body.nc-leaving{opacity:0; transition:opacity .22s ease}

/* ============================================================
   EN-TÊTES DE SECTION  ◆ NCI / 02 — LABEL ──────────
   (numérotation automatique par page, via compteur CSS)
   ============================================================ */
body{counter-reset:ncsec}

.section-tag,
.sec-head .k{
  counter-increment:ncsec !important;
  display:flex !important; align-items:center !important; gap:11px !important;
  font-family:'Orbitron',sans-serif !important; font-weight:700 !important;
  font-size:.56rem !important; letter-spacing:3.2px !important;
  text-transform:uppercase !important; color:#7b7b85 !important;
  margin-bottom:20px !important; width:100% !important;
}
.section-tag::before,
.sec-head .k::before{
  content:'\25C6  NCI / ' counter(ncsec, decimal-leading-zero) ' \2014' !important;
  color:#e00000 !important; font-size:.56rem !important; white-space:nowrap;
  width:auto !important; height:auto !important; background:none !important;
  border:none !important; border-radius:0 !important; flex:none !important;
}
.section-tag::after,
.sec-head .k::after{
  content:'' !important; flex:1 !important; height:1px !important; min-width:30px;
  background:linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.02)) !important;
}

.section-title,
.sec-head h2{
  font-family:'Inter',sans-serif !important; font-weight:900 !important;
  font-size:clamp(1.9rem,4.4vw,3.2rem) !important;
  line-height:1.04 !important; letter-spacing:-1.5px !important;
  text-transform:uppercase !important;
  background:linear-gradient(100deg,#ffffff 28%,#8d8d96 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  color:transparent !important; -webkit-text-fill-color:transparent !important;
  margin-bottom:13px !important;
}
.section-title span,
.sec-head h2 span{
  background:none !important; color:inherit !important;
  -webkit-text-fill-color:transparent !important;
}
.section-sub,
.sec-head p{
  font-family:'Inter',sans-serif !important; font-weight:400 !important;
  font-size:1.02rem !important; line-height:1.65 !important;
  color:#9b9ba4 !important;
}

/* ---------- Titres de cartes (h3) ---------- */
h3{
  font-family:'Inter',sans-serif !important; font-weight:700 !important;
  letter-spacing:-.2px !important; text-transform:none !important;
  line-height:1.35 !important; color:#f2f2f6 !important;
}
h3 b,h3 span{color:#ff3535 !important}

/* ---------- Texte courant ---------- */
p,li,label,td,input,select,textarea,button,a{font-family:'Inter',sans-serif}
p{font-weight:300; color:#9b9ba4}

/* ---------- Cartes : une seule identité ---------- */
.card,.feature,.svc,.tar-card,.contact-card,.faq-item,.tem-card,.pb-card,
.stk-cat,.run,.pc-card,.opt-card,.pack-card,.tier-card{
  background:#0f1014 !important;
  border:1px solid rgba(255,255,255,.07) !important;
  border-radius:14px !important;
  transition:transform .18s ease, border-color .18s ease !important;
}
.card:hover,.feature:hover,.svc:hover,.tar-card:hover,.contact-card:hover,
.tem-card:hover,.pb-card:hover,.pc-card:hover,.opt-card:hover,.pack-card:hover{
  transform:translateY(-3px) !important;
  border-color:rgba(255,255,255,.16) !important;
}
.feature-icon,.contact-card-icon,.card .ic,.svc-ic,.choice-ic{
  color:#e00000 !important; border-radius:13px !important;
}

/* ---------- Boutons ---------- */
.btn,.btn-red,.btn-primary,.btn-ghost,.btn-secondary,.cta-btn,.hv-btn{
  font-family:'Inter',sans-serif !important; font-weight:700 !important;
  font-size:.82rem !important; letter-spacing:.6px !important;
  text-transform:uppercase !important;
  border-radius:10px !important; transition:.2s !important;
}
.btn-red,.btn-primary,.hv-btn-red{
  background:linear-gradient(135deg,#ff2f2f,#c40000) !important;
  border:1.5px solid transparent !important; color:#fff !important;
  box-shadow:0 8px 26px rgba(224,0,0,.36) !important;
}
.btn-red:hover,.btn-primary:hover,.hv-btn-red:hover{
  filter:brightness(1.08); transform:translateY(-2px);
}
.btn-ghost,.btn-secondary,.hv-btn-ghost{
  background:transparent !important; color:#fff !important;
  border:1.5px solid rgba(255,255,255,.24) !important; box-shadow:none !important;
}
.btn-ghost:hover,.btn-secondary:hover,.hv-btn-ghost:hover{
  border-color:#fff !important; background:rgba(255,255,255,.06) !important;
}
.filter-btn,.zone-tags span,.pc-badge-item,.chip,.tag-pill{
  font-family:'Inter',sans-serif !important; font-weight:600 !important;
  font-size:.82rem !important; letter-spacing:0 !important; text-transform:none !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(255,255,255,.03) !important; color:#9b9ba4 !important;
}
.filter-btn:hover,.zone-tags span:hover{border-color:rgba(255,255,255,.3) !important; color:#fff !important}
.filter-btn.active,.chip.active{background:#e00000 !important; border-color:#e00000 !important; color:#fff !important}

/* ---------- Formulaires ---------- */
input,select,textarea,
.form-group input,.form-group select,.form-group textarea{
  border-radius:10px !important;
  font-family:'Inter',sans-serif !important;
}
.form-section-label,.f-lbl{
  font-family:'Orbitron',sans-serif !important; font-weight:700 !important;
  font-size:.54rem !important; letter-spacing:2.6px !important;
  text-transform:uppercase !important; color:#7b7b85 !important;
}

/* ---------- FAQ ---------- */
.faq summary,.faq-q{
  font-family:'Inter',sans-serif !important; font-weight:600 !important;
  font-size:1rem !important; letter-spacing:0 !important;
  text-transform:none !important; color:#f0f0f4 !important;
}
.faq details p,.faq-a{font-family:'Inter',sans-serif !important; font-weight:300 !important; color:#9b9ba4 !important}

/* ---------- Bandeau de marques ---------- */
.brand-item,.brand-text{
  font-family:'Inter',sans-serif !important; font-weight:600 !important;
  color:#5f5f68 !important; letter-spacing:.4px !important;
}
.brand-sep{color:#2c2c33 !important}

/* ---------- Divers ---------- */
.success-msg,.lightbox-close{border-radius:10px !important}
.badge,.pill{border-radius:999px !important; font-family:'Inter',sans-serif !important}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  body{opacity:1 !important}
}
/* ============================================================================
   CORRECTIFS MOBILE — s'appliquent à toutes les pages (fichier partagé)
   Rattrape les grilles fixes, les débordements et les titres trop grands.
   ============================================================================ */

/* ── Garde-fou universel : plus jamais de scroll horizontal ── */
html, body{ max-width:100%; overflow-x:hidden; }
img, svg, video, iframe, table{ max-width:100%; }
* { min-width:0; }   /* évite qu'un enfant force l'élargissement d'une grille/flex */

@media (max-width:900px){
  /* Les grilles à 3-4 colonnes fixes passent à 2 colonnes */
  .type-grid, .garantie-strip, .urgency-grid, .cards-grid, .reviews-grid, .steps, .av-grid, .process-grid, .checks-grid, .stats-bar, .gallery-grid, .pb-grid, .process-track, .features-grid, .contact-grid, .ed-grid, .bench-fps, .btiles, .grid, .why, .zones-grid, .run-grid{
    grid-template-columns:1fr 1fr !important;
  }
}

@media (max-width:600px){
  /* En dessous, tout passe sur une seule colonne */
  .type-grid, .garantie-strip, .urgency-grid, .cards-grid, .reviews-grid, .steps, .av-grid, .process-grid, .checks-grid, .stats-bar, .gallery-grid, .pb-grid, .process-track, .features-grid, .contact-grid, .ed-grid, .bench-fps, .btiles, .grid, .why, .zones-grid, .run-grid{
    grid-template-columns:1fr !important;
  }
  /* on garde 2 colonnes pour les petites stats (sinon trop long) */
  .stats-bar, .garantie-strip, .btiles{ grid-template-columns:1fr 1fr !important; }

  /* Marges latérales raisonnables (fini les 48-60px qui rognent l'écran) */
  section{ padding-left:18px !important; padding-right:18px !important; }
  .wrap, .container, main{ padding-left:16px !important; padding-right:16px !important; }

  /* Titres géants → ramenés à une taille lisible sur téléphone */
  .section-title, .sec-head h2, .hv-title{
    font-size:clamp(1.6rem, 8vw, 2.2rem) !important;
    letter-spacing:-.8px !important;
  }
  h1{ font-size:clamp(1.7rem, 8.5vw, 2.4rem) !important; }

  /* Les très gros chiffres décoratifs (18rem, 8rem…) débordent → on borne */
  [style*="font-size:18rem"], [style*="font-size:8rem"], [style*="font-size:7rem"], [style*="font-size:6rem"]{
    font-size:22vw !important;
  }

  /* Boutons : pleine largeur, plus faciles à toucher */
  .btn, .btn-red, .btn-primary, .btn-ghost, .btn-secondary, .hv-btn, .cta-btn{
    width:100% !important;
    justify-content:center !important;
    text-align:center !important;
  }
  /* …sauf s'ils sont dans une barre de filtres (là on garde en ligne) */
  .filter-btn, .gallery-filters .btn, .zone-tags span{ width:auto !important; }

  /* Les rangées de boutons s'empilent proprement */
  .cta-row, .hv-cta, .btn-row{ flex-direction:column !important; }

  /* Cibles tactiles : au moins 44px de haut (recommandation Apple/Google) */
  a.btn, button, .nbtn, input[type="submit"]{ min-height:44px; }

  /* Champs de formulaire : 16px minimum pour éviter le zoom auto d'iOS */
  input, select, textarea{ font-size:16px !important; }
}

/* ── Tableaux : défilables horizontalement au lieu de casser la page ── */
@media (max-width:600px){
  table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }
}

@media (prefers-reduced-motion:reduce){ *{ animation:none !important; } }
/* ==================== FIN CORRECTIFS MOBILE ==================== */

/* ============================== FIN nc-theme ============================== */

/* ============================================================================
   CARBONE V8 — évolution du système STUDIO/V7 (juillet 2026)
   • Fond "établi" commun : carbone + grille technique 56px + halo rouge
   • Cartes : dégradé subtil + filet lumineux en haut + hover affiné
   • Nav : translucide floutée (la grille glisse dessous au scroll)
   • Finitions : sélection, scrollbar, focus clavier
   Supprimer ce bloc = retour V7 immédiat. Une seule source de vérité.
   ============================================================================ */

/* ── Fond commun ── */
body{
  background-color:#060608 !important;
  background-image:
    radial-gradient(1100px 640px at 50% -6%, rgba(224,0,0,.10), transparent 62%),
    linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px) !important;
  background-size:auto, 56px 56px, 56px 56px !important;
  background-attachment:fixed, fixed, fixed !important;
}

/* ── Cartes : identité V8 ── */
.card,.feature,.svc,.tar-card,.contact-card,.faq-item,.tem-card,.pb-card,
.stk-cat,.run,.pc-card,.opt-card,.pack-card,.tier-card{
  position:relative;
  background:linear-gradient(180deg,#101116,#0c0d11) !important;
  border-color:rgba(255,255,255,.08) !important;
}
.card::after,.feature::after,.svc::after,.tar-card::after,.contact-card::after,
.tem-card::after,.pb-card::after,.pc-card::after,.opt-card::after,
.pack-card::after,.tier-card::after{
  content:'';position:absolute;top:0;left:14%;right:14%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.20),transparent);
  pointer-events:none;
}
.card:hover,.feature:hover,.svc:hover,.tar-card:hover,.contact-card:hover,
.tem-card:hover,.pb-card:hover,.pc-card:hover,.opt-card:hover,.pack-card:hover{
  transform:translateY(-4px) !important;
  border-color:rgba(255,255,255,.18) !important;
}

/* ── Nav translucide floutée ── */
#stickyTop nav{
  background:rgba(6,6,8,.72);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  backdrop-filter:blur(14px) saturate(1.15);
}
#stickyTop .topinfo{
  background:rgba(9,9,11,.85);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

/* ── Finitions ── */
::selection{background:rgba(224,0,0,.34);color:#fff}
html{scrollbar-color:#2a2a31 #0a0a0d}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#0a0a0d}
::-webkit-scrollbar-thumb{background:#232329;border-radius:8px;border:2px solid #0a0a0d}
::-webkit-scrollbar-thumb:hover{background:#33333b}
:focus-visible{outline:2px solid rgba(255,59,48,.85);outline-offset:3px}

/* ==================== FIN CARBONE V8 ==================== */
