/* ═══════════════════════════════════════════════════════════
   NRPerformance — styles.css
   Sections :
   01. Custom Properties
   02. Reset & Base
   03. Typography & Utilities
   04. Skip Link (a11y)
   05. Navigation
   06. Language Button
   07. Mobile Menu
   08. Buttons
   09. Toast
   10. Intro Video Overlay
   11. Hero
   12. Sections (generic)
   13. Expertises
   14. Méthode
   15. Partenaires
   16. Contact Form
   17. Info Cards
   18. Footer
   19. Scroll-to-Top
   20. Reveal Animations
   21. Responsive
   22. Reduced Motion
═══════════════════════════════════════════════════════════ */

/* ── 01. Custom Properties ─────────────────────────────── */
:root {
  /* Colors */
  --clr-bg:         #0A0A0F;
  --clr-bg2:        #0E0F16;
  --clr-card:       #121322;
  --clr-border:     rgba(255, 255, 255, .08);
  --clr-border-md:  rgba(255, 255, 255, .12);
  --clr-text:       #EDEEF7;
  --clr-muted:      rgba(237, 238, 247, .68);
  --clr-blue:       #2F8BFF;
  --clr-blue-light: #66B3FF;
  --clr-blue-glow:  rgba(47, 139, 255, .22);
  --clr-green:      #25D366;
  --clr-green-glow: rgba(37, 211, 102, .18);

  /* Spacing */
  --section-pad: 60px;
  --container-max: 1140px;

  /* Shape */
  --radius-sm:  12px;
  --radius-md:  18px;
  --radius-lg:  26px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card: 0 20px 64px rgba(0, 0, 0, .6);
  --shadow-blue: 0 18px 50px rgba(47, 139, 255, .18);
  --shadow-blue-hover: 0 24px 64px rgba(47, 139, 255, .3);

  /* Transitions */
  --t-fast:   .15s ease;
  --t-base:   .25s ease;
  --t-slow:   .5s ease;
  --t-reveal: .7s cubic-bezier(.22, .61, .36, 1);

  /* Z-index layers */
  --z-base:    1;
  --z-nav:     100;
  --z-toast:   200;
  --z-intro:   300;
}

/* ── 02. Reset & Base ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--clr-text);
  overflow-x: hidden;

  /* ── Background carbone premium ─────────────────────────────────
     Couche 1 : reflet central (halo bleu studio)
     Couche 2 : dégradé noir → bleu nuit → noir (identité NR)
     Couche 3 : ton image degrade_carbon.png (texture réelle)
     Résultat : carbone visible sur TOUT le site, fond fixe parallax
  ──────────────────────────────────────────────────────────────── */
  background-color: #050810;

  background-image:
    /* Reflet central — lumière de studio, bleu acier */
    radial-gradient(
      ellipse 80% 55% at 50% 38%,
      rgba(5, 30, 70, .50) 0%,
      transparent 72%
    ),
    /* Dégradé directionnel noir → bleu électrique profond → noir */
    linear-gradient(
      155deg,
      rgba(5,  8,  16, .92)  0%,
      rgba(5, 20,  48, .78) 38%,
      rgba(5, 26,  51, .72) 58%,
      rgba(5,  8,  16, .95) 100%
    ),
    /* Texture carbone réelle — image uploadée */
    url('degrade_carbon.png');

  background-blend-mode: normal, multiply, normal;
  background-size:    100% 100%, 100% 100%, cover;
  background-position: center, center, center center;
  background-attachment: fixed;  /* parallax léger au scroll */
}

img        { display: block; max-width: 100%; }
a          { color: inherit; text-decoration: none; }
p          { margin: 0 0 .8em; line-height: 1.65; }
p:last-child { margin-bottom: 0; }
ul, ol     { margin: 0; padding: 0; }
li         { list-style: none; }
button     { font-family: inherit; cursor: pointer; }

.container {
  width: min(var(--container-max), calc(100% - 40px));
  margin-inline: auto;
}

/* ── 12. Sections & Cards (règles de base restaurées) ── */
.section { padding: var(--section-pad) 0; }

.section--alt {
  background: rgba(5, 15, 35, .45);
  border-top:    1px solid rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  backdrop-filter: blur(2px);
}

.card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
  background: rgba(5, 12, 28, .6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid var(--clr-border);
}

.card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px 15px;
  border-top: 1px solid var(--clr-border);
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--t-reveal),
    transform var(--t-reveal);
  /* Stagger support via CSS custom property */
  transition-delay: var(--delay, 0s);
}

.pill {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(47, 139, 255, .35);
  background: rgba(47, 139, 255, .1);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--clr-blue-light);
}

