/* =========================================================================
   Eco-Micro — Identité visuelle "Chancellerie d'État"
   -------------------------------------------------------------------------
   Palette :
     --encre        #1c2b3a  (texte, autorité)
     --encre-clair  #3d5266  (texte secondaire)
     --velin        #f2ead7  (fond papier)
     --velin-ombre  #e3d6b8  (bordures, panneaux)
     --cachet       #9c3b2e  (rouge cire — actions, accents)
     --laiton       #a9803f  (filets, ornements)
     --registre     #3f6b4a  (validé / positif)
   Typo :
     Display : 'Fraunces'      — titres, en-tête
     Corps   : 'Public Sans'   — texte, formulaires
     Data    : 'IBM Plex Mono' — comptes, montants, identifiants
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --encre: #1c2b3a;
  --encre-clair: #3d5266;
  --velin: #f2ead7;
  --velin-ombre: #e3d6b8;
  --velin-fonce: #d8c8a0;
  --cachet: #9c3b2e;
  --cachet-fonce: #7c2e21;
  --laiton: #a9803f;
  --registre: #3f6b4a;
  --font-display: 'Fraunces', Georgia, serif;
  --font-corps: 'Public Sans', -apple-system, sans-serif;
  --font-data: 'IBM Plex Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-corps);
  color: var(--encre);
  background-color: var(--velin);
  background-image:
    radial-gradient(circle at 20% 20%, rgba(169, 128, 63, 0.05), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(28, 43, 58, 0.04), transparent 40%);
  min-height: 100vh;
  line-height: 1.5;
}

/* ---------- En-tête / letterhead ---------- */

.chancellerie-entete {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 32px 20px 26px;
  border-bottom: 4px double var(--laiton);
  margin-bottom: 0;
}

/* Repère visuel qualif — pour ne jamais confondre avec la prod quand les
   deux sont ouvertes dans des onglets voisins (ajouté le 21/08/2026). */
.chancellerie-entete--qualif {
  border-bottom-color: var(--cachet);
}

.badge-qualif {
  display: inline-block;
  background: var(--cachet);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 4px;
  vertical-align: middle;
}

.logo-entete {
  width: 170px;
  height: 100px;
  flex-shrink: 0;
  object-fit: contain;
}

.chancellerie-titre {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--encre);
  margin: 0;
  line-height: 1.05;
}

.chancellerie-soustitre {
  font-family: var(--font-corps);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--encre-clair);
  margin: 6px 0 0;
}

/* ---------- Dossier (carte de contenu principale) ---------- */

.dossier {
  max-width: 480px;
  margin: 0 auto 48px;
  padding: 0 20px;
}

.dossier--large {
  max-width: 720px;
}

.dossier--catalogue {
  max-width: 1100px;
}

.dossier-panneau {
  background: #fbf7ec;
  border: 1px solid var(--velin-ombre);
  border-radius: 2px;
  padding: 32px 36px;
  position: relative;
  box-shadow: 0 1px 3px rgba(28, 43, 58, 0.08), 0 8px 24px rgba(28, 43, 58, 0.06);
}

/* coins d'angle façon document officiel */
.dossier-panneau::before,
.dossier-panneau::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--laiton);
  border-style: solid;
}
.dossier-panneau::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
}
.dossier-panneau::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
}

.dossier h1 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--encre);
}

.dossier p.intro {
  color: var(--encre-clair);
  font-size: 0.92rem;
  margin: 0 0 24px;
}

/* ---------- Formulaires ---------- */

.champ {
  margin-bottom: 20px;
}

.champ label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-clair);
  font-weight: 600;
  margin-bottom: 6px;
}

.champ input,
.champ select {
  width: 100%;
  padding: 9px 4px;
  font-family: var(--font-corps);
  font-size: 0.95rem;
  color: var(--encre);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--velin-fonce);
  border-radius: 0;
  transition: border-color 0.15s ease;
}

