/* ═══════════════════════════════════════════════════════════════
   pro.css — Styles specific to pro.html
   Requires shared.css to be loaded first.
   ═══════════════════════════════════════════════════════════════ */

/* ── Page accent color for glow effects ── */
:root {
  --page-accent: var(--d-blue);     /* #5B91FF */
  --page-accent-rgb: 91, 145, 255;
}

/* ═══════════════════════════════════════════════
   CONSTAT CARDS
   ═══════════════════════════════════════════════ */
.constat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
  margin-top: 1.8rem;
}
.cc {
  background: rgba(255, 255, 255, .62);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(52, 86, 162, .07);
  border-radius: 20px;
  padding: 2.2rem;
  transition: background .35s, transform .35s, box-shadow .35s, border-color .35s;
  box-shadow: 0 2px 16px rgba(52, 86, 162, .04);
}
.cc:hover {
  background: rgba(255, 255, 255, .9);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(52, 86, 162, .1);
  border-color: var(--b-l3);
}

/* ═══════════════════════════════════════════════
   GAMIFICATION SHOWCASE
   ═══════════════════════════════════════════════ */
.gamif-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 1.8rem;
}
.gamif-card {
  background: rgba(255, 255, 255, .7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(52, 86, 162, .08);
  border-radius: 24px;
  padding: 2.5rem 2rem;
  text-align: center;
  transition: all .4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}
.gamif-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 60px rgba(52, 86, 162, .15);
  border-color: var(--b-l4);
}
.gamif-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(77, 128, 240, .06) 0%, transparent 50%);
  opacity: 0;
  transition: opacity .4s;
}
.gamif-card:hover::before { opacity: 1; }
.gamif-icon {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  display: block;
  animation: floatY 3s ease-in-out infinite;
}
.gamif-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--b-noir);
  margin-bottom: .5rem;
}
.gamif-desc {
  font-size: .82rem;
  color: var(--texte-soft);
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════
   MOBILE — max-width: 600px
   ═══════════════════════════════════════════════ */
@media (max-width: 600px) {

  .vision-mechanics > div > img { width: 24px !important; height: 24px !important; margin-bottom: .1rem !important; }

  /* Bottom banner compact */
  #vision .fade-up > div[style*="border-radius:16px"] {
    padding: .6rem 1rem !important;
    border-radius: 10px !important;
  }
  #vision .fade-up > div[style*="border-radius:16px"] span:first-child { font-size: 1rem !important; }
  #vision .fade-up > div[style*="border-radius:16px"] span:last-child { font-size: .75rem !important; }

  /* ══ Constat (#pourquoi) — Stacked stat strips ══ */
  #pourquoi { display: block !important; padding: 20px 5% !important; }
  #pourquoi .fade-up[style*="margin-bottom:3rem"] { margin-bottom: .6rem !important; }
  #pourquoi .s-sub { display: none !important; }
  #pourquoi > .fade-up > div[style*="border-left"] p {
    font-size: clamp(.82rem, 3vw, 1rem) !important;
  }
  #pourquoi > .fade-up > div[style*="border-left"] {
    padding: 1rem 1.2rem !important;
    margin-top: 1rem !important;
    max-width: 100% !important;
  }

  .constat-responsive.constat-grid {
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    gap: .7rem !important;
    padding-bottom: 0 !important;
  }
  /* Each card: compact horizontal strip */
  .constat-responsive .constat-card {
    display: flex !important;
    align-items: center !important;
    gap: .9rem !important;
    padding: .9rem 1rem !important;
    border-radius: 14px !important;
  }
  /* Hide decorative/verbose elements */
  .constat-responsive .cc-top-bar,
  .constat-responsive .cc-body,
  .constat-responsive .cc-source,
  .constat-responsive .cc-author { display: none !important; }
  /* Big stat on left */
  .constat-responsive .cc-stat {
    font-size: 2rem !important;
    min-width: 64px !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    margin-bottom: 0 !important;
    letter-spacing: -1px !important;
  }
  /* Label + headline in right column */
  .constat-responsive .cc-label {
    font-size: .6rem !important;
    margin-bottom: .2rem !important;
    opacity: .75 !important;
  }
  .constat-responsive .cc-headline {
    font-size: .8rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }

  /* ══ Ecosystème — Timeline verticale ══ */
  #ecosysteme { display: block !important; padding: 20px 5% !important; }
  #ecosysteme .s-sub { max-width: 100%; }

  /* ══ Gamification — Compact bento grid ══ */
  #gamification { padding: 16px 5% !important; }
  #gamification .s-sub { display: none !important; }
  .gamif-showcase {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: .5rem !important;
    margin-top: .6rem !important;
  }
  .gamif-card {
    padding: .8rem !important;
    border-radius: 14px !important;
    text-align: center !important;
    background: rgba(255, 255, 255, .75) !important;
    border: 1.5px solid var(--b-l2) !important;
    box-shadow: 0 3px 14px rgba(52, 86, 162, .07) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .3rem !important;
  }
  .gamif-card:first-child {
    grid-column: 1 / -1 !important;
    border-color: var(--o-l5) !important;
    background: linear-gradient(135deg, var(--o-l1) 0%, rgba(255,255,255,.9) 100%) !important;
  }
  /* Limit avatar image height */
  .gamif-card:nth-child(2) .gamif-icon img[style*="height:180px"] {
    height: 60px !important;
    width: auto !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }
  .gamif-card:nth-child(2) {
    border-color: var(--b-l4) !important;
    background: linear-gradient(145deg, var(--b-l1), rgba(255, 255, 255, .8)) !important;
  }
  .gamif-card:nth-child(3) {
    border-color: var(--r-l5) !important;
    background: linear-gradient(145deg, var(--r-l1), rgba(255, 255, 255, .8)) !important;
  }
  .gamif-card::before { display: none !important; }
  .gamif-icon { font-size: 1.4rem !important; margin-bottom: 0 !important; animation: none !important; flex-shrink: 0; }
  .gamif-icon img { width: 32px !important; height: 32px !important; object-fit: contain !important; }
  .gamif-title { font-size: .75rem !important; font-weight: 800 !important; line-height: 1.25; }

  /* ══ Gamification stats — Pill strip horizontale ══ */
  .gamif-stats {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: .5rem !important;
    margin-top: 1rem !important;
    padding-bottom: .3rem !important;
    scrollbar-width: none !important;
  }
  .gamif-stats::-webkit-scrollbar { display: none; }
  .gamif-stats > div {
    scroll-snap-align: start !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: .4rem !important;
    background: rgba(255, 255, 255, .7) !important;
    border: 1px solid var(--b-l2) !important;
    border-radius: 50px !important;
    padding: .35rem .8rem !important;
    text-align: left !important;
    white-space: nowrap !important;
  }
  .gamif-stats > div > span:first-child {
    font-size: 1.2rem !important;
    letter-spacing: -1px !important;
    line-height: 1 !important;
  }
  .gamif-stats > div > span:last-child {
    font-size: .6rem !important;
    letter-spacing: .02em !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  /* ══ App section — Store links & QR (pro-specific) ══ */
  #app div[style*="border-top:1px solid var(--b-l2)"] {
    margin-top: .6rem !important;
    padding-top: .6rem !important;
  }
  #app div[style*="border-top"] > p { font-size: .6rem !important; margin-bottom: .4rem !important; }
  #app div[style*="display:flex"][style*="gap:.75rem"] a {
    padding: .4rem .7rem !important;
    border-radius: 8px !important;
    min-width: 0 !important;
    flex: 1 !important;
  }
  #app div[style*="display:flex"][style*="gap:.75rem"] a div div:first-child { font-size: .5rem !important; }
  #app div[style*="display:flex"][style*="gap:.75rem"] a div div:last-child { font-size: .72rem !important; }
  /* ══ Parrainage — Compact horizontal steps ══ */
  #parrainage { display: block !important; padding: 20px 5% !important; }
  #parrainage .s-sub { max-width: 100%; }
  #parrainage > .fade-up[style*="text-align:center"] { margin-bottom: .8rem !important; }
  #parrainage .mob-grid-3col {
    display: flex !important;
    flex-direction: row !important;
    gap: .4rem !important;
    margin-bottom: 1rem !important;
  }
  #parrainage .mob-grid-3col > div {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: .3rem !important;
    padding: .7rem .4rem !important;
    border-radius: 14px !important;
    text-align: center !important;
  }
  #parrainage .mob-grid-3col > div:nth-child(1) {
    background: var(--b-l1) !important;
    border: 1.5px solid var(--b-l3) !important;
  }
  #parrainage .mob-grid-3col > div:nth-child(2) {
    background: var(--r-l1) !important;
    border: 1.5px solid var(--r-l5) !important;
  }
  #parrainage .mob-grid-3col > div:nth-child(3) {
    background: var(--o-l1) !important;
    border: 1.5px solid var(--o-l5) !important;
  }
  #parrainage .mob-grid-3col > div > div[style*="font-size:2.2rem"] {
    font-size: 1.2rem !important;
    margin-bottom: 0 !important;
  }
  #parrainage .mob-grid-3col > div > div[style*="font-size:.75rem"][style*="text-transform"] {
    font-size: .5rem !important;
    margin-bottom: 0 !important;
  }
  #parrainage .mob-grid-3col > div:nth-child(1) > div[style*="text-transform"] { color: var(--b-principal) !important; }
  #parrainage .mob-grid-3col > div:nth-child(2) > div[style*="text-transform"] { color: var(--r-principal) !important; }
  #parrainage .mob-grid-3col > div:nth-child(3) > div[style*="text-transform"] { color: var(--o-fonce) !important; }
  #parrainage .mob-grid-3col > div > div[style*="font-size:.95rem"] {
    font-size: .75rem !important;
    margin-bottom: 0 !important;
    line-height: 1.3 !important;
  }
  #parrainage .mob-grid-3col > div > p { display: none !important; }
  #parrainage > div[style*="max-width:680px"] { display: none !important; }
  #parrainage > div[style*="text-align:center;margin-top:2.5rem"] { margin-top: .6rem !important; }
  #parrainage .btn-p { font-size: .78rem !important; padding: .6rem 1rem !important; }

  /* ── Equipe (Made in France) — pro-specific layout ── */
  #equipe > .fade-up > div:first-child { margin-bottom: 1.2rem !important; }
  #equipe > .fade-up > div:first-child > div:first-child { font-size: 2.2rem !important; }
  #equipe > .fade-up > div:first-child > div:last-child { padding: .4rem 1rem !important; }
  #equipe > .fade-up > div:first-child > div:last-child span { font-size: .68rem !important; }
  #equipe > .fade-up > p { font-size: .76rem !important; line-height: 1.55 !important; max-width: 100% !important; }
  #equipe > .fade-up > div[style*="display:flex"][style*="gap:1.5rem"] {
    gap: .8rem !important;
    flex-direction: column !important;
  }
  #equipe > .fade-up > div[style*="display:flex"][style*="gap:1.5rem"] > div {
    flex-direction: row !important;
    gap: .6rem !important;
    text-align: left !important;
    padding: .6rem .8rem !important;
    border-radius: 12px !important;
  }
  #equipe > .fade-up > div[style*="display:flex"][style*="gap:1.5rem"] > div > div:first-child {
    font-size: 1.3rem !important;
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* ── Network diagram — blue glow (no v3 override) ── */
.hero .net-wrap { filter: drop-shadow(0 0 50px rgba(91,145,255,.25)); }

