/* O’Phys RC2 — finition visuelle et formulaires */

/* Corrige la collision titre/description dans les cartes de l’onboarding.
   La règle générique label>span avait une spécificité supérieure. */
.ophys-onboarding-form label.ophys-choice > span {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 96px;
  padding: 16px 18px;
}
.ophys-onboarding-form label.ophys-choice > span > strong,
.ophys-onboarding-form label.ophys-choice > span > small {
  display: block !important;
  width: 100%;
  margin: 0 !important;
}
.ophys-onboarding-form label.ophys-choice > span > strong {
  color: #f7f5ee;
  font-size: 15px;
  line-height: 1.3;
}
.ophys-onboarding-form label.ophys-choice > span > small {
  color: #9faabd;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.5;
}
.ophys-onboarding-form label.ophys-choice input:checked + span > small {
  color: #ded4ad;
}

/* Confirmation visuelle du mot de passe à l’inscription. */
.ophys-password-match {
  display: block;
  min-height: 20px;
  margin: -1px 2px 0;
  color: #8f9bb0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.45;
}
.ophys-password-match.valid { color: #9ef0c0 !important; }
.ophys-password-match.invalid { color: #ffb5b5 !important; }
.ophys-form input.is-valid {
  border-color: rgba(71, 213, 135, .72);
  box-shadow: 0 0 0 4px rgba(71, 213, 135, .10);
}
.ophys-form input.is-invalid {
  border-color: rgba(255, 96, 96, .72);
  box-shadow: 0 0 0 4px rgba(255, 96, 96, .10);
}

/* Accueil plus direct et plus lisible. */
.hero-content h1 {
  max-width: 940px;
  text-wrap: balance;
}
.hero-content .hero-text {
  max-width: 760px;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.7;
}
.subject-card.available strong { color: #f4d77b; }

@media (max-width: 560px) {
  .ophys-onboarding-head {
    padding-top: 18px;
    padding-bottom: 15px;
  }
  .ophys-onboarding-head h2 {
    max-width: calc(100vw - 94px);
    font-size: 34px;
    line-height: 1.05;
    text-wrap: balance;
  }
  .ophys-onboarding-head p {
    font-size: 15px;
    line-height: 1.55;
  }
  .ophys-onboarding-body { padding-top: 18px; }
  .ophys-onboarding-card { padding: 18px; }
  .ophys-onboarding-form label.ophys-choice > span {
    min-height: 104px;
    padding: 16px;
  }
  .ophys-onboarding-form label.ophys-choice > span > strong {
    font-size: 16px;
  }
  .ophys-onboarding-form label.ophys-choice > span > small {
    font-size: 13px;
  }
  .hero-content h1 {
    font-size: clamp(43px, 13vw, 64px);
    line-height: .98;
  }
}

/* O’Phys RC3 — navigation, chapitres dynamiques et connexion admin */

/* RC24 : cette règle datait d'une époque où un menu déroulant ET cette
   liste coexistaient (jugés redondants, d'où la suppression de la liste).
   Le menu déroulant a depuis été retiré à la demande de l'utilisateur ;
   cette liste est désormais le seul moyen de choisir un chapitre. La
   masquer ici la rendait invisible malgré un rendu JS pourtant correct
   (22 boutons bien présents dans le DOM, confirmé par diagnostic).
   Voir CHANGELOG-RC24-LISTE-CHAPITRES.md pour le détail de l'enquête. */
.chapter-picker { align-self: start; }

/* Le menu mobile doit rester lisible au-dessus de toutes les pages. */
.menu-overlay {
  background: rgba(0, 0, 0, .84) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  isolation: isolate;
}
.menu-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.54), rgba(0,0,0,.86));
  pointer-events: none;
  z-index: -1;
}
.menu-panel,
.menu-panel.compact {
  position: relative !important;
  z-index: 2 !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(212,175,55,.16), transparent 32%),
    rgba(3, 8, 17, .98) !important;
  border-left: 1px solid rgba(244, 215, 123, .30) !important;
  box-shadow: -28px 0 90px rgba(0, 0, 0, .88) !important;
  overflow-y: auto;
}
.menu-links,
.menu-links.compact-links { position: relative; z-index: 3; }
.menu-links button,
.menu-links.compact-links button {
  display: block !important;
  background: rgba(0, 0, 0, .34) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #f8f5eb !important;
  text-shadow: 0 2px 16px #000 !important;
  margin-bottom: 4px;
}
.menu-links button.active,
.menu-links button:hover {
  color: #f4d77b !important;
  border-color: rgba(244,215,123,.36) !important;
  background: rgba(212,175,55,.14) !important;
}