.step {
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
  background: rgba(5, 12, 28, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 18px;
  display: flex;
  gap: 14px;
  min-height: 130px;
  transition: border-color var(--t-base), transform var(--t-base);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── 03. Typography & Utilities ────────────────────────── */
h1, h2, h3 {
  font-family: 'Orbitron', 'Inter', sans-serif;
  letter-spacing: .3px;
  line-height: 1.15;
  margin: 0;
}
h1 { font-size: clamp(28px, 4.2vw, 52px); }
h2 { font-size: clamp(22px, 3vw,  36px); margin-bottom: 10px; }
h3 { font-size: 17px; margin-bottom: 8px; }

.muted   { color: var(--clr-muted); }
.small   { font-size: 13px; }
.kicker  {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--clr-blue-light);
  margin-bottom: 10px;
}
.lead {
  font-size: 16px;
  color: rgba(237, 238, 247, .82);
  max-width: 58ch;
  margin: 0 0 20px;
}
.divider {
  height: 1px;
  background: var(--clr-border);
  margin: 14px 0;
}

/* ── 04. Skip Link ─────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: calc(var(--z-intro) + 1);
  padding: 10px 18px;
  border-radius: var(--radius-md);
  background: var(--clr-blue);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  transition: top var(--t-fast);
}
.skip-link:focus {
  top: 16px;
  outline: 3px solid white;
  outline-offset: 2px;
}

/* ── 05. Navigation ────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(7, 10, 18, .6);
  border-bottom: 1px solid var(--clr-border);
  transition: background var(--t-base), border-color var(--t-base),
              box-shadow var(--t-base);
}
/* State: scrolled — header becomes more opaque + subtle shadow */
.nav.is-scrolled {
  background: rgba(7, 10, 18, .88);
  border-bottom-color: var(--clr-border-md);
  box-shadow: 0 4px 30px rgba(0, 0, 0, .5);
}

.nav__inner {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Brand / Logo */
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand__logo {
  height: 46px;
  width: auto;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: brightness(1.1) contrast(1.05);
  transition: filter var(--t-base), transform var(--t-base);
}
.brand:hover .brand__logo,
.brand:focus-visible .brand__logo {
  filter: brightness(1.35) contrast(1.1);
  transform: scale(1.02);
}
.brand--small .brand__logo,
.brand__logo--small { height: 38px; }

/* Desktop menu */
.menu {
  display: flex;
  align-items: center;
  gap: 4px;
}
.menu a {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: rgba(237, 238, 247, .82);
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.menu a:hover,
.menu a:focus-visible {
  background: rgba(255, 255, 255, .06);
  color: var(--clr-text);
  outline: none;
}
.menu a:focus-visible {
  outline: 2px solid var(--clr-blue);
  outline-offset: 2px;
}

/* Nav right-side actions */
.nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Burger button */
.nav__burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .03);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.nav__burger:hover { background: rgba(255, 255, 255, .07); }
.nav__burger:focus-visible {
  outline: 2px solid var(--clr-blue);
  outline-offset: 2px;
}

.burger-line {
  display: block;
  width: 18px;
  height: 2px;
  background: rgba(237, 238, 247, .9);
  border-radius: 2px;
  transform-origin: center;
  transition: transform .3s ease, opacity .2s ease, width .2s ease;
}
/* Burger → X animation */
.nav__burger[aria-expanded="true"] .burger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__burger[aria-expanded="true"] .burger-line:nth-child(2) {
  opacity: 0;
  width: 0;
}
.nav__burger[aria-expanded="true"] .burger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── 06. Language Switcher — drapeaux circulaires ──────── */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(10px);
}

.lang-flag {
  width: 40px;
  height: 32px;
  border-radius: 6px;
  border: 2px solid transparent;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  opacity: .65;
  transition:
    opacity      var(--t-fast),
    border-color var(--t-fast),
    box-shadow   var(--t-fast),
    transform    var(--t-fast),
    background   var(--t-fast);
}
.lang-flag svg {
  border-radius: 3px;
  display: block;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.lang-flag:hover {
  opacity: 1;
  transform: scale(1.08);
  background: rgba(255, 255, 255, .06);
}
/* Langue active */
.lang-flag[aria-pressed="true"] {
  opacity: 1;
  border-color: rgba(47, 139, 255, .75);
  background: rgba(47, 139, 255, .15);
  box-shadow: 0 0 0 3px rgba(47, 139, 255, .2);
}
.lang-flag:focus-visible {
  outline: 2px solid var(--clr-blue);
  outline-offset: 2px;
}

/* ── 07. Mobile Menu ───────────────────────────────────── */
.nav__mobile {
  /* CSS grid technique for smooth height animation */
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  border-top: 1px solid transparent;
  transition:
    grid-template-rows .32s cubic-bezier(.4, 0, .2, 1),
    border-color .32s ease;
}
.nav__mobile.is-open {
  grid-template-rows: 1fr;
  border-top-color: var(--clr-border);
}

.nav__mobile-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0;
  transition: padding .32s ease;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav__mobile.is-open .nav__mobile-inner {
  padding: 12px 20px 20px;
}

.nav__mobile-inner a {
  display: block;
  padding: 12px 10px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  color: rgba(237, 238, 247, .82);
  transition: background var(--t-fast), color var(--t-fast),
              transform var(--t-fast);
}
.nav__mobile-inner a:hover {
  background: rgba(255, 255, 255, .06);
  color: var(--clr-text);
  transform: translateX(3px);
}
.nav__mobile-inner a:focus-visible {
  outline: 2px solid var(--clr-blue);
  outline-offset: 2px;
}
.nav__mobile-inner .btn {
  margin-top: 8px;
  width: 100%;
  justify-content: center;
}

/* ── 08. Buttons ───────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(47, 139, 255, .45);
  background: linear-gradient(135deg, rgba(47, 139, 255, .95), rgba(102, 179, 255, .55));
  box-shadow: var(--shadow-blue);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--clr-text);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--t-fast), box-shadow var(--t-fast),
              filter var(--t-fast);
  white-space: nowrap;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-blue-hover);
  filter: brightness(1.08);
}
.btn:active  { transform: translateY(0); }
.btn:focus-visible {
  outline: 2px solid white;
  outline-offset: 3px;
}
.btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

.btn--ghost {
  border: 1px solid var(--clr-border);
  background: rgba(255, 255, 255, .04);
  box-shadow: none;
  filter: none;
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, .08);
  box-shadow: none;
  filter: none;
}

.btn--whatsapp {
  border-color: rgba(37, 211, 102, .45);
  background: linear-gradient(135deg, rgba(37, 211, 102, .92), rgba(18, 140, 62, .72));
  box-shadow: 0 12px 40px var(--clr-green-glow);
}
.btn--whatsapp:hover {
  box-shadow: 0 18px 54px rgba(37, 211, 102, .28);
  filter: brightness(1.08);
}

/* ── Portail buttons (nav) ──────────────────────────────── */
.portal-btns {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn--portal-login {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border-md);
  background: rgba(255, 255, 255, .05);
  color: rgba(237, 238, 247, .82);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), transform var(--t-fast);
  white-space: nowrap;
}
.btn--portal-login:hover {
  background: rgba(47, 139, 255, .1);
  border-color: rgba(47, 139, 255, .4);
  color: var(--clr-blue-light);
  transform: translateY(-1px);
}
.btn--portal-login:focus-visible { outline: 2px solid var(--clr-blue); outline-offset: 2px; }

.btn--portal-register {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(47, 139, 255, .5);
  background: linear-gradient(135deg, rgba(47, 139, 255, .9), rgba(102, 179, 255, .5));
  box-shadow: 0 4px 18px rgba(47, 139, 255, .2);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn--portal-register::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .55s ease;
}
.btn--portal-register:hover::after { transform: translateX(100%); }
.btn--portal-register:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(47, 139, 255, .35);
  filter: brightness(1.1);
}
.btn--portal-register:focus-visible { outline: 2px solid white; outline-offset: 2px; }

