* {
  box-sizing: border-box;
}


:root {
  --background: #f6f7f9;
  --surface: #ffffff;
  --surface-soft: #f1f3f6;

  --text: #172235;
  --muted: #687588;

  --navy: #203b60;
  --navy-dark: #182d49;

  --border: #e2e6eb;

  --danger-bg: #f8eaea;
  --danger: #b23131;
}


/* =========================================================
   PAGE
========================================================= */

html {
  min-height: 100%;
}


body {
  margin: 0;
  min-height: 100vh;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;

  color: var(--text);

  background-image:
    url("/assets/psia-background.jpg");

  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}


button,
textarea {
  font-family: inherit;
}


button {
  cursor: pointer;
}


.hidden {
  display: none !important;
}


.container {
  width: min(1080px, calc(100% - 32px));

  margin: 0 auto;

  padding:
    8px 0
    30px;
}


/* =========================================================
   ACCUEIL
========================================================= */

.hero {
  max-width: 760px;

  margin:
    0 auto
    32px;

  padding:
    22px 28px;

  text-align: center;

  border-radius:
    0 0
    26px 26px;

  background:
    rgba(255, 255, 255, 0.68);

  backdrop-filter:
    blur(3px);
}


.brand {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 56px;
  font-weight: 600;

  letter-spacing: 1px;

  margin-bottom: 10px;
}


.hero h1 {
  margin:
    0 auto
    18px;

  max-width: 700px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 36px;
  line-height: 1.17;

  font-weight: 500;

  color: #273b58;
}


.hero-text {
  max-width: 650px;

  margin:
    8px auto;

  color: #5f6d80;

  font-size: 16px;
  line-height: 1.55;
}


/* =========================================================
   PROFILS
========================================================= */

.profiles {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 24px;
}


.profile-card {
  padding: 28px;

  border-radius: 24px;

  background:
    rgba(255, 255, 255, 0.95);

  border:
    1px solid
    rgba(30, 55, 85, .08);

  box-shadow:
    0 14px 45px
    rgba(26, 40, 58, .08);

  cursor: pointer;
}


.profile-card:hover {
  transform:
    translateY(-4px);
}


.profile-top {
  display: flex;

  align-items: center;

  gap: 20px;

  margin-bottom: 24px;
}


.profile-photo {
  flex: 0 0 auto;

  overflow: hidden;

  border-radius: 50%;

  background: #e7ebef;
}


.profile-photo.large {
  width: 104px;
  height: 104px;
}


.profile-photo img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


.profile-card h2 {
  margin:
    0 0
    6px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 28px;
}


.profile-role {
  margin: 0;

  color: #58749d;

  font-size: 16px;
}


.profile-description {
  min-height: 92px;

  margin:
    0 0
    16px;

  color: #536174;

  line-height: 1.6;

  font-size: 15px;
}


.profile-library-link {
  display: inline-block;

  margin-bottom: 18px;

  color: #58749d;

  font-size: 13px;

  font-weight: 600;

  text-decoration: none;
}


.profile-library-link:hover {
  text-decoration: underline;
}


.profile-footer {
  padding-top: 18px;

  border-top:
    1px solid
    var(--border);
}


.profile-notice {
  display: block;

  margin-bottom: 15px;

  color: #8490a0;

  font-size: 12px;
}


.profile-card button {
  width: 100%;

  padding: 14px 18px;

  border: 0;

  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      var(--navy-dark),
      var(--navy)
    );

  color: white;

  font-size: 15px;

  font-weight: 600;
}


/* =========================================================
   REPÈRES
========================================================= */

.trust-points {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 14px;

  margin-top: 22px;
}


.trust-point {
  padding: 17px 18px;

  border-radius: 17px;

  background:
    rgba(255, 255, 255, 0.88);
}


.trust-point strong {
  display: block;

  margin-bottom: 5px;

  color: #263b58;

  font-size: 13px;
}


.trust-point span {
  color: #768294;

  font-size: 12px;

  line-height: 1.45;
}


.home-disclaimer {
  max-width: 720px;

  margin:
    28px auto
    0;

  padding:
    10px 16px;

  border-radius: 12px;

  text-align: center;

  font-size: 12px;

  line-height: 1.55;

  color: #7f8997;

  background:
    rgba(255, 255, 255, .66);
}


/* =========================================================
   CHAT
========================================================= */

.chat {
  min-height: 690px;

  padding: 26px;

  border-radius: 24px;

  background:
    rgba(255, 255, 255, 0.96);

  box-shadow:
    0 14px 45px
    rgba(26, 40, 58, .08);
}


.chat-header {
  display: flex;

  align-items: center;

  gap: 16px;

  padding-bottom: 20px;

  border-bottom:
    1px solid
    var(--border);
}


.back-button,
.secondary-button,
.delete-button {
  border: 0;

  border-radius: 12px;

  padding: 11px 16px;

  font-size: 14px;
}


.back-button,
.secondary-button {
  background: #f0f2f5;

  color: var(--text);
}


.delete-button {
  background: var(--danger-bg);

  color: var(--danger);
}


/* =========================================================
   PHOTO DU HEADER CHAT
========================================================= */

.chat-profile-link {
  flex: 0 0 auto;

  border-radius: 50%;

  cursor: default;
}


