/* ==========================================================================
   Cadrage — ouverture et clôture de module, présentation d'un parcours
   Composants : js/components/moduleFraming.js et js/components/branchFraming.js
   ========================================================================== */

.framing{
  display:grid;grid-template-columns:minmax(0,1fr);gap:18px;
  padding:clamp(24px,4vw,36px);
  border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  background:var(--color-surface);
  box-shadow:var(--shadow-card);
}
.framing-title{font-size:clamp(1.6rem,3.2vw,2.1rem);font-weight:600;line-height:1.08;letter-spacing:-.03em;text-wrap:balance}

.framing-tags{display:flex;flex-wrap:wrap;gap:8px}
.framing-tag{display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;border:1px solid var(--color-border-strong);border-radius:var(--radius-xs);font-size:.8rem}
.framing-tag.is-strong{border-color:var(--color-text);background:var(--color-text);color:var(--color-on-dark)}

.framing-card{display:grid;gap:10px;padding:16px 18px;border:1px solid var(--color-border);border-radius:var(--radius-button);background:var(--color-bg)}
/* Le « pourquoi ce module » tient deux paragraphes : c'est de la prose, pas une étiquette. */
.framing-card p{line-height:1.55}
.branch-not-covered{margin-top:8px}

.framing-objectives{display:grid;gap:12px}
.framing-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.framing-list li,.framing-rules li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:baseline;font-size:1rem;line-height:1.5}
.framing-index{font-family:var(--font-mono);font-size:.78rem;font-weight:600;color:var(--color-accent-strong)}

.framing-program{display:grid;gap:10px}
.framing-program ul{display:grid;margin:0;padding:0;list-style:none;border-top:1px solid var(--color-border)}
.framing-program li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--color-border-faint);font-size:.94rem}
.framing-minutes{font-family:var(--font-mono);font-size:.8rem;font-variant-numeric:tabular-nums;white-space:nowrap}

.framing-rules{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.framing-rules li{padding:14px 16px;border:1px solid var(--color-border);border-radius:var(--radius-button);background:var(--color-bg);font-weight:500}
.framing-next{display:grid;gap:6px}
.framing-closing{border-top:3px solid var(--color-accent)}
/* Un titre de module long ne doit pas élargir la page : le bouton se plie. */
.framing .button{max-width:100%}
.framing-opening{border-top:3px solid var(--color-text)}
.framing>.button{width:max-content}

/* --- présentation du parcours -------------------------------------------- */
.branch-promise{font-size:1.1rem;line-height:1.5}
.branch-facts{display:grid;border-top:1px solid var(--color-border)}
.branch-fact{display:grid;grid-template-columns:minmax(120px,.5fr) minmax(0,1fr);gap:8px 20px;padding:11px 0;border-bottom:1px solid var(--color-border-faint);font-size:.92rem}
.branch-fact-label{color:var(--color-muted)}
.branch-fact-value{font-weight:500}
.branch-fact-source{display:inline-flex;align-items:center;min-height:24px;margin-left:10px;color:var(--color-accent-strong);font-size:.78rem;font-weight:600;text-decoration:underline;text-underline-offset:3px}

.branch-domain-list{display:grid;border-top:1px solid var(--color-border)}
.branch-domain{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:6px 12px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--color-border-faint);font-size:.95rem}
.branch-domain-id{font-family:var(--font-mono);font-size:.78rem;font-weight:600;color:var(--color-accent-strong)}
.branch-domain-weight{font-family:var(--font-mono);font-size:.82rem;font-variant-numeric:tabular-nums}
.branch-domain .meter{grid-column:2/4}
.branch-domain-modules{grid-column:2/4;color:var(--color-muted);font-size:.78rem}

@media(max-width:560px){
  .framing{padding:20px 16px}
  .branch-fact{grid-template-columns:1fr;gap:2px}
  .branch-fact-label{font-size:.78rem}
  .framing-list li,.framing-rules li{grid-template-columns:26px minmax(0,1fr);gap:10px}
}