@media (max-width: 900px) { .portal-btns:not(.portal-btns--mobile) { display: none; } }
.portal-btns--mobile {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.portal-btns--mobile .btn--portal-login,
.portal-btns--mobile .btn--portal-register {
  flex: 1;
  justify-content: center;
  padding: 10px 12px;
  font-size: 13px;
}

/* 1. Entrée de la carte */

/* 2. Tracé progressif des courbes SVG */

/* 3. Lueur pulsante courbe tuned */

/* 5. Légendes et stats */

/* 6. Mini cards staggered */

/* Respect prefers-reduced-motion */

/* ── 09. Toast ─────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.toast {
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: rgba(47, 139, 255, .18);
  border: 1px solid rgba(47, 139, 255, .4);
  backdrop-filter: blur(12px);
  color: var(--clr-text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  animation: toastIn .3s ease forwards;
}
.toast.is-hiding { animation: toastOut .3s ease forwards; }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

/* ══════════════════════════════════════════════════════════
   V5 — Nouveaux composants
══════════════════════════════════════════════════════════ */

/* Badge WhatsApp dot hero */
.badge--wa 

/* ── Why Partner encart ─────────────────────────────────── */
.why-partner {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(47,139,255,.2);
  background: linear-gradient(135deg, rgba(47,139,255,.06), rgba(5,20,50,.5));
  padding: 28px 32px;
  margin-bottom: 24px;
}
.why-partner__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--clr-blue-light);
  margin-bottom: 20px;
}
.why-partner__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.why-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.why-item__icon {
  font-size: 22px;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.why-item strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--clr-text);
}
.why-item p {
  font-size: 13px;
  color: var(--clr-muted);
  margin: 0;
  line-height: 1.55;
}