/* ── CC cards — border-radius not set by shared v3 ── */
.cc { border-radius: 24px !important; }

/* ═══════════════════════════════════════════════════════════════════
   ██  v3 CHROMATIC WORLDS — Pro (indigo / electric / ultra-modern)
   ═══════════════════════════════════════════════════════════════════
   World: Deep navy base + vivid electric-blue animated blobs.
   Glass panels become electric-blue-tinted precision windows.
   ─────────────────────────────────────────────────────────────────── */

/* ── The World — moUve Blue #3456A2 / #4D80F0 ── */
body { background: #020612 !important; }

/* ── U logo glow — brand signature background ── */
body::before { display: none !important; }
body::after {
  content            : '' !important;
  position           : fixed !important;
  inset              : auto !important;
  background         : url('img/U.svg') no-repeat center center !important;
  background-size    : contain !important;
  width              : 44vw !important;
  height             : 68vw !important;
  bottom             : -12% !important;
  left               : -8% !important;
  z-index            : -1 !important;
  pointer-events     : none !important;
  opacity            : .055 !important;
  filter             : brightness(0) invert(1)
                       drop-shadow(0 0 70px rgba(77,128,240,.9)) !important;
  animation          : uGlow 16s ease-in-out infinite reverse !important;
}

/* ── Hero ── */
.hero { background: transparent !important; position: relative; overflow: visible; }
.hero::before {
  content    : '';
  position   : absolute;
  width      : 90vw; height: 70vw;
  top        : -18%; left: 50%;
  transform  : translateX(-50%);
  background : radial-gradient(ellipse at 65% 40%, rgba(77,128,240,.3) 0%, rgba(52,86,162,.1) 45%, transparent 72%);
  filter     : blur(50px);
  pointer-events: none;
  z-index    : 0;
}
.hero-inner { position: relative; z-index: 1; }

.hero h1 { color: #fff !important; letter-spacing: -3px !important; }
.hero .acc-b {
  background              : linear-gradient(135deg, #9DBBFD 0%, #4D80F0 100%) !important;
  -webkit-background-clip : text !important;
  -webkit-text-fill-color : transparent !important;
  background-clip         : text !important;
  filter                  : drop-shadow(0 0 30px rgba(77,128,240,.7));
}
.hero .hero-eyebrow, .hero .why-eyebrow {
  background  : rgba(77,128,240,.18) !important;
  color       : rgba(157,187,253,.9) !important;
  border      : 1px solid rgba(77,128,240,.3) !important;
}
.hero .kpi-num {
  background              : linear-gradient(135deg, #9DBBFD, #4D80F0) !important;
  -webkit-background-clip : text !important;
  -webkit-text-fill-color : transparent !important;
  background-clip         : text !important;
  filter                  : drop-shadow(0 0 20px rgba(77,128,240,.6)) !important;
}

/* ── CTA buttons — moUve blue #4D80F0 / #3456A2 ── */
.btn-p, .btn-pro {
  background : linear-gradient(135deg, #4D80F0, #3456A2) !important;
  box-shadow : 0 8px 32px rgba(77,128,240,.45),
               inset 0 1px 0 rgba(255,255,255,.25) !important;
  color      : #fff !important;
}
.btn-p:hover, .btn-pro:hover {
  box-shadow : 0 16px 52px rgba(77,128,240,.65),
               inset 0 1px 0 rgba(255,255,255,.25) !important;
  transform  : translateY(-3px) !important;
}
.nav-cta {
  background : linear-gradient(135deg, #4D80F0, #3456A2) !important;
  box-shadow : 0 4px 20px rgba(77,128,240,.4),
               inset 0 1px 0 rgba(255,255,255,.22) !important;
}

/* ── Sticky bar ── */
.sticky-cta-bar .sticky-primary {
  background : linear-gradient(135deg, #4D80F0, #3456A2);
  color      : #fff;
  animation  : stickyPulseBlue 3s ease-in-out infinite;
}
@keyframes stickyPulseBlue {
  0%, 100% { box-shadow: 0 6px 28px rgba(77,128,240,.45); }
  50%       { box-shadow: 0 10px 40px rgba(77,128,240,.65); }
}

/* ── CC cards: moUve blue glow ── */
.cc { border: 1px solid rgba(77,128,240,.2) !important; }
.cc:hover {
  border-color: rgba(77,128,240,.4) !important;
  box-shadow  : var(--gl-shine), 0 32px 80px rgba(0,0,0,.5),
                0 0 80px rgba(77,128,240,.18) !important;
}
.cc-stat {
  background              : linear-gradient(135deg, #9DBBFD 20%, #4D80F0) !important;
  -webkit-background-clip : text !important;
  -webkit-text-fill-color : transparent !important;
  background-clip         : text !important;
}

/* ── Gamif cards ── */
.gamif-card:hover {
  box-shadow: var(--gl-shine), 0 32px 80px rgba(0,0,0,.6),
              0 0 80px rgba(77,128,240,.18) !important;
  transform : translateY(-8px) scale(1.02) !important;
}

/* ── Ghost btn ── */
.btn-g {
  border-color: rgba(77,128,240,.35) !important;
  color       : rgba(157,187,253,.9) !important;
}
.btn-g:hover {
  background  : rgba(77,128,240,.12) !important;
  border-color: rgba(77,128,240,.6) !important;
}

/* ── v3 Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .hero::before { display: none !important; }
  body::before, body::after { animation: none !important; }
}

/* ════════════════════════════════════════════════════
   § INLINE-STYLE TEXT OVERRIDES — dark glass world
   !important beats inline styles per CSS spec.
════════════════════════════════════════════════════ */

/* Quote block in #pourquoi */
#pourquoi > .fade-up > div[style*="border-left"] {
  background        : rgba(77,128,240,.1) !important;
  border-left-color : rgba(77,128,240,.65) !important;
}
#pourquoi > .fade-up > div[style*="border-left"] p:first-child {
  color: rgba(228,236,255,.9) !important;
}
#pourquoi > .fade-up > div[style*="border-left"] p:last-child,
#pourquoi > .fade-up > div[style*="border-left"] p:last-child strong {
  color: rgba(228,236,255,.58) !important;
}
#pourquoi > .fade-up > div[style*="border-left"] strong[style*="color:var(--b-principal)"] {
  color: #7DAAFF !important;
}

/* CC source pills in constat cards */
.cc-source {
  background: rgba(77,128,240,.15) !important;
  color     : rgba(157,187,253,.85) !important;
  border    : none !important;
}
.constat-card:nth-child(2) .cc-source {
  background: rgba(236,104,107,.15) !important;
  color     : rgba(247,127,139,.88) !important;
}
.constat-card:nth-child(3) .cc-source {
  background: rgba(252,159,66,.15) !important;
  color     : rgba(253,179,93,.88) !important;
}

/* CC author text block */
.cc-author > div > div:first-child { color: rgba(228,236,255,.85) !important; }
.cc-author > div > div:last-child  { color: rgba(228,236,255,.5)  !important; }

/* ════════════════════════════════════════════════════
   § MOBILE DARK FIX — override !important light backgrounds
   These rules come AFTER the responsive block above, so they
   win the !important conflict when specificity is equal.
════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Gamif cards — all variants */
  .gamif-card,
  .gamif-card:first-child,
  .gamif-card:nth-child(2),
  .gamif-card:nth-child(3) {
    background        : rgba(255,255,255,.058) !important;
    backdrop-filter   : blur(28px) saturate(2) !important;
    -webkit-backdrop-filter: blur(28px) saturate(2) !important;
    border            : 1px solid rgba(77,128,240,.2) !important;
  }
  /* Gamif stats scroll-strip */
  .gamif-stats > div {
    background  : rgba(255,255,255,.07) !important;
    border-color: rgba(77,128,240,.22) !important;
  }
  /* Parrainage step cards */
  #parrainage .mob-grid-3col > div,
  #parrainage .mob-grid-3col > div:nth-child(1),
  #parrainage .mob-grid-3col > div:nth-child(2),
  #parrainage .mob-grid-3col > div:nth-child(3) {
    background  : rgba(255,255,255,.058) !important;
    border      : 1px solid rgba(77,128,240,.2) !important;
  }
  /* Equipe team cards */
  #equipe > .fade-up > div[style*="display:flex"][style*="gap:1.5rem"] > div {
    background  : rgba(255,255,255,.06) !important;
    border      : 1px solid rgba(77,128,240,.18) !important;
  }
}

/* ════════════════════════════════════════════════════
   § SECTION OVERRIDES — DARK GLASS WORLD v4 PATCH
   All remaining inline light-mode backgrounds/text → dark glass
════════════════════════════════════════════════════ */

/* ── GAMIF STATS — big numbers + labels ── */
#gamification .gamif-stats [style*="color:var(--b-principal)"],
#gamification .gamif-stats [style*="color:var(--b-vif)"] {
  color: rgba(157,187,253,.92) !important;
}
#gamification .gamif-stats [style*="color:var(--texte-soft)"] {
  color: rgba(228,236,255,.48) !important;
}

