:root {
      --bg: #FAFBFC; 
      --surface: #FFFFFF;
      --ink: #0F172A;
      --ink-soft: #64748B;
      --line: #E2E8F0;
      --green: #10B981;
      --green-ink: #047857;
      --green-soft: #ECFDF5;
      --green-glow: rgba(16, 185, 129, 0.3); 
      --blue: #3B82F6;
      --blue-ink: #1E40AF;
      --blue-soft: #EFF6FF;
      --blue-glow: rgba(59, 130, 246, 0.3);
      --font-display: 'Outfit', sans-serif;
      --font-body: 'DM Sans', sans-serif;
    }
    
    * { box-sizing: border-box; margin: 0; padding: 0; }
    
    body { 
      font-family: var(--font-body);
      background: var(--bg);
      color: var(--ink);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      -webkit-font-smoothing: antialiased;
    }
    
    /* HEADER
       Sticky + fond qui apparaît au scroll (ajouté le 26/08/2026) : transparent
       en haut de page, passe en blanc avec une ombre légère dès qu'on scrolle de
       quelques pixels (classe .is-scrolled posée par le petit script en bas de page).
       Voir prefers-reduced-motion plus bas : cette transition de couleur n'est pas
       désactivée, elle ne provoque pas de mouvement à l'écran. */
    header {
      padding: 24px 40px;
      position: sticky;
      top: 0;
      z-index: 50;
      background: transparent;
      transition: background-color 0.25s ease, box-shadow 0.25s ease;
    }

    header.is-scrolled {
      background: var(--surface);
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 20px -12px rgba(15, 23, 42, 0.12);
    }
    .header-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 1200px;
      margin: 0 auto;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      color: var(--ink);
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 22px;
      letter-spacing: -0.02em;
    }
    
    .logo img { width: 36px; height: auto; }
    
    .btn-login {
      background: transparent;
      border: 1.5px solid #E2E8F0;
      border-radius: 99px;
      padding: 10px 24px;
      color: var(--ink-soft);
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s ease;
      text-decoration: none;
    }
    
    .btn-login:hover {
      border-color: var(--ink);
      color: var(--ink);
      background: var(--surface);
    }
    
    /* MAIN */
    main {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 36px 24px 64px;
      text-align: center;
    }
    
    .hero {
      max-width: 1000px;
      margin: 0 auto;
      width: 100%;
    }

    h1 {
      font-family: var(--font-display);
      font-size: clamp(34px, 4.4vw, 56px);
      font-weight: 800;
      color: var(--ink);
      line-height: 1.1;
      letter-spacing: -0.03em;
      margin-bottom: 20px;
    }

    /* --green-ink (#047857) et non --green (#10B981) : le vert clair sur ce fond ne
       donnait que 2,45:1, sous le seuil WCAG de 3:1 pour du grand texte. Corrige le
       26/08/2026 — la moitie la plus importante du titre etait la moins lisible. */
    h1 span {
      color: var(--green-ink);
      position: relative;
    }
    
    .subtitle {
      font-size: clamp(18px, 2vw, 22px);
      color: var(--ink-soft);
      margin-bottom: 36px;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.6;
      font-weight: 500;
    }
    
    /* CARDS DESIGN PREMIUM */
    .cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      width: 100%;
    }
    
    .card {
      background: var(--surface);
      border-radius: 24px;
      padding: 40px;
      text-align: left;
      text-decoration: none;
      color: inherit;
      position: relative;
      overflow: hidden;
      border: 1.5px solid rgba(0,0,0,0.06);
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    
    .card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      border-radius: 24px;
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
      z-index: 0;
    }
    
    .card-student::before { background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.35), transparent 65%); }
    .card-entreprise::before { background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.35), transparent 65%); }
    
    .card:hover {
      transform: translateY(-6px);
    }
    
    .card-student:hover { 
      border-color: var(--green);
      box-shadow: 0 20px 40px -10px var(--green-glow); 
    }
    .card-entreprise:hover { 
      border-color: var(--blue);
      box-shadow: 0 20px 40px -10px var(--blue-glow); 
    }
    
    .card:hover::before { opacity: 1; }
    
    .card-icon {
      width: 72px;
      height: 72px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 26px;
      font-size: 32px;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      z-index: 1;
    }
    
    .card:hover .card-icon { transform: scale(1.06) rotate(-2deg); }
    
    .card-student .card-icon { background: var(--green-soft); }
    .card-entreprise .card-icon { background: var(--blue-soft); }
    
    .card h2 {
      font-family: var(--font-display);
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 16px;
      color: var(--ink);
      letter-spacing: -0.02em;
      position: relative;
      z-index: 1;
      transition: color 0.3s ease;
    }
    
    .card-student:hover h2 { color: var(--green-ink); }
    .card-entreprise:hover h2 { color: var(--blue-ink); }

    .card p {
      font-size: 17px;
      color: var(--ink-soft);
      line-height: 1.7;
      margin-bottom: 32px;
      flex: 1;
      position: relative;
      z-index: 1;
    }
    
    .card-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
      font-size: 16px;
      transition: gap 0.3s ease;
      position: relative;
      z-index: 1;
    }
    
    /* Variantes -ink : sur blanc, --green donnait 2,54:1 et --blue 3,68:1, sous le
       seuil de 4,5:1 pour du texte de 16px. Corrige le 26/08/2026. */
    .card-student .card-cta { color: var(--green-ink); }
    .card-entreprise .card-cta { color: var(--blue-ink); }
    
    .card:hover .card-cta { gap: 14px; }
    
    .card-cta svg { width: 20px; height: 20px; transition: transform 0.3s ease; }
    .card:hover .card-cta svg { transform: translateX(4px); }

    /* ENTRÉE ANIMÉE DU HERO (ajoutée le 26/08/2026)
       Fondu + léger décalage vers le haut, décalé élément par élément au chargement
       de la page (badge → titre → sous-titre → carte étudiant → carte entreprise →
       ligne de réassurance). Pur CSS, pas de dépendance JS. Désactivée pour les
       visiteurs qui ont demandé prefers-reduced-motion (voir plus bas). */
    .reveal {
      opacity: 0;
      transform: translateY(16px);
      animation: reveal-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .reveal-1 { animation-delay: 0.05s; }
    .reveal-2 { animation-delay: 0.15s; }
    .reveal-3 { animation-delay: 0.25s; }
    .reveal-4 { animation-delay: 0.35s; }
    .reveal-5 { animation-delay: 0.42s; }
    .reveal-6 { animation-delay: 0.55s; }

    @keyframes reveal-up {
      to { opacity: 1; transform: translateY(0); }
    }

    @media (prefers-reduced-motion: reduce) {
      .reveal, .reveal-1, .reveal-2, .reveal-3, .reveal-4, .reveal-5, .reveal-6 {
        animation: none;
        opacity: 1;
        transform: none;
      }
    }

    /* FOOTER ÉPURÉ */
    footer {
      padding: 40px 40px 30px;
      border-top: 1px solid var(--line);
      background: var(--bg);
      text-align: center;
      color: var(--ink-soft);
      font-size: 14px;
      font-weight: 500;
    }

    .footer-content {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .footer-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      color: var(--ink);
      font-weight: 500;
    }

    .footer-home-link {
      color: var(--ink);
      text-decoration: none;
      font-weight: 600;
      transition: color 0.2s;
    }

    .footer-home-link:hover { color: var(--green); }

    .footer-bottom {
      display: flex;
      justify-content: center;
      gap: 24px;
      flex-wrap: wrap;
    }

    .footer-bottom a {
      font-size: 13px;
      color: var(--ink-soft);
      text-decoration: none;
      transition: color 0.2s;
    }

    .footer-bottom a:hover {
      color: var(--ink);
      text-decoration: underline;
    }
    
    .nav-link-blog {
      color: var(--ink);
      text-decoration: none;
      font-weight: 600;
      font-size: 15px;
      padding: 8px 12px;
      border-radius: 8px;
      transition: all 0.2s ease;
    }

    .nav-link-blog:hover {
      background-color: #F1F5F9;
      color: var(--green);
    }
    
    /* Responsive */
    @media (max-width: 768px) {
      header { padding: 16px 20px; }
      .logo { font-size: 16px; gap: 8px; }
      .logo img { width: 26px; }
      header nav { gap: 8px !important; }
      .nav-link-blog { padding: 6px 8px; font-size: 13px; }
      .btn-login { padding: 8px 14px; font-size: 13px; }
      .cards { grid-template-columns: 1fr; gap: 20px; }
      .card { padding: 36px 28px; }
      h1 { font-size: 34px; }
      .subtitle { margin-bottom: 32px; }
      .footer-top {
        flex-direction: column;
        gap: 12px;
        text-align: center;
      }
      .footer-bottom { gap: 16px; }
    }
    /* BADGE DE CATEGORIE (ajoute le 26/08/2026)
       Raison : des tests utilisateurs ont montre que les visiteurs ne comprenaient pas
       que la plateforme portait sur l'alternance. Le badge nomme la categorie avant
       meme que le titre soit lu. Ne pas le retirer sans le remplacer par autre chose
       qui dit « alternance » au-dessus de la ligne de flottaison. */
    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 18px;
      background: var(--green-soft);
      color: var(--green-ink);
      border: 1.5px solid #A7F3D0;
      border-radius: 99px;
      font-weight: 700;
      font-size: 13.5px;
      letter-spacing: 0.01em;
      margin-bottom: 24px;
    }

    /* LIGNE DE REASSURANCE
       Tient lieu de preuve sociale tant que le bloc temoignages est masque (il exige
       au moins SUCCESS_STORIES_PUBLIC_THRESHOLD temoignages publies). Ces trois
       mentions sont vraies independamment du volume, donc affichables des maintenant. */
    .reassure {
      list-style: none;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px 28px;
      margin: 32px auto 0;
      padding: 0;
      max-width: 820px;
    }

    .reassure li {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 500;
      color: var(--ink-soft);
    }

    .reassure li::before {
      content: "\2713";
      color: var(--green-ink);
      font-weight: 700;
      font-size: 14px;
    }

    @media (max-width: 640px) {
      .hero-badge { font-size: 12.5px; padding: 7px 14px; }
      .reassure { gap: 8px 18px; margin-top: 24px; }
      .reassure li { font-size: 13px; }
    }

    /* Badge App Store (10/09/2026) */
    .app-badge-row { display: flex; justify-content: center; margin: 28px 0 0; }
    .app-store-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #000;
      color: #fff;
      padding: 10px 18px;
      border-radius: 12px;
      text-decoration: none;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .app-store-badge:hover { transform: translateY(-1px); opacity: 0.88; }
    .app-store-badge-icon { width: 22px; height: 22px; fill: #fff; flex-shrink: 0; }
    .app-store-badge-text {
      display: flex;
      flex-direction: column;
      line-height: 1.2;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 600;
    }
    .app-store-badge-text small { font-size: 10px; font-weight: 400; opacity: 0.85; }

    /* PREUVE SOCIALE (réussites post-recrutement) */
    .social-proof { max-width: 900px; margin: 56px auto 0; padding: 0 24px; text-align: center; }
    .social-proof-stat { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); margin-bottom: 24px; }
    .social-proof-stat .stars { color: #F59E0B; letter-spacing: 2px; }
    /* Chiffre qui compte de 0 à sa valeur réelle à l'entrée dans l'écran (voir script
       en bas de page). tabular-nums évite que les chiffres ne fassent sauter la
       largeur du texte pendant le comptage. */
    .count-up { font-variant-numeric: tabular-nums; }
    .testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
    .testimonial-card { background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px; padding: 20px; text-align: left; }
    .testimonial-card .stars { color: #F59E0B; font-size: 13px; margin-bottom: 8px; display: block; }
    .testimonial-card p { font-size: 14px; line-height: 1.6; color: var(--ink); margin-bottom: 10px; }
    .testimonial-card .source { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
    @media (max-width: 640px) { .social-proof { margin-top: 40px; } }

    /* --- Bandeau Ecoles & CFA (08/09/2026) -------------------------------
       Troisieme audience. Volontairement moins appuyee que .card-student /
       .card-entreprise : fond teinte pleine largeur plutot qu'une carte
       cliquable de meme poids, et placee en bas de page. Trouvable en
       scrollant, jamais concurrente des deux audiences principales. */
    .school-band {
      margin: 72px 0 0;
      padding: 48px 24px;
      background: var(--blue-soft);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .school-band-inner {
      max-width: 960px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 40px;
      align-items: center;
    }
    .school-band-eyebrow {
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--blue-ink);
      margin-bottom: 12px;
    }
    .school-band-text h2 {
      font-family: var(--font-display);
      font-size: 23px;
      font-weight: 700;
      line-height: 1.35;
      color: var(--ink);
      margin-bottom: 12px;
    }
    .school-band-sub {
      font-size: 15.5px;
      line-height: 1.65;
      color: var(--ink-soft);
      margin-bottom: 16px;
    }
    .school-band-points { list-style: none; display: grid; gap: 7px; }
    .school-band-points li {
      position: relative;
      padding-left: 24px;
      font-size: 14.5px;
      color: var(--ink);
      line-height: 1.5;
    }
    .school-band-points li::before {
      content: "\2713";
      position: absolute;
      left: 0;
      color: var(--green-ink);
      font-weight: 700;
    }
    .school-band-cta { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
    .school-band-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      white-space: nowrap;
      background: var(--surface);
      color: var(--blue-ink);
      border: 1.5px solid var(--blue);
      border-radius: 12px;
      padding: 13px 22px;
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 700;
      text-decoration: none;
      transition: background 0.2s ease, transform 0.2s ease;
    }
    .school-band-btn:hover { background: var(--blue); color: #FFFFFF; transform: translateY(-1px); }
    .school-band-link {
      text-align: center;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--ink-soft);
      text-decoration: none;
    }
    .school-band-link:hover { color: var(--blue-ink); text-decoration: underline; }

    @media (max-width: 820px) {
      .school-band { margin-top: 56px; padding: 36px 22px; }
      .school-band-inner { grid-template-columns: 1fr; gap: 24px; }
      .school-band-text h2 { font-size: 20px; }
      .school-band-cta { align-items: stretch; }
    }