/* ==========================================================================
   Portail MDN — feuille de style applicative
   S'appuie sur Bootstrap 5 (CDN) + tokens.css pour l'identité MDN.
   ========================================================================== */

/* Reset de base */
* { box-sizing: border-box; }

body {
  font-family: var(--mdn-font-family);
  font-weight: var(--mdn-font-weight-regular);
  font-size: var(--mdn-fs-base);
  color: var(--mdn-noir);
  background: var(--mdn-gris-fond);
  line-height: 1.5;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- Typographie ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--mdn-font-family);
  font-weight: var(--mdn-font-weight-bold);
  color: var(--mdn-noir);
  margin-top: 0;
}
h1 { font-size: var(--mdn-fs-h1); }
h2 { font-size: var(--mdn-fs-h2); }
h3 { font-size: var(--mdn-fs-h3); }

a { color: var(--mdn-bleu); text-decoration: none; }
a:hover { color: var(--mdn-bleu-clair); text-decoration: underline; }

/* ---------- Bootstrap overrides : couleurs MDN ---------- */
.btn-primary {
  --bs-btn-bg:            var(--mdn-rouge);
  --bs-btn-border-color:  var(--mdn-rouge);
  --bs-btn-hover-bg:      var(--mdn-rouge-fonce);
  --bs-btn-hover-border-color: var(--mdn-rouge-fonce);
  --bs-btn-active-bg:     var(--mdn-rouge-fonce);
  --bs-btn-active-border-color: var(--mdn-rouge-fonce);
  --bs-btn-color:         var(--mdn-blanc);
  --bs-btn-hover-color:   var(--mdn-blanc);
  --bs-btn-active-color:  var(--mdn-blanc);
}

.btn-secondary {
  --bs-btn-bg:            var(--mdn-gris);
  --bs-btn-border-color:  var(--mdn-gris);
  --bs-btn-hover-bg:      var(--mdn-gris-clair);
  --bs-btn-hover-border-color: var(--mdn-gris-clair);
  --bs-btn-color:         var(--mdn-blanc);
}

.btn-outline-primary {
  --bs-btn-color:         var(--mdn-rouge);
  --bs-btn-border-color:  var(--mdn-rouge);
  --bs-btn-hover-bg:      var(--mdn-rouge);
  --bs-btn-hover-border-color: var(--mdn-rouge);
  --bs-btn-active-bg:     var(--mdn-rouge);
  --bs-btn-active-border-color: var(--mdn-rouge);
}

.link-primary { color: var(--mdn-rouge) !important; }

/* ---------- Header ---------- */
.mdn-header {
  background: var(--mdn-blanc);
  border-bottom: 3px solid var(--mdn-rouge);
  padding: var(--mdn-space-3) var(--mdn-space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--mdn-shadow-sm);
}
.mdn-header .logo img { height: 40px; }
.mdn-header .user-menu {
  display: flex;
  align-items: center;
  gap: var(--mdn-space-4);
}
.mdn-header .user-menu .notif-bell {
  position: relative;
  color: var(--mdn-gris);
  font-size: var(--mdn-fs-xl);
  cursor: pointer;
}
.mdn-header .user-menu .notif-bell .badge {
  position: absolute;
  top: -4px; right: -8px;
  background: var(--mdn-rouge);
  color: var(--mdn-blanc);
  font-size: var(--mdn-fs-xs);
  border-radius: 999px;
  padding: 2px 6px;
  font-weight: var(--mdn-font-weight-bold);
}
.mdn-header .user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}
.mdn-header .user-info strong { color: var(--mdn-noir); }
.mdn-header .user-info small  { color: var(--mdn-gris); }

/* ---------- Layout app : header + sidebar + main + footer ---------- */
.mdn-app {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
}
.mdn-app > .mdn-header  { grid-area: header; }
.mdn-app > .mdn-sidebar { grid-area: sidebar; }
.mdn-app > .mdn-main    { grid-area: main; }
.mdn-app > .mdn-footer  { grid-area: footer; }

.mdn-sidebar {
  background: var(--mdn-blanc);
  border-right: 1px solid var(--mdn-gris-tres-clair);
  padding: var(--mdn-space-5) 0;
}
.mdn-sidebar .nav-item {
  display: flex;
  align-items: center;
  gap: var(--mdn-space-3);
  padding: var(--mdn-space-3) var(--mdn-space-5);
  color: var(--mdn-gris);
  font-weight: var(--mdn-font-weight-medium);
  border-left: 3px solid transparent;
  transition: var(--mdn-transition);
  text-decoration: none;
}
.mdn-sidebar .nav-item:hover {
  background: var(--mdn-gris-fond);
  color: var(--mdn-rouge);
}
.mdn-sidebar .nav-item.active {
  background: var(--mdn-rouge-pale);
  color: var(--mdn-rouge);
  border-left-color: var(--mdn-rouge);
}
.mdn-sidebar .nav-separator {
  border-top: 1px solid var(--mdn-gris-tres-clair);
  margin: var(--mdn-space-3) var(--mdn-space-5);
}

