@layer legacy {
.flux-card-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
    }
    @media (max-width: 900px) {
      .flux-card-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 400px) {
      .flux-card-grid { grid-template-columns: 1fr; }
    }
    .flux-card {
      display: block;
      background: var(--color-card-bg);
      border-radius: 16px;
      padding: 1.25rem 1rem 1rem;
      box-shadow: var(--shadow);
      border-top: 4px solid transparent;
      text-decoration: none;
      color: inherit;
      transition: transform var(--transition), box-shadow var(--transition);
    }
    .flux-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-lg);
    }
    .flux-card img {
      width: 44px; height: 44px;
      object-fit: contain;
      margin-bottom: 0.75rem;
    }
    .flux-card h3 {
      font-size:var(--text-body);
      margin-bottom: 0.35rem;
    }
    .flux-card p {
      font-size:var(--text-small);
      color: var(--color-text-sec);
      line-height:var(--leading-ui);
      margin-bottom: 0.9rem;
    }
    .flux-card-link {
      font-size:var(--text-caption);
      font-weight:var(--weight-heading);
      letter-spacing:var(--tracking-label);
      text-transform: uppercase;
      color: var(--color-text-sec);
    }
    .methode-steps {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 1rem;
      margin-top: var(--space-md);
    }
    @media (max-width: 900px) {
      .methode-steps { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 480px) {
      .methode-steps { grid-template-columns: 1fr; }
    }
    .methode-step {
      background: var(--color-bg);
      border-radius: 14px;
      padding: 1.25rem 1rem;
      box-shadow: var(--shadow);
      text-align: center;
    }
    .methode-step-num {
      font-size: var(--text-metric-sm);
      font-weight:var(--weight-body);
      opacity: 0.25;
      line-height:var(--leading-solid);
      margin-bottom: 0.5rem;
    }
    .methode-step h3 {
      font-size:var(--text-small);
      margin-bottom: 0.3rem;
    }
    .methode-step p {
      font-size:var(--text-caption);
      color: var(--color-text-sec);
      margin: 0;
      line-height:var(--leading-ui);
    }
    .mesure-cards {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.25rem;
      margin-top: var(--space-md);
    }
    @media (max-width: 600px) {
      .mesure-cards { grid-template-columns: 1fr; }
    }
    .mesure-card {
      background: var(--color-bg);
      border-radius: 18px;
      padding: 1.5rem;
      box-shadow: var(--shadow);
      border-top: 4px solid var(--color-border);
    }
    .mesure-card h3 { margin-bottom: 0.4rem; }
    .mesure-card p {
      font-size:var(--text-small);
      color: var(--color-text-sec);
      margin-bottom: 1.25rem;
      line-height:var(--leading-ui);
    }
    .concept-text p {
      font-size:var(--text-body);
      color: var(--color-text-sec);
      line-height:var(--leading-body);
      margin-bottom: 1.1rem;
    }
    .concept-text p:last-child { margin-bottom: 0; }
    /* Mobile : images sous le texte dans les sections concept/interdépendance */
    @media (max-width: 700px) {
      .concept-col-text { flex: 1 1 100% !important; min-width: 0 !important; }
      .concept-col-img  { flex: 1 1 100% !important; justify-content: center; }
    }

    /* Sous-titre du hero */
    .flux-subtitle { font-size: var(--text-metric-sm); font-weight:var(--weight-heading); max-width: var(--width-reading); margin-bottom: var(--space-sm); }

    /* Section "modèle inspiré" : texte lisible centré */
    .modele-text { max-width: var(--width-reading); margin: var(--space-md) auto 0; }
    .modele-text p { font-size:var(--text-body); color: var(--color-text-sec); line-height:var(--leading-body); margin-bottom: 1.1rem; }
    .modele-text p:last-child { margin-bottom: 0; }
    .modele-text strong { color: var(--color-text); }

    /* Parcours vertical (Comment utiliser les 8 flux) */
    .parcours { max-width: var(--width-reading); margin: var(--space-md) auto 0; }
    .parcours-step { display: flex; gap: 1.25rem; position: relative; padding-bottom: var(--space-md); }
    .parcours-step:last-child { padding-bottom: 0; }
    .parcours-step:not(:last-child)::before {
      content: ''; position: absolute; left: 19px; top: 46px; bottom: 0; width: 2px; background: var(--color-border);
    }
    .parcours-num {
      flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-weight:var(--weight-strong); color: #fff; z-index: 1;
      background: linear-gradient(135deg, #88A3D5, #B699C8);
    }
    .parcours-body { padding-top: 0.3rem; }
    .parcours-body h3 { font-size: var(--text-lead); margin-bottom: 0.45rem; }
    .parcours-body p { font-size:var(--text-body); color: var(--color-text-sec); line-height:var(--leading-body); margin-bottom: 0.6rem; }
    .parcours-body p:last-child { margin-bottom: 0; }
    .parcours-body a { color: var(--color-equilibre); font-weight:var(--weight-heading); }

}

.flux-method-reading { max-width:var(--width-reading); }
.flux-method-reading h3 { margin-top:2.5rem; }
.flux-method-reading p { color:var(--color-text-sec); }