/* =====================================================================
   VHD — Registre cérémoniel pour pages publiques (doctrine, candidature)
   Aligné sur site-vhd.css : réutilise --vhd-*, --esp-*, --t-*, --ff-* et
   les classes existantes .section / .surtitre / h2.titre-section /
   .cta-primary / .lien-section. N'ajoute QUE la couche manquante.

   --------------------------------------------------------------------
   FIX RACINE — à faire côté template/page (hors de ce fichier) :
   1. Ne plus charger le CSS de page « opérationnel » (monospace + boîtes)
      sur /doctrine-donnees/ et la page de candidature. Ces pages publiques
      doivent hériter du registre cérémoniel de site-vhd.css. Le look console
      (mono, en-têtes en pavés, filets partout) vient de là, pas du socle.
   2. Reformuler dans le template (ce sont des libellés, pas du CSS) :
        PRECONDITIONS            → « Avant de candidater »
        DECLARATION              → « Votre demande »  (ou supprimer)
        LIMITS OF THIS DOCUMENT  → « Après l'envoi »
   3. Menu « Type de profil » : ne lister que les profils qui ADHÈRENT
      (association de patients, expert, institution/financeur, partenaire
      économique). Pas de « patient/proche » — cohérence deux portes.
   --------------------------------------------------------------------
   Structure HTML attendue (réutilise tes classes ; les nouvelles sont en
   préfixe .doctrine- / .form-) :

   <section class="section doctrine-section">
     <p class="doctrine-num">05</p>
     <p class="surtitre">Doctrine données</p>          (optionnel)
     <h2 class="titre-section">Souveraineté et conformité</h2>
     <p>…corps…</p>
     <p><a class="lien-inline" href="…">Mentions légales</a> · …</p>
   </section>
   ===================================================================== */


/* ---- Section doctrine numérotée (s'appuie sur section.section) ------- */
.doctrine-section {
  border-left: 3px solid var(--vhd-bleu);   /* maladie / rigueur clinique */
  padding-left: var(--esp-md);
}
.doctrine-num {
  font-family: var(--ff-titre);
  font-weight: 300;                          /* Montserrat Light : esprit constellation */
  font-size: 2.25rem;
  line-height: 1;
  color: var(--vhd-or);                      /* le malade / ancrage */
  margin-bottom: var(--esp-xs);
}

/* ---- Liste doctrine (cinq objets) ----------------------------------- */
.doctrine-liste { list-style: none; padding: 0; margin: var(--esp-sm) 0 0; }
.doctrine-liste li {
  position: relative;
  padding-left: var(--esp-md);
  margin-bottom: var(--esp-sm);
  line-height: 1.6;
}
.doctrine-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.75rem;
  height: 1px;
  background: var(--vhd-or);
}

/* ---- Lien inline cérémoniel (mentions, conditions d'adhésion) -------- */
.lien-inline {
  color: var(--vhd-bleu);
  text-decoration: none;
  border-bottom: 1px solid rgba(42, 86, 128, 0.35);
  transition: border-color 0.15s ease;
}
.lien-inline:hover { border-bottom-color: var(--vhd-bleu); }


/* ===================== Formulaire de candidature ===================== */
.form-adhesion { max-width: 640px; }

.form-erreur {
  color: var(--vhd-or);
  border-left: 3px solid var(--vhd-or);
  padding: 0.5rem 0 0.5rem 0.75rem;
  margin-bottom: var(--esp-sm);
  font-size: 0.9rem;
}

.form-adhesion__lead { font-size: var(--t-lead); margin-bottom: var(--esp-xs); }
.form-adhesion__aide {
  font-size: 0.85rem;
  color: var(--vhd-gris-clr);
  margin-bottom: var(--esp-md);
}

/* Groupes (Identité / Profil / Motivation) : blanc + filet, pas de pavé.
   Le titre de groupe réutilise la classe .surtitre dans le HTML. */
