:root {
  --bg: #f5f6f8;
  --card: #ffffff;
  --border: #e2e5ea;
  --text: #1f2430;
  --muted: #6b7280;
  --primary: #2d5bff;
  --primary-dark: #1f43cc;
  --danger: #d92d20;
  --ok: #12885a;
  --radius: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: linear-gradient(rgba(245, 246, 248, 0.82), rgba(245, 246, 248, 0.88)), url('/img/background.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--text);
  line-height: 1.5;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  /* Permet au menu de passer sur sa propre ligne plutot que d'ecraser le
     bandeau central (contexte client/SSII/personne connectee) a largeur
     zero quand les deux ne tiennent plus cote a cote (ex: fenetre 1440px
     avec le menu cote client au complet) - sans ca, le bandeau devient
     invisible plutot que de simplement se reorganiser. Sans effet sur les
     ecrans larges ou tout tient deja sur une seule ligne. */
  flex-wrap: wrap;
  row-gap: 4px;
}

.topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  flex-shrink: 0;
}

.topbar .brand-logo {
  height: 32px;
  width: auto;
  display: block;
}

/* Bandeau central : message d'accueil (non connecte) ou informations de
   connexion (client/SSII/personne connectee), cf partials/head.ejs. Prend
   toute la place disponible entre le logo et le menu, ce qui pousse
   naturellement ce dernier a droite (equivalent a l'ancien
   justify-content: space-between, mais fonctionne avec 3 elements). */
.topbar-banner {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 0 20px;
  overflow: hidden;
}

.topbar-message {
  display: inline-block;
  font-weight: 700;
  color: var(--primary);
  font-size: 15px;
  line-height: 1.3;
  max-width: 100%;
}

/* Ligne de contexte (client/SSII/personne connectee) : le menu prend deja
   beaucoup de place une fois connecte, donc contrairement au message
   d'accueil ci-dessus, celle-ci reste volontairement sur une seule ligne et
   se tronque avec des points de suspension plutot que de retomber a la
   ligne sur plusieurs niveaux. Le texte complet reste lisible via l'infobulle
   (attribut title, cf partials/head.ejs). */
.topbar-context {
  display: block;
  font-weight: 400;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar nav a {
  margin-left: 16px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  /* Un lien passe entier a la ligne suivante plutot que de se couper au
     milieu d'une phrase (ex: "Changer mon" / "mot de passe") aux largeurs
     intermediaires (tablette) ou le menu ne tient plus sur une seule
     ligne. */
  white-space: nowrap;
}

.topbar nav a:hover {
  color: var(--primary);
  text-decoration: none;
}

/* Bouton "hamburger" du menu mobile : masque sur grand ecran (le menu reste
   affiche en ligne comme avant), affiche uniquement sous le seuil de
   largeur defini dans la media query plus bas. Trois barres en CSS pur,
   pas d'icone externe a charger. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 38px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.container {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}

/* En-tete de carte type "Titre + bouton d'action" (ex: liste des demandes,
   liste des documents) : cote a cote sur grand ecran, empile proprement sur
   petit ecran grace a flex-wrap plutot qu'un style en ligne fige. */
.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* Tableau scrollable horizontalement : evite que les colonnes ne se
   ecrasent illisiblement sur petit ecran, le tableau garde une largeur
   minimale lisible et glisse au doigt/a la souris a l'interieur de sa
   carte plutot que de deborder de la page. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(20, 25, 40, 0.08);
}

h1 { font-size: 24px; margin: 0 0 8px; }
h2 { font-size: 18px; margin: 0 0 12px; }
p.subtitle { color: var(--muted); margin-top: 0; }

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  margin-top: 16px;
}

input[type=text], input[type=email], input[type=password], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
}

textarea { min-height: 120px; resize: vertical; }

/* Editeur de texte enrichi (Quill), qui remplace visuellement les
   textarea marques data-rich-text quand le JavaScript est disponible. */
.rich-editor-wrap { margin-bottom: 4px; }