.chat-profile-link.clickable {
  cursor: pointer;
}


.chat-profile-photo {
  width: 52px;
  height: 52px;

  overflow: hidden;

  border-radius: 50%;

  background: #e8ebef;

  box-shadow:
    0 2px 8px
    rgba(0,0,0,.09);

  transition:
    transform .15s ease;
}


.chat-profile-link.clickable:hover
.chat-profile-photo {
  transform:
    scale(1.08);
}


.chat-profile-photo img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


.chat-identity {
  flex: 1;
}


#chat-name {
  display: block;

  font-size: 17px;
}


#chat-role {
  display: block;

  margin-top: 3px;

  color: var(--muted);

  font-size: 12px;
}


.chat-actions {
  display: flex;

  gap: 8px;
}


/* =========================================================
   MESSAGES
========================================================= */

.messages {
  height: 475px;

  overflow-y: auto;

  padding:
    22px 2px
    12px;
}


/* IA = vraie ligne avec vraie photo */

.message-row-ai {
  display: flex;

  align-items: flex-start;

  gap: 14px;

  margin-bottom: 14px;

  max-width: 78%;
}


/* avatar visible */

.message-avatar {
  width: 44px;
  height: 44px;

  flex:
    0 0 44px;

  overflow: hidden;

  border-radius: 50%;

  background: #e8ebef;

  box-shadow:
    0 2px 8px
    rgba(0,0,0,.08);
}


.message-avatar.clickable {
  cursor: pointer;
}


.message-avatar.clickable:hover {
  transform:
    scale(1.07);
}


.message-avatar img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


.message {
  padding:
    14px 17px;

  border-radius: 18px;

  line-height: 1.55;

  font-size: 15px;

  white-space: pre-wrap;
}


.message.ai {
  flex: 1;

  background: #f0f2f5;

  color: #283548;
}


.message.user {
  max-width: 72%;

  margin:
    0 0
    14px auto;

  background:
    linear-gradient(
      135deg,
      #243b57,
      #19314f
    );

  color: white;
}


.message.loading {
  color: #7b8795;

  font-style: italic;
}


.safety-message {
  border-left:
    4px solid
    var(--danger);
}


/* =========================================================
   SOURCES
========================================================= */

.sources-container {
  max-width: 72%;

  margin:
    -4px 0
    20px
    58px;
}


.sources-toggle {
  padding:
    7px 13px;

  border:
    1px solid
    #aec0d7;

  border-radius: 18px;

  background: white;

  color: #476a98;

  font-size: 13px;
}


.sources-panel {
  margin-top: 12px;

  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius: 18px;

  background: #fbfcfd;
}


.sources-navigation {
  display: flex;

  justify-content: center;

  gap: 11px;

  padding:
    16px 14px
    6px;
}


.source-number {
  width: 37px;
  height: 37px;

  border: 0;

  border-radius: 50%;

  background: #e6e9ed;
}


.source-number.active {
  background: var(--navy);

  color: white;
}


.source-card {
  padding:
    12px 20px
    20px;
}


.source-text {
  color: #364254;

  font-size: 14px;

  line-height: 1.65;

  white-space: pre-wrap;
}


.source-footer {
  margin-top: 18px;

  padding-top: 13px;

  border-top:
    1px solid
    var(--border);

  text-align: right;
}


.source-work {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-style: italic;

  font-weight: 600;

  font-size: 13px;
}


.source-section {
  margin-top: 4px;

  color: var(--muted);

  font-size: 12px;
}


.source-passage {
  margin-top: 3px;

  color: #939ca8;

  font-size: 11px;
}


/* =========================================================
   RÉSUMÉ
========================================================= */

.summary-panel {
  margin-bottom: 18px;

  padding: 18px;

  border-radius: 16px;

  background: #f3f5f7;
}


.summary-header {
  display: flex;

  justify-content: space-between;

  margin-bottom: 12px;
}


.summary-header button {
  border: 0;

  background: transparent;

  font-size: 20px;
}


#summary-content {
  white-space: pre-wrap;

  line-height: 1.55;
}


/* =========================================================
   SAISIE
========================================================= */

#chat-form {
  display: flex;

  gap: 12px;
}


textarea {
  width: 100%;

  resize: none;

  padding: 15px 16px;

  border:
    1px solid
    #cfd6df;

  border-radius: 15px;

  font-size: 14px;
}


#send-button {
  min-width: 105px;

  border: 0;

  border-radius: 15px;

  padding:
    0 20px;

  background: var(--navy);

  color: white;

  font-weight: 600;
}


.chat-disclaimer {
  margin:
    13px 0
    0;

  color: #9099a5;

  font-size: 11px;

  text-align: center;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width: 760px) {

  .container {
    width:
      calc(100% - 20px);
  }


  .profiles {
    grid-template-columns:
      1fr;
  }


  .trust-points {
    grid-template-columns:
      1fr;
  }


  .chat-header {
    flex-wrap: wrap;
  }


  .message-row-ai {
    max-width: 92%;
  }


  .message-avatar {
    width: 38px;
    height: 38px;

    flex:
      0 0 38px;
  }


  .message.user {
    max-width: 88%;
  }


  .sources-container {
    max-width: 88%;

    margin-left: 52px;
  }

}