.mdn-main {
  padding: var(--mdn-space-6);
  overflow-x: auto;
}

/* ---------- Footer ---------- */
.mdn-footer {
  background: var(--mdn-bleu);
  color: var(--mdn-blanc);
  padding: var(--mdn-space-4) var(--mdn-space-5);
  font-size: var(--mdn-fs-sm);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--mdn-space-3);
}
.mdn-footer a {
  color: var(--mdn-blanc);
  opacity: 0.95;
}
.mdn-footer a:hover {
  color: var(--mdn-jaune-clair);
  text-decoration: underline;
}
.mdn-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdn-space-4);
}

/* ---------- Pages publiques (layout sans sidebar) ---------- */
.mdn-public-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.mdn-public-layout .mdn-main-public {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mdn-space-6);
}
.mdn-card {
  background: var(--mdn-blanc);
  border-radius: var(--mdn-radius-md);
  box-shadow: var(--mdn-shadow-md);
  padding: var(--mdn-space-6);
  max-width: 900px;
  width: 100%;
}

/* ---------- Flash messages ---------- */
.mdn-flash {
  padding: var(--mdn-space-3) var(--mdn-space-4);
  border-radius: var(--mdn-radius-sm);
  margin-bottom: var(--mdn-space-4);
  border-left: 4px solid;
}
.mdn-flash.mdn-flash-success {
  background: var(--mdn-vert-pale);
  border-left-color: var(--mdn-vert);
  color: var(--mdn-vert);
}
.mdn-flash.mdn-flash-error {
  background: var(--mdn-rouge-pale);
  border-left-color: var(--mdn-rouge);
  color: var(--mdn-rouge-fonce);
}
.mdn-flash.mdn-flash-warning {
  background: var(--mdn-orange-pale);
  border-left-color: var(--mdn-orange);
  color: var(--mdn-orange);
}
.mdn-flash.mdn-flash-info {
  background: var(--mdn-bleu-pale);
  border-left-color: var(--mdn-bleu);
  color: var(--mdn-bleu);
}

/* ---------- Badges de statut de dossier ---------- */
.mdn-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--mdn-fs-xs);
  font-weight: var(--mdn-font-weight-medium);
}
.mdn-status-draft       { background: var(--mdn-gris-tres-clair); color: var(--mdn-gris); }
.mdn-status-submitted   { background: var(--mdn-jaune-pale);     color: #a37500; }
.mdn-status-in-review   { background: var(--mdn-bleu-pale);      color: var(--mdn-bleu); }
.mdn-status-additional  { background: var(--mdn-orange-pale);    color: var(--mdn-orange); }
.mdn-status-approved    { background: var(--mdn-vert-pale);      color: var(--mdn-vert); }
.mdn-status-rejected    { background: var(--mdn-rouge-pale);     color: var(--mdn-rouge); }
.mdn-status-closed      { background: var(--mdn-gris-tres-clair); color: var(--mdn-gris); }

/* ---------- SLA ---------- */
.mdn-sla-green  { color: var(--mdn-vert); }
.mdn-sla-orange { color: var(--mdn-orange); }
.mdn-sla-red    { color: var(--mdn-rouge); font-weight: var(--mdn-font-weight-bold); }

/* ---------- Tableaux ---------- */
.table-mdn {
  width: 100%;
  background: var(--mdn-blanc);
  border-radius: var(--mdn-radius-md);
  overflow: hidden;
  box-shadow: var(--mdn-shadow-sm);
}
.table-mdn thead {
  background: var(--mdn-bleu);
  color: var(--mdn-blanc);
}
.table-mdn th {
  padding: var(--mdn-space-3) var(--mdn-space-4);
  font-weight: var(--mdn-font-weight-medium);
  text-align: left;
}
.table-mdn td {
  padding: var(--mdn-space-3) var(--mdn-space-4);
  border-bottom: 1px solid var(--mdn-gris-tres-clair);
}
.table-mdn tbody tr:hover {
  background: var(--mdn-gris-fond);
}

/* ---------- Formulaires ---------- */
.form-label {
  font-weight: var(--mdn-font-weight-medium);
  color: var(--mdn-noir);
  margin-bottom: var(--mdn-space-1);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--mdn-rouge);
  box-shadow: 0 0 0 0.2rem rgba(199, 37, 43, 0.2);
}
.form-text {
  color: var(--mdn-gris);
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .mdn-app {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "footer";
  }
  .mdn-sidebar {
    display: none;
  }
  .mdn-main {
    padding: var(--mdn-space-4);
  }
}