/* Connexion administrateur par mot de passe. */
.ophys-admin-password-label { display: grid; gap: 9px; }
.ophys-admin-reset {
  border: 0;
  background: transparent;
  color: #d8c77f;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 6px 4px;
}
.ophys-contact-note { text-decoration: none !important; }

/* Gestion des chapitres. */
.ophys-chapter-manager-overlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0,0,0,.84);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.ophys-chapter-manager {
  width: min(1180px, 100%);
  max-height: calc(100svh - 36px);
  overflow: auto;
  border: 1px solid rgba(244,215,123,.24);
  border-radius: 30px;
  background: radial-gradient(circle at top right, rgba(212,175,55,.10), transparent 30%), #06101f;
  box-shadow: 0 35px 120px rgba(0,0,0,.76);
  padding: 26px;
}
.ophys-chapter-manager > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.ophys-chapter-manager h2 { margin: 10px 0 8px; font-size: clamp(30px,4vw,48px); }
.ophys-chapter-manager h3 { margin-bottom: 12px; }
.ophys-chapter-manager p { margin-bottom: 0; }
.ophys-chapter-close {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 34px;
  line-height: 1;
}
.ophys-chapter-manager-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: 22px;
  align-items: start;
}
.ophys-chapter-form,
.ophys-chapter-manager aside {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 24px;
  background: rgba(255,255,255,.04);
  padding: 22px;
}
.ophys-chapter-form { display: grid; gap: 15px; }
.ophys-chapter-form label { display: grid; gap: 8px; color: #e7e4dc; font-weight: 800; }
.ophys-chapter-form label small { color: #9faabd; font-weight: 600; }
.ophys-chapter-two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ophys-chapter-example { display: grid; gap: 12px; padding: 16px; border-radius: 18px; background: rgba(0,0,0,.24); }
.ophys-chapter-form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.ophys-chapter-form-actions button,
.ophys-chapter-list-head button,
.ophys-chapter-row-actions button {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-weight: 850;
}
.ophys-chapter-form-actions button.primary {
  background: linear-gradient(135deg, #f4d77b, #d4af37);
  color: #111;
  border-color: transparent;
}
.ophys-chapter-list-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.ophys-chapter-list { display: grid; gap: 12px; }
.ophys-chapter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(0,0,0,.20);
}
.ophys-chapter-row > div:first-child { display: grid; gap: 4px; }
.ophys-chapter-row span { color: #f4d77b; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.ophys-chapter-row strong { font-size: 18px; }
.ophys-chapter-row small { color: #9faabd; line-height: 1.45; }
.ophys-chapter-row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ophys-chapter-row-actions .danger { color: #ffb1b1; }
.ophys-chapter-empty { color: #9faabd; padding: 18px; text-align: center; }
.ophys-chapter-status { padding: 12px 14px; border-radius: 14px; line-height: 1.5; }
.ophys-chapter-status.info { background: rgba(93,216,255,.10); color: #bcefff; }
.ophys-chapter-status.success { background: rgba(71,213,135,.12); color: #a8f2c6; }
.ophys-chapter-status.error { background: rgba(255,96,96,.12); color: #ffc1c1; }

@media (max-width: 800px) {
  .menu-panel,
  .menu-panel.compact {
    width: min(360px, calc(100% - 14px)) !important;
    padding: 22px 18px !important;
  }
  .menu-links button,
  .menu-links.compact-links button {
    font-size: 21px !important;
    padding: 14px 16px !important;
  }
  .chapter-workstation { grid-template-columns: 1fr !important; }
  .chapter-picker { padding-bottom: 10px; }
  .ophys-chapter-manager { padding: 18px; }
  .ophys-chapter-manager-grid { grid-template-columns: 1fr; }
  .ophys-chapter-two-cols { grid-template-columns: 1fr; }
  .ophys-chapter-row { align-items: flex-start; flex-direction: column; }
}