/* ============================================================
   career-ops landing — Refonte Stripe
   Design tokens from popular-web-designs/templates/stripe.md
   Hallmark anti-slop compliant
   ============================================================ */

/* ── DESIGN TOKENS ─────────────────────────────────────── */
:root {
  /* ── Palette Stripe ─────────────────────────────────── */
  --color-bg:            #ffffff;
  --color-heading:       #061b31;
  --color-body:          #64748d;
  --color-label:         #273951;
  --color-accent:        #533afd;
  --color-accent-hover:  #4434d4;
  --color-accent-light:  #b9b9f9;
  --color-brand-dark:    #1c1e54;
  --color-border:        #e5edf5;
  --color-border-accent: #b9b9f9;
  --color-success:       #15be53;
  --color-success-text:  #108c3d;
  --color-ruby:          #ea2261;
  --color-magenta:       #f96bee;

  /* ── Shadows — signature bleutée Stripe ─────────────── */
  --shadow-ambient:  0px 15px 35px 0px  rgba(23,23,23,0.08);
  --shadow-standard: 0px 30px 45px -30px rgba(50,50,93,0.25),
                     0px 18px 36px -18px rgba(0,0,0,0.1);
  --shadow-deep:     0px 14px 21px -14px rgba(3,3,39,0.25),
                     0px 8px  17px -8px  rgba(0,0,0,0.1);
  --shadow-soft:     0px 3px  6px  0px   rgba(23,23,23,0.06);
  --shadow-focus:    0 0 0 2px #533afd;

  /* ── Typographie — Source Sans 3 weight-300 ─────────── */
  --font-display: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  --font-body:    'Source Sans 3', system-ui, -apple-system, sans-serif;
  --font-mono:    'Source Code Pro', ui-monospace, SFMono-Regular, monospace;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.375rem;
  --text-2xl:   1.75rem;
  --text-3xl:   2rem;
  --text-4xl:   3rem;
  --text-5xl:   3.5rem;

  /* ── Spacing ─────────────────────────────────────────── */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.375rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* ── Radius — conservateur 4-8px ─────────────────────── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
}

/* ── RESET ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:var(--text-base);font-weight:300;line-height:1.6;color:var(--color-body);background:var(--color-bg);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--color-accent);text-decoration:none;transition:color .15s}
a:hover{color:var(--color-accent-hover)}

/* ── TYPOGRAPHY — weight-300 signature ────────────────── */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:300;color:var(--color-heading);line-height:1.15}
h1{font-size:var(--text-5xl);letter-spacing:-0.03em}
h2{font-size:var(--text-4xl);letter-spacing:-0.02em}
h3{font-size:var(--text-2xl);letter-spacing:-0.01em}
h4{font-size:var(--text-xl)}

/* ── COMPONENTS ────────────────────────────────────────── */

/* CTA Button */
.btn-primary{
  display:inline-flex;align-items:center;gap:var(--space-2xs);
  font-family:var(--font-display);font-size:var(--text-base);font-weight:400;
  color:#ffffff;background:var(--color-accent);border:none;border-radius:var(--radius-sm);
  padding:var(--space-sm) var(--space-md);
  cursor:pointer;transition:background .2s,box-shadow .2s;
  min-height:44px;
}
.btn-primary:hover,.btn-primary:focus-visible{
  background:var(--color-accent-hover);
  box-shadow:var(--shadow-standard);
}
.btn-primary:active{transform:scale(0.98)}

/* Card — shadow ambient, border soft */
.card{
  background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);
  padding:var(--space-xl);
  transition:box-shadow .2s,border-color .2s;
}
.card:hover{
  box-shadow:var(--shadow-standard);
  border-color:var(--color-border-accent);
}

/* Card featured — shadow plus profonde */
.card-featured{
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-deep);
  border-color:var(--color-border-accent);
}

