/* ============================================================
   Arborescence bicéphale (/patient · /professionnels)
   SPEC-VHD-SITE-BICEPHALE-001 — charte UNIQUE, seuls des accents
   discrets distinguent les chemins (jamais la structure visuelle).
   ============================================================ */

/* ── Intro de hub (lead + « ce que vous trouverez ») ── */
.hub-intro { max-width: 64ch; }
.hub-intro > p:first-child { font-size: 1.125rem; line-height: 1.6; color: var(--vhd-texte); }
.hub-intro ul { margin: 0.75rem 0 0; padding-left: 1.2rem; }
.hub-intro li { margin: 0.35rem 0; color: var(--vhd-gris); }

/* ── Fil d'Ariane + badge de cercle (calibrage MSG-VHD-001) ── */
.fil-cercle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding-top: 1.5rem;
  font-size: 0.8125rem;
  color: var(--vhd-gris);
}
.fil-cercle a { color: var(--vhd-gris); text-decoration: none; border-bottom: 1px solid transparent; }
.fil-cercle a:hover { border-bottom-color: var(--vhd-or); }
.cercle-badge {
  margin-left: auto;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--vhd-filet);
  color: var(--vhd-gris);
}
.cercle-badge--expansion { color: var(--vhd-or); border-color: var(--vhd-or); }
.cercle-badge--noyau { color: var(--vhd-texte); border-color: var(--vhd-texte); }

/* ── Accent de chemin (surtitre uniquement) ── */
.chemin-patient .surtitre { color: var(--vhd-or); }
.chemin-pro .surtitre { color: var(--vhd-texte); }

.campagne-visuel { margin: 0; }
.campagne-visuel img { max-width: 100%; height: auto; display: block; }

/* ── Bandeau de choix bicéphale (accueil) ── */
.choix-bicephale { border-top: 1px solid var(--vhd-filet); border-bottom: 1px solid var(--vhd-filet); }
.choix-grille { display: grid; grid-template-columns: 1fr; }
@media (min-width: 769px) { .choix-grille { grid-template-columns: 1fr 1fr; } }
.choix-carte {
  display: block;
  padding: 2.75rem 2rem;
  text-decoration: none;
  color: var(--vhd-texte);
  transition: background 0.2s ease;
}
.choix-carte + .choix-carte { border-top: 1px solid var(--vhd-filet); }
@media (min-width: 769px) { .choix-carte + .choix-carte { border-top: 0; border-left: 1px solid var(--vhd-filet); } }
.choix-carte:hover { background: rgba(0, 0, 0, 0.02); }
.choix-sur {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vhd-or);
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.choix-titre {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.choix-desc { display: block; color: var(--vhd-gris); font-size: 0.95rem; line-height: 1.55; }

/* ── Droits illustrés (chemin patient) ── */
.droits-illustres { margin: 2.5rem 0; }
.droits-liste { list-style: none; margin: 1.5rem auto 0; padding: 0; max-width: 560px;
                display: flex; flex-direction: column; gap: 0.6rem; }
.droit-item { display: flex; align-items: center; gap: 1rem;
              border: 1px solid var(--vhd-filet); border-radius: var(--radius-patient); padding: 0.85rem 1rem; }
.droit-ico { flex-shrink: 0; width: 46px; height: 46px; border-radius: var(--radius-patient);
             display: flex; align-items: center; justify-content: center;
             color: var(--vhd-or); background: color-mix(in srgb, var(--vhd-or) 12%, transparent); }
.droit-ico .icone-svg { width: 24px; height: 24px; }
.droit-txt { display: flex; flex-direction: column; }
.droit-num { font-size: 0.75rem; letter-spacing: 0.1em; color: var(--vhd-or); font-weight: 600;
             font-variant-numeric: tabular-nums; }
.droit-nom { font-weight: 600; font-size: 1.0625rem; }
.droit-ex { color: var(--vhd-gris); font-size: 0.9rem; line-height: 1.45; }

/* ── Où sont vos données (chips illustrés) ── */
.sources-donnees { margin: 2rem 0; }
/* Intro > 3 lignes : alignée à gauche (règle de composition 6.3). Les chips
   restent centrées via .sources-chips (justify-content). */
.sources-lead { max-width: 64ch; margin: 0 auto 1.4rem; color: var(--vhd-texte); text-align: left; }
.sources-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.source-chip { display: inline-flex; align-items: center; gap: 0.5rem;
               border: 1px solid var(--vhd-filet); border-radius: 999px; padding: 0.5rem 1rem;
               font-size: 0.95rem; }
.source-chip .icone-svg { width: 20px; height: 20px; color: var(--vhd-or); }

/* ── À qui vous adresser (flux) ── */
.contact-flow { margin: 2.5rem 0; text-align: center; }
.flow-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
            gap: 0.8rem; margin-top: 1.4rem; }
.flow-box { display: flex; align-items: center; gap: 0.7rem; text-align: left;
            border: 1px solid var(--vhd-filet); border-radius: var(--radius-patient); padding: 0.85rem 1.1rem; }
.flow-ico { flex-shrink: 0; color: var(--vhd-or); display: flex; }
.flow-titre { display: block; font-weight: 600; }
.flow-txt small { display: block; color: var(--vhd-gris); font-size: 0.85rem; line-height: 1.4; }
.flow-arrow { color: var(--vhd-or); font-size: 1.3rem; }
@media (max-width: 560px) { .flow-arrow { transform: rotate(90deg); } }

/* ── Comparaison 2 colonnes symétriques (règle 6.8) ── */
.comparaison { margin: 2.5rem 0; }
.compare-grid { display: grid; grid-template-columns: 1fr; gap: 0.7rem; max-width: 620px; margin: 1.4rem auto 0; }
@media (min-width: 620px) { .compare-grid { grid-template-columns: 1fr 1fr; } }
.compare-col { border: 1px solid var(--vhd-filet); border-radius: var(--radius-patient); padding: 1rem 1.1rem; }
.compare-col--accent { border-color: var(--vhd-or); background: color-mix(in srgb, var(--vhd-or) 6%, transparent); }
.compare-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.compare-ico { color: var(--vhd-or); display: flex; }
.compare-head b { font-weight: 600; }
.compare-desc { margin: 0 0 0.5rem; color: var(--vhd-gris); font-size: 0.9rem; }
.compare-ex { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; }
.compare-ex li { margin: 0.15rem 0; }
.compare-synth { text-align: center; margin-top: 1rem; }
.compare-synth span { display: inline-flex; align-items: center; gap: 0.5rem;
                      background: color-mix(in srgb, var(--vhd-or) 12%, transparent); color: var(--vhd-or);
                      border-radius: 999px; padding: 0.45rem 1.1rem; font-size: 0.875rem; font-weight: 600; }

/* ── Ressources patient (documents téléchargeables, gated NIV.2) ── */
.ressources-grille { display: grid; grid-template-columns: 1fr; gap: 0.9rem; margin-top: 1.5rem; }
@media (min-width: 640px) { .ressources-grille { grid-template-columns: 1fr 1fr; } }
.ressource-carte {
  display: flex; flex-direction: column; align-items: flex-start;
  border: 1px solid var(--vhd-filet); border-radius: var(--radius-patient); padding: 1.1rem 1.2rem;
}
.ressource-type {
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--vhd-or); font-weight: 600;
}
.ressource-titre { font-weight: 600; font-size: 1.0625rem; margin: 0.3rem 0; }
.ressource-desc { color: var(--vhd-gris); font-size: 0.9rem; line-height: 1.45; margin-bottom: 1rem; }
.ressource-carte .cta-secondary { margin-top: auto; }