/* 1. Mise en page de base */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-bottom: 0; /* pas d'espace supplémentaire sous le footer */
}

/* Le contenu absorbe toute la hauteur libre : sur une étape courte, le footer
   est donc plaqué en bas de l'écran au lieu de remonter sous le formulaire.
   C'est le contenu qui pousse (et non le footer qui tire via margin-top:auto),
   pour que le résultat tienne quel que soit le footer présent. */
#form-container {
  flex: 1 0 auto;
}

/* 2. En-tête bleu */
.blue-label {
  background-color: #3880d3;
  color: white;
  padding: 10px 0;
}

.blue-label h1 {
  margin: 0;
  font-size: 2rem;
  color: #fff;
}

.blue-label .container.d-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.blue-label .breadcrumb-nav .breadcrumb {
  background: transparent;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
}

.blue-label .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.8);
}

.blue-label .breadcrumb .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.95);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.blue-label .breadcrumb .active {
  color: rgba(255, 255, 255, 0.95);
  opacity: 0.95;
}

.blue-label a:hover,
.blue-label a:focus {
  color: #649ee0 !important;
}

/* 3. Barre de navigation */
.navbar-brand img {
  display: block;
}

.navbar-nav {
  gap: 0.35rem;
}

.navbar-nav .nav-item {
  margin: 0 0.35rem;
}

.navbar-nav .nav-link {
  padding: 0.5rem 0.75rem;
  font-weight: 500;
}

.navbar {
  background-color: #ffffff !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: #3880d3 !important;
}

/* 4. Boutons de navigation du formulaire */
.bottom-button {
  display: block;
  margin: 2rem auto 0;
  background-color: #3880d3;
}

/* Formulaires : colonne étroite centrée (~1/3 de la largeur d'origine du
   container Bootstrap ≈ 1320px). Les champs input/date/datetime héritent de
   cette largeur ; .form-nav est réduit à l'identique pour que les boutons
   Back / Next se rapprochent tout en restant alignés sur la colonne. Le
   centrage vient du margin auto déjà porté par .container.
   Exception : une étape marquée .form-wide (form-5, lecture du PDF) garde la
   largeur Bootstrap d'origine ; sa barre Back/Next reçoit .form-nav-wide via
   le drapeau `wide` de l'étape dans form-loader.js. */
.form-container:not(.form-wide),
.form-nav:not(.form-nav-wide) {
  max-width: 440px;
}

/* Barre de navigation Back / Next générée par form-loader.js (haut + bas).
   On remet les marges à zéro pour que justify-content-between garde Back à
   gauche et Next à droite (sinon la marge auto de .bottom-button recentre). */
.form-nav {
  gap: 1rem;
}

.form-nav .bottom-button,
.form-nav .btn-prev-step {
  display: inline-block;
  margin: 0;
}

/* 5. Pied de page noir */
.footer-noir {
  width: 100%;
  background-color: #1b1b1b;
  color: white;
  text-align: center;
  margin: 0;
  padding: 10px 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* On garde la gouttière horizontale de Bootstrap : sans elle, le texte vient
   coller aux bords de l'écran sur mobile. */
.footer-noir .container {
  padding-top: 0;
  padding-bottom: 0;
}

/* Le texte suit la largeur disponible plutôt que de déborder : il rétrécit
   jusqu'à 0.72rem puis passe à la ligne. */
.footer-noir p {
  margin: 0;
  font-size: clamp(0.72rem, 2.6vw, 0.9rem);
  line-height: 1.35;
  overflow-wrap: break-word;
}

/* 6. Styles responsive */
@media (max-width: 768px) {
  /* Le menu tenant toujours sur une ligne à côté du logo, on réduit
     ce dernier pour lui laisser la place sur les petits écrans. */
  .navbar-brand {
    margin-right: 0.75rem !important;
  }

  .navbar-brand img {
    height: 60px;
  }
}

/* 7. Accordéon conditionnel (form research) :
   chaque étage apparaît/disparaît indépendamment, donc on le traite comme une
   carte autonome. Sans ça, Bootstrap supprime la bordure du haut sur tous les
   items sauf le premier enfant — et l'étage visible le plus haut n'a pas de ligne
   quand un item au-dessus est masqué (display:none). */
#ResearchAccordion .accordion-item {
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.375rem;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

#ResearchAccordion .accordion-item:last-of-type {
  margin-bottom: 0;
}

/* Coins du bouton alignés sur ceux de la carte */
#ResearchAccordion .accordion-button {
  border-radius: 0.375rem;
}
#ResearchAccordion .accordion-button:not(.collapsed) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}


/* ══════════════════════════════════════════════════════════════
 *  Lecteur PDF « défilé » (form-5 « To read » — voir form-read-pdf.js)
 * ══════════════════════════════════════════════════════════════ */
.pdf-read-viewer {
  height: 60vh;                 /* hauteur fixe → génère le scroll à détecter */
  min-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #525659;          /* gris « visionneuse PDF » */
  border: 1px solid #ced4da;
  border-radius: 6px;
  padding: 16px;
  text-align: center;
  scroll-behavior: smooth;
}
.pdf-read-viewer:focus-visible {
  outline: 2px solid #3880d3;
  outline-offset: 2px;
}
.pdf-read-page {
  display: block;
  margin: 0 auto 16px;
  max-width: 100%;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  background: #fff;
}
.pdf-read-hint {
  font-size: 0.9rem;
  transition: color 0.2s;
}