/* ── Pricing Grid ───────────────────────────────────────── */
.pricing-section { margin-bottom: 24px; }
.pricing-title {
  font-size: 17px;
  text-align: center;
  margin: 0 0 20px;
  color: var(--clr-text);
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: start;
}
.pricing-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
  background: rgba(255,255,255,.03);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  transition: border-color var(--t-base), transform var(--t-base);
}
.pricing-card:hover {
  border-color: rgba(47,139,255,.25);
  transform: translateY(-3px);
}
/* Carte recommandée */
.pricing-card--featured {
  border-color: rgba(47,139,255,.4);
  background: linear-gradient(160deg, rgba(47,139,255,.1), rgba(5,20,50,.6));
  box-shadow: 0 0 0 1px rgba(47,139,255,.15), 0 12px 40px rgba(0,0,0,.3);
}
/* Carte bientôt */
.pricing-card--soon {
  opacity: .75;
  filter: saturate(.7);
}
.pricing-card__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  background: var(--clr-blue);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: .3px;
  box-shadow: 0 4px 12px rgba(47,139,255,.4);
}
.pricing-card__badge--soon {
  background: rgba(120,120,140,.6);
  box-shadow: none;
}
.pricing-tag {
  display: block;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--clr-blue-light);
  margin-bottom: 8px;
}
.pricing-desc { font-size: 13px; color: var(--clr-muted); margin: 0; line-height: 1.55; }
.pricing-card__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.price-from { font-size: 11px; color: var(--clr-muted); text-transform: uppercase; letter-spacing: .4px; }
.price-val {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1;
}
.price-unit { font-size: 12px; color: var(--clr-muted); }
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.pricing-features li { font-size: 13px; color: rgba(237,238,247,.75); }
.pricing-features .muted { opacity: .5; }
.pricing-cta {
  margin-top: auto;
  width: 100%;
  justify-content: center;
  font-size: 13px;
  padding: 10px 16px;
}
.pricing-cta:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ── Écosystème Partenaire ──────────────────────────────── */
.ecosystem {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
  align-items: start;
}
.ecosystem__title {
  font-size: 16px;
  margin: 0 0 20px;
}
.workflow-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.workflow-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--clr-border);
  background: rgba(255,255,255,.025);
  transition: border-color var(--t-base), background var(--t-base);
}
.workflow-step:hover {
  transform: translateX(6px);
  border-color: rgba(47, 139, 255, .30);
  background: rgba(47, 139, 255, .05);
  box-shadow: 0 0 16px rgba(47, 139, 255, .08);
}
.workflow-step__num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(47,139,255,.15);
  border: 1px solid rgba(47,139,255,.4);
  display: grid;
  place-items: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--clr-blue-light);
  flex-shrink: 0;
}
.workflow-step__body strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}
.workflow-step__body p {
  font-size: 13px;
  color: var(--clr-muted);
  margin: 0;
  line-height: 1.55;
}
.workflow-arrow {
  text-align: center;
  font-size: 20px;
  color: rgba(47,139,255,.3);
  padding: 4px 0;
  margin-left: 15px;
}

/* Carte diagnostic */
.diag-card {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(47,139,255,.2);
  background: linear-gradient(160deg, rgba(5,20,50,.8), rgba(5,10,25,.9));
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}
.diag-card__icon { font-size: 32px; }
.diag-card h3 { font-size: 16px; margin: 0; }
.diag-card p { font-size: 13px; color: var(--clr-muted); margin: 0; line-height: 1.65; }
.diag-card__quote {
  font-style: italic;
  color: var(--clr-blue-light) !important;
  font-size: 14px !important;
  border-left: 3px solid rgba(47,139,255,.4);
  padding-left: 12px;
}
.diag-card__support {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: rgba(37,211,102,.08);
  border: 1px solid rgba(37,211,102,.2);
  font-size: 13px;
  font-weight: 600;
  color: #4fd882;
  margin-top: auto;
}

/* ── Compatibilité matérielle — Logo strip ──────────────── */
.compat-strip {
  margin: 0 0 24px;
  padding: 22px 28px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.02);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
}
.compat-strip__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--clr-muted);
}
.compat-strip__logos {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.compat-logo {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.04);
  color: rgba(237,238,247,.7);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
  cursor: default;
  user-select: none;
}
.compat-logo svg { display: block; }
.compat-logo:hover {
  border-color: rgba(47,139,255,.3);
  color: var(--clr-text);
  background: rgba(47,139,255,.07);
}
.compat-strip__note {
  font-size: 12px;
  color: rgba(237,238,247,.38);
  margin: 0;
}

