/* Charte sobre : ce produit est un registre, pas un tableau de bord marketing.
   Lisibilite et densite d'information priment sur l'effet visuel. */
:root {
  --encre: #16202e;
  --encre-douce: #55637a;
  --bordure: #dde3ec;
  --fond: #f6f8fb;
  --blanc: #ffffff;
  --marine: #1f3864;
  --marine-clair: #2e5c8a;
  --alerte: #a12a2a;
  --alerte-fond: #fdecec;
  --attention: #8a5300;
  --attention-fond: #fff5e6;
  --valide: #1c6b45;
  --valide-fond: #e9f6ef;
  --rayon: 8px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--encre);
  background: var(--fond);
}

a { color: var(--marine-clair); }

/* ---------- structure ---------- */
.appli { display: flex; min-height: 100vh; }

.laterale {
  width: 232px;
  flex-shrink: 0;
  background: var(--marine);
  color: #cfd9e8;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
}
.laterale .marque {
  padding: 0 20px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 14px;
}
.laterale .marque strong { color: #fff; font-size: 19px; letter-spacing: 0.4px; }
.laterale .marque span { display: block; font-size: 12px; color: #8fa3c0; }
.laterale nav a {
  display: block;
  padding: 9px 20px;
  color: #cfd9e8;
  text-decoration: none;
  font-size: 14px;
  border-left: 3px solid transparent;
}
.laterale nav a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.laterale nav a.actif {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-left-color: #7aa5db;
  font-weight: 600;
}
.laterale .pied {
  margin-top: auto;
  padding: 14px 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px;
  color: #8fa3c0;
}
.laterale .pied .lien-manuel {
  display: block;
  margin-top: 10px;
  color: #8fa3c0;
  text-decoration: underline;
}
.laterale .pied .lien-manuel:hover { color: #fff; }

.principal { flex: 1; padding: 26px 32px; max-width: 1180px; min-width: 0; }

/* ---------- barre et tiroir mobiles ---------- */
/* Caches par defaut : ne prennent forme que sous le point de rupture.
   `.fond-menu-mobile` n'a pas besoin de regle ici : `x-show` pose deja
   `display:none` en ligne tant que `menuMobile` vaut false, et le bouton
   qui pourrait le faire passer a true est lui-meme cache hors mobile. */
.entete-mobile { display: none; }
.bouton-fermer-menu { display: none; }
.entete-page { margin-bottom: 22px; }
.entete-page h1 { margin: 0 0 4px; font-size: 23px; }
.entete-page p { margin: 0; color: var(--encre-douce); font-size: 14px; }

/* ---------- cartes ---------- */
.carte {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 18px;
  margin-bottom: 16px;
}
.carte h2 { margin: 0 0 12px; font-size: 16px; color: var(--marine); }
.carte h3 { margin: 16px 0 8px; font-size: 14px; }

.grille { display: grid; gap: 14px; }
.grille.c2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grille.c4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.indicateur { background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 14px 16px; }
.indicateur .valeur { font-size: 27px; font-weight: 600; line-height: 1.1; }
.indicateur .libelle { font-size: 12.5px; color: var(--encre-douce); margin-top: 3px; }
.indicateur.alerte .valeur { color: var(--alerte); }
.indicateur.attention .valeur { color: var(--attention); }

/* ---------- tableaux ---------- */
/* `display:block` + `overflow-x:auto` : un tableau plus large que son
   conteneur defile lui-meme, sans jamais deborder la page qui l'entoure.
   Sans effet sur un ecran large ou tout tient deja. */
table { width: 100%; border-collapse: collapse; font-size: 14px;
        display: block; overflow-x: auto; max-width: 100%; }
th {
  text-align: left;
  padding: 9px 10px;
  background: var(--fond);
  border-bottom: 2px solid var(--bordure);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--encre-douce);
}
td { padding: 9px 10px; border-bottom: 1px solid var(--bordure); vertical-align: top; }
tbody tr:hover { background: #fafbfd; }

/* ---------- etiquettes ---------- */
.etiquette {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.etiquette.neutre { background: var(--fond); color: var(--encre-douce); border: 1px solid var(--bordure); }
.etiquette.valide { background: var(--valide-fond); color: var(--valide); }
.etiquette.attention { background: var(--attention-fond); color: var(--attention); }
.etiquette.alerte { background: var(--alerte-fond); color: var(--alerte); }

/* ---------- formulaires ---------- */
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
input, select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  background: var(--blanc);
  color: var(--encre);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--marine-clair); outline-offset: -1px; }
textarea { min-height: 88px; resize: vertical; }
.champ { margin-bottom: 13px; }
.aide { font-size: 12.5px; color: var(--encre-douce); font-weight: 400; margin-top: 3px; }

button {
  padding: 8px 15px;
  border-radius: 6px;
  border: 1px solid var(--marine);
  background: var(--marine);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
button:hover:not(:disabled) { background: var(--marine-clair); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.secondaire { background: var(--blanc); color: var(--marine); }
button.danger { background: var(--alerte); border-color: var(--alerte); }
.actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

/* ---------- messages ---------- */
.message { padding: 11px 14px; border-radius: 6px; font-size: 14px; margin-bottom: 14px; border: 1px solid; }
.message.erreur { background: var(--alerte-fond); border-color: #efc4c4; color: var(--alerte); }
.message.info { background: #eaf1fb; border-color: #c8d9f2; color: var(--marine); }
.message.attention { background: var(--attention-fond); border-color: #f0d8b0; color: var(--attention); }
.message.valide { background: var(--valide-fond); border-color: #bfe3d0; color: var(--valide); }

/* ---------- empreintes ---------- */
/* NF-34 : integralement selectionnables, jamais tronquees sans moyen
   d'obtenir la valeur complete. */
.empreinte {
  font-family: var(--mono);
  font-size: 12px;
  word-break: break-all;
  user-select: all;
  background: var(--fond);
  padding: 2px 5px;
  border-radius: 4px;
  border: 1px solid var(--bordure);
}
.bloc-code {
  font-family: var(--mono);
  font-size: 12.5px;
  background: #16202e;
  color: #d7e0ec;
  padding: 12px 14px;
  border-radius: 6px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ---------- divers ---------- */
.connexion { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.connexion .carte { width: 380px; }
.vide { text-align: center; padding: 36px 16px; color: var(--encre-douce); }
.barre { height: 7px; background: var(--bordure); border-radius: 4px; overflow: hidden; }
.barre > div { height: 100%; background: var(--marine-clair); transition: width 0.3s; }
.discret { color: var(--encre-douce); font-size: 13px; }
.modale-fond { position: fixed; inset: 0; background: rgba(22, 32, 46, 0.55); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50; }
.modale { background: var(--blanc); border-radius: var(--rayon); padding: 22px; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; }

/* ==========================================================================
   Ajouts du rendu serveur.
   Ces classes remplacent les styles en ligne du frontend React precedent.
   ========================================================================== */

[x-cloak] { display: none !important; }

.htmx-indicator {
  position: fixed; bottom: 16px; right: 16px;
  background: var(--marine); color: #fff;
  padding: 7px 14px; border-radius: 20px;
  font-size: 13px; opacity: 0; pointer-events: none;
  transition: opacity 0.15s;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

.entete-ligne { display: flex; justify-content: space-between; gap: 16px; }
.pleine-largeur { width: 100%; }
.espacement-haut { margin-top: 12px; }
.espacement-bas { margin-bottom: 16px; }
.sans-marge { margin: 0; }
.nombre { text-align: right; font-weight: 600; }
.grand-nombre { font-size: 27px; font-weight: 600; line-height: 1.1; }
.texte-attention { color: var(--attention); }
.erreur-champ { color: var(--alerte); }
.inactif { opacity: 0.5; }
.lien-action { font-size: 13px; }
.champ-recherche { max-width: 380px; }
.titre-marque { font-size: 20px; margin-bottom: 4px; }
.sous-marque { margin-top: 0; margin-bottom: 18px; }
.carte-large { width: 640px; }
.carte-formulaire { max-width: 640px; }
.empreinte.coupable { cursor: pointer; }

.pied-nom { color: #fff; font-weight: 600; }
.pied-avertissement { color: #e3b775; margin-top: 6px; }
.laterale .pied form { margin-top: 10px; }

/* Choix radio avec libelle et aide, utilise pour les decisions et les motifs */
.choix {
  display: flex; gap: 9px; align-items: flex-start;
  font-weight: 400; margin-bottom: 8px; cursor: pointer;
}
.choix input[type="radio"] { width: auto; margin-top: 4px; }
.choix .aide { display: block; }

/* Django rend les champs sans classe : on cible par type */
.champ input[type="text"], .champ input[type="email"], .champ input[type="date"],
.champ input[type="number"], .champ input[type="password"], .champ input[type="file"],
.champ select, .champ textarea { width: 100%; }
.champ input[type="checkbox"] { width: auto; margin-right: 6px; }

/* Les messages Django utilisent les tags success/warning/error/info */
.message.success { background: var(--valide-fond); border-color: #bfe3d0; color: var(--valide); }
.message.warning { background: var(--attention-fond); border-color: #f0d8b0; color: var(--attention); }
.message.error   { background: var(--alerte-fond); border-color: #efc4c4; color: var(--alerte); }

@media print {
  .laterale, .htmx-indicator, .barre-document { display: none !important; }
  .principal { padding: 0; max-width: none; }
}

/* ==========================================================================
   Repli mobile. Le menu lateral fixe (232px) laisse trop peu de place a la
   zone principale des qu'un ecran devient etroit : la barre latérale bascule
   en tiroir, ouvert par le bouton de `.entete-mobile` (voir base.html), et
   quelques largeurs figees (grilles, cartes, tableaux) redeviennent fluides.

   Seuil a 680px, pas 880 : sous 232px de barre laterale, une tablette en
   portrait (768-834px) a largement la place de garder la navigation
   visible en permanence. Seuls les telephones ont vraiment besoin du
   tiroir.
   ========================================================================== */
@media (max-width: 680px) {
  .entete-mobile {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--marine);
    color: #fff;
    padding: 10px 16px;
  }
  .entete-mobile strong { font-size: 16px; letter-spacing: 0.3px; }

  .bouton-menu {
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .bouton-menu .icone-menu {
    position: relative;
    width: 20px;
    height: 2px;
    background: #fff;
  }
  .bouton-menu .icone-menu::before,
  .bouton-menu .icone-menu::after {
    content: "";
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    background: #fff;
  }
  .bouton-menu .icone-menu::before { top: -6px; }
  .bouton-menu .icone-menu::after { top: 6px; }

  .fond-menu-mobile {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(22, 32, 46, 0.5);
    z-index: 55;
  }

  /* Le tiroir : hors du flux normal, glisse depuis la gauche. Le layout
     desktop (flex-shrink:0, 232px en ligne) reste intact au-dessus de ce
     point de rupture. */
  .laterale {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 260px;
    max-width: 82vw;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }
  .laterale.ouverte {
    transform: translateX(0);
    box-shadow: 4px 0 18px rgba(0, 0, 0, 0.28);
  }
  .laterale .marque { position: relative; }
  .bouton-fermer-menu {
    display: block;
    position: absolute;
    top: 14px;
    right: 16px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    padding: 4px;
    cursor: pointer;
  }

  .principal { padding: 18px 16px; }

  /* Largeurs minimales de colonnes de grille -> une seule colonne, plutot
     que de forcer un debordement horizontal de toute la page. */
  .grille.c2, .grille.c4 { grid-template-columns: 1fr; }

  /* Cartes a largeur FIXE (pas max-width) : debordent litteralement du
     viewport sur un telephone si on ne les rend pas fluides ici. */
  .carte-large, .carte-formulaire, .connexion .carte { width: 100%; }
  .connexion { padding: 16px; }

  .entete-ligne { flex-wrap: wrap; }
}