/* ── Page d'un parcours ──────────────────────────────────────────────────── */
.branch-page{max-width:900px;margin-inline:auto}
.branch-hero .framing-title{font-size:clamp(2rem,4.5vw,3rem)}
.branch-promise{font-size:1.15rem;line-height:1.5;max-width:60ch}
.branch-stats{display:flex;flex-wrap:wrap;gap:12px 32px;padding-block:4px}
.branch-stat{display:grid;gap:2px}
.branch-stat strong{font-size:1.9rem;font-weight:600;letter-spacing:-.03em;line-height:1}
.branch-stat span{font-size:.82rem}
.branch-progress{display:grid;gap:7px;max-width:420px}
.branch-promise-module{display:block;font-size:.76rem;font-family:var(--font-mono);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--color-accent-strong);margin-bottom:3px}

.branch-modules{display:grid;gap:10px}
.branch-module{
  display:grid;grid-template-columns:44px minmax(0,1fr) 24px;align-items:center;gap:16px;
  min-height:86px;padding:16px 18px;
  border:1px solid var(--color-border);border-radius:var(--radius-button);
  background:var(--color-bg);text-decoration:none;
  transition:border-color var(--motion-fast),background var(--motion-fast),transform var(--motion-fast) var(--ease-standard);
}
.branch-module:hover{border-color:var(--color-accent);background:var(--color-surface);transform:translateX(3px);color:var(--color-text)}
.branch-module.is-complete .branch-module-number{color:var(--color-success)}
.branch-module-number{font-family:var(--font-mono);font-size:1.05rem;font-weight:600;color:var(--color-accent-strong)}
.branch-module-copy{display:grid;gap:4px;min-width:0}
.branch-module-copy strong{font-size:1.05rem;line-height:1.25}
.branch-module-copy small{font-size:.84rem;line-height:1.45;color:var(--color-muted)}
.branch-module-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:2px;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.03em}
.branch-module-domain{font-weight:600;color:var(--color-accent-strong)}
.branch-module-progress{font-variant-numeric:tabular-nums}
.branch-module-arrow{justify-self:end}

/* Le parcours n'est plus un accordéon : c'est un lien vers sa page. */
.path-branch-link{
  display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:12px 20px;align-items:center;
  min-height:118px;padding:20px 22px;text-decoration:none;
  transition:border-color var(--motion-fast),transform var(--motion-fast) var(--ease-standard);
}
.path-branch-link:hover{border-color:var(--color-accent);transform:translateX(3px);color:var(--color-text)}
.path-branch-link.is-current{border-left:3px solid var(--color-accent)}
.path-branch-link .path-branch-progress{grid-column:1/-1}

@media(max-width:560px){
  .branch-stats{gap:10px 20px}
  .branch-stat strong{font-size:1.5rem}
  .branch-module{grid-template-columns:34px minmax(0,1fr);padding:14px}
  .branch-module-arrow{display:none}
}

/* ── Orientation : les blocs de lecture libre deviennent des cartes ──────── */
.module-orientation{display:grid;gap:18px;max-width:900px;margin-inline:auto}
.module-orientation-block{gap:14px}
.module-orientation-title{font-size:clamp(1.25rem,2.4vw,1.55rem)}
.module-orientation-body{display:grid;gap:14px;max-width:72ch;font-size:1.0625rem;line-height:1.65}
.module-orientation-body strong{font-weight:650}
.module-orientation-body ul,.module-orientation-body ol{display:grid;gap:10px;padding-left:22px}
.module-orientation-body li{line-height:1.55}
.rich-table-wrap{overflow-x:auto;margin-inline:-4px;padding-inline:4px}
.rich-table{width:100%;min-width:480px;border-collapse:collapse;font-size:.95rem}
.rich-table th,.rich-table td{padding:11px 12px;border-bottom:1px solid var(--color-border);text-align:left;vertical-align:top;line-height:1.45}
.rich-table thead th{font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--color-border-strong)}
.rich-table tbody th{font-weight:650}
.rich-table tbody tr:last-child th,.rich-table tbody tr:last-child td{border-bottom:0}
.rich-list{display:grid;gap:10px;padding-left:22px}
.module-orientation-body a{font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Les cartes d'explication en tête d'écran. */
.path-guide,.practice-guide{max-width:900px;margin-inline:auto}
.practice-guide .framing-list li{align-items:start}