/* ═══════════════════════════════════════════════════════════════
   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:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(77,128,240,.10) 0%, transparent 55%),
    rgba(255, 255, 255, .58);
  backdrop-filter: blur(28px) saturate(2.4);
  -webkit-backdrop-filter: blur(28px) saturate(2.4);
  border: 1px solid rgba(52, 86, 162, .12);
  border-radius: 24px;
  padding: 2rem 1.8rem 2rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .48s cubic-bezier(.34,1.12,.64,1),
              box-shadow .48s cubic-bezier(.22,1,.36,1),
              background .35s ease,
              border-color .35s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -1px 0 rgba(30,42,66,.04),
    0 2px 12px rgba(52,86,162,.05);
  will-change: transform;
}
/* Ligne accent en haut */
.cc::after {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent, rgba(77,128,240,.55) 30%, rgba(77,128,240,.75) 50%,
    rgba(77,128,240,.55) 70%, transparent);
  border-radius: 0 0 2px 2px;
  opacity: 0;
  transition: opacity .45s ease;
}
.cc:hover {
  background:
    radial-gradient(ellipse 90% 60% at 50% -5%, rgba(77,128,240,.14) 0%, transparent 55%),
    rgba(255, 255, 255, .92);
  transform: translateY(-8px) scale(1.012);
  border-color: rgba(77,128,240,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 20px 56px -12px rgba(77,128,240,.22),
    0 8px 24px rgba(0,0,0,.06);
}
.cc:hover::after { opacity: 1; }

/* ═══════════════════════════════════════════════
   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, .72);
  backdrop-filter: blur(18px) saturate(1.8);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  border: 1px solid rgba(52, 86, 162, .10);
  border-radius: 24px;
  padding: 2.5rem 2rem;
  text-align: center;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1),
              box-shadow .45s cubic-bezier(.22, 1, .36, 1),
              border-color .35s ease,
              background .35s ease;
  position: relative;
  overflow: hidden;
  will-change: transform;
}
.gamif-card:nth-child(1) { --gc-rgb: 77,128,240; }    /* XP → bleu */
.gamif-card:nth-child(2) { --gc-rgb: 252,159,66; }    /* Badges → orange */
.gamif-card:nth-child(3) { --gc-rgb: 236,104,107; }   /* Classement → rouge/rose */
.gamif-card:hover {
  transform: translateY(-10px) perspective(800px) rotateX(2deg) scale(1.015);
  border-color: rgba(var(--gc-rgb, 52,86,162), .35);
  box-shadow:
    0 0 0 1px rgba(var(--gc-rgb, 52,86,162), .18),
    0 24px 60px -12px rgba(var(--gc-rgb, 52,86,162), .28),
    0 8px 24px rgba(0,0,0,.06);
  background: rgba(255,255,255,.92);
}
.gamif-card::before {
  content: '';
  position: absolute;
  top: -60%;
  left: 50%;
  transform: translateX(-50%);
  width: 180%;
  height: 140%;
  background: radial-gradient(ellipse, rgba(var(--gc-rgb, 52,86,162), .09) 0%, transparent 65%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.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: -1px !important; }
.hero .acc-b {
  background              : linear-gradient(135deg, #A7C5FF 0%, #5B8DF5 100%) !important;
  -webkit-background-clip : text !important;
  -webkit-text-fill-color : transparent !important;
  background-clip         : text !important;
  filter                  : drop-shadow(0 0 7px rgba(77,128,240,.25));
}
.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 7px rgba(77,128,240,.28)) !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 stats — gradient PER CARD (blue / red / orange), not all blue */
.constat-card:nth-child(1) .cc-stat {
  background              : linear-gradient(135deg, #B6CCFF 8%, #4D80F0) !important;
  -webkit-background-clip : text !important;
  -webkit-text-fill-color : transparent !important;
  background-clip         : text !important;
  filter                  : drop-shadow(0 2px 16px rgba(77,128,240,.45)) !important;
}
.constat-card:nth-child(2) .cc-stat {
  background              : linear-gradient(135deg, #FFB0B2 8%, #EC686B) !important;
  -webkit-background-clip : text !important;
  -webkit-text-fill-color : transparent !important;
  background-clip         : text !important;
  filter                  : drop-shadow(0 2px 16px rgba(236,104,107,.45)) !important;
}
.constat-card:nth-child(3) .cc-stat {
  background              : linear-gradient(135deg, #FFD49A 8%, #FC9F42) !important;
  -webkit-background-clip : text !important;
  -webkit-text-fill-color : transparent !important;
  background-clip         : text !important;
  filter                  : drop-shadow(0 2px 16px rgba(252,159,66,.45)) !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*="135deg,rgba"] {
  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;
}

/* ════════════════════════════════════════════════════
   § B — GAMIF-CARDS — Icon containers premium
════════════════════════════════════════════════════ */
.gamif-card .gamif-icon {
  background: linear-gradient(135deg,
    rgba(var(--gc-rgb, 52,86,162), .15) 0%,
    rgba(var(--gc-rgb, 52,86,162), .06) 100%) !important;
  border: 1.5px solid rgba(var(--gc-rgb, 52,86,162), .28) !important;
  box-shadow: 0 4px 18px rgba(var(--gc-rgb, 52,86,162), .18) !important;
  border-radius: 18px !important;
  width: 64px !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 1rem !important;
  transition: transform .4s cubic-bezier(.34,1.28,.64,1), box-shadow .4s ease !important;
}
.gamif-card:hover .gamif-icon {
  transform: scale(1.1) translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(var(--gc-rgb, 52,86,162), .32) !important;
}

/* ════════════════════════════════════════════════════
   § C — GAMIF-CARDS — Gradient texte titres per-card
════════════════════════════════════════════════════ */
.gamif-card:nth-child(1) .gamif-title {
  background: linear-gradient(128deg, #4D80F0, #7B9FFF) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.gamif-card:nth-child(2) .gamif-title {
  background: linear-gradient(128deg, #FC9F42, #FFD080) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.gamif-card:nth-child(3) .gamif-title {
  background: linear-gradient(128deg, #EC686B, #FF9A9C) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ════════════════════════════════════════════════════
   § D — VISION DARK CARDS .if / .ef — glow profond
════════════════════════════════════════════════════ */
.if,
.ef {
  border-color: rgba(91,145,255,.25) !important;
}
.if:hover,
.ef:hover {
  box-shadow:
    0 30px 80px rgba(91,145,255,.30),
    0 10px 28px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
  border-color: rgba(91,145,255,.48) !important;
}

/* ════════════════════════════════════════════════════
   § E — STEP / FEAT CARDS — top-border accent
════════════════════════════════════════════════════ */
.step-card,
.feat-card {
  border-top: 2px solid rgba(var(--page-accent-rgb, 91,145,255), .35) !important;
  transition: border-color .35s ease, transform .5s cubic-bezier(.34,1.12,.64,1),
              box-shadow .5s cubic-bezier(.22,1,.36,1) !important;
}
.step-card:hover,
.feat-card:hover {
  border-top-color: rgba(var(--page-accent-rgb, 91,145,255), .75) !important;
}

/* ════════════════════════════════════════════════════
   § F — CONSTAT CARDS — dark glass PREMIUM per-color
   Beats v3-polish.css (.42 white flat) via body.dark-hero
   specificity (0,2,1) > .constat-card (0,1,0).
   Each card tinted with its own --cc-glow accent.
════════════════════════════════════════════════════ */
body.dark-hero .constat-card {
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%,
      var(--cc-glow, rgba(91,145,255,.18)) 0%, transparent 58%),
    linear-gradient(165deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.028) 100%) !important;
  backdrop-filter: blur(30px) saturate(2.2) !important;
  -webkit-backdrop-filter: blur(30px) saturate(2.2) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 24px !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 8px 36px rgba(0,0,0,.42) !important;
  transition: transform .5s cubic-bezier(.34,1.12,.64,1),
              box-shadow .5s cubic-bezier(.22,1,.36,1),
              border-color .4s ease !important;
}

/* Top accent bar — glowing per-card, taller */
body.dark-hero .constat-card .cc-top-bar {
  height: 3px !important;
  filter: saturate(1.3) brightness(1.15) !important;
  opacity: .92 !important;
}
body.dark-hero .constat-card:nth-child(1) .cc-top-bar { box-shadow: 0 0 18px 1px rgba(77,128,240,.7) !important; }
body.dark-hero .constat-card:nth-child(2) .cc-top-bar { box-shadow: 0 0 18px 1px rgba(236,104,107,.7) !important; }
body.dark-hero .constat-card:nth-child(3) .cc-top-bar { box-shadow: 0 0 18px 1px rgba(252,159,66,.7) !important; }
body.dark-hero .constat-card:hover .cc-top-bar {
  height: 5px !important;
  opacity: 1 !important;
}

/* Per-card hover glow — matches the card's accent */
body.dark-hero .constat-card:nth-child(1):hover {
  transform: translateY(-9px) scale(1.012) !important;
  border-color: rgba(77,128,240,.42) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.20),
    0 28px 70px -14px rgba(77,128,240,.40),
    0 10px 30px rgba(0,0,0,.5) !important;
}
body.dark-hero .constat-card:nth-child(2):hover {
  transform: translateY(-9px) scale(1.012) !important;
  border-color: rgba(236,104,107,.42) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.20),
    0 28px 70px -14px rgba(236,104,107,.40),
    0 10px 30px rgba(0,0,0,.5) !important;
}
body.dark-hero .constat-card:nth-child(3):hover {
  transform: translateY(-9px) scale(1.012) !important;
  border-color: rgba(252,159,66,.42) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.20),
    0 28px 70px -14px rgba(252,159,66,.40),
    0 10px 30px rgba(0,0,0,.5) !important;
}

/* Labels — per-card accent tint (was washed grey) */
body.dark-hero .constat-card:nth-child(1) .cc-label { color: rgba(157,187,253,.95) !important; }
body.dark-hero .constat-card:nth-child(2) .cc-label { color: rgba(247,150,158,.95) !important; }
body.dark-hero .constat-card:nth-child(3) .cc-label { color: rgba(253,190,120,.95) !important; }

/* Headline — crisp white, body — readable soft */
body.dark-hero .constat-card .cc-headline { color: rgba(244,248,255,.96) !important; }
body.dark-hero .constat-card .cc-body { color: rgba(228,236,255,.66) !important; }
body.dark-hero .constat-card .cc-body strong { color: rgba(244,248,255,.92) !important; }

/* Source pills — glowing per-card chips */
body.dark-hero .constat-card:nth-child(1) .cc-source {
  background: rgba(77,128,240,.16) !important;
  border: 1px solid rgba(77,128,240,.28) !important;
  color: rgba(176,202,255,.92) !important;
}
body.dark-hero .constat-card:nth-child(2) .cc-source {
  background: rgba(236,104,107,.16) !important;
  border: 1px solid rgba(236,104,107,.28) !important;
  color: rgba(250,168,174,.92) !important;
}
body.dark-hero .constat-card:nth-child(3) .cc-source {
  background: rgba(252,159,66,.16) !important;
  border: 1px solid rgba(252,159,66,.28) !important;
  color: rgba(253,194,128,.92) !important;
}

/* Author block (card 3) — avatar glow + readable text */
body.dark-hero .constat-card .cc-avatar {
  background: linear-gradient(135deg, #4D80F0, #3456A2) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(77,128,240,.45),
              inset 0 1px 0 rgba(255,255,255,.25) !important;
}
body.dark-hero .constat-card .cc-author > div > div:first-child { color: rgba(244,248,255,.92) !important; }
body.dark-hero .constat-card .cc-author > div > div:last-child  { color: rgba(228,236,255,.55) !important; }

/* ──────────────────────────────────────────────────────────────────
   Très petits écrans (≤360px) : section « écosystème »
   La grille 2 colonnes des spécialités et la liste eco-feats sont
   rognées en dessous de 360px. On passe en 1 colonne et on réduit le
   retrait de la liste pour que rien ne soit coupé sur les côtés.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
  #ecosysteme [style*="grid-template-columns:1fr 1fr;gap:.7rem"] {
    grid-template-columns: 1fr !important;
  }
  #ecosysteme .eco-feats { padding-left: 12px !important; margin-left: 2px !important; }
  #ecosysteme .eco-feats .ef { padding-right: 0 !important; }
}