/* ── Trust Section — La différence NRPerformance ──────── */
.trust-row {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}
.trust-row--main { grid-template-columns: 1fr 1fr; }
.trust-row--sub  { grid-template-columns: repeat(3, 1fr); }

.trust-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.trust-card--large {
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.trust-card--small {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.trust-card__header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.trust-card__icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(47,139,255,.2);
  background: rgba(47,139,255,.08);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--clr-blue-light);
}
.trust-card__icon-wrap--sm { width: 36px; height: 36px; }
.trust-card__tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--clr-blue-light);
  margin-bottom: 4px;
}
.trust-card__proof {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--clr-muted);
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--clr-border);
}
.proof-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clr-blue);
  flex-shrink: 0;
}
.trust-process {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
  background: rgba(255,255,255,.02);
  margin-top: 16px;
  flex-wrap: wrap;
}
.process-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--clr-blue-light);
  white-space: nowrap;
}
.process-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
}
.process-step {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.process-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(47,139,255,.15);
  border: 1px solid rgba(47,139,255,.3);
  color: var(--clr-blue-light);
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.process-arrow { color: rgba(47,139,255,.4); font-size: 14px; }

/* ── Hero Badges — arguments de vente ──────────────────── */
.badges {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}

.badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.badge:hover {
  border-color: rgba(47,139,255,.25);
  background: rgba(47,139,255,.05);
}

.badge__icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: rgba(47,139,255,.12);
  border: 1px solid rgba(47,139,255,.2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--clr-blue-light);
}
.badge__icon--wa {
  background: rgba(37,211,102,.12);
  border-color: rgba(37,211,102,.25);
  color: #25D366;
}

.badge__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.badge__body strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--clr-text);
  letter-spacing: .01em;
}
.badge__body span {
  font-size: 11px;
  color: var(--clr-muted);
}