/* ── FORMATION — bio card ── */
#formation .fade-right > div[style*="background:linear-gradient"] {
  background  : rgba(255,255,255,.055) !important;
  border-color: rgba(91,145,255,.22)   !important;
  box-shadow  : inset 0 1.5px 0 rgba(255,255,255,.06),
                0 8px 40px rgba(0,0,0,.35) !important;
}
#formation .fade-right [style*="color:var(--b-noir)"] {
  color: rgba(228,236,255,.92) !important;
}
#formation .fade-right [style*="color:var(--texte-soft)"] {
  color: rgba(228,236,255,.55) !important;
}
#formation .fade-right [style*="color:var(--texte)"] {
  color: rgba(228,236,255,.84) !important;
}
#formation .fade-right [style*="background:var(--b-l1)"][style*="border:1px solid var(--b-l3)"] {
  background  : rgba(91,145,255,.12) !important;
  border-color: rgba(91,145,255,.28) !important;
  color       : rgba(157,187,253,.88) !important;
}
#formation .fade-right [style*="border-top:1px solid var(--b-l2)"] {
  border-top-color: rgba(255,255,255,.1) !important;
}

/* ── DESERTS MÉDICAUX — 3-col grid cards ── */
#deserts .mob-grid-3col > div,
#deserts .stagger > div {
  background             : rgba(255,255,255,.055) !important;
  backdrop-filter        : blur(28px) saturate(2) !important;
  -webkit-backdrop-filter: blur(28px) saturate(2) !important;
  border-color           : rgba(91,145,255,.2)    !important;
  box-shadow             : inset 0 1.5px 0 rgba(255,255,255,.05),
                           0 4px 24px rgba(0,0,0,.3) !important;
}
#deserts .mob-grid-3col > div [style*="color:var(--texte)"],
#deserts .stagger > div [style*="color:var(--texte)"] {
  color: rgba(228,236,255,.9) !important;
}
#deserts .mob-grid-3col > div [style*="color:var(--texte-soft)"],
#deserts .stagger > div [style*="color:var(--texte-soft)"] {
  color: rgba(228,236,255,.55) !important;
}

