/* GED-WEB-3H — styles fonctionnels du répertoire */

.corr-hero,
.corr-tools,
.corr-list-card {
  background: #fff;
  border: 1px solid #dbe4f0;
  border-radius: 16px;
}

.corr-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 19px 21px;
  margin-bottom: 14px;
}

.corr-hero h1 { margin: 3px 0 5px; font-size: 23px; }
.corr-hero p { margin: 0; color: #687790; }

.corr-hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.corr-tools {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 170px 110px auto;
  gap: 10px;
  align-items: end;
  padding: 13px;
}

.corr-tools label span,
.corr-form-grid label span {
  display: block;
  margin-bottom: 4px;
  color: #4b5a72;
  font-size: 11px;
  font-weight: 800;
}

.corr-tools input,
.corr-tools select,
.corr-form-grid input,
.corr-form-grid select,
.corr-form-grid textarea {
  width: 100%;
  min-height: 37px;
  border: 1px solid #ced9e8;
  border-radius: 9px;
  background: #fff;
  padding: 8px 9px;
  font: inherit;
}

.corr-summary {
  padding: 9px 2px 11px;
  color: #67758b;
  font-size: 12px;
}

.corr-loading { height: 3px; overflow: hidden; }
.corr-loading.is-visible::before {
  content: "";
  display: block;
  width: 40%;
  height: 100%;
  background: #1f63dc;
  animation: corr-loading 1s linear infinite alternate;
}
@keyframes corr-loading { from { transform: translateX(0); } to { transform: translateX(150%); } }

.corr-list-card { overflow: hidden; }
.corr-table-wrap { overflow-x: auto; }
.corr-table { width: 100%; min-width: 930px; border-collapse: collapse; }

.corr-table th {
  padding: 9px 11px;
  background: #f7f9fc;
  border-bottom: 1px solid #dfe7f1;
  color: #607089;
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.corr-table td {
  padding: 10px 11px;
  border-bottom: 1px solid #edf1f6;
  font-size: 12px;
  vertical-align: middle;
}

.corr-main,
.corr-contact {
  display: grid;
  gap: 2px;
}

.corr-main strong { font-size: 13px; }
.corr-main small,
.corr-contact small { color: #78859a; font-size: 10px; }

.corr-badge {
  display: inline-flex;
  min-height: 23px;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  background: #edf2f8;
  color: #41516a;
  font-size: 10px;
  font-weight: 800;
}

.corr-pagination {
  display: flex;
  justify-content: center;
  gap: 11px;
  align-items: center;
  padding: 12px;
}

.corr-empty {
  padding: 22px;
  color: #6b788b;
  text-align: center;
}

.corr-mobile { display: none; }

.corr-dialog {
  width: min(780px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  border: 0;
  border-radius: 15px;
  padding: 0;
  box-shadow: 0 20px 60px rgba(16,31,55,.25);
}

.corr-dialog::backdrop { background: rgba(15,29,50,.48); }

.corr-dialog-shell { background: #fff; }

.corr-dialog-shell > header,
.corr-dialog-shell > footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px 17px;
  border-bottom: 1px solid #e5ebf3;
}

.corr-dialog-shell > footer {
  justify-content: flex-end;
  border-top: 1px solid #e5ebf3;
  border-bottom: 0;
}

.corr-dialog-shell h2 { margin: 2px 0; font-size: 19px; }
.corr-dialog-shell p { margin: 0; color: #687790; font-size: 11px; }

.corr-close {
  border: 0;
  background: transparent;
  color: #52617a;
  font-size: 26px;
  cursor: pointer;
}

.corr-dialog-body {
  display: grid;
  gap: 15px;
  padding: 17px;
  max-height: 65vh;
  overflow-y: auto;
}

.corr-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.corr-detail-grid > div {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid #e2e8f1;
  border-radius: 9px;
}

.corr-detail-grid span {
  color: #748198;
  font-size: 9px;
  text-transform: uppercase;
}

.corr-detail-grid strong {
  font-size: 12px;
  overflow-wrap: anywhere;
}

.corr-related {
  border: 1px solid #e0e7f0;
  border-radius: 11px;
  overflow: hidden;
}

.corr-related > header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e6ecf3;
}

.corr-related h3 { margin: 0; font-size: 14px; }
.corr-related p { margin: 2px 0 0; color: #748198; font-size: 10px; }

.corr-related-mail {
  display: grid;
  grid-template-columns: 175px minmax(0,1fr);
  gap: 10px;
  width: 100%;
  border: 0;
  border-top: 1px solid #edf1f6;
  background: #fff;
  padding: 9px 11px;
  color: #263850;
  text-align: left;
  cursor: pointer;
}

.corr-related-mail:hover { background: #f7faff; }
.corr-related-mail:first-child { border-top: 0; }
.corr-related-mail span { display: grid; gap: 2px; }
.corr-related-mail small { color: #77859a; font-size: 9px; }
.corr-related-mail b { font-size: 11px; font-weight: 600; }

.corr-form-grid {
  grid-template-columns: 1fr 1fr;
}

.corr-form-grid label.is-wide { grid-column: 1 / -1; }
.corr-form-grid textarea { resize: vertical; }

@media (max-width: 850px) {
  .corr-tools { grid-template-columns: 1fr 1fr; }
  .corr-detail-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .corr-hero, .corr-tools { display: grid; grid-template-columns: 1fr; }
  .corr-table-wrap { display: none; }
  .corr-mobile { display: grid; gap: 9px; padding: 11px; }

  .corr-mobile-card {
    display: grid;
    gap: 6px;
    border: 1px solid #dfe7f1;
    border-radius: 10px;
    padding: 10px;
  }

  .corr-mobile-card > div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }

  .corr-mobile-card p,
  .corr-mobile-card small { margin: 0; color: #687790; font-size: 11px; }

  .corr-detail-grid,
  .corr-form-grid { grid-template-columns: 1fr; }

  .corr-related-mail { grid-template-columns: 1fr; }
}