/* ── Responsive v5 ──────────────────────────────────────── */
@media (max-width: 980px) {
  .why-partner__grid { grid-template-columns: 1fr; gap: 14px; }
  .pricing-grid      { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .ecosystem         { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .why-partner { padding: 20px; }
  .compat-strip { padding: 16px; }
  .compat-strip__logos { gap: 6px; }
  .compat-logo { font-size: 12px; padding: 6px 12px; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Révision complète v5
   Breakpoints : 980px (tablette) · 760px (mobile) · 480px (small)
══════════════════════════════════════════════════════════ */

/* ── Tablette 980px ─────────────────────────────────────── */
@media (max-width: 980px) {

  /* Nav */
  .nav__inner { gap: 10px; }
  
  

  /* Badges hero : 2 colonnes */
  

  /* Section grids */
  .grid4   { grid-template-columns: 1fr 1fr; }
  .grid2   { grid-template-columns: 1fr; }
  .steps   { grid-template-columns: 1fr 1fr; }
  .contact { grid-template-columns: 1fr; }
  .split   { grid-template-columns: 1fr; }

  /* Trust cards */
  .trust-row--main { grid-template-columns: 1fr; }
  .trust-row--sub  { grid-template-columns: 1fr 1fr; }

  /* Trust process bandeau */
  .trust-process {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .process-steps { flex-wrap: wrap; gap: 8px; }
  .trust-process__cta { width: 100%; justify-content: center; }

  /* Partenaires v5 */
  .why-partner__grid { grid-template-columns: 1fr; gap: 14px; }
  .pricing-grid      { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .ecosystem         { grid-template-columns: 1fr; }

  /* Form */
  .form__actions { grid-template-columns: 1fr 1fr; }
  .form__actions .btn:last-child { grid-column: 1 / -1; }
}
.hero__content { max-width: 70ch; }
.hero__content h1 { margin: 8px 0 14px; }

/* ── Mobile 760px ───────────────────────────────────────── */
@media (max-width: 760px) {

  :root { --section-pad: 36px; }

  /* Nav */
  .menu       { display: none; }
  .nav__burger { display: flex; }
  .brand__logo { height: 38px; }

  /* Portail boutons — masqués dans nav, visibles dans menu mobile */
  .portal-btns:not(.portal-btns--mobile) { display: none !important; }

  /* Lang switcher compact */
  .lang-switcher { padding: 4px 5px; gap: 3px; }
  .lang-flag     { width: 34px; height: 28px; }
  .lang-flag svg { width: 22px; height: 15px; }

  /* Hero */
  .hero { padding: 44px 0 24px; }
  .hero h1 { font-size: clamp(26px, 7vw, 38px); }
  .hero__cta { flex-direction: column; gap: 10px; }
  .hero__cta .btn { width: 100%; justify-content: center; }

  /* Badges hero : 1 colonne */
  
  

  
  /* Sections */
  .grid4  { grid-template-columns: 1fr; }
  .steps  { grid-template-columns: 1fr; }
  .row    { grid-template-columns: 1fr; }
  .split  { grid-template-columns: 1fr; }
  /* Section head */
  .section__head { text-align: left; }
  .section__head h2 { font-size: clamp(22px, 5.5vw, 30px); }

  /* Trust */
  .trust-row--sub  { grid-template-columns: 1fr; }
  .trust-card--large { padding: 18px; }
  .trust-card--small { padding: 16px; }
  .trust-card__header { gap: 10px; }
  .trust-card__header h3 { font-size: 15px; }
  .trust-card__proof { font-size: 11px; flex-wrap: wrap; gap: 6px; }
  .trust-process { gap: 12px; }
  .process-arrow { display: none; }
  .process-steps { flex-direction: column; gap: 8px; width: 100%; }
  .process-step  { font-size: 13px; }

  /* Partenaires v5 */
  .why-partner { padding: 18px; }
  .why-item    { gap: 12px; }
  .why-item__icon { width: 36px; height: 36px; font-size: 18px; }
  .why-item strong { font-size: 13px; }
  .why-item p      { font-size: 12px; }

  .pricing-grid { max-width: 100%; }
  .pricing-card { padding: 20px 18px; }
  .pricing-card__badge { font-size: 10px; padding: 3px 10px; }
  .price-val    { font-size: clamp(20px, 6vw, 28px); }

  /* Écosystème */
  .ecosystem { gap: 16px; }
  .ecosystem__title { font-size: 15px; }
  .workflow-step { padding: 14px; gap: 12px; }
  .workflow-arrow { display: none; }
  .workflow-steps { gap: 8px; }
  .diag-card { padding: 20px 18px; }
  .diag-card__quote { font-size: 13px !important; }
  .diag-card__support { font-size: 12px; }

  /* Compatibilité logos */
  .compat-strip { padding: 16px; gap: 10px; text-align: left; align-items: flex-start; }
  .compat-strip__logos { gap: 6px; justify-content: flex-start; }
  .compat-logo { font-size: 11px; padding: 5px 10px; }

  /* CTA bar */
  .cta-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .cta-bar .btn { width: 100%; justify-content: center; }

  /* Contact form */
  .form__actions { grid-template-columns: 1fr; }
  .btn--whatsapp, .btn--submit { width: 100%; justify-content: center; }

  /* Footer */
  .footer__inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer__right { flex-wrap: wrap; gap: 10px 16px; }

  /* Cookie banner */
  .cookie-banner { bottom: 12px; }
  .cookie-banner__inner { padding: 12px 14px; flex-direction: column; gap: 10px; }
  .cookie-banner__btn { align-self: flex-end; }

  /* Scroll to top */
  .scroll-top-btn { bottom: 16px; right: 14px; }
  .intro-skip     { bottom: 16px; right: 14px; }
}

/* ── Très petit mobile 480px ────────────────────────────── */
@media (max-width: 480px) {

  /* Nav inner */
  .nav__inner { gap: 6px; }
  .brand__logo { height: 34px; }

  /* Hero titre max */
  .hero h1 { font-size: clamp(22px, 8vw, 32px); }

  /* Tuiles / cards */
  .tile, .trust-card { padding: 14px 12px; }

  /* Pricing */
  .pricing-cta { font-size: 13px; }

  /* Form labels */
  label > span { font-size: 13px; }

  /* Section head */
  .kicker { font-size: 10px; }
}

/* ═══════════════════════════════════════════════════════════
   v6 — DARK LAB UPGRADES
═══════════════════════════════════════════════════════════ */

/* ── Glassmorphism renforcé — Navigation ──────────────────── */
.header {
  background: rgba(10, 10, 15, .72) !important;
  backdrop-filter: blur(28px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.6) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

/* ── 16. Contact Form ──────────────────────────────────── */
.contact {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  align-items: start;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-muted);
}

.form input,
.form select,
.form textarea {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  color: var(--clr-text);
  font-family: inherit;
  font-size: 14px;
  padding: 10px 14px;
  width: 100%;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none;
  box-sizing: border-box;
}
.form input:focus,
.form select:focus,
.form textarea:focus {
  border-color: rgba(47,139,255,.5);
  box-shadow: 0 0 0 3px rgba(47,139,255,.10);
}
.form textarea { resize: vertical; }

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form__actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}

.form__hint {
  font-size: 11px;
  color: var(--clr-muted);
  margin-top: 2px;
}

.form__status {
  font-size: 13px;
  text-align: center;
  min-height: 20px;
  color: var(--clr-blue-light);
}

/* ── 17. Info Cards ────────────────────────────────────── */
.info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info__card {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.info__card h3 {
  font-size: 15px;
  margin: 0 0 14px;
  color: var(--clr-text);
}

.plain {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plain li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--clr-muted);
}
.plain li svg { flex-shrink: 0; opacity: .6; }
.plain li a { color: var(--clr-blue-light); }
.plain li a:hover { text-decoration: underline; }
.plain li strong { color: var(--clr-text); font-weight: 600; }

/* ── Glassmorphism renforcé — Formulaire (améliorations) ─ */

/* ── Micro-interactions — Cartes ──────────────────────────── */
.tile,
.trust-card--large,
.trust-card--small,
.mini,
.why-item,
.pricing-card:not(.pricing-card--featured) {
  transition:
    transform     .22s cubic-bezier(.25,.46,.45,.94),
    box-shadow    .22s cubic-bezier(.25,.46,.45,.94),
    border-color  .22s ease;
}

.tile:hover,
.trust-card--large:hover,
.trust-card--small:hover {
  transform: translateY(-3px);
  box-shadow:
    0 12px 36px rgba(0,0,0,.35),
    0 0 0 1px rgba(47,139,255,.18),
    0 0 18px rgba(47,139,255,.08);
  border-color: rgba(47,139,255,.22);
}

.mini:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.3), 0 0 12px rgba(47,139,255,.06);
}

.why-item:hover {
  background: rgba(47, 139, 255, .06);
  border-color: rgba(47, 139, 255, .20);
  transform: translateX(4px);
}

.pricing-card:not(.pricing-card--featured):hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(47,139,255,.20);
  border-color: rgba(47, 139, 255, .25);
}

.diag-card:hover {
  box-shadow: 0 0 28px rgba(47, 139, 255, .12);
  border-color: rgba(47, 139, 255, .30);
}

.hero {
  position: relative;
  overflow: hidden;
}

/* ── Hero layout + watermark ────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('logo.png');
  background-repeat: no-repeat;
  background-position: right -5% center;
  background-size: 48% auto;
  opacity: .06;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: grayscale(1) brightness(2);
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 90px 0 80px;
}

/* ── Hero Stats Row ────────────────────────────────────────── */
.hero-stats {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 20px;
  padding: 12px 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  backdrop-filter: blur(8px);
  width: fit-content;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0 18px;
}
.hero-stat:first-child { padding-left: 0; }
.hero-stat:last-child  { padding-right: 0; }

.hero-stat__val {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--clr-blue);
  letter-spacing: .02em;
  line-height: 1.1;
}

.hero-stat__label {
  font-size: 10px;
  color: var(--clr-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}

.hero-stat__sep {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,.12);
  flex-shrink: 0;
}

/* ── Familles ECU ──────────────────────────────────────────── */
.compat-families {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.ecu-fam {
  font-size: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(47, 139, 255, .85);
  background: rgba(47, 139, 255, .07);
  border: 1px solid rgba(47, 139, 255, .18);
  border-radius: 4px;
  padding: 3px 8px;
  cursor: default;
  transition: background .18s, border-color .18s, color .18s;
}

.ecu-fam:hover {
  background: rgba(47, 139, 255, .14);
  border-color: rgba(47, 139, 255, .35);
  color: var(--clr-blue);
}

/* ── Form Select + Hint ────────────────────────────────────── */
label select {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-sm);
  color: var(--clr-text);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color .18s, box-shadow .18s;
}

label select:focus {
  outline: none;
  border-color: rgba(47,139,255,.5);
  box-shadow: 0 0 0 3px rgba(47,139,255,.12);
}

label select option {
  background: #111;
  color: var(--clr-text);
}

.form__hint {
  font-size: 11px;
  color: var(--clr-muted);
  margin-top: 4px;
  display: block;
  transition: color .2s;
}

.form__hint.is-pro {
  color: rgba(47, 139, 255, .80);
}

/* ── Data-grid fiche technique (workflow steps tech) ──────── */
.workflow-step__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 6px;
}