/* ── TARIF — main card ── */
.tarif-card-main {
  background  : rgba(255,255,255,.055) !important;
  border-color: rgba(91,145,255,.4)    !important;
  box-shadow  : inset 0 1.5px 0 rgba(255,255,255,.06),
                0 8px 44px rgba(0,0,0,.45) !important;
}
/* "Tarif Partenaire Fondateur" badge already has gradient bg white text — OK */

/* Price subtitle "/ semestre", "/ mois" */
.tarif-price-anim span {
  -webkit-text-fill-color: rgba(228,236,255,.5) !important;
  background: none !important;
}
#tarif [style*="font-size:1.2rem"][style*="color:var(--texte-soft)"],
#tarif > div > .fade-up [style*="font-size:.78rem"][style*="color:var(--texte-soft)"] {
  color: rgba(228,236,255,.5) !important;
}

/* Step cards inside tarif */
.tarif-step {
  background  : rgba(255,255,255,.06) !important;
  border-color: rgba(91,145,255,.18)  !important;
}
.tarif-step [style*="color:var(--texte)"] {
  color: rgba(228,236,255,.88) !important;
}
.tarif-step [style*="color:var(--b-principal)"] {
  color: rgba(157,187,253,.9) !important;
}

/* Parrainage sub-block inside tarif card */
#tarif [style*="background:linear-gradient(135deg,rgba(52,86,162") {
  background  : rgba(91,145,255,.1)  !important;
  border-color: rgba(91,145,255,.28) !important;
}
#tarif [style*="color:var(--b-principal)"][style*="text-transform:uppercase"] {
  color: rgba(157,187,253,.82) !important;
}
#tarif .tarif-card-main [style*="color:var(--texte)"] {
  color: rgba(228,236,255,.88) !important;
}
#tarif .tarif-card-main [style*="color:var(--texte-soft)"] {
  color: rgba(228,236,255,.52) !important;
}