/* Stat badge */
.stat-badge{
  display:inline-flex;flex-direction:column;align-items:flex-start;
  padding:var(--space-md) var(--space-lg);
  border:1px solid var(--color-border);border-radius:var(--radius-sm);
  transition:box-shadow .2s;
}
.stat-badge:hover{box-shadow:var(--shadow-soft)}

/* Badge success */
.badge-success{
  display:inline-block;padding:1px 6px;border-radius:var(--radius-sm);
  background:rgba(21,190,83,0.2);color:var(--color-success-text);
  border:1px solid rgba(21,190,83,0.4);
  font-size:var(--text-xs);font-weight:300;
}

/* Rule hairline */
.rule-hairline{width:100%;height:1px;background:var(--color-border);border:none;margin:var(--space-2xl) 0}

/* ── DARK SECTION (brand-dark #1c1e54) ─────────────────── */
.dark-section{
  background:var(--color-brand-dark);color:rgba(255,255,255,0.85);
}
.dark-section h1,.dark-section h2,.dark-section h3,.dark-section h4{color:#ffffff}
.dark-section .card{
  background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.85);
}
.dark-section .rule-hairline{background:rgba(255,255,255,0.15)}

/* ── UTILITIES ─────────────────────────────────────────── */
.container{width:100%;max-width:1080px;margin:0 auto;padding:0 var(--space-lg)}
.section{padding:var(--space-4xl) 0}
.mono{font-family:var(--font-mono);font-weight:500}
.text-center{text-align:center}

/* ── REDUCED MOTION ────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto}
}

/* ── LAYOUT — Mobile-first ────────────────────────────── */
.grid-2{display:grid;grid-template-columns:1fr;gap:var(--space-xl)}
.grid-3{display:grid;grid-template-columns:1fr;gap:var(--space-lg)}
.grid-stats{display:grid;grid-template-columns:1fr;gap:var(--space-lg)}
.grid-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-xl);align-items:center}

@media(min-width:768px){
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-stats{grid-template-columns:repeat(3,1fr)}
}

@media(min-width:1024px){
  .grid-3{grid-template-columns:1.2fr 1fr 0.8fr}
  .grid-stats{grid-template-columns:repeat(3,1fr)}
}

/* ── CAROUSEL ────────────────────────────────────────── */
.carousel{overflow:hidden;position:relative}
.carousel-track{display:flex;gap:var(--space-lg);transition:transform .3s ease-out;will-change:transform}
.carousel-track .card{flex:0 0 100%;min-width:0}
@media(min-width:768px){.carousel-track .card{flex:0 0 calc(50% - var(--space-lg)/2)}}
@media(min-width:1024px){.carousel-track .card{flex:0 0 calc(33.333% - var(--space-lg)*2/3)}}

.carousel-controls{display:flex;align-items:center;justify-content:center;gap:var(--space-lg);margin-top:var(--space-xl)}
.carousel-prev,.carousel-next{background:none;border:1px solid var(--color-border);color:var(--color-heading);font-size:var(--text-2xl);width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;transition:border-color .2s,color .2s}
.carousel-prev:hover,.carousel-next:hover{border-color:var(--color-accent);color:var(--color-accent)}
.carousel-prev:disabled,.carousel-next:disabled{color:var(--color-body);border-color:var(--color-border);cursor:default}

.carousel-dots{display:flex;gap:var(--space-sm)}
.carousel-dot{width:8px;height:8px;border-radius:50%;background:var(--color-border);border:none;padding:0;cursor:pointer;transition:background .2s}
.carousel-dot.active{background:var(--color-accent)}

/* ── REVEAL ───────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(1rem);transition:opacity .6s,transform .6s}
.reveal.revealed{opacity:1;transform:translateY(0)}

/* ── SELECTION ─────────────────────────────────────────── */
::selection{background:rgba(83,58,253,0.2);color:var(--color-heading)}

/* ── PRINT ─────────────────────────────────────────────── */
@media print{
  body{background:#fff;color:#000}
  .dark-section{background:#fff;color:#000}
}