.champ textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 10px;
  font-family: var(--font-corps);
  font-size: 0.95rem;
  color: var(--encre);
  background: transparent;
  border: 1.5px solid var(--velin-fonce);
  border-radius: 3px;
  transition: border-color 0.15s ease;
  /* Un mot très long sans espace doit retourner à la ligne plutôt que
     déborder du champ (bug remonté par Pierre le 21/08/2026). */
  overflow-wrap: break-word;
  word-break: break-word;
  /* Redimensionnable en hauteur seulement — jamais en largeur, pour ne
     pas pouvoir dépasser le conteneur et perdre la poignée. */
  resize: vertical;
}

.champ textarea:focus {
  outline: none;
  border-color: var(--cachet);
}

.champ input:focus,
.champ select:focus {
  outline: none;
  border-bottom-color: var(--cachet);
}

.champ input::placeholder {
  color: #a89a7d;
}

/* ---------- Boutons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-corps);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 11px 24px;
  border: 1.5px solid var(--cachet);
  border-radius: 2px;
  background: var(--cachet);
  color: #fbf7ec;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.1s ease;
}

.btn:hover { background: var(--cachet-fonce); }
.btn:active { transform: translateY(1px); }

.btn-discret {
  background: transparent;
  color: var(--encre);
  border-color: var(--velin-fonce);
}

.btn-discret:hover {
  background: var(--velin-ombre);
  border-color: var(--laiton);
}

.btn-petit {
  padding: 6px 14px;
  font-size: 0.78rem;
}

/* ---------- Liens ---------- */

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

.lien-retour {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 0.85rem;
  color: var(--encre-clair);
}

/* ---------- Messages ---------- */

.message-erreur {
  background: #fbeae7;
  border-left: 3px solid var(--cachet);
  color: var(--cachet-fonce);
  padding: 10px 14px;
  font-size: 0.88rem;
  margin-bottom: 20px;
}

.message-succes {
  background: #eaf1ec;
  border-left: 3px solid var(--registre);
  color: var(--registre);
  padding: 10px 14px;
  font-size: 0.88rem;
  margin-bottom: 20px;
}

/* ---------- Étiquettes de statut (façon tampon) ---------- */

.tampon {
  display: inline-block;
  font-family: var(--font-data);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  transform: rotate(-1.5deg);
}

.tampon--attente { color: var(--laiton); }
.tampon--actif { color: var(--registre); }
.tampon--refuse { color: var(--cachet); }

/* ---------- Registre / tableaux ---------- */

table.registre {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

table.registre th {
  text-align: left;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-clair);
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 2px solid var(--laiton);
}

table.registre td {
  padding: 10px;
  border-bottom: 1px solid var(--velin-ombre);
  vertical-align: middle;
}

table.registre td.donnee {
  font-family: var(--font-data);
}

table.registre tr:last-child td {
  border-bottom: none;
}

.actions-ligne form {
  display: inline-block;
  margin-right: 6px;
}

/* ---------- Divers ---------- */

.champ-donnee {
  font-family: var(--font-data);
}

.pied-page {
  text-align: center;
  font-size: 0.75rem;
  color: var(--encre-clair);
  padding: 20px;
}

/* ---------- Navigation permanente (onglets colorés, clin d'œil v1) ---------- */

.nav-principale {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 16px 28px;
  background: var(--encre);
  margin-bottom: 36px;
}

/* Bandeau menu en qualif : rouge cire au lieu de noir, repère fort et
   impossible à manquer en un coup d'œil. */
.nav-principale--qualif {
  background: var(--cachet-fonce);
}

.nav-principale--qualif .badge-qualif {
  background: #fff;
  color: var(--cachet-fonce);
  margin-right: 10px;
}

.nav-onglet {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: #fff !important;
  transition: filter 0.15s ease;
}
.nav-onglet:hover { filter: brightness(1.12); text-decoration: none; }