/* Compare cards */
.tarif-compare {
  background  : rgba(255,255,255,.06) !important;
  border-color: rgba(91,145,255,.18)  !important;
}
#tarif .tarif-compare[style*="background:linear-gradient"] {
  border-color: rgba(91,145,255,.35)  !important;
}
.tarif-compare [style*="color:var(--texte-soft)"] {
  color: rgba(228,236,255,.5) !important;
}
.tarif-compare [style*="color:var(--texte)"] {
  color: rgba(228,236,255,.9) !important;
}
.tarif-compare [style*="color:var(--b-principal)"] {
  color: rgba(157,187,253,.9) !important;
}

/* Perk pills */
.tarif-perk {
  background  : rgba(91,145,255,.12)  !important;
  border-color: rgba(91,145,255,.24)  !important;
  color       : rgba(157,187,253,.88) !important;
}

/* ── PARRAINAGE — advantage card + .cc inner text ── */
#parrainage > .fade-up > div[style*="background:rgba(255,255,255,.7)"] {
  background             : rgba(255,255,255,.055) !important;
  backdrop-filter        : blur(28px) saturate(2) !important;
  -webkit-backdrop-filter: blur(28px) saturate(2) !important;
  border-color           : rgba(91,145,255,.22)   !important;
  box-shadow             : inset 0 1.5px 0 rgba(255,255,255,.06),
                           0 4px 28px rgba(0,0,0,.35) !important;
}
#parrainage > .fade-up > div[style*="background:rgba(255,255,255,.7)"] [style*="color:var(--b-noir)"] {
  color: rgba(228,236,255,.92) !important;
}
#parrainage > .fade-up > div[style*="background:rgba(255,255,255,.7)"] p {
  color: rgba(228,236,255,.58) !important;
}
/* CC card inner inline text */
#parrainage .cc [style*="color:var(--b-noir)"],
#parrainage .cc [style*="color:var(--b-principal)"] ~ div [style*="color:var(--b-noir)"] {
  color: rgba(228,236,255,.92) !important;
}
#parrainage .cc [style*="color:var(--texte-soft)"],
#parrainage .cc p { color: rgba(228,236,255,.56) !important; }
#parrainage .cc [style*="color:var(--b-principal)"] { color: rgba(157,187,253,.82) !important; }
#parrainage .cc [style*="color:var(--o-fonce)"]     { color: rgba(253,179,93,.85)  !important; }