/* ---------- Aides accessibilité ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--mdn-rouge);
  color: var(--mdn-blanc);
  padding: 8px 16px;
  z-index: 999;
}
.skip-link:focus {
  top: 0;
}

/* ===============================================================
   Pages publiques (CMS) — tables, callouts, hiérarchie visuelle
   Ajoutées avril 2026 pour les pages Sécurité / RGPD / Données santé / Aide
   =============================================================== */

/* Hero / en-tête de page CMS (décoration titre) */
.mdn-card-public h1 {
    position: relative;
    padding-bottom: .75rem;
    border-bottom: 3px solid var(--mdn-rouge);
    margin-bottom: 2rem;
}

/* Hiérarchie H2/H3 avec accent coloré */
.mdn-card-public h2 {
    margin-top: 2.5rem;
    padding-left: .8rem;
    border-left: 5px solid var(--mdn-bleu);
    color: var(--mdn-bleu);
    font-size: 1.5rem;
    font-weight: 700;
}
.mdn-card-public h3 {
    margin-top: 1.75rem;
    color: var(--mdn-rouge);
    font-size: 1.15rem;
    font-weight: 600;
}

/* Tables documentaires */
.mdn-doc-table {
    width: 100%;
    margin: 1.25rem 0;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    background: #ffffff;
}
.mdn-doc-table thead {
    background: linear-gradient(135deg, var(--mdn-bleu) 0%, #013f5c 100%);
    color: #ffffff;
}
.mdn-doc-table th {
    padding: .9rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: .92rem;
    letter-spacing: .3px;
}
.mdn-doc-table td {
    padding: .75rem 1rem;
    border-bottom: 1px solid #eef1f3;
    font-size: .95rem;
    vertical-align: top;
}
.mdn-doc-table tbody tr:nth-child(even) { background: #f8f9fa; }
.mdn-doc-table tbody tr:hover           { background: #fef3f3; }
.mdn-doc-table tbody tr:last-child td   { border-bottom: none; }
.mdn-doc-table code {
    background: #f0f3f5;
    padding: .1rem .35rem;
    border-radius: 3px;
    font-size: .85em;
    color: var(--mdn-rouge);
}

/* Callouts (blocs d'attention) */
.mdn-callout {
    margin: 1.25rem 0;
    padding: 1rem 1.25rem 1rem 3.5rem;
    border-radius: 8px;
    position: relative;
    font-size: .95rem;
    line-height: 1.55;
}
.mdn-callout::before {
    position: absolute;
    left: 1rem;
    top: 1rem;
    font-size: 1.4rem;
}
.mdn-callout p:last-child { margin-bottom: 0; }

.mdn-callout-info    { background: #e7f4fb; border-left: 4px solid #015172; color: #013f5c; }
.mdn-callout-warn    { background: #fff7e6; border-left: 4px solid #f2a900; color: #7d5500; }
.mdn-callout-success { background: #e9f7ec; border-left: 4px solid #2e8b57; color: #1e5e38; }
.mdn-callout-tip     { background: #f5ecf8; border-left: 4px solid #7b2d8e; color: #56205f; }

/* Listes plus aérées */
.mdn-card-public ul,
.mdn-card-public ol {
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
}
.mdn-card-public li {
    margin-bottom: .4rem;
    line-height: 1.6;
}
.mdn-card-public li::marker { color: var(--mdn-rouge); }

/* Code inline */
.mdn-card-public code {
    background: #f0f3f5;
    padding: .1rem .4rem;
    border-radius: 3px;
    font-size: .88em;
    font-family: 'SFMono-Regular', Consolas, 'Courier New', monospace;
    color: #c7252b;
}

/* Liens (plus discret que var--rouge par défaut) */
.mdn-card-public a {
    color: var(--mdn-bleu);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mdn-card-public a:hover { color: var(--mdn-rouge); }

/* Règle horizontale */
.mdn-card-public hr {
    margin: 2.5rem 0;
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--mdn-rouge), transparent);
}

/* Responsive tables */
@media (max-width: 768px) {
    .mdn-doc-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}