.rich-editor-wrap .ql-toolbar.ql-snow {
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  background: #fafbfc;
  font-family: inherit;
}

.rich-editor-wrap .ql-container.ql-snow {
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  font-family: inherit;
  font-size: 14px;
}

.rich-editor-wrap .ql-editor { min-height: 120px; }
.rich-editor-wrap .ql-editor.ql-blank::before { color: var(--muted); font-style: normal; }

/* Affichage du contenu enregistre via l'editeur riche (description,
   commentaires) : remplace l'ancien "white-space: pre-wrap" sur du texte
   brut, desormais inutile puisque le HTML porte deja ses propres sauts de
   paragraphe et listes. */
.rich-content { line-height: 1.6; }
.rich-content p { margin: 0 0 10px; }
.rich-content p:last-child { margin-bottom: 0; }
.rich-content ul, .rich-content ol { margin: 0 0 10px 22px; padding: 0; }

.btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: var(--radius);
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn:hover { background: var(--primary-dark); text-decoration: none; }
.btn.secondary { background: #fff; color: var(--text); border: 1px solid var(--border); }
.btn.small { padding: 6px 12px; font-size: 13px; }

.actions { margin-top: 20px; }

.alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 14px;
}
.alert.error { background: #fdecea; color: var(--danger); border: 1px solid #f6c1bc; }
.alert.success { background: #eafaf1; color: var(--ok); border: 1px solid #b8ecd2; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
tr:hover td { background: #fafbfc; }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.badge.attente { background: #f3f4f6; color: #4b5563; border: 1px dashed #9ca3af; }
.badge.nouveau { background: #e8edff; color: #2d5bff; }
.badge.en_cours { background: #fff4e0; color: #b26a00; }
.badge.en_attente { background: #f1e8ff; color: #7a2ee6; }
.badge.resolu { background: #eafaf1; color: #12885a; }
.badge.ferme { background: #eceff3; color: #6b7280; }

.badge.type-erreur { background: #fdecea; color: var(--danger); }
.badge.type-remarque { background: #e8edff; color: #2d5bff; }
.badge.type-commentaire { background: #eceff3; color: #444a55; }
.badge.type-demande { background: #fff4e0; color: #b26a00; }
.badge.type-information { background: #e6f7f4; color: #0f7a63; }

.filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  align-items: flex-end;
}
.filters .field { min-width: 160px; }
.filters label { margin-top: 0; }

.stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  min-width: 110px;
  text-align: center;
}
.stat .num { font-size: 22px; font-weight: 700; }
.stat .label { font-size: 12px; color: var(--muted); }

.comment {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.comment .meta { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.comment.dev { background: #f4f7ff; }
.comment.reporter { background: #fff; }
.comment.client { background: #fff; }

.track-link {
  background: #f4f7ff;
  border: 1px dashed var(--primary);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 14px;
  word-break: break-all;
}

.meta-row { display: flex; gap: 24px; flex-wrap: wrap; color: var(--muted); font-size: 13px; margin-bottom: 4px; }

.hint { color: var(--muted); font-size: 12px; margin: 4px 0 0; }

.attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.attachment { display: inline-block; }
.attachment-image img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: block;
}
.attachment-file {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fafbfc;
  font-size: 13px;
}

/* Interrupteur ON/OFF (parametres). Purement en CSS : un checkbox cache +
   un curseur anime au clic via le selecteur :checked. */
.switch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  margin: 0;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: #d1d5db;
  border-radius: 999px;
  transition: background 0.15s ease;
}
.switch-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.switch input:checked + .switch-slider { background: var(--ok); }
.switch input:checked + .switch-slider::before { transform: translateX(20px); }
.switch input:focus-visible + .switch-slider { outline: 2px solid var(--primary); outline-offset: 2px; }

footer.site-footer {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  padding: 12px 20px;
  margin: 20px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: var(--radius);
}

/* Popup native (element <dialog>) utilisee par exemple pour afficher les
   coordonnees d'une SSII sans quitter la page. */
.modal {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  padding: 24px;
  max-width: 420px;
  width: calc(100% - 40px);
}
.modal::backdrop {
  background: rgba(15, 23, 42, 0.45);
}
.modal h2 {
  margin-top: 0;
}

/* --------------------------------------------------------------------- */
/* Responsive web design (RWD), etape 1 : pages cote utilisateur client.
   Seuil choisi a 760px (tablette portrait / mobile), sous lequel le bandeau
   du haut passe en menu "hamburger" et les cartes/formulaires/tableaux
   s'adaptent a l'espace disponible. */
@media (max-width: 760px) {
  .topbar {
    flex-wrap: wrap;
    padding: 12px 16px;
  }

  .topbar .brand span { font-size: 16px; }

  /* Le bandeau central (message d'accueil / contexte client-SSII-personne)
     passe sous la ligne logo+hamburger et redevient sur toute la largeur,
     plutot que de forcer le hamburger a se retrouver ecrase entre le logo
     et un texte qui n'a plus la place de s'afficher. */
  .topbar-banner {
    order: 3;
    flex-basis: 100%;
    text-align: left;
    padding: 6px 0 0;
  }
  .topbar-context { white-space: normal; overflow: visible; text-overflow: clip; }

  .nav-toggle {
    display: flex;
    order: 2;
    margin-left: auto;
  }

  .topbar nav {
    display: none;
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    margin-top: 12px;
    gap: 2px;
  }
  .topbar nav.nav-open { display: flex; }
  .topbar nav a {
    margin-left: 0;
    padding: 10px 4px;
    border-top: 1px solid var(--border);
  }
  .topbar nav a:first-child { border-top: none; }
  .topbar nav form { margin-top: 8px; }
  .topbar nav form .btn { width: 100%; margin-left: 0 !important; }

  .container { padding: 20px 12px 40px; }
  .card { padding: 16px; }

  h1 { font-size: 21px; }
  h2 { font-size: 17px; }

  /* Les tableaux gardent une largeur minimale lisible et defilent
     horizontalement dans leur carte plutot que d'ecraser les colonnes. */
  .table-scroll table { min-width: 560px; }

  .meta-row { gap: 12px; font-size: 12.5px; }

  .actions { display: flex; flex-wrap: wrap; gap: 10px; }
}

@media (max-width: 420px) {
  .container { padding: 16px 8px 32px; }
  .card { padding: 14px; }
  .topbar { padding: 10px 12px; }
}

/* --------------------------------------------------------------------- */
/* Impression (A4). Utilisee par les pages "print-*" (parametres, clients,
   SSII, tickets) : l'utilisateur imprime directement depuis son navigateur,
   ou choisit "Enregistrer en PDF" dans la boite de dialogue d'impression -
   aucune generation de fichier cote serveur, aucune dependance
   supplementaire a installer sur le VPS. */
.print-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.print-header h1 { margin: 0; }
.print-meta {
  color: var(--muted);
  font-size: 12px;
  margin: 0 0 20px;
}
.print-section {
  margin-bottom: 28px;
  /* Evite qu'une section (une SSII, un client...) ne soit coupee entre deux
     pages au milieu de sa liste imbriquee, quand elle tient sur une page. */
  break-inside: avoid-page;
}
.print-section h2 {
  border-bottom: 2px solid var(--border);
  padding-bottom: 6px;
}
.print-ticket {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 18px;
  break-inside: avoid-page;
}
.print-ticket h3 { margin: 0 0 6px; font-size: 16px; }
.print-ticket .print-comment {
  border-top: 1px dashed var(--border);
  padding-top: 8px;
  margin-top: 10px;
  font-size: 13px;
}

@media print {
  body {
    background: #fff;
    background-image: none;
  }
  .no-print { display: none !important; }
  .topbar { display: none !important; }
  .container { max-width: none; padding: 0; margin: 0; }
  .card, .print-ticket {
    box-shadow: none;
    border: 1px solid #ccc;
  }
  a { color: inherit; text-decoration: none; }
  footer.site-footer { display: none !important; }
}

@page {
  size: A4;
  margin: 15mm;
}