/* ── EQUIPE — Made in France badge + team cards ── */
#equipe [style*="background:linear-gradient(135deg,var(--b-l1),var(--r-l1))"] {
  background  : rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow  : none !important;
}

/* Team cards (are <a> links) */
#equipe .stagger > a {
  background  : rgba(255,255,255,.055) !important;
  border-color: rgba(91,145,255,.18)   !important;
  box-shadow  : inset 0 1.5px 0 rgba(255,255,255,.05),
                0 2px 16px rgba(0,0,0,.3) !important;
}
#equipe .stagger > a:nth-child(2) { border-color: rgba(252,159,66,.28) !important; }
#equipe .stagger > a:nth-child(3) { border-color: rgba(236,104,107,.24) !important; }

#equipe .stagger > a [style*="color:var(--b-noir)"]     { color: rgba(228,236,255,.92) !important; }
#equipe .stagger > a [style*="color:var(--texte-soft)"] { color: rgba(228,236,255,.55) !important; }
#equipe .stagger > a [style*="color:var(--b-principal)"]{ color: rgba(157,187,253,.85) !important; }
#equipe .stagger > a [style*="color:var(--o-fonce)"]    { color: rgba(253,179,93,.85)  !important; }
#equipe .stagger > a [style*="color:var(--r-fonce)"]    { color: rgba(247,127,139,.85) !important; }

/* Team card icon wrappers */
#equipe .stagger > a div[style*="background:var(--b-l1)"] {
  background  : rgba(91,145,255,.15)  !important;
  border-color: rgba(91,145,255,.28)  !important;
}
#equipe .stagger > a div[style*="background:var(--b-noir)"] {
  background  : rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
}
#equipe .stagger > a div[style*="background:var(--r-l1)"] {
  background  : rgba(236,104,107,.15) !important;
  border-color: rgba(236,104,107,.3)  !important;
}

/* ── APP — download section text + QR borders ── */
#app .download-section [style*="border-top:1px solid var(--b-l2)"] {
  border-top-color: rgba(255,255,255,.1) !important;
}
#app .download-section [style*="color:var(--texte-soft)"] {
  color: rgba(228,236,255,.55) !important;
}
#app .qr-codes div[style*="border:1.5px solid var(--b-l3)"] {
  border-color: rgba(255,255,255,.18) !important;
}