/* Tokens : /css/theme.css (source unique). Cette page est une vitrine
       publique : fond ardoise, cartes --card-bg, pas de troisième surface. */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--ardoise, #091a09);
      color: var(--craie, #E8F5E8);
      font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      padding-top: 72px;
    }
    [dir="rtl"] body { font-family: var(--font-arabic, 'Cairo', sans-serif); }
    .bib-hero, .bib-toolbar, .bib-main { position:relative; z-index:1; }

    /* ---------- Hero compact (patron pageTop de parcours.html, pas le hero
       marketing de 140px : la promesse de la page est le catalogue, le
       contenu doit être visible dès le premier geste). ---------- */
    .bib-hero { padding: calc(env(safe-area-inset-top) + 24px) 20px 18px; }
    .bib-eyebrow {
      font-size: var(--text-xs, 11px); font-weight:500;
      text-transform:uppercase; letter-spacing:0.10em;
      color: var(--craie-pale-vive, rgba(232,245,232,0.6));
      margin-bottom:8px;
    }
    .bib-hero h1 {
      font-family: var(--font-head, 'Syne', sans-serif);
      font-weight:500; font-size:26px; line-height:1.15;
      letter-spacing:-0.01em; color: var(--craie, #E8F5E8);
    }
    .bib-hero h1 em { font-style:normal; color: var(--craie-doree, #D9A857); }
    [dir="rtl"] .bib-hero h1 { font-family: var(--font-arabic, 'Cairo', sans-serif); font-weight:500; }
    .bib-hero-sub {
      font-size: var(--text-base, 14px); color: var(--craie-pale-vive, rgba(232,245,232,0.6));
      line-height:1.6; margin-top:8px; max-width:440px;
    }
    [dir="rtl"] .bib-hero-sub { font-family: var(--font-arabic, 'Cairo', sans-serif); }

    /* ---------- Bascule Tout | Cours | Fiches (patron .type-toggle de
       filieres.html, correction min-height:44px — la cible des trois
       contextes). Un filtre, pas un changement d'écran : une seule liste. */
    .bib-toolbar {
      display:flex; flex-direction:column; align-items:center; gap:12px;
      padding: 0 20px 8px;
    }
    .bib-toggle {
      display:flex; flex-wrap:wrap; justify-content:center;
      gap:4px; padding:4px; max-width:100%; box-sizing:border-box;
      background: var(--card-bg, rgba(255,255,255,0.06));
      border:1px solid var(--card-border, rgba(255,255,255,0.14));
      border-radius: var(--radius-pill);
    }
    .bib-toggle-btn {
      display:inline-flex; align-items:center; gap:8px;
      min-height:44px; padding:0 16px; border-radius: var(--radius-pill);
      background:transparent; border:none;
      color: var(--craie-pale, rgba(232,245,232,0.4));
      font-family: var(--font-body, 'DM Sans', sans-serif);
      font-size: var(--text-sm, 12.5px); font-weight:500;
      cursor:pointer; transition: var(--transition, 0.2s ease);
    }
    .bib-toggle-btn .vgl-icon { width:16px; height:16px; flex-shrink:0; }
    .bib-toggle-btn.active { background: var(--craie-doree, #D9A857); color: var(--ardoise, #091a09); }
    [dir="rtl"] .bib-toggle-btn { font-family: var(--font-arabic, 'Cairo', sans-serif); }
    @media (max-width:380px) {
      .bib-toggle { gap:2px; }
      .bib-toggle-btn { padding:0 8px; gap:4px; font-size:12px; }
    }

    /* ---------- Aide au choix : le mode d'emploi du geste unique, elle
       reste visible dans tous les états. ---------- */
    .bib-help {
      font-size: var(--text-sm, 12.5px); color: var(--craie-pale, rgba(232,245,232,0.4));
      line-height:1.6; text-align:center; max-width:320px; margin-inline:auto;
    }
    [dir="rtl"] .bib-help { font-family: var(--font-arabic, 'Cairo', sans-serif); }
    .bib-help strong { color: var(--craie, #E8F5E8); font-weight:500; }

    /* ---------- Colonne de contenu : 440 mobile / 880 desktop. ---------- */
    .bib-main {
      max-width:440px; margin:0 auto;
      padding: 8px 20px 48px;
      display:flex; flex-direction:column; gap: var(--space-6, 24px);
    }
    @media (min-width:768px) {
      .bib-hero, .bib-toolbar, .bib-main { max-width:880px; padding-inline:32px; }
    }

    /* ---------- Invitation (règle de l'invitation) : au-dessus de la
       première matière, une amorce de geste, jamais de visuel muet. */
    .bib-invite {
      font-size:13px; color: var(--craie-pale-vive, rgba(232,245,232,0.6));
      text-align:center; margin-bottom: var(--space-2, 8px);
    }
    [dir="rtl"] .bib-invite { font-family: var(--font-arabic, 'Cairo', sans-serif); }

    /* ---------- Section matière ---------- */
    .bib-section { padding: var(--space-5, 20px) 0; }
    @media (min-width:768px) { .bib-section { padding: var(--space-8, 40px) 0; } }
    .bib-section-head {
      display:flex; align-items:center; flex-wrap:wrap; gap:10px;
      margin-bottom: var(--space-4, 16px);
    }
    .bib-section-icon { width:20px; height:20px; color: var(--craie-pale-vive, rgba(232,245,232,0.6)); flex-shrink:0; }
    .bib-section-name {
      font-family: var(--font-head, 'Syne', sans-serif);
      font-size: var(--text-xl, 19px); font-weight:500;
      color: var(--craie, #E8F5E8);
    }
    .bib-section-name-ar {
      font-family: var(--font-arabic, 'Cairo', sans-serif);
      font-size: var(--text-xl, 19px); font-weight:500;
      color: var(--craie, #E8F5E8); display:none;
    }
    [dir="rtl"] .bib-section-name { display:none; }
    [dir="rtl"] .bib-section-name-ar { display:block; }
    .bib-compteurs {
      font-size: var(--text-sm, 12.5px); color: var(--craie-pale, rgba(232,245,232,0.4));
      margin-inline-start: auto; white-space:nowrap;
    }
    [dir="rtl"] .bib-compteurs { font-family: var(--font-arabic, 'Cairo', sans-serif); }

    /* ---------- Grille de cartes : 1 colonne mobile, le contenu dicte les
       breakpoints (2 colonnes ≥768, 3 colonnes ≥1024). ---------- */
    .bib-grid { display:grid; gap: var(--space-4, 16px); grid-template-columns:1fr; }
    @media (min-width:768px) { .bib-grid { grid-template-columns:repeat(2,1fr); } }
    @media (min-width:1024px) { .bib-grid { grid-template-columns:repeat(3,1fr); } }

    /* ---------- La carte-chapitre : .vgl-card sans le hover ombreux
       (dette DESIGN.md « zéro ombre ») — le survol se fait en filet 1px
       doré, patron .fil-btn:hover sans l'ombre. ---------- */
    .bib-card {
      background: var(--card-bg, rgba(255,255,255,0.06));
      border:1px solid var(--card-border, rgba(255,255,255,0.14));
      border-radius: var(--radius-md);
      padding: var(--space-4, 16px);
      text-decoration:none; color:inherit; display:block; position:relative;
      width:100%; text-align:start; font-family:inherit; font-size:inherit; line-height:inherit;
      cursor:pointer;
      transition: border-color var(--transition, 0.2s ease), background var(--transition, 0.2s ease);
    }
    .bib-card:hover, .bib-card:active {
      border-color: var(--craie-doree-border, rgba(217,168,87,0.25));
      background: var(--craie-doree-dim, rgba(217,168,87,0.12));
    }
    .bib-card:hover .bib-card-title, .bib-card:active .bib-card-title { color: var(--craie-doree, #D9A857); }
    .bib-card::after {
      content:'→'; position:absolute; top:16px; inset-inline-end:16px;
      font-size:16px; line-height:1; color: var(--craie-doree, #D9A857);
      opacity:0; transform:translateX(-4px); transition: var(--transition, 0.2s ease);
    }
    .bib-card:hover::after, .bib-card:active::after { opacity:1; transform:translateX(0); }
    [dir="rtl"] .bib-card::after { content:'←'; transform:translateX(4px); }
    [dir="rtl"] .bib-card:hover::after, [dir="rtl"] .bib-card:active::after { transform:translateX(0); }
    .bib-card-title {
      font-family: var(--font-head, 'Syne', sans-serif);
      font-size: var(--text-lg, 16px); font-weight:500;
      color: var(--craie, #E8F5E8); line-height:1.3;
      padding-inline-end: 20px; /* place pour la flèche */
      display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    }
    [dir="rtl"] .bib-card-title { font-family: var(--font-arabic, 'Cairo', sans-serif); }
    .bib-card-line1 { display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; }
    .bib-card-icon { width:20px; height:20px; color: var(--craie-pale-vive, rgba(232,245,232,0.6)); flex-shrink:0; margin-top:2px; }
    .bib-card-line2 { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }

    /* Chips : structure .vgl-chip mais variante neutre locale — 23 chips
       dorées sur une page publique dilueraient l'invitation (DESIGN.md).
       Les filières se distinguent par le libellé, pas par une couleur. */
    .bib-chip {
      display:inline-flex; align-items:center; gap:6px;
      padding:4px 10px; font-size: var(--text-xs, 11px); font-weight:500;
      letter-spacing:0.03em; border-radius: var(--radius-pill);
      background: var(--ardoise-3, #132813);
      border:1px solid var(--card-border, rgba(255,255,255,0.14));
      color: var(--craie-pale-vive, rgba(232,245,232,0.6));
      white-space:nowrap;
    }
    [dir="rtl"] .bib-chip { font-family: var(--font-arabic, 'Cairo', sans-serif); }

    /* État « Bientôt dans ton parcours » : sous-texte honnête, jamais un
       lien vers un écran vide. */
    .bib-bientot {
      font-size: var(--text-sm, 12.5px); color: var(--craie-pale, rgba(232,245,232,0.4));
      width:100%;
    }
    [dir="rtl"] .bib-bientot { font-family: var(--font-arabic, 'Cairo', sans-serif); }

    /* Cartes révélées par le filtre : fade-in bref (0.15s), retrait immédiat. */
    .bib-card.reveal { animation: bibReveal 0.15s ease; }
    @keyframes bibReveal { from { opacity:0; } to { opacity:1; } }

    /* ---------- Reduced motion : les composants vgl-* sont coupés par
       composants.css §8 ; le fade du filtre suit la même règle. ---------- */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior:auto; }
      .bib-card { transition:none; }
      .bib-card.reveal { animation:none; }
      .bib-card::after { transition:none; }
    }