.tech-tag {
  font-size: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(102, 179, 255, .85);
  background: rgba(47, 139, 255, .07);
  border: 1px solid rgba(47, 139, 255, .15);
  border-radius: 3px;
  padding: 2px 7px;
}

/* ── Responsive v6 ────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero-stats { gap: 0; padding: 10px 14px; }
  .hero-stat  { padding: 0 12px; }
}

@media (max-width: 760px) {
  .hero-stats {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    width: 100%;
    padding: 12px 14px;
  }
  .hero-stat  { flex-direction: row; gap: 8px; align-items: center; padding: 0; flex-basis: auto; }
  .hero-stat__sep { display: none; }
  .hero-stat__val { font-size: 14px; }
  .hero-stat__label { font-size: 10px; text-transform: none; letter-spacing: 0; }
  .compat-families { gap: 5px; }
  .ecu-fam { font-size: 9px; padding: 3px 6px; }
}

/* ═══════════════════════════════════════════════════════════
   v6 Final — Expertises & Méthode redesign
═══════════════════════════════════════════════════════════ */

/* ── Expertise Cards ────────────────────────────────────── */
.exp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.exp-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
  background: rgba(5, 12, 28, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  position: relative;
}
.exp-card::before {
  content: '';
  display: block;
  height: 3px;
  background: var(--exp-accent, var(--clr-blue));
  flex-shrink: 0;
}
.exp-card:hover {
  border-color: color-mix(in srgb, var(--exp-accent, var(--clr-blue)) 40%, transparent);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
}
.exp-card__icon {
  font-size: 28px;
  line-height: 1;
  padding: 18px 20px 0;
}
.exp-card__body {
  padding: 12px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.exp-card__body h3 {
  font-size: 15px;
  color: var(--clr-text);
  margin: 0;
}
.exp-card__body p {
  font-size: 12.5px;
  color: var(--clr-muted);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.exp-card__tags {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 10px;
}
.exp-card__tags li {
  font-size: 11px;
  color: var(--clr-muted);
  padding-left: 14px;
  position: relative;
}
.exp-card__tags li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--exp-accent, var(--clr-blue));
  font-size: 10px;
  top: 1px;
}