.form-groupe {
  border-top: 1px solid var(--vhd-filet);
  padding-top: var(--esp-md);
  margin-top: var(--esp-md);
}
.form-groupe:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

.form-rangee { display: flex; gap: var(--esp-sm); flex-wrap: wrap; }
.form-champ { flex: 1 1 220px; margin-bottom: var(--esp-sm); }

.form-champ label {
  display: block;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--vhd-texte);
  margin-bottom: 0.45rem;
}
.form-champ label .optionnel {     /* remplace le « REQUIS » omniprésent */
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--vhd-gris-clr);
  margin-left: 0.4rem;
}

.form-champ input,
.form-champ select,
.form-champ textarea {
  width: 100%;
  font-family: var(--ff-corps);
  font-size: 1rem;
  color: var(--vhd-texte);
  background: var(--vhd-fond);
  border: 1px solid var(--vhd-filet);
  border-radius: 2px;
  padding: 0.7rem 0.8rem;
}
.form-champ input:focus,
.form-champ select:focus,
.form-champ textarea:focus {
  outline: none;
  border-color: var(--vhd-bleu);
  box-shadow: 0 0 0 3px rgba(42, 86, 128, 0.12);
}
.form-champ textarea { min-height: 120px; resize: vertical; }

/* Bouton : aligné sur ton .cta-primary (fond --vhd-texte → --vhd-or au survol) */
.form-soumettre { margin-top: var(--esp-md); }
.form-soumettre .cta-primary,
.btn-primaire {
  display: inline-block;
  font-family: var(--ff-corps);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--vhd-fond);
  background: var(--vhd-texte);
  border: 1px solid var(--vhd-texte);
  border-radius: 2px;
  padding: 0.85rem 1.6rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.form-soumettre .cta-primary:hover,
.btn-primaire:hover { background: var(--vhd-or); border-color: var(--vhd-or); }

/* « Après l'envoi » : note humaine, remplace « LIMITS OF THIS DOCUMENT ».
   L'intitulé réutilise .surtitre dans le HTML. */
.form-apres {
  margin-top: var(--esp-md);
  padding-top: var(--esp-sm);
  border-top: 1px solid var(--vhd-filet);
}
.form-apres p {
  font-size: 0.9rem;
  color: var(--vhd-gris);
  max-width: 62ch;
  margin: 0;
}

/* ---- Bloc 6 : bandeau d'avancement (transparence, second niveau) ---- */
/* Discret par construction : fond alt + filet, jamais la prééminence d'un
   héros. Réutilise .table-inst / .table-inst-wrap et les tokens existants. */
.verticale-avancement {
  background: var(--vhd-fond-alt);
  border-top: 1px solid var(--vhd-filet);
  border-bottom: 1px solid var(--vhd-filet);
}
.verticale-avancement .titre-section { font-size: var(--t-h3); }
.verticale-avancement__intro { color: var(--vhd-gris); max-width: 62ch; }
.verticale-avancement__note {
  margin-top: var(--esp-sm);
  font-size: 0.85rem;
  color: var(--vhd-gris-clr);
  max-width: 62ch;
}
.verticale-avancement__lien { margin-top: var(--esp-sm); }

/* Marqueur d'état : l'acquis est affirmé (Bleu), l'attente reste discrète
   (gris). Un état non validé ne se rend jamais comme un état acquis. */
.avancement-etat { font-size: 0.9rem; }
.avancement-etat::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  vertical-align: middle;
  border-radius: 50%;
}
.avancement-etat--acquis { color: var(--vhd-texte); }
.avancement-etat--acquis::before { background: var(--vhd-bleu); }
.avancement-etat--attente { color: var(--vhd-gris); }
.avancement-etat--attente::before {
  background: transparent;
  border: 1px solid var(--vhd-gris-clr);
}

/* Responsive : les rangées passent en colonne sous 560px (flex-wrap gère déjà). */
@media (max-width: 560px) {
  .doctrine-section { padding-left: var(--esp-sm); }
  .form-champ { flex-basis: 100%; }
}