@layer legacy {
/* ── Hero ── */
    .journee-hero {
      background:var(--color-bg-warm);
      padding: var(--space-xl) 0 var(--space-lg);
      position: relative;
      overflow: hidden;
    }
    .journee-hero .container { max-width: var(--width-page); }
    .journee-hero-inner {
      display: flex;
      align-items: center;
      gap: var(--space-lg);
      flex-wrap: wrap;
    }
    .journee-hero-text { flex: 1 1 460px; min-width: 280px; }
    .journee-hero h1 {
      font-size: var(--text-metric-lg);
      margin: 0.4rem 0 0;
    }
    .journee-intro {
      max-width: var(--width-reading);
      margin-top: var(--space-sm);
      color: var(--color-text);
      font-size: var(--text-lead);
    }
    .journee-hero-actions {
      display: flex;
      align-items: center;
      gap: var(--space-sm) 1.25rem;
      flex-wrap: wrap;
      margin-top: var(--space-md);
    }
    .journee-hero-cta { font-size: var(--text-body); padding: 0.9rem 2.4rem; }
    .journee-hero-meta { font-size:var(--text-small); color: var(--color-text-sec); }
    .journee-hero-visual {
      flex: 1 1 320px;
      min-width: 260px;
      max-width: var(--width-reading);
      display: flex;
      flex-direction: column;
      gap: 0.7rem;
      padding: 1.6rem;
      background: var(--glass-60);
      border-radius: 22px;
      box-shadow: var(--shadow);
    }
    .jf-hero-bar {
      display: block;
      height: 16px;
      width: var(--w);
      border-radius: 50px;
      background: var(--c);
      animation: jfGrow 0.9s ease both;
    }
    @keyframes jfGrow { from { width: 0; } to { width: var(--w); } }
    @media (max-width: 720px) { .journee-hero-visual { display: none; } }

    /* ── Bloc résumé sticky ── */
    .jf-summary {
      position: sticky;
      top: var(--nav-height);
      z-index: 50;
      background: var(--glass-96);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--color-border);
      box-shadow: var(--shadow);
    }
    .jf-summary .container { padding-top: 1rem; padding-bottom: 1rem; }
    .jf-summary-inner {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem var(--space-lg);
      align-items: center;
    }
    .jf-summary-item { display: flex; flex-direction: column; line-height:var(--leading-title); }
    .jf-summary-item .lbl {
      font-size:var(--text-caption);
      text-transform: uppercase;
      letter-spacing:var(--tracking-label);
      color: var(--color-text-sec);
    }
    .jf-summary-item .val { font-size: var(--text-metric-sm); font-weight:var(--weight-strong); }
    .jf-summary-item .val.is-over { color: var(--color-alert-text); }

    /* Barre de progression du remplissage de la journée */
    .jf-summary-progress {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-top: 0.75rem;
    }
    .jf-summary-progress-track {
      flex: 1;
      height: 12px;
      border-radius: 50px;
      background: var(--color-track);
      overflow: hidden;
    }
    .jf-summary-progress-fill {
      height: 100%;
      border-radius: 50px;
      width: 0%;
      background: linear-gradient(90deg, #F18781, #F7AF7F, #FFDB80, #A7CF8E, #96D2DA, #88A3D5, #B699C8, #F08BB8);
      transition: width 0.4s ease;
    }
    .jf-summary-progress-fill.is-over { background: #c0392b; }
    .jf-summary-progress-pct {
      font-size:var(--text-small);
      font-weight:var(--weight-heading);
      color: var(--color-text-sec);
      white-space: nowrap;
    }
    .jf-summary-alert {
      margin: 0.75rem 0 0;
      padding: 0.6rem 0.9rem;
      border-radius: var(--radius);
      background: var(--color-alert-bg);
      border: 1px solid var(--color-alert-border);
      color: var(--color-alert-text);
      font-size:var(--text-small);
      font-weight:var(--weight-body);
    }

    /* ── Bloc d'introduction / guide ── */
    #commencer { scroll-margin-top: calc(var(--nav-height) + 140px); }
    .jf-intro-block { max-width: var(--width-reading); }
    .jf-intro-title { margin-bottom: 0.5rem; font-size: var(--text-h2); }
    .jf-intro-lead { font-size: var(--text-body); color: var(--color-text); margin-bottom: var(--space-md); }
    .jf-steps {
      display: grid;
      gap: 0.85rem;
      margin: 0;
      padding: 0;
      list-style: none;
      counter-reset: jfstep;
    }
    .jf-step {
      display: flex;
      gap: 0.9rem;
      align-items: flex-start;
      background: var(--color-bg-alt);
      border: 1px solid var(--color-border);
      border-radius: var(--radius);
      padding: 1rem 1.1rem;
    }
    .jf-step-num {
      flex-shrink: 0;
      width: 30px; height: 30px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-weight:var(--weight-strong); font-size:var(--text-body);
      color: #fff;
      background: linear-gradient(135deg, #88A3D5, #B699C8);
    }
    .jf-step strong { display: block; margin-bottom: 0.15rem; }
    .jf-step p { font-size:var(--text-small); color: var(--color-text-sec); margin: 0; }
    .jf-step em { font-style: normal; font-weight:var(--weight-heading); color: var(--color-text); }

    /* ── Grille des catégories ── */
    .jf-cat-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-sm);
      margin-top: var(--space-md);
    }
    @media (max-width: 720px) { .jf-cat-grid { grid-template-columns: 1fr; } }

    .jf-card {
      background:var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius);
      overflow: hidden;
      transition: border-color var(--transition), box-shadow var(--transition);
      align-self: start;
    }
    .jf-card.is-open {
      border-color: transparent;
      box-shadow:
        0 0 0 2px transparent,
        var(--shadow-lg);
      background:
        linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
        linear-gradient(135deg, #F18781, #F7AF7F, #FFDB80, #A7CF8E, #96D2DA, #88A3D5, #B699C8, #F08BB8) border-box;
      border: 2px solid transparent;
    }

    .jf-card-head {
      display: flex;
      gap: 0.75rem;
      align-items: flex-start;
      justify-content: space-between;
      width: 100%;
      text-align: left;
      background: none;
      border: none;
      cursor: pointer;
      padding: 1.1rem 1.2rem;
      font-family: inherit;
      color: inherit;
    }
    .jf-card-name { font-size: var(--text-body); margin-bottom: 0.25rem; }
    .jf-card-desc { font-size:var(--text-small); color: var(--color-text-sec); margin-bottom: 0.35rem; }
    .jf-card-examples { font-size:var(--text-caption); color: var(--color-text-sec); margin: 0 0 0.4rem; }
    .jf-card-examples span { font-weight:var(--weight-heading); color: var(--color-text); }
    .jf-card-typical {
      font-size:var(--text-caption);
      color: var(--color-text-sec);
      margin: 0;
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.15rem 0.55rem;
      border-radius: 50px;
      background: var(--color-bg-warm);
    }
    .jf-card-typical-icon { font-size:var(--text-small); line-height:var(--leading-solid); }
    .jf-card-toggle {
      flex-shrink: 0;
      font-size:var(--text-caption);
      font-weight:var(--weight-heading);
      white-space: nowrap;
      padding: 0.4rem 0.8rem;
      border-radius: 50px;
      border: 1.5px solid var(--color-border);
      color: var(--color-text-sec);
    }
    .jf-card.is-open .jf-card-toggle {
      border-color: var(--color-mouvement);
      color: var(--color-success-text);
      background: var(--color-bg-light);
    }

    .jf-card-body {
      padding: 0 1.2rem 1.2rem;
      border-top: 1px dashed var(--color-border);
      margin-top: 0;
    }

    /* ── Steppers de durée ── */
    .jf-stepper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.75rem 0;
      border-bottom: 1px solid #f0e7da;
      flex-wrap: wrap;
    }
    .jf-stepper-label { display: flex; flex-direction: column; max-width: 60%; }
    .jf-stepper-label strong { font-size:var(--text-small); }
    .jf-stepper-hint { font-size:var(--text-caption); color: var(--color-text-sec); line-height:var(--leading-title); }
    .jf-dot {
      display: inline-block; width: 9px; height: 9px; border-radius: 50%;
      margin-right: 6px; vertical-align: middle;
    }
    .jf-stepper-nour .jf-dot { background: var(--color-mouvement); }
    .jf-stepper-neutre .jf-dot { background: var(--color-sante); }
    .jf-stepper-drain .jf-dot { background: var(--color-repos); }

    .jf-stepper-controls { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
    .jf-step-btn {
      width: 38px; height: 38px;
      border-radius: 50%;
      border: 1.5px solid var(--color-border);
      background:var(--color-bg);
      font-size: var(--text-h3); line-height:var(--leading-solid);
      cursor: pointer;
      color: var(--color-text);
      display: flex; align-items: center; justify-content: center;
      transition: background var(--transition), border-color var(--transition);
    }
    .jf-step-btn:hover { background: var(--color-bg-alt); border-color: var(--color-equilibre); }
    .jf-step-value { min-width: 64px; text-align: center; font-weight:var(--weight-heading); font-size:var(--text-body); }

    .jf-card-total { margin: 0.9rem 0 0; font-size:var(--text-body); }
    .jf-remove {
      margin-top: 0.9rem;
      background: none;
      border: 1.5px solid #f5b7b1;
      color: var(--color-alert-text);
      border-radius: 50px;
      padding: 0.5rem 1.1rem;
      font-size:var(--text-small);
      font-weight:var(--weight-heading);
      cursor: pointer;
      font-family: inherit;
    }
    .jf-remove:hover { background: var(--color-alert-bg); }

    /* ── Actions ── */
    .jf-actions {
      display: flex; flex-wrap: wrap; gap: var(--space-sm);
      align-items: center; margin-top: var(--space-md);
    }
    #calc-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
    .jf-reset {
      background: none; border: none;
      color: var(--color-text-sec);
      text-decoration: underline;
      cursor: pointer; font-family: inherit; font-size:var(--text-small);
    }
    .jf-reset:hover { color: var(--color-text); }

    /* ── Résultats ── */
    .jf-empty {
      background: var(--color-bg-alt);
      border: 1px solid var(--color-border);
      border-radius: var(--radius);
      padding: var(--space-md);
      text-align: center;
      color: var(--color-text-sec);
      font-size: var(--text-body);
    }
    .jf-results-title { margin-bottom: 0.25rem; }
    .jf-results-sub { color: var(--color-text-sec); font-style: italic; margin-bottom: var(--space-md); }

    .jf-global-note {
      background: var(--color-bg-warm);
      border: 1px solid var(--color-border);
      border-radius: var(--radius);
      padding: 0.9rem 1.1rem;
      margin-bottom: var(--space-md);
      font-size:var(--text-small);
      color: var(--color-text);
    }
    .jf-flux-meta {
      display: flex; flex-wrap: wrap; align-items: center;
      gap: 0.35rem 0.6rem; margin: 0.35rem 0 0.6rem;
    }
    .jf-flux-coverage {
      font-size:var(--text-caption); color: var(--color-text-sec);
      letter-spacing:var(--tracking-default);
    }
    .jf-flux-card.is-low-coverage { opacity: 0.7; }
    .jf-flux-card.is-low-coverage .jf-gauge-fill { opacity: 0.45; }

    .jf-flux-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-sm);
    }
    @media (max-width: 720px) { .jf-flux-grid { grid-template-columns: 1fr; } }

    .jf-flux-card {
      background:var(--color-bg);
      border: 1px solid var(--color-border);
      border-left: 5px solid var(--flux-color);
      border-radius: var(--radius);
      padding: 1.2rem;
    }
    .jf-flux-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
    .jf-flux-name { font-size: var(--text-body); }
    .jf-flux-score {
      font-weight:var(--weight-strong); font-size: var(--text-body); white-space: nowrap;
      padding: 0.15rem 0.6rem; border-radius: 50px;
    }
    /* Mise en évidence du score par couleur */
    .jf-score-green  { color: var(--color-success-text); background: var(--color-success-bg); }
    .jf-score-orange { color: var(--color-warning-text); background: var(--color-warning-bg); }
    .jf-score-red    { color: var(--color-alert-text); background: var(--color-alert-bg); }
    .jf-score-neutral { color: var(--color-text-sec); background: transparent; padding-left: 0; padding-right: 0; }
    .jf-flux-state {
      display: inline-block;
      font-size:var(--text-caption); text-transform: uppercase; letter-spacing:var(--tracking-label);
      font-weight:var(--weight-heading); color: var(--color-text-sec);
      margin: 0.35rem 0 0.6rem;
    }
    .jf-gauge {
      height: 10px; border-radius: 50px;
      background: var(--color-track); overflow: hidden;
    }
    .jf-gauge-fill {
      height: 100%; border-radius: 50px;
      background: var(--flux-color);
      transition: width 0.6s ease;
    }
    .jf-flux-explain { font-size:var(--text-small); margin: 0.75rem 0 0.5rem; }
    .jf-contribs { font-size:var(--text-small); }
    .jf-contrib { margin: 0.2rem 0; }
    .jf-contrib-pos strong { color: var(--color-success-text); }
    .jf-contrib-neg strong { color: var(--color-alert-text); }
    .jf-contrib-neutral { color: var(--color-text-sec); font-style: italic; }

    .jf-synthesis {
      margin-top: var(--space-md);
      background: var(--color-bg-alt);
      border: 1px solid var(--color-border);
      border-radius: var(--radius);
      padding: var(--space-md);
    }
    .jf-synthesis-title { margin-bottom: 0.75rem; }
    .jf-synthesis p { font-size:var(--text-body); }
    .jf-reflection {
      margin-top: var(--space-sm);
      background:var(--color-bg);
      border-radius: var(--radius);
      padding: 1rem 1.2rem;
      border-left: 4px solid var(--color-equilibre);
    }
    .jf-reflection-label {
      font-size:var(--text-caption); text-transform: uppercase; letter-spacing:var(--tracking-label);
      color: var(--color-text-sec); margin-bottom: 0.3rem;
    }
    .jf-reflection-q { font-size: var(--text-body); font-weight:var(--weight-body); margin: 0; }

    /* ── Liens vers les flux à soutenir ── */
    .jf-flux-links { margin-top: var(--space-md); }
    .jf-flux-links-label {
      font-size:var(--text-caption); text-transform: uppercase; letter-spacing:var(--tracking-label);
      color: var(--color-text-sec); margin-bottom: 0.2rem; font-weight:var(--weight-heading);
    }
    .jf-flux-links-hint { font-size:var(--text-small); color: var(--color-text-sec); margin-bottom: 0.75rem; }
    .jf-flux-links-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
    .jf-flux-link {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 0.9rem;
      border-radius: 50px;
      background:var(--color-bg);
      border: 2px solid var(--flux-color);
      font-size:var(--text-small);
      font-weight:var(--weight-heading);
      color: var(--color-text);
      transition: background var(--transition), transform var(--transition);
    }
    .jf-flux-link:hover { transform: translateY(-1px); background: var(--color-bg-alt); }
    .jf-flux-link-score {
      font-size:var(--text-caption);
      padding: 0.05rem 0.45rem;
      border-radius: 50px;
      background: var(--flux-color);
      color: #fff;
    }
    .jf-flux-link.jf-score-red .jf-flux-link-score { background: #c0392b; }
    .jf-flux-link.jf-score-orange .jf-flux-link-score { background: #b9690f; }
    .jf-flux-link-arrow { color: var(--color-text-sec); }

    /* Passerelle vers l'outil « Faire circuler les flux » */
    .jf-next-tool {
      margin-top: var(--space-md);
      display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
      gap: var(--space-sm);
      background: var(--color-bg-warm);
      border: 1px solid var(--color-border);
      border-radius: var(--radius);
      padding: var(--space-md);
    }
    .jf-next-tool-eyebrow {
      font-size:var(--text-caption); text-transform: uppercase; letter-spacing:var(--tracking-label);
      font-weight:var(--weight-strong); color: var(--color-text-sec); margin-bottom: 0.25rem;
    }
    .jf-next-tool-title { font-weight:var(--weight-strong); margin-bottom: 0.2rem; }
    .jf-next-tool-sub { font-size:var(--text-small); color: var(--color-text-sec); margin: 0; max-width: var(--width-reading); }

    .jf-disclaimer {
      margin-top: var(--space-md);
      font-size:var(--text-caption); color: var(--color-text-sec);
      text-align: center; font-style: italic;
    }

}