/* ── Méthode Steps ──────────────────────────────────────── */
.meth-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.meth-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-right: 20px;
  position: relative;
}
.meth-step__connector {
  position: absolute;
  top: 19px;
  left: 44px;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(47,139,255,.4), rgba(47,139,255,.08));
  z-index: 0;
}
.meth-step__num {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(47,139,255,.12);
  border: 1.5px solid rgba(47,139,255,.45);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--clr-blue-light);
  flex-shrink: 0;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.meth-step:last-child .meth-step__num {
  background: rgba(47,139,255,.22);
  border-color: var(--clr-blue);
  box-shadow: 0 0 12px rgba(47,139,255,.2);
}
.meth-step__body h3 {
  font-size: 14px;
  color: var(--clr-text);
  margin: 0 0 6px;
}
.meth-step__body p {
  font-size: 12px;
  color: var(--clr-muted);
  line-height: 1.6;
  margin: 0;
}
.meth-step__tag {
  display: inline-block;
  margin-top: 8px;
  font-size: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--clr-blue-light);
  background: rgba(47,139,255,.08);
  border: 1px solid rgba(47,139,255,.2);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}

/* ── Split panels méthode ───────────────────────────────── */
.meth-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.meth-panel {
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.meth-panel--no {
  background: rgba(220,80,80,.04);
  border-color: rgba(220,80,80,.15);
}
.meth-panel--yes {
  background: rgba(37,211,102,.04);
  border-color: rgba(37,211,102,.18);
}
.meth-panel__header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.meth-panel__header h3 { font-size: 14px; margin: 0; }
.meth-panel__icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.meth-panel--no  .meth-panel__icon {
  background: rgba(220,80,80,.12);
  color: rgba(240,120,120,1);
  border: 1px solid rgba(220,80,80,.25);
}
.meth-panel--yes .meth-panel__icon {
  background: rgba(37,211,102,.12);
  color: #25D366;
  border: 1px solid rgba(37,211,102,.28);
}
.meth-panel ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.meth-panel li {
  font-size: 13px;
  color: var(--clr-muted);
  padding-left: 16px;
  position: relative;
  line-height: 1.5;
}
.meth-panel--no  li::before { content: '×'; position: absolute; left: 0; color: rgba(240,120,120,.8); font-weight: 700; }
.meth-panel--yes li::before { content: '✓'; position: absolute; left: 0; color: #25D366; font-weight: 700; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 980px) {
  .exp-grid   { grid-template-columns: 1fr 1fr; }
  .meth-steps { grid-template-columns: 1fr 1fr; gap: 20px; }
  .meth-step__connector { display: none; }
}
@media (max-width: 560px) {
  .exp-grid   { grid-template-columns: 1fr; }
  .meth-steps { grid-template-columns: 1fr; }
  .meth-split { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   v6 Update — Logo card / Stat sub / Credit tiers
═══════════════════════════════════════════════════════════ */

/* ── Credit tiers ───────────────────────────────────────── */
.credit-tiers {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0 4px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--clr-border);
}
.credit-tier {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.credit-tier__invest {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--clr-muted);
  min-width: 52px;
}
.credit-tier__arrow {
  color: rgba(47,139,255,.4);
  font-size: 12px;
}
.credit-tier__value {
  font-weight: 600;
  color: var(--clr-blue-light);
  flex: 1;
}
.credit-tier--best .credit-tier__invest,
.credit-tier--best .credit-tier__value {
  color: var(--clr-blue);
}
.credit-tier__badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: rgba(47,139,255,.15);
  border: 1px solid rgba(47,139,255,.3);
  color: var(--clr-blue-light);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}