.nav-onglet--neutre { background: #4a5a6b; }
.nav-onglet--bleu { background: #2f5f8a; }
.nav-onglet--vert { background: #3f7a4a; }
.nav-onglet--olive { background: #7a6a3a; }
.nav-onglet--orange { background: #b06a2e; }
.nav-onglet--laiton { background: #8a6d2f; }
.nav-onglet--rouge { background: var(--cachet); }

.nav-spacer { flex: 1; }

.nav-utilisateur-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 16px;
}

.nav-utilisateur-initiale {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--laiton);
  color: var(--encre);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-utilisateur-nom {
  color: #f2ead7;
  font-size: 1.05rem;
  font-weight: 600;
  font-family: var(--font-display);
}

.nav-deconnexion {
  background: transparent;
  border: 1.5px solid #8b98a5;
  color: #f2ead7;
  padding: 11px 20px;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.nav-deconnexion:hover { border-color: #f2ead7; background: rgba(242, 234, 215, 0.08); }

/* ---------- Cartes de chiffres clés (grille de stats) ---------- */

.grille-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin: 20px 0 28px;
}

.stat-carte {
  text-align: center;
  padding: 16px 12px;
  background: var(--velin);
  border: 1px solid var(--velin-ombre);
  border-radius: 2px;
}

.stat-valeur {
  font-family: var(--font-data);
  font-size: 1.5rem;
  color: var(--encre);
  line-height: 1.2;
}

.stat-valeur--accent { color: var(--cachet); }
.stat-valeur--positif { color: var(--registre); }

.stat-label {
  font-size: 0.7rem;
  color: var(--encre-clair);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

/* ---------- Sections à l'intérieur d'un dossier ---------- */

.section-titre {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--encre);
  margin: 32px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--velin-ombre);
}

.section-titre:first-of-type { margin-top: 8px; }

/* ---------- Encadré d'information (recette, avertissement doux...) ---------- */

.encadre-info {
  background: var(--velin);
  border-left: 3px solid var(--laiton);
  padding: 12px 16px;
  font-size: 0.88rem;
  color: var(--encre-clair);
  margin-bottom: 20px;
}

.encadre-info strong { color: var(--encre); }

/* ---------- Barre d'actions (groupe de boutons) ---------- */

.barre-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

/* ---------- Sous-onglets (ex: sections de la fiche entreprise) ---------- */

.sous-onglets {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 20px 0 0;
  border-bottom: 2px solid var(--velin-ombre);
}

.sous-onglet {
  display: inline-block;
  padding: 9px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--encre-clair);
  background: var(--velin);
  border: 1px solid var(--velin-ombre);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  cursor: pointer;
  margin-bottom: -2px;
}

.sous-onglet:hover { color: var(--encre); }

.sous-onglet.actif {
  color: #fff;
  border-color: transparent;
}
.sous-onglet.actif[data-couleur="vert"] { background: #3f7a4a; }
.sous-onglet.actif[data-couleur="orange"] { background: #b06a2e; }
.sous-onglet.actif[data-couleur="rouge"] { background: var(--cachet); }
.sous-onglet.actif[data-couleur="bleu"] { background: #2f5f8a; }
.sous-onglet.actif[data-couleur="laiton"] { background: #8a6d2f; }
.sous-onglet.actif[data-couleur="olive"] { background: #7a6a3a; }

.panneau-onglet { display: none; padding-top: 20px; }
.panneau-onglet.actif { display: block; }

/* ---------- Tableau défilant (historiques longs) ---------- */

.tableau-defilant {
  max-height: 560px;
  overflow-y: auto;
  border: 1px solid var(--velin-ombre);
}

.tableau-defilant table.registre {
  margin: 0;
}

.tableau-defilant table.registre tr:first-child th {
  position: sticky;
  top: 0;
  background: #fbf7ec;
  z-index: 1;
}

/* ---------- Vignettes produit (catalogues avec images) ---------- */

.vignette-produit {
  width: 100px;
  height: 70px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--velin-ombre);
  display: block;
}

@media (max-width: 560px) {
  .dossier-panneau { padding: 24px 22px; }
  .chancellerie-titre { font-size: 1.7rem; }
  .logo-entete { width: 115px; height: 68px; }
  .nav-onglet { padding: 9px 14px; font-size